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 = [
   8           "<div id='div_g' style='width:600px; height:300px;'></div>",
   9           "<p>This test is modeled after a ",
  10           "<a href='http://www.highcharts.com/demo/?example=dynamic-update&theme=default'>highcharts",
  11           "test</a>. New points should appear once per second. Try zooming and ",
  12           "panning over to the right edge to watch them show up.</p>"].join("\n");
  13     },
  14     run: function() {
  15       var data = [];
  16       var t = new Date();
  17       for (var i = 10; i >= 0; i--) {
  18         var x = new Date(t.getTime() - i * 1000);
  19         data.push([x, Math.random()]);
  20       }
  21
  22       var g = new Dygraph(document.getElementById("div_g"), data,
  23                           {
  24                             drawPoints: true,
  25                             showRoller: true,
  26                             valueRange: [0.0, 1.2],
  27                             labels: ['Time', 'Random']
  28                           });
  29       // It sucks that these things aren't objects, and we need to store state in window.
  30       window.intervalId = setInterval(function() {
  31         var x = new Date();  // current time
  32         var y = Math.random();
  33         data.push([x, y]);
  34         g.updateOptions( { 'file': data } );
  35       }, 1000);
  36     },
  37     clean: function() {
  38       clearInterval(window.intervalId);
  39     }
  40   });