Home Forums Chart Support I want to Live line chart update by json data

I want to Live line chart update by json data

  • #26149

    This is my code but there is issue that chart not update
    I don’t know where is the problem so can u help me please, i’m newbe in that area. thanks!

    <%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
    <%@ page import="java.util.*" %>
     
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    <script type="text/javascript">
    
    var dataPoints = [];
    var chart;
    $.getJSON('http://localhost:8080/SpringREST/rasp/json', function(data) {  
      $.each(data, function(key, value){
        dataPoints.push({x:(value)["creation_time"], y:Number(value["temp"])});
      });
      chart = new CanvasJS.Chart("chartContainer",{
        title:{
          text:"Live Chart with dataPoints from External JSON"
        },
        zoomEnabled: true,
        axisX:{
           scaleBreaks:{
            autoCalculate: true,
            maxNumberOfAutoBreaks: 5,
            collapsibleThreshold: "15%"
          },
        },
        zoomType: "xy",
        //backgroundColor: "#bdcfed",
        animationEnabled: true,
        animationDuration: 5000,
        exportEnabled: true,
        theme: "dark1",
        data: [{
          showInLegend: true,
          legendText: "Temperature",
          markerType: "circle",
          markerSize: "3",
          markerColor: "red",
          xValueType: "dateTime",
          xValueFormatString: "YYYY-MM-DD HH:mm:ss",
          toolTipContent: "x:{x}, y: {y}",
          type: "line",
          dataPoints : dataPoints,
        }]
      });
      chart.render();
      updateChart();
    });
    
    function updateChart() {
      $.getJSON('http://localhost:8080/SpringREST/rasp/json', function(data) {
      	dataPoints = [];
        $.each(data, function(key, value) {
            dataPoints.push({
                x:(value["creation_time"]),
                y: Number(value["temp"]),
    
              });
        });
        console.log(chart.options)
        chart.render();
      });
    }
    
    setTimeout(function(){updateChart()}, 1000);
    
    </script>
    </head>
    <body>
    <br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
    <div id="chartContainer" style="height: 360px; width: 100%;"></div>
    </body>
    </html>
    #26176

    @shyamcanvas1992,

    Please take a look at this Gallery example for working code on rendering chart with data from JSON.

    Considering this as duplicate of Dynamic chart extra lines being added hence closing the same.


    Shashi Ranjan
    Team CanvasJS

    #26182

    I tried but not getting any success basically my chart is render properly by json data, but i want that my chart dynamically render json data every second when new data come in json object. I fetching two data from json object first is temp and second is time. please help.

    #26196

    @shyamcanvas1992,

    Can you kindly share sample project reproducing the issue along with sample JSON over Google-Drive or Onedrive so that we can look into code, run it locally to understand the scenario better and help you resolve?


    Shashi Ranjan
    Team CanvasJS

    #26201

    this is my code and json data on jsfiddle : jsfiddle.net/shyam1992/d9aL2cnv/10
    My chart is properly render but not real time data update when new data is coming.

    #26249

    @shyamcanvas1992,

    As you are updating dataPoints by reading JSON every second, the chart gets updated with a new set of dataPoints that are being passed at every 1 second. You are unable to see updated datapoints in the chart as the JSON file itself is not updated. Please take a look at our documentation page for an example on Live Updating Charts from JSON API & AJAX.


    Shashi Ranjan
    Team CanvasJS

You must be logged in to reply to this topic.