gallery/edge-padding.js

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