Home forums Chart Support Dynamic Chart Using Data From JSON File

Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #12317

    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 :)



    Please refer this link.


    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 ?

    <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",{
    				text:"Live Chart with dataPoints from External JSON"
    			data: [{
    				type: "line",
    				dataPoints : dataPoints,
    	function updateChart() {
    	$.getJSON("test.json" + (dataPoints.length + 1) + (dataPoints[dataPoints.length - 1].y) + function(data) {
    		$.each(data, function(key, value) {
    			x: parseInt(value[0]),
    			y: parseInt(value[1]),
    			z: parseInt(value[2])
    		setTimeout(function(){updateChart()}, 1000);
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>

    This is my json

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



    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.

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

You must be logged in to reply to this topic.