TutorialMeta
Ad

I Want To Update Live Canvas Line Chart By Json Data

- 1 answer

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": ""
}]
Ad

Answer

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>

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad