gallery/callbacks.js

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