add live data to chart and align chart on left side - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

add live data to chart and align chart on left side

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.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px; min-width: 310px"></div> 
      <script type="text/javascript">
// Create the chart
Highcharts.chart('container', {
  chart: {/*from  w w w  . j a  v  a2  s .c o m*/
    events: {
      load: function() {
        // set up the updating of the chart each second
        var chart = this;
        var series = this.series[0];
        var minSet = false;
        var extremesReset = false;
        setInterval(function() {
          var x = (new Date()).getTime(), // current time
            y = Math.round(Math.random() * 100);
          if (!minSet) {
            chart.xAxis[0].update({
              min: x
            }, false);
            minSet = true;
          }
          if (series.data.length > 20 && !extremesReset) {
            chart.xAxis[0].update({
              min: null,
            }, false)
            extremesReset = true;
          }
          series.addPoint([x, y], true, series.data.length > 20, series.data.length);
        }, 1000);
      }
    }
  },
  xAxis: {
    type: 'datetime',
    minRange: 20 * 1000
  },
  series: [{
    name: 'Random data',
    data: []
  }]
});

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

Related Tutorials