adding data to line chart with range - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

adding data to line chart with range

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.src.js"></script> 
      <button id="months">Days</button> 
      <div id="container"></div> 
      <script type="text/javascript">
var chart = Highcharts.stockChart('container', {
  xAxis: {//from   w  w w  .  j a va2s  . co  m
    ordinal: false
  },
  plotOptions: {
    series: {
      dataGrouping: {
        forced: true,
        approximation: 'sum'
      }
    }
  },
  rangeSelector: {
    enabled: false
  },
  series: [{
    data: [
      [Date.UTC(2017, 0, 1), 9],
      [Date.UTC(2017, 0, 2), 3],
      [Date.UTC(2017, 3, 1), 1],
      [Date.UTC(2017, 4, 1), 7]
    ]
  }]
});
$('#months').click(function() {
  chart.update({
    plotOptions: {
      series: {
        dataGrouping: {
          units: [
            [
              'month', [1]
            ]
          ]
        }
      }
    }
  });
});

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

Related Tutorials