FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Dynamic Chart Using Data From JSON File

Dynamic Chart Using Data From JSON File

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

Tagged: , ,

  • September 4, 2016 at 10:02 pm #12317

    sandonet

    Hi, i have a question how to make a dynamic chart but the data is coming from JSON file, this JSON data is updating every second.
    This is the example of the JSON data

    {"X":-2455, "Y":142, "Z":-110}

    I have searching everywhere but i didn’t find it, i only find dynamic chart with random data within.
    And one more thing, the X axis is showing the current time.

    Thanks for your attention, gladly waiting for an answer :)

    September 5, 2016 at 10:25 am #12318

    Vishwas R

    Sandonet,

    Please refer to this documentation page for step-to-step tutorial on rendering live / dynamic chart with data from JSON.
    live chart with json data

    —
    Vishwas R
    Team CanvasJS

    September 5, 2016 at 11:31 am #12319

    sandonet

    Vishwas, i try this but not work, i’m sorry my js knowledge is not good, so can you give the example base on my code ? 

    <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
window.onload = function() {
	var dataPoints = [];
	var chart;
	$.getJSON("test.json", function(data) {  
		$.each(data, function(key, value){
			dataPoints.push({x: parseInt(value)[0], y: parseInt(value[1]), z: parseInt(value[2])});
		});
		chart = new CanvasJS.Chart("chartContainer",{
			title:{
				text:"Live Chart with dataPoints from External JSON"
			},
			data: [{
				type: "line",
				dataPoints : dataPoints,
			}]
		});
		chart.render();
		updateChart();
	});
	function updateChart() {
	$.getJSON("test.json" + (dataPoints.length + 1) + (dataPoints[dataPoints.length - 1].y) + function(data) {
		$.each(data, function(key, value) {
			dataPoints.push({
			x: parseInt(value[0]),
			y: parseInt(value[1]),
			z: parseInt(value[2])
			});
		});
		chart.render();
		setTimeout(function(){updateChart()}, 1000);
	});
	}
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

    This is my json
    [[-2518,69,-192]]

    You can see my chart in here http://sne.dlinkddns.com:6060/html/node/Node/public/canpas.html
    Thank you very much

    September 5, 2016 at 6:59 pm #12325

    Vishwas R

    Sandonet,

    You seem to be passing wrong parameters to getJSON. Replacing
    $.getJSON("test.json" + (dataPoints.length + 1) + (dataPoints[dataPoints.length - 1].y) + function(data)
    with
    $.getJSON("test.json", function(data) { in updateChart function should work fine. Please find the working code below.

    function updateChart() {
	$.getJSON("test.json", function(data) {
		$.each(data, function(key, value) {
			dataPoints.push({
			x: parseInt(value[0]),
			y: parseInt(value[1]),
			z: parseInt(value[2])
			});
		});
		chart.render();
		setTimeout(function(){updateChart()}, 1000);
	});
}

    —
    Vishwas R
    Team CanvasJS

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

Tagged: , ,

You must be logged in to reply to this topic.