tests/two-axes.html

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