gallery/edge-padding.js

   1 /*global Gallery,Dygraph,data */
   2 Gallery.register(
   3   'edge-padding',
   4   {
   5     name: 'Edge Padding',
   6     title: 'Graph edge padding and axis position',
   7     setup: function(parent) {
   8       parent.innerHTML = (
   9           "<style>.dygraph-legend { width: 100px; }</style>" +
  10           "<p>" +
  11           "  <b>Mode:</b>" +
  12           "    <input type='radio' name='mode'>use {x,y}RangePad</input>" +
  13           "    <input type='radio' name='mode'>original</input>" +
  14           " <br /><b>Settings:</b>" +
  15           "    <input type='checkbox' id='yrange'>valueRange=[-2,2]</input>" +
  16           "</p>" +
  17           "<div id='demodiv'></div>"
  18           );
  19     },
  20     run: function() {
  21       var parent = document.getElementById("demodiv");
  22
  23       var graphs = [];
  24       var nrows = 50;
  25
  26       for (var oy = -2; oy <= 2; ++oy) {
  27         for (var ox = -1; ox <= 1; ++ox) {
  28           var gdiv = document.createElement('div');
  29           gdiv.style.display = 'inline-block';
  30           gdiv.style.margin = '2px';
  31           parent.appendChild(gdiv);
  32
  33           var data = [];
  34           for (var row = 0; row < nrows; ++row) {
  35             var x = row * 5 / (nrows - 1);
  36             data.push([ox * 2.5 + x - 2.5,
  37                     oy + Math.sin(x),
  38                     oy + Math.round(Math.cos(x))]);
  39           }
  40
  41           var g = new Dygraph(gdiv, data, {
  42               labels: ['x', 'A', 'B'],
  43               gridLineColor: '#ccc',
  44               includeZero: true,
  45               width: 250,
  46               height: 130
  47           });
  48           graphs.push(g);
  49         }
  50         parent.appendChild(document.createElement('br'));
  51       }
  52
  53       var updateGraphOpts = function(opts) {
  54         for (var i = 0; i < graphs.length; ++i) {
  55           graphs[i].updateOptions(opts);
  56         }
  57       };
  58
  59       var mode = document.getElementsByName('mode');
  60       mode[0].onchange = function() {
  61         updateGraphOpts({
  62           avoidMinZero: false,
  63           xRangePad: 3,
  64           yRangePad: 10,
  65           drawAxesAtZero: true});
  66       };
  67       mode[1].onchange = function() {
  68         updateGraphOpts({
  69           avoidMinZero: true,
  70           xRangePad: 0,
  71           yRangePad: null,
  72           drawAxesAtZero: false});
  73       };
  74       mode[0].checked = true;
  75       mode[0].onchange();
  76
  77       var yrange = document.getElementById('yrange');
  78       yrange.onchange = function(ev) {
  79         updateGraphOpts({
  80           valueRange: ev.target.checked ? [-2, 2] : null});
  81       };
  82
  83     }
  84   });