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

Is JavaScript responsible for creating threads for non-blocking AJAX requests?

Incorporating interactive maps into an AngularJS web application

What is the process for including JSON data in an ArrayList?

submit the contact form information to both the database and email for further processing and storage

Attempting to change JSON into a dictionary format using Python

issue with data binding in ons-dialog

The standard date format used in Javascript/Jquery programs

Material-UI and TypeScript are having trouble finding a compatible overload for this function call

How can I choose a JToken using JSONPath when there are multiple possible name options to consider?

URL not functioning properly on Django CMS menu

Error: The 'book' property is undefined and cannot be read in the BookDetails.render function

Utilizing AngularJS to iterate through an array of dictionaries

When the mouse hovers over the slider, the final image jumps into view

Preventing Redundancy in Angular 2: Tips for Avoiding Duplicate Methods

In the event that the "li" element contains an "

What is the proper way to activate speech recognition on electron?

Is it correct to use React Router's useNavigate with a useEffect hook for navigation?

Transform an array of objects into a nested tree structure with Javascript

Dealing with the challenge of managing multiple instances in a setup involving Ajax long polling (comet) and PHP on Lighttpd v1

Issues with parsing JSON data in Swift's Data structure are causing challenges