gallery/two-axes.js

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