Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
</head>
<body>
<div style="width:50%;text-align:center;display:block;margin:0 auto;font-family:arial;">
			<div>
				<h1>SmartGov Line Graph: Example Of Interactivity</h1>
				<canvas id="canvas" height="450" width="600"></canvas>
			</div>
		</div>


	<script>
		var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
		var lineChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					label: "My First dataset",
					fillColor : "rgba(168, 27, 100, 0.2)",
					strokeColor : "#a81b64",
					pointColor : "#a81b64",
					pointStrokeColor : "#a81b64",
					pointHighlightFill : "#a81b64",
					pointHighlightStroke : "#a81b64",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				},
				{
					label: "My Second dataset",
					fillColor : "rgba(183, 183, 183, 0.2)",
					strokeColor : "#b7b7b7",
					pointColor : "#b7b7b7",
					pointStrokeColor : "#b7b7b7",
					pointHighlightFill : "#b7b7b7",
					pointHighlightStroke : "#b7b7b7",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				}
			]
		}
	window.onload = function(){
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myLine = new Chart(ctx).Line(lineChartData, {
			responsive: true
		});
	}
	</script>

</body>
</html>