tests/dynamic-update.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>Live random data</title>
   6     <!--[if IE]>
   7     <script type="text/javascript" src="../excanvas.js"></script>
   8     <![endif]-->
   9     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
  10     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
  11     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  12     <script type="text/javascript" src="../dygraph.js"></script>
  13   </head>
  14   <body>
  15     <h3 style="width:800px; text-align: center;">Live random data</h3>
  16     <div id="div_g" style="width:800px; height:400px;"></div>
  17
  18     <script type="text/javascript">
  19       var data = [];
  20       var t = new Date();
  21       for (var i = 10; i >= 0; i--) {
  22         var x = new Date(t.getTime() - i * 1000);
  23         data.push([x, Math.random()]);
  24       }
  25
  26       var g = new Dygraph(document.getElementById("div_g"), data,
  27                           {
  28                             drawPoints: true,
  29                             showRoller: true,
  30                             valueRange: [0.0, 1.2],
  31                             labels: ['Time', 'Random']
  32                           });
  33       setInterval(function() {
  34         var x = new Date();  // current time
  35         var y = Math.random();
  36         data.push([x, y]);
  37         g.updateOptions( { 'file': data } );
  38       }, 1000);
  39
  40     </script>
  41
  42     <p>This test is modeled after a <a
  43       href="http://www.highcharts.com/demo/?example=dynamic-update&theme=default">highcharts
  44       test</a>. New points should appear once per second. Try zooming and
  45     panning over to the right edge to watch them show up.</p>
  46   </body>
  47 </html>