I want to Live line chart update by json data

[shyamcanvas1992]

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>

• This topic was modified 7 years, 2 months ago by shyamcanvas1992.

[Shashi Ranjan]

@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

[shyamcanvas1992]

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.

[Shashi Ranjan]

@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

[shyamcanvas1992]

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.

• This reply was modified 7 years, 1 month ago by shyamcanvas1992.

[Shashi Ranjan]

@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