gallery/dynamic-update.js

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