tests/dynamic-update.html

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