spline charts with dynamic update - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

spline charts with dynamic update

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Realtime demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.1.0.js"></script> 
      <link rel="stylesheet" type="text/css" href="/"> 
      <script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
      <script type="text/javascript" src="https://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css"> 
      <script type="text/javascript" src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css"> 
      <script type="text/javascript">
$(function () {/*from  w w  w .  j  a  va 2  s  . co m*/
  var datachart2 = new Highcharts.Chart({
    chart: {
      "renderTo": "datachart2",
      "backgroundColor": "#C2C2C2",
      "zoomType": "x",
      "selectionMarkerFill": "rgba(255,0,0,0.25)",
      "type": "spline",
      "events": {
        "load": function () {
          // set up the updating of the chart each second
          var series = this.series[1];
          setInterval(function () {
            var x = (new Date()).getTime(), // current time
              y = Math.random();
            series.addPoint([x, y], true, true);
          }, 1000);
        }
      }
    },
    exporting: {
      "enabled": false
    },
    legend: {
      "enabled": false
    },
    series: [{
      "name": "random"
    }, {
      "data":
        (function () {
          // generate an array of random data
          var data = [],
            time = (new Date()).getTime(),
            i;
          for (i = -19; i <= 0; i += 1) {
            data.push({
              x: time + i * 1000,
              y: Math.random()
            });
          }
          return data;
        }())
    }],
    title: {
      "text": "Vorschau-Demo"
    },
    tooltip: {
      "enabled": false,
      "animation": false
    },
    xAxis: {
      "type": "datetime"
    }
  });
});

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

Related Tutorials