tests/two-axes-vr.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../css/dygraph.css">
   5     <title>Multiple y-axes with valueRange</title>
   6     <!--
   7     For production (minified) code, use:
   8     <script type="text/javascript" src="dygraph-combined.js"></script>
   9     -->
  10     <script type="text/javascript" src="../dist/dygraph.js"></script>
  11
  12   </head>
  13   <body>
  14     <h2>Multiple y-axes with valueRange</h2>
  15     <p>The same data with both different valueRanges. Two-axis old y[40, 70] valueRange:</p>
  16     <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
  17     <p>Two-axis new valueRange y[40, 80] set:</p>
  18     <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
  19     <p>Two-axis new valueRange y[40, 80] &amp; y2[1e6, 1.2e6] set:</p>
  20     <div id="demodiv_two" style="width: 640; height: 350; border: 1px solid black"></div>
  21     <script type="text/javascript">
  22       var data = [];
  23       for (var i = 1; i <= 100; i++) {
  24         var m = "01", d = i;
  25         if (d > 31) { m = "02"; d -= 31; }
  26         if (m == "02" && d > 28) { m = "03"; d -= 28; }
  27         if (m == "03" && d > 31) { m = "04"; d -= 31; }
  28         if (d < 10) d = "0" + d;
  29         // two series, one with range 1-100, one with range 1-2M
  30         data.push([new Date("2010/" + m + "/" + d),
  31                    i,
  32                    100 - i,
  33                    1e6 * (1 + i * (100 - i) / (50 * 50)),
  34                    1e6 * (2 - i * (100 - i) / (50 * 50))]);
  35       }
  36
  37       g = new Dygraph(
  38           document.getElementById("demodiv"),
  39           data,
  40           {
  41             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  42             series : {
  43               'Y3': { axis: 'y2' },
  44               'Y4': { axis: 'y2' }
  45             },
  46             valueRange: [40, 70],
  47             axes: {
  48               y2: {
  49                 // set axis-related properties here
  50                 labelsKMB: true
  51               }
  52             },
  53             ylabel: 'Primary y-axis',
  54             y2label: 'Secondary y-axis'
  55           }
  56       );
  57
  58       g2 = new Dygraph(
  59           document.getElementById("demodiv_one"),
  60           data,
  61           {
  62             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  63             series : {
  64               'Y3': { axis: 'y2' },
  65               'Y4': { axis: 'y2' }
  66             },
  67             axes: {
  68               y: {
  69                 valueRange: [40, 80]
  70               },
  71               y2: {
  72                 // set axis-related properties here
  73                 labelsKMB: true
  74               }
  75             },
  76             ylabel: 'Primary y-axis',
  77             y2label: 'Secondary y-axis',
  78             axes: {
  79               y: {
  80                 axisLabelWidth: 60
  81               }
  82             }
  83           }
  84       );
  85
  86       g3 = new Dygraph(
  87           document.getElementById("demodiv_two"),
  88           data,
  89           {
  90             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  91             series : {
  92               'Y3': { axis: 'y2' },
  93               'Y4': { axis: 'y2' }
  94             },
  95             axes: {
  96               y: {
  97                 valueRange: [40, 80],
  98                 axisLabelWidth: 60
  99               },
 100               y2: {
 101                 // set axis-related properties here
 102                 valueRange: [1e6, 1.2e6],
 103                 labelsKMB: true
 104               }
 105             },
 106             ylabel: 'Primary y-axis',
 107             y2label: 'Secondary y-axis'
 108           }
 109       );
 110
 111
 112     </script>
 113 </body>
 114 </html>