show all data in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

show all data in line chart

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/modules/broken-axis.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
console.log(Date.UTC(2015, 9, 25, 15, 13, 34));
var charts = Highcharts.chart('container', {
  chart: {/*from w ww .  j ava  2 s.  c o m*/
    events: {
      load: function() {
        this.xAxis[0].setExtremes(Date.UTC(2015, 9, 25, 14, 13, 00), Date.UTC(2015, 9, 26, 18, 13, 34));
      }
    }
  },
  xAxis: {
    type: 'datetime',
    breaks: [{
      from: Date.UTC(2015, 9, 25, 14, 13, 34),
      to: Date.UTC(2015, 9, 26, 18, 13, 34),
      break: 1000
    }]
  },
  series: [{
    type: 'area',
    data: [
      [Date.UTC(2015, 9, 25, 14, 13, 00), 3.500],
      [Date.UTC(2015, 9, 25, 14, 13, 02), 3.501],
      [Date.UTC(2015, 9, 25, 14, 13, 04), 3.502],
      [Date.UTC(2015, 9, 25, 14, 13, 06), 3.505],
      [Date.UTC(2015, 9, 25, 14, 13, 08), 3.509],
      [Date.UTC(2015, 9, 25, 14, 13, 10), 3.507],
      [Date.UTC(2015, 9, 25, 14, 13, 12), 3.510],
      [Date.UTC(2015, 9, 25, 14, 13, 14), 3.525],
      [Date.UTC(2015, 9, 25, 14, 13, 16), 3.536],
      [Date.UTC(2015, 9, 25, 14, 13, 18), 3.575],
      [Date.UTC(2015, 9, 25, 14, 13, 20), 3.595],
      [Date.UTC(2015, 9, 25, 14, 13, 22), 3.514],
      [Date.UTC(2015, 9, 25, 14, 13, 24), 3.525],
      [Date.UTC(2015, 9, 25, 14, 13, 26), 3.536],
      [Date.UTC(2015, 9, 25, 14, 13, 28), 3.514],
      [Date.UTC(2015, 9, 25, 14, 13, 30), 3.510],
      [Date.UTC(2015, 9, 25, 14, 13, 32), 3.523],
      [Date.UTC(2015, 9, 25, 14, 13, 34), 3.596],
      [Date.UTC(2015, 9, 26, 18, 13, 34), 4.596]
    ]
  }]
});

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

Related Tutorials