Chart.js/samples/radar.html

<!doctype html>
<html>
	<head>
		<title>Radar 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%">
			<canvas id="canvas" height="450" width="450"></canvas>
		</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 radarChartData = {
		labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
		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(){
		window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar({
			data: radarChartData, 
			options: {
				responsive: true
			}
		});
	}

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

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

    	window.myRadar.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>Radar 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%">`
			`<canvas id="canvas" height="450" width="450"></canvas>`
			`</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>`
Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01:00
			`var randomScalingFactor = function(){ return Math.round(Math.random()*100)};`
			`var randomColorFactor = function(){ return Math.round(Math.random()*255)};`

Add in new chart samples 2014-06-29 19:36:04 +02:00			`var radarChartData = {`
			`labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],`
			`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)",`
Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01:00			`data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]`
Add in new chart samples 2014-06-29 19:36:04 +02:00			`},`
			`{`
			`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)",`
Updated Samples Samples now include a “Randomize Data” button which utilizes the latest changes. 2015-01-08 18:13:14 +01:00			`data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]`
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(){`
Merge remote-tracking branch 'upstream/v2.0-dev' into feature/v2.0dev-xy Conflicts: src/Chart.Core.js Fixed the sample files & chart type initialize methods so that this.data does not get set to undefined. 2015-05-20 15:03:22 +02:00			`window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar({`
			`data: radarChartData,`
			`options: {`
			`responsive: true`
			`}`
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
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(){`
			`radarChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';`
			`radarChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];`

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

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

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>`