Chart.js/samples/line.html

<!doctype html>
<html>
	<head>
		<title>Line Chart</title>
		<script src="../Chart.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	</head>
	<body>
		<div style="width:30%">
			<div>
				<canvas id="canvas" height="450" width="600"></canvas>
			</div>
		</div>
		<button id="randomizeData">Randomize Data</button>


	<script>
		var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
		var randomColorFactor = function(){ return Math.round(Math.random()*255)};

		var lineChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					label: "My First dataset",
					fillColor : "rgba(220,220,220,0.2)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(220,220,220,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				},
				{
					label: "My Second dataset",
					fillColor : "rgba(151,187,205,0.2)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
					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
		});
	}

	$('#randomizeData').click(function(){
    	lineChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
    	lineChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];

    	lineChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
    	lineChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];

    	window.myLine.update();
    });


	</script>
	</body>
</html>
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`<!doctype html>`
			`<html>`
			`<head>`
			`<title>Line Chart</title>`
Cleared up folder structure 2013-03-25 20:25:57 +01:00			`<script src="../Chart.js"></script>`
Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01:00			`<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>`
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`</head>`
			`<body>`
Add in new chart samples 2014-06-29 19:36:04 +02:00			`<div style="width:30%">`
			`<div>`
			`<canvas id="canvas" height="450" width="600"></canvas>`
			`</div>`
			`</div>`
Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01:00			`<button id="randomizeData">Randomize Data</button>`
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00

			`<script>`
Add in new chart samples 2014-06-29 19:36:04 +02:00			`var randomScalingFactor = function(){ return Math.round(Math.random()*100)};`
Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01:00			`var randomColorFactor = function(){ return Math.round(Math.random()*255)};`

First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`var lineChartData = {`
			`labels : ["January","February","March","April","May","June","July"],`
			`datasets : [`
			`{`
Add in new chart samples 2014-06-29 19:36:04 +02:00			`label: "My First dataset",`
			`fillColor : "rgba(220,220,220,0.2)",`
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`strokeColor : "rgba(220,220,220,1)",`
			`pointColor : "rgba(220,220,220,1)",`
			`pointStrokeColor : "#fff",`
Add in new chart samples 2014-06-29 19:36:04 +02:00			`pointHighlightFill : "#fff",`
			`pointHighlightStroke : "rgba(220,220,220,1)",`
			`data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]`
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`},`
			`{`
Add in new chart samples 2014-06-29 19:36:04 +02:00			`label: "My Second dataset",`
			`fillColor : "rgba(151,187,205,0.2)",`
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`strokeColor : "rgba(151,187,205,1)",`
			`pointColor : "rgba(151,187,205,1)",`
			`pointStrokeColor : "#fff",`
Add in new chart samples 2014-06-29 19:36:04 +02:00			`pointHighlightFill : "#fff",`
			`pointHighlightStroke : "rgba(151,187,205,1)",`
			`data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]`
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`}`
			`]`
Add in new chart samples 2014-06-29 19:36:04 +02:00
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`}`

Add in new chart samples 2014-06-29 19:36:04 +02:00			`window.onload = function(){`
			`var ctx = document.getElementById("canvas").getContext("2d");`
			`window.myLine = new Chart(ctx).Line(lineChartData, {`
			`responsive: true`
			`});`
			`}`

Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01:00			`$('#randomizeData').click(function(){`
			`lineChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';`
			`lineChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];`

			`lineChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';`
			`lineChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];`

			`window.myLine.update();`
			`});`

Add in new chart samples 2014-06-29 19:36:04 +02:00
First commit. Version 0.1 Examples of the six charts that can be created, and the Chart.js library. 2013-03-18 00:57:50 +01:00			`</script>`
			`</body>`
			`</html>`