tests/two-axes.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Multiple y-axes</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="../dygraph-dev.js"></script>
  10
  11   </head>
  12   <body>
  13     <h2>Multiple y-axes</h2>
  14     <p>The same data with both one and two y-axes. Two y-axes:</p>
  15     <p>Two y-axes with y as primary axis (default):</p>
  16     <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
  17     <p>Two y-axes with y2 as primary axis:</p>
  18     <div id="demodiv_y2_primary" style="width: 640; height: 350; border: 1px solid black"></div>
  19     <p>Two y-axes using different grids:</p>
  20     <div id="demodiv_two_grids" style="width: 640; height: 350; border: 1px solid black"></div>
  21     <p>A single y-axis (left):</p>
  22     <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
  23     <p>A single y-axis (right):</p>
  24     <div id="demodiv_one_right" style="width: 640; height: 350; border: 1px solid black"></div>
  25
  26     <script type="text/javascript">
  27       var data = [];
  28       for (var i = 1; i <= 100; i++) {
  29         var m = "01", d = i;
  30         if (d > 31) { m = "02"; d -= 31; }
  31         if (m == "02" && d > 28) { m = "03"; d -= 28; }
  32         if (m == "03" && d > 31) { m = "04"; d -= 31; }
  33         if (d < 10) d = "0" + d;
  34         // two series, one with range 1-100, one with range 1-2M
  35         data.push([new Date("2010/" + m + "/" + d),
  36                    i,
  37                    100 - i,
  38                    1e6 * (1 + i * (100 - i) / (50 * 50)),
  39                    1e6 * (2 - i * (100 - i) / (50 * 50))]);
  40       }
  41
  42       g = new Dygraph(
  43           document.getElementById("demodiv"),
  44           data,
  45           {
  46             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  47             series: {
  48               'Y3': {
  49                 axis: 'y2'
  50               },
  51               'Y4': {
  52                 axis: 'y2'
  53               },
  54             },
  55             axes: {
  56               y2: {
  57                 // set axis-related properties here
  58                 labelsKMB: true
  59               }
  60             },
  61             ylabel: 'Primary y-axis',
  62             y2label: 'Secondary y-axis',
  63             yAxisLabelWidth: 60
  64           }
  65       );
  66
  67       g2 = new Dygraph(
  68           document.getElementById("demodiv_y2_primary"),
  69           data,
  70           {
  71             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
  72             ylabel: 'Primary y-axis',
  73             y2label: 'Secondary y-axis',
  74             series : {
  75               'Y3': {
  76                 axis: 'y2'
  77               },
  78               'Y4': {
  79                 axis: 'y2'
  80               }
  81             },
  82             axes: {
  83               y: {
  84                 // set axis-related properties here
  85                 drawGrid: false,
  86                 independentTicks: false
  87               },
  88               y2: {
  89                 // set axis-related properties here
  90                 labelsKMB: true,
  91                 drawGrid: true,
  92                 independentTicks: true
  93               }
  94             }
  95           }
  96       );
  97
  98       g3 = new Dygraph(
  99           document.getElementById("demodiv_two_grids"),
 100           data,
 101           {
 102             labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 103             ylabel: 'Primary y-axis',
 104             y2label: 'Secondary y-axis',
 105             series : {
 106               'Y3': {
 107                 axis: 'y2'
 108               },
 109               'Y4': {
 110                 axis: 'y2'
 111               }
 112             },
 113             axes: {
 114               y2: {
 115                 // set axis-related properties here
 116                 labelsKMB: true,
 117                 drawGrid: true,
 118                 independentTicks: true,
 119                 gridLinePattern: [2,2]
 120               }
 121             }
 122           }
 123       );
 124
 125       g4 = new Dygraph(
 126         document.getElementById("demodiv_one"),
 127         data,
 128         {
 129           labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 130           labelsKMB: true,
 131           ylabel: 'Primary y-axis',
 132           y2label: 'Secondary y-axis',
 133         }
 134       );
 135
 136       g5 = new Dygraph(
 137        document.getElementById("demodiv_one_right"),
 138        data,
 139        {
 140          labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
 141          ylabel: 'Primary y-axis',
 142          y2label: 'Secondary y-axis',
 143           series : {
 144             'Y1': {
 145                axis: 'y2'
 146             },
 147             'Y2': {
 148               axis: 'y2'
 149             },
 150             'Y3': {
 151               axis: 'y2'
 152             },
 153             'Y4': {
 154               axis: 'y2'
 155             }
 156           },
 157           axes: {
 158             y: {
 159               // set axis-related properties here
 160               drawGrid: false,
 161               independentTicks: false
 162             },
 163             y2: {
 164               // set axis-related properties here
 165               labelsKMB: true,
 166               drawGrid: true,
 167               independentTicks: true
 168             }
 169           }
 170         }
 171       );
 172
 173       function update(el) {
 174         g.updateOptions( { fillGraph: el.checked } );
 175         g2.updateOptions( { fillGraph: el.checked } );
 176         g3.updateOptions( { fillGraph: el.checked } );
 177         g4.updateOptions( { fillGraph: el.checked } );
 178         g5.updateOptions( { fillGraph: el.checked } );
 179       }
 180     </script>
 181
 182     <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
 183 </body>
 184 </html>