11.html

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="UTF-8">
	<script>
		window.onload = function () {

			var chart = new CanvasJS.Chart("chartContainer", {
				theme: "light2", // "light1", "light2", "dark1", "dark2"
				animationEnabled: true,
				zoomEnabled: true,
				title: {
					text: "Try Zooming and Panning"
				},
				data: [{
					type: "area",
					dataPoints: []
				}]
			});

			addDataPoints(1000);
			chart.render();

			function addDataPoints(noOfDps) {
				var xVal = chart.options.data[0].dataPoints.length + 1,
					yVal = 100;
				for (var i = 0; i < noOfDps; i++) {
					yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
					chart.options.data[0].dataPoints.push({
						x: xVal,
						y: yVal
					});
					xVal++;
				}
			}

		}
	</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>