I want to update live canvas line chart by json data

Question

There is an issue with my code: the chart doesn't update. I'm using canvasJS chart, I'm a newbie in that area.

<%@ 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://canvasjs.com/assets/script/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>

My JSON data :

[{
  "creation_time": 1564828719000,
  "id": 18443,
  "action": "",
  "com_Z_Axis": "-29.0",
  "humi": "84.4",
  "com_X_Axis": "-27.0",
  "com_Y_Axis": "0.0",
  "pressure": "989.3",
  "gyro_Y_Axis": "0.0",
  "acc_Y_Axis": "0.0",
  "pitch_X_Axis": "351.0",
  "temp": "24.5",
  "yaw_Z_Axis": "191.0",
  "gyro_Z_Axis": "0.0",
  "acc_Z_Axis": "1.0",
  "gyro_X_Axis": "-0.0",
  "acc_X_Axis": "0.0",
  "stability": "stable",
  "roll_Y_Axis": "6.0",
  "direction": ""
}]

Answer 1

setTimeout method calls a function or evaluates an expression after a specified number of milliseconds (only once) whereas setInterval method calls a function or evaluates an expression at specified intervals (in milliseconds). Changing setTimeout to setInterval should work fine in this case.

 <!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://canvasjs.com/assets/script/canvasjs.min.js'></script> <script type='text/javascript'> var dataPoints = []; var chart; $.getJSON('https://api.myjson.com/bins/sysrl', 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, 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('https://api.myjson.com/bins/sysrl', function(data) { dataPoints = []; $.each(data, function(key, value) { dataPoints.push({ x: (value['creation_time']), y: Number(value['temp']), }); }); }); } setInterval(function() { updateChart() }, 1000); </script> </head> <body> <div id='chartContainer' style='height: 360px; width: 100%;'></div> </body> </html>

I want to update live canvas line chart by json data

Question

1 answers

solution1
0 2019-08-06 06:00:11

I want to update live canvas line chart by json data

Question

1 answers

solution1 0 2019-08-06 06:00:11

solution1
0 2019-08-06 06:00:11