Home forums Using CanvasJS Multiple charts from one JSON result

This topic contains 4 replies, has 4 voices, and was last updated by  Priyanka M S 4 months, 4 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 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

    #21842

    chanakeat
    Member

    Hi there!
    How can I render 2 line chart every second with my code.

    <script type="text/javascript">
    		window.onload = function () {
    			var dps1 = [];
    			var dps2 = [];
    			var chart = new CanvasJS.Chart("chartContainer", {
    				toolTip:{
    			   	shared: true,
    			 	},
    				data: [
    					{
    						type: "line",
    						dataPoints: dps1
    					},
    					{
    						type: "area",
    						dataPoints: dps2
    					}
    				]
    			});
    			$.getJSON("data_1.php", function (data) {
    
    				for( var i = 0; i < data.length; i++) {
    					dps1.push({ label: data[i].label, y: data[i].y });
    					dps2.push({ label: data[i].label, y: data[i].y2 });
    				}
    				
    				chart.options.data[0].dataPoints = data;
    				chart.render();	
    			});
    			var updateChart = function() {
    			            
    				$.getJSON("data_1.php", function (data) {
    					chart.options.data[0].dataPoints = data;
    					chart.render();
    				});
    			}            
    			setInterval(function(){updateChart()},1000);
    		}
    	</script>
    #21848

    Priyanka M S
    Member

    @chanakeat,

    Can you kindly create and share a jsfiddle along with sample data, so that we can look into your code, understand your scenario better and help you out?

    __
    Priyanka M S
    Team CanvasJS

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

You must be logged in to reply to this topic.