gallery/dynamic-update.js

   1 Gallery.register(
   2   'dynamic-update',
   3   {
   4     name: 'Dynamic Update',
   5     title: 'Live random data',
   6     setup: function(parent) {
   7       parent.innerHTML = "<div id='div_g' style='width:800px; height:400px;'></div>" +
   8       "<p>This test is modeled after a " +
   9       "<a href='http://www.highcharts.com/demo/?example=dynamic-update&theme=default'>highcharts" +
  10       "test</a>. New points should appear once per second. Try zooming and " +
  11       "panning over to the right edge to watch them show up.</p>";
  12     },
  13     run: function() {
  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       // It sucks that these things aren't objects, and we need to store state in window.
  29       window.intervalId = setInterval(function() {
  30         var x = new Date();  // current time
  31         var y = Math.random();
  32         data.push([x, y]);
  33         g.updateOptions( { 'file': data } );
  34       }, 1000);
  35     },
  36     clean: function() {
  37       clearInterval(window.intervalId);
  38     }
  39   });