display array of objects in stock charts - Javascript highcharts

Javascript examples for highcharts:Stock Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Stock Chart

Description

display array of objects in stock charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Stock Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script> 
      <script type="text/javascript">
$(function() {/*from  ww  w. ja  va 2s. co m*/
  var chart = Highcharts.stockChart('container', {
    rangeSelector: {
      selected: 1
    },
    series: [{
      name: 'Power',
      data: null
    }]
  });
  var data = [{
    "date": "11/25/2016 08:59:58",
    "energy": 29940935080,
    "power": 6815.7056798623,
    "time": 217781943
  }, {
    "date": "11/25/2016 09:29:59",
    "energy": 29940981851,
    "power": 6803.7187250996,
    "time": 217783743
  }, {
    "date": "11/25/2016 09:59:59",
    "energy": 29941028913,
    "power": 6841.5804195804,
    "time": 217785544
  }, {
    "date": "11/25/2016 10:29:59",
    "energy": 29941075952,
    "power": 6845.9247648903,
    "time": 217787343
  }, {
    "date": "11/25/2016 10:59:58",
    "energy": 29941123228,
    "power": 6877.2764478764,
    "time": 217789143
  }];
  var values = [];
  for (var i = 0; i < data.length; i++) {
     var item = {};
    item.y = data[i].power;
    item.x = new Date(data[i]['date']).getTime();
    values.push(item);
  }
  /*for (var i = data.length - 1; i >= 0; i--) {
    var item = data[i];
    item.y = data[i].power;
    data[i] = item;
    var timestamp = new Date(data[i]['date']).getTime();
    values.push(timestamp, item.y);
  }*/
  chart.series[0].setData(values);
});

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px; min-width: 600px"></div> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>  
   </body>
</html>

Related Tutorials