data module JSON api call setTimeout 30 seconds - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

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

Description

data module JSON api call setTimeout 30 seconds

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
function getData() {//  w  w  w  . j av a 2 s.c  o m
  return new Promise((resolve, reject) => {
    $.getJSON('https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json&callback=?', function(recData) {
      resolve(recData);
    });
  });
}
(async() => {
  Highcharts.chart('container', {
      chart: {
       events: {
         load: function() {
           var series = this.series[0];
           setInterval(async function() {
             var data = await getData();
             series.setData(data);
          }, 2000);
        }
      }
    },
    series: [{
      data: await getData()
    }]
  });
})();

      </script>  
   </body>
</html>

Related Tutorials