I aim to continuously refresh a dynamic canvas line chart with JSON data

Question

I aim to continuously refresh a dynamic canvas line chart with JSON data

Having trouble with my code - the chart isn't updating. I'm new to using canvasJS charts and could use some help.

<%@ 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>
  <!-- JavaScript code for fetching data and rendering the chart -->

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

javascript json ajax canvas

Answer 1

Answer №1

setTimeout method is responsible for calling a function or evaluating an expression after a specific number of milliseconds (once), while the setInterval method does the same at specified intervals in milliseconds. In this scenario, switching from setTimeout to setInterval should function correctly.

<!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>

Answer 2

setTimeout method is responsible for calling a function or evaluating an expression after a specific number of milliseconds (once), while the setInterval method does the same at specified intervals in milliseconds. In this scenario, switching from setTimeout to setInterval should function correctly.

<!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 aim to continuously refresh a dynamic canvas line chart with JSON data

Answer №1

Similar questions

React and Material UI: troubleshooting problems with layout columns

Looking for assistance with jqGrid

The response from AngularJS $resource can be considered as both an array and an object

Is there a way to adjust the quantity of items in the shopping cart without the need to reload the webpage?

Can someone help me figure out the issue with my Angularjs ng-repeat implementation?

Spring Boot's global exception handler fails to catch HttpMessageNotReadableException

What is the best practice for adding a DOM element at a precise location within an ng-repeat loop?

What is the best way to access form data in React using a React.FormEvent<HTMLFormElement>?

Generating and consuming XML data with swagger-node

Troubleshooting Browser Behavior: Back Button Not Loading Page - jQuery and HTML5

How to retrieve JSON data from unidentified objects using JQuery

Modify the file format depending on the browser being used as Internet Explorer

What is the best way to transition all elements down while sliding a header up or down?

Accordions housing Bootstrap 3 pills in a sleek design

The tagging feature in ui-select isn't working properly, showing an error message that says "Cannot read property 'length' of undefined"

Parse JSON array into Go struct when the array is embedded within the JSON string

How can you set a $_GET variable without having to reload the page?

I keep encountering the issue where I receive the message "Unable to access property 'innerText' of an undefined element" when running the Array forEach function. This problem seems to be happening within the HTMLInputElement section of the code

Combining two JSON objects into one

Unexpected Timed Out error from Socket.IO adapter when MongoDB connection is lost