Home forums Using CanvasJS Multiple charts from one JSON result Reply To: Multiple charts from one JSON result

#8279

Anjali
Participant

[Update]

Now we have a Tutorial on Creating Charts from JSON Data in our documentation.

willibald,

After getting Json result, create a HTML page that does AJAX request and fetch the data. After getting the data, it will render a Chart.

Below is the sample code:

<html>
<head>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript" src="CanvasJS.js"></script>
<script type="text/javascript">
 $(document).ready(function () {

	var dataPointsTemp = [];
	var dataPointsHumidity = [];

// Ajax request for getting JSON data

	$.getJSON("data.json", function(data) {
		for( var i = 0; i < data.length; i++) {
			dataPointsTemp.push({ label: data[i].label, y: data[i].y });
			dataPointsHumidity.push({ label: data[i].label, y: data[i].y2 });
		}	
	
		// Chart with label + y values

		var chart = new CanvasJS.Chart("chartContainer1",
		{
			title:{
				text: "Chart with y value"
			},	
			data: [
			{
				dataPoints: dataPointsTemp
			}]
		});
		chart.render();

		// Chart with label + y2 values

		var chart = new CanvasJS.Chart("chartContainer2",
		{
			title:{
				text: "Chart with y2 value"
			},		
			data: [
			{
				dataPoints: dataPointsHumidity
			}]
		});
		chart.render();

		// Chart with label + y and y2 values or multiSeries Chart

		var chart = new CanvasJS.Chart("multiChart",
		{
			title:{
				text: "Chart with y and y2 values"
			},		
			data: [
			{
				type: "line",
				dataPoints: dataPointsTemp
			},
			{				
				type: "line",
				dataPoints: dataPointsHumidity
			}			
			]
		});
		chart.render();
	});
});
</script>
</head>
<body>
<div id="chartContainer1" style="width: 50%; height: 300px;></div>
<div id="chartContainer2" style="width: 40%; height: 300px;></div>
<div id="multiChart" style="width: 80%; height: 300px;></div>
</body>
</html>

__
Anjali