tests/two-axes.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>Multiple y-axes</title>
   6     <!--[if IE]>
   7     <script type="text/javascript" src="../excanvas.js"></script>
   8     <![endif]-->
   9     <!--
  10     For production (minified) code, use:
  11     <script type="text/javascript" src="dygraph-combined.js"></script>
  12     -->
  13     <script type="text/javascript" src="../dygraph-dev.js"></script>
  14
  15   </head>
  16   <body>
  17     <h2>Multiple y-axes</h2>
  18     <p>The same data with both one and two y-axes. Two y-axes:</p>
  19     <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
  20     <p>A single y-axis:</p>
  21     <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
  22
  23     <script type="text/javascript">
  24       var data = [];
  25       for (var i = 1; i <= 100; i++) {
  26         var m = "01", d = i;
  27         if (d > 31) { m = "02"; d -= 31; }
  28         if (m == "02" && d > 28) { m = "03"; d -= 28; }
  29         if (m == "03" && d > 31) { m = "04"; d -= 31; }
  30         if (d < 10) d = "0" + d;
  31         // two series, one with range 1-100, one with range 1-2M
  32         data.push([new Date("2010/" + m + "/" + d),
  33                    i,
  34                    100 - i,
  35                    1e6 * (1 + i * (100 - i) / (50 * 50)),
  36                    1e6 * (2 - i * (100 - i) / (50 * 50))]);
  37       }
  38
  39       g = new Dygraph(
  40           document.getElementById("demodiv"),
  41           data,
  42           {
  43             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  44             'Y3': {
  45               axis: {
  46               }
  47             },
  48             'Y4': {
  49               axis: 'Y3'  // use the same y-axis as series Y3
  50             },
  51             axes: {
  52               y2: {
  53                 // set axis-related properties here
  54                 labelsKMB: true
  55               }
  56             },
  57             ylabel: 'Primary y-axis',
  58             y2label: 'Secondary y-axis',
  59             yAxisLabelWidth: 60
  60           }
  61       );
  62
  63       g2 = new Dygraph(
  64           document.getElementById("demodiv_one"),
  65           data,
  66           {
  67             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  68             labelsKMB: true,
  69             ylabel: 'Primary y-axis',
  70             y2label: 'Secondary y-axis',
  71           }
  72       );
  73
  74       function update(el) {
  75         g.updateOptions( { fillGraph: el.checked } );
  76         g2.updateOptions( { fillGraph: el.checked } );
  77       }
  78     </script>
  79
  80     <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
  81 </body>
  82 </html>