Group data by day in stock chart - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

Group data by day in stock chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//from  w w w. jav a2s.c  o  m
var data = [{
    name: "Minima",
    pointInterval: 86400000,
    data: [
      [1538467200000, 215.9],
      [1538581500000, 217.6],
      [1538651700000, 218],
      [1538728200000, 218.5]
    ]
  }, {
    name: "Maxima",
    pointInterval: 86400000,
    data: [
      [1538506800000, 228.8],
      [1538530200000, 228.4],
      [1538676000000, 229.3],
      [1538779500000, 228.8]
    ]
  }, {
    name: "Promedio",
    pointInterval: 86400000,
    data: [
      [1538438400000, 223.9365],
      [1538524800000, 224.0667],
      [1538611200000, 224.4135],
      [1538697600000, 224.45]
    ]
  }],
  finalData = [],
  i,
  j,
  series,
  point;
for (i = 0; i < data.length; i++) {
  series = data[i];
  finalData[i] = {
    name: series.name,
    pointInterval: series.pointInterval,
    data: []
  };
  for (j = 0; j < series.data.length; j++) {
    point = series.data[j];
    finalData[i].data.push({
      x: data[0].data[j][0],
      y: point[1],
      realX: point[0]
    });
  }
}
chart = new Highcharts.StockChart({
  chart: {
    renderTo: "container",
    type: 'spline'
  },
  colors: ['#3131F8', '#FB1C1C', '#008000', '#f7a35c', '#8085e9',
    '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'
  ],
  yAxis: {
    opposite: false,
    showLastLabel: true,
    labels: {
      enabled: true,
      align: "right"
    },
    title: {
      text: 'Tensi?n'
    }
  },
  rangeSelector: {
    enabled: true
  },
  tooltip: {
    pointFormatter: function() {
      var n = this.series.name,
        s = '<span style="color:' + this.series.color + '">' + n + '</span>: <b>',
        date = 'Date: ' + Highcharts.dateFormat('%e. %b %H:%M', this.realX),
        number = Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
      return s + number + date;
    }
  },
  legend: {
    enabled: true
  },
  navigation: {
    buttonOptions: {
      enabled: true
    }
  },
  series: finalData
});
    }

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

Related Tutorials