11.html 1.44 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
<!DOCTYPE HTML>
<html>
<head>  
<meta charset="UTF-8">
<script>
window.onload = function () {

var chart= new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Multi-Series StepLine Chart with Null Data"
	},
	axisX: {
		valueFormatString: "DD MMM"
	},
	axisY:{
		includeZero: false
	}, 
	axisY2:{
		includeZero: false,
		minimum:25
	},
	toolTip: {
		shared: true
	},
	data: [{
		type: "stepLine",
		connectNullData: true,
		xValueFormatString: "MMM",
		dataPoints: [
			{ x: new Date(2008,02), y: 15.00 },
			{ x: new Date(2008,03), y: 14.50 },
			{ x: new Date(2008,04), y: 14.00 },
			{ x: new Date(2008,05), y: 14.50 },
			{ x: new Date(2008,06), y: 14.75 },
			{ x: new Date(2008,07), y: null },
			{ x: new Date(2008,08), y: 15.80 },
			{ x: new Date(2008,09), y: 17.50 }
		]
	},
	{
		type: "stepLine",  
		axisYType: "secondary",
		connectNullData: true,
		xValueFormatString: "MMM",
		dataPoints: [
			{ x: new Date(2008,02), y: 41.00 },
			{ x: new Date(2008,03), y: 43.50 },
			{ x: new Date(2008,04), y: 41.00 },
			{ x: new Date(2008,05), y: null },
			{ x: new Date(2008,06), y: 47.55 },
			{ x: new Date(2008,07), y: 45.00 },
			{ x: new Date(2008,08), y: 40.70 },
			{ x: new Date(2008,09), y: 37.00 }
		]
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="../../asset/js/canvasjs/canvasjs.min.js"></script>
</body>
</html>