tests/two-axes-vr.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Multiple y-axes with valueRange</title>
   5     <!--
   6     For production (minified) code, use:
   7     <script type="text/javascript" src="dygraph-combined.js"></script>
   8     -->
   9     <script type="text/javascript" src="../dist/dygraph.js"></script>
  10
  11   </head>
  12   <body>
  13     <h2>Multiple y-axes with valueRange</h2>
  14     <p>The same data with both different valueRanges. Two-axis old y[40, 70] valueRange:</p>
  15     <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
  16     <p>Two-axis new valueRange y[40, 80] set:</p>
  17     <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
  18     <p>Two-axis new valueRange y[40, 80] &amp; y2[1e6, 1.2e6] set:</p>
  19     <div id="demodiv_two" style="width: 640; height: 350; border: 1px solid black"></div>
  20     <script type="text/javascript">
  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             series : {
  42               'Y3': { axis: 'y2' },
  43               'Y4': { axis: 'y2' }
  44             },
  45             valueRange: [40, 70],
  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           }
  55       );
  56
  57       g2 = new Dygraph(
  58           document.getElementById("demodiv_one"),
  59           data,
  60           {
  61             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  62             series : {
  63               'Y3': { axis: 'y2' },
  64               'Y4': { axis: 'y2' }
  65             },
  66             axes: {
  67               y: {
  68                 valueRange: [40, 80]
  69               },
  70               y2: {
  71                 // set axis-related properties here
  72                 labelsKMB: true
  73               }
  74             },
  75             ylabel: 'Primary y-axis',
  76             y2label: 'Secondary y-axis',
  77             axes: {
  78               y: {
  79                 axisLabelWidth: 60
  80               }
  81             }
  82           }
  83       );
  84
  85       g3 = new Dygraph(
  86           document.getElementById("demodiv_two"),
  87           data,
  88           {
  89             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  90             series : {
  91               'Y3': { axis: 'y2' },
  92               'Y4': { axis: 'y2' }
  93             },
  94             axes: {
  95               y: {
  96                 valueRange: [40, 80],
  97                 axisLabelWidth: 60
  98               },
  99               y2: {
 100                 // set axis-related properties here
 101                 valueRange: [1e6, 1.2e6],
 102                 labelsKMB: true
 103               }
 104             },
 105             ylabel: 'Primary y-axis',
 106             y2label: 'Secondary y-axis'
 107           }
 108       );
 109
 110
 111     </script>
 112 </body>
 113 </html>