gallery/two-axes.js

   1 Gallery.register(
   2   'two-axes',
   3   {
   4     name: "Multiple y-axes",
   5     setup: function(parent) {
   6       parent.innerHTML =
   7           "<p>The same data with both one and two y-axes. Two y-axes:</p>" +
   8           "<div id='demodiv' style='width: 640; height: 350; border: 1px solid black'></div>" +
   9           "<p>A single y-axis:</p>" +
  10           "<div id='demodiv_one' style='width: 640; height: 350; border: 1px solid black'></div>" +
  11           "<input type='checkbox' id='check'><label for='check'> Fill?</label>";
  12     },
  13     run: function() {
  14       document.getElementById('check') = function(el) {
  15         g.updateOptions( { fillGraph: el.checked } );
  16         g2.updateOptions( { fillGraph: el.checked } );
  17       }
  18
  19       var data = [];
  20       for (var i = 1; i <= 100; i++) {
  21         var m = "01", d = i;
  22         if (d > 31) { m = "02"; d -= 31; }
  23         if (m == "02" && d > 28) { m = "03"; d -= 28; }
  24         if (m == "03" && d > 31) { m = "04"; d -= 31; }
  25         if (d < 10) d = "0" + d;
  26         // two series, one with range 1-100, one with range 1-2M
  27         data.push([new Date("2010/" + m + "/" + d),
  28                    i,
  29                    100 - i,
  30                    1e6 * (1 + i * (100 - i) / (50 * 50)),
  31                    1e6 * (2 - i * (100 - i) / (50 * 50))]);
  32       }
  33
  34       g = new Dygraph(
  35           document.getElementById("demodiv"),
  36           data,
  37           {
  38             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  39             'Y3': {
  40               axis: {
  41               }
  42             },
  43             'Y4': {
  44               axis: 'Y3'  // use the same y-axis as series Y3
  45             },
  46             axes: {
  47               y2: {
  48                 // set axis-related properties here
  49                 labelsKMB: true
  50               }
  51             },
  52             ylabel: 'Primary y-axis',
  53             y2label: 'Secondary y-axis',
  54             yAxisLabelWidth: 60
  55           }
  56       );
  57
  58       g2 = new Dygraph(
  59           document.getElementById("demodiv_one"),
  60           data,
  61           {
  62             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  63             labelsKMB: true,
  64             ylabel: 'Primary y-axis',
  65             y2label: 'Secondary y-axis',
  66           }
  67       );
  68     }
  69   });