gallery/callbacks.js

   1 /*global Gallery,Dygraph,data */
   2 /*global NoisyData */
   3 Gallery.register(
   4   'callbacks',
   5   {
   6     name: "Callbacks",
   7     title: "Hover, click and zoom to test the callbacks.",
   8     setup: function(parent) {
   9       parent.innerHTML =
  10           "<div id='div_g' style='width:600px; height:300px;'></div>" +
  11           "<button id='clear'>Clear list<Button>" +
  12           "<input type='checkbox' id='highlight' checked><label for='highlight'> Show 'highlight' events</label>" +
  13           "<input type='checkbox' id='unhighlight' checked><label for='unhighlight'>Show 'unhighlight' events</label>" +
  14           "<input type='checkbox' id='showLabels' checked>" +
  15           "<label for='showLabels'> Show Labels on highlight</label>" +
  16           "<div id='status' style='width:100%; height:200px;'></div>";
  17     },
  18     run: function() {
  19       var g = null;
  20       var showLabels = document.getElementById('showLabels');
  21       showLabels.onclick =  function() {
  22         g.updateOptions({showLabelsOnHighlight: showLabels.checked});
  23       };
  24
  25       var s = document.getElementById("status");
  26       var clearStatus = function() {
  27         s.innerHTML = '';
  28       };
  29       document.getElementById('clear').onclick = clearStatus;
  30
  31       var pts_info = function(e, x, pts, row) {
  32         var str = "(" + x + ") ";
  33         for (var i = 0; i < pts.length; i++) {
  34           var p = pts[i];
  35           if (i) str += ", ";
  36           str += p.name + ": " + p.yval;
  37         }
  38
  39         var x = e.offsetX;
  40         var y = e.offsetY;
  41         var dataXY = g.toDataCoords(x, y);
  42         str += ", (" + x + ", " + y + ")";
  43         str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
  44         str += ", row #"+row;
  45
  46         return str;
  47       };
  48
  49       g = new Dygraph(
  50           document.getElementById("div_g"),
  51           NoisyData, {
  52             rollPeriod: 7,
  53             showRoller: true,
  54             errorBars: true,
  55
  56             highlightCallback: function(e, x, pts, row) {
  57               if (document.getElementById('highlight').checked) {
  58                 s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>";
  59               }
  60             },
  61
  62             unhighlightCallback: function(e) {
  63               if (document.getElementById('unhighlight').checked) {
  64                 s.innerHTML += "<b>Unhighlight</b><br/>";
  65               }
  66             },
  67
  68             clickCallback: function(e, x, pts) {
  69               s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
  70             },
  71
  72             pointClickCallback: function(e, p) {
  73               s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
  74             },
  75
  76             zoomCallback: function(minX, maxX, yRanges) {
  77               s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>";
  78             },
  79
  80             drawCallback: function(g) {
  81               s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
  82             }
  83           }
  84         );
  85     }
  86   });