gallery/interaction.js

   1 /*global Gallery,Dygraph,data */
   2 /*global NoisyData,downV3,moveV3,upV3,clickV3,dblClickV3,scrollV3,restorePositioning,downV4,moveV4,upV4,dblClickV4,captureCanvas */
   3
   4 Gallery.register(
   5   'interaction',
   6   {
   7     name: 'Custom interaction models',
   8     title: 'title',
   9     setup: function(parent) {
  10       parent.innerHTML = [
  11           "<h3>Default interaction model</h3>",
  12           "<div style='width:600px;'>",
  13           "  <p style='text-align:center;'>",
  14           "    Zoom: click-drag, Pan: shift-click-drag, Restore: double-click",
  15           "  </p>",
  16           "  <div id='div_g' style='width:600px; height:300px;'></div>",
  17           "</div>",
  18           "",
  19           "<h3>Empty interaction model</h3>",
  20           "<div style='width:600px;'>",
  21           "  <p style='text-align:center;'>",
  22           "    Click and drag all you like, it won't do anything!",
  23           "  </p>",
  24           "  <div id='div_g2' style='width:600px; height:300px;'></div>",
  25           "</div>",
  26           "<div id='g2_console'></div>", // what is this?
  27           "",
  28           "<h3>Custom interaction model</h3>",
  29           "<div style='width:600px;'>",
  30           "  <p style='text-align:center;'>",
  31           "    Zoom in: double-click, scroll wheel<br/>",
  32           "    Zoom out: ctrl-double-click, scroll wheel<br/>",
  33           "    Standard Zoom: shift-click-drag",
  34           "    Standard Pan: click-drag<br/>",
  35           "    Restore zoom level: press button<br/>",
  36           "  </p>",
  37           "  <button id='restore3'>Restore position</button>",
  38           "  <div id='div_g3' style='width:600px; height:300px;'></div>",
  39           "</div>",
  40           "<h3>Fun model!</h3>",
  41           "<div style='width:600px;'>",
  42           "  <p style='text-align:center;'>",
  43           "    Keep the mouse button pressed, and hover over all points",
  44           "    to mark them.",
  45           "  </p>",
  46           "  <div id='div_g4' style='width:600px; height:300px;'></div>",
  47           "</div>"
  48           ].join('\n');
  49
  50     },
  51     run: function() {
  52       var lastClickedGraph;
  53       // TODO(konigsberg): Add cleanup to remove callbacks.
  54       Dygraph.addEvent(document, "mousewheel", function() { lastClickedGraph = null; });
  55       Dygraph.addEvent(document, "click", function() { lastClickedGraph = null; });
  56       new Dygraph(document.getElementById("div_g"),
  57            NoisyData, { errorBars : true });
  58       new Dygraph(document.getElementById("div_g2"),
  59            NoisyData,
  60            {
  61              errorBars : true,
  62              interactionModel: {}
  63            });
  64       var g3 = new Dygraph(document.getElementById("div_g3"),
  65            NoisyData, { errorBars : true, interactionModel : {
  66             'mousedown' : downV3,
  67             'mousemove' : moveV3,
  68             'mouseup' : upV3,
  69             'click' : clickV3,
  70             'dblclick' : dblClickV3,
  71             'mousewheel' : scrollV3
  72       }});
  73       document.getElementById("restore3").onclick = function() {
  74         restorePositioning(g3);
  75       };
  76       new Dygraph(document.getElementById("div_g4"),
  77            NoisyData, {
  78              errorBars : true,
  79              drawPoints : true,
  80              interactionModel : {
  81                'mousedown' : downV4,
  82                'mousemove' : moveV4,
  83                'mouseup' : upV4,
  84                'dblclick' : dblClickV4
  85              },
  86              underlayCallback : captureCanvas
  87           });
  88     }
  89   });