Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display



This sample demonstrates how to specify export DataViz LinearGauge to pdf.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Export To Pdf Example - HTML5 jQuery Linear Gauge JavaScript Plugin
</title>
	<link rel="stylesheet" type="text/css" href="../../css/dataviz.gauges.css" />
	<script src="../../js/dataviz.gauges.min.js" type="text/javascript"></script>
	
	<script lang="javascript" type="text/javascript">
		var gradient1 = {
			type: 'linearGradient',
			x0: 0.5,
			y0: 0,
			x1: 0.5,
			y1: 1,
			colorStops: [{ offset: 0, color: '#C5F80B' },
						 { offset: 1, color: '#6B8901' }]
		};

		var gradient2 = {
			type: 'linearGradient',
			x0: 0.5,
			y0: 0,
			x1: 0.5,
			y1: 1,
			colorStops: [{ offset: 0, color: '#FF3366' },
						 { offset: 1, color: '#B2183E' }]
		};

		var gradient3 = {
			type: 'linearGradient',
			x0: 0.5,
			y0: 0,
			x1: 0.5,
			y1: 1,
			colorStops: [{ offset: 0, color: '#339CFF' },
						 { offset: 1, color: '#1F66A8' }]
		};

		var needleGradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 0.5,
			x1: 1,
			y1: 0.5,
			colorStops: [{ offset: 0, color: '#4F6169' },
						 { offset: 1, color: '#252E32' }]
		};


		var linearGauge = new DataViz.LinearGauge({
			orientation: 'horizontal',
			background: '#F7F7F7',
			border: {
				padding: 10,
				lineWidth: 4,
				strokeStyle: '#76786A'
			},
			tooltips: {
				disabled: false,
				highlighting: true
			},
			scales: [
					 {
					 	minimum: 0,
					 	maximum: 100,
					 	labels: {
					 		offset: 0.16
					 	},
					 	majorTickMarks: {
					 		length: 10,
					 		offset: 0.28,
					 		lineWidth: 2
					 	},
					 	minorTickMarks: {
					 		length: 6,
					 		visible: true,
					 		interval: 2,
					 		offset: 0.34,
					 		lineWidth: 2
					 	},
					 	ranges: [
									{
										startValue: 0,
										endValue: 40,
										innerOffset: 0.46,
										outerStartOffset: 0.64,
										outerEndOffset: 0.75,
										fillStyle: gradient1
									},
									{
										startValue: 40,
										endValue: 70,
										innerOffset: 0.46,
										outerStartOffset: 0.75,
										outerEndOffset: 0.84,
										fillStyle: gradient2
									},
									{
										startValue: 70,
										endValue: 100,
										innerOffset: 0.46,
										outerStartOffset: 0.84,
										outerEndOffset: 0.90,
										fillStyle: gradient3
									}
					 	],
					 	needles: [
								   {
								   	type: 'pointer',
								   	value: 80,
								   	fillStyle: needleGradient,
								   	innerOffset: 0.50,
								   	outerOffset: 1.00
								   }
					 	]
					 }
			]
		});

		function exportToPdf() {
			linearGauge.exportToPdf();
		}

		linearGauge.write('container');
	</script>

</head>
<body>
	<div>
		<div id="container" style="width: 400px; height: 100px;">
		</div>
		<br />
		<input id="button" onclick="exportToPdf()" type="button" value="Export to Pdf" />
	</div>
</body>
</html>