Home forums Using CanvasJS Multiple charts from one JSON result

This topic contains 2 replies, has 2 voices, and was last updated by  willibald 1 year, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #8276

    willibald
    Participant

    Hi there!

    After struggeling with Google Charts, I would like to thank you for this great, flexible and easy to use chart library. But I have one question regarding JSON data. I have a JSON result from this query:

    $data_points = array();

    while($row = mysql_fetch_assoc($result)){
    $point = array(“label” => $row[‘timeStamp’] , “y” => $row[‘temp’], “y2” => $row[‘hum’]);

    array_push($data_points, $point);
    }
    echo json_encode($data_points, JSON_NUMERIC_CHECK);

    with this structure:

    [{“label”:”2015-02-27 09:54:50″,”y”:17.1,”y2″:35.2},{“label”:”2015-02-27 09:59:52″,”y”:17,”y2″:36.4},{“label”:”2015-02-27 10:01:33″,”y”:17,”y2″:36.5},{“label”:”2015-02-27 10:08:16″,”y”:17,”y2″:35.7}]

    How can I create two charts, one with label + y as values and one with label + y2 as values or one multiple series chart with both y values from this JSON result?

    Best regards,
    Willibald

    #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

    #8280

    willibald
    Participant

    Dear Anjali,

    thank you very much for this detailed explanation and your brilliant work in general. It helped me a lot.

    Kind regards from Germany,
    Markus

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.