JSFiddle - React, Tailwind, and code Playground

by ewolden

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

let addedTime = 0;

 function requestData(chart) {
   //$.ajax({
   //url: 'api_heartrate.php',
   //success: function(point) {
   let point = '[{"time":"2018-08-02 09:30:11","nilai_sensor":"78"}]'
   point = JSON.parse(point)

   var series = chart.series[0],
     shift = series.data.length > 20; // shift if the series is longer than 20
   // add the point
   chart.series[0].addPoint({
     x: new Date(point[0].time).getTime() + addedTime,
     y: parseInt(point[0].nilai_sensor)
   }, true, shift);
   addedTime += 1000

   // call it again after one second

   //},
   //cache: false
   //});
 }

 $(document).ready(function() {
   var chart = new Highcharts.Chart({
     chart: {
       renderTo: 'container',
       defaultSeriesType: 'line',
       events: {
         load: function() {
           setInterval(function() {
             requestData(chart)
           }, 1000);
         }
       }
     },
     title: {
       text: 'Live random data'
     },
     xAxis: {
       type: 'datetime',
       tickPixelInterval: 150,
       maxZoom: 20 * 1000
     },
     yAxis: {
       minPadding: 0.2,
       maxPadding: 0.2,
       title: {
         text: 'Value',
         margin: 80
       }
     },
     series: [{
       name: 'Random data',
       data: []
     }]
   });
 });