dynamic chart using json - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Json Data

Description

dynamic chart using json

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
      <style id="compiled-css" type="text/css">

#container {/* w  ww. j ava2  s . c om*/
   min-width: 310px;
   max-width: 800px;
   height: 400px;
   margin: 0 auto
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
 let addedTime = 0;
 function requestData(chart) {
   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

   chart.series[0].addPoint({
     x: new Date(point[0].time).getTime() + addedTime,
     y: parseInt(point[0].nilai_sensor)
   }, true, shift);
   addedTime += 1000
 }
 $(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: []
     }]
   });
 });
    }

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

Related Tutorials