Group data by day in spline chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Group data by day in spline 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(){// w w  w.  j a  va  2  s . co  m
chart = new Highcharts.StockChart({
    chart: {
      renderTo: "container",
      type: 'spline',
      events: {
        load: function() {
          let extremes = this.xAxis[0].getExtremes()
          let min = extremes.dataMin - extremes.dataMin % (1000 * 60 * 60 * 24),
            max = extremes.dataMax - extremes.dataMax % (1000 * 60 * 60 * 24);
          this.update({
            xAxis: {
              min: min,
              max: max
            },
            navigator: {
              xAxis: {
                min: min,
                max: max
              }
            }
          }, true, false, false)
        }
      }
    },
  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;
      var s = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>';
      return Highcharts.dateFormat('%m/%d - %H:%M', this.series.xData[this.index]) + s + Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
    }
  },
  legend: {
    enabled: true
  },
  navigation: {
    buttonOptions: {
      enabled: true
    }
  },
  plotOptions: {
    series: {
      dataGrouping: {
        forced: true,
        units: [
          ['day', [1]]
        ]
      }
    }
  },
  navigator: {
    series: {
      dataGrouping: {
        smoothed: false,
        forced: true,
        units: [
          ['day', [1]]
        ]
      }
    }
  },
  series: [{
    "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]
    ]
  }]
});
    }

      </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