tests/multi-scale.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>multi-scale</title>
   5     <script type="text/javascript" src="../dist/dygraph.js"></script>
   6     <style type="text/css">
   7     body {
   8       line-height: 150%;
   9     }
  10     </style>
  11   </head>
  12   <body style="max-width: 700px;">
  13     <p>Gridlines and axis labels make charts easier to understand. They give
  14     the lines a clear scale. Unless you tell it otherwise, dygraphs will choose
  15     a y-axis and set of gridlines which include all of your data.</p>
  16
  17     <p>If you have many series with different scales, this will compress the
  18     variation in all but the largest one. Standard ways to deal with this
  19     include <a href="two-axes.html">secondary y-axes</a> and <a
  20     href="logscale.html">log scales</a>.</p>
  21
  22     <p>If neither of these is to your liking, you can manually rescale your
  23     series and undo that scaling for the hover values. This demo shows how to
  24     do it.</p>
  25
  26     <div id="demodiv"></div>
  27
  28     <p>Hover over to see the original values. This is what the data looks
  29     like without any rescaling:</p>
  30
  31     <div id="reference_div"></div>
  32
  33     <script type="text/javascript">
  34       var zp = function(x) { if (x < 10) return "0"+x; else return x; };
  35       var labels = ["date","parabola","line","another line","sine wave"];
  36       var data = [];
  37       for (var i=1; i<=31; i++) {
  38         var row = [];
  39         row.push(new Date("2006/10/" + zp(i)));
  40         row.push(10*(i*(31-i)));
  41         row.push(100*(8*i));
  42         row.push(1000*(250 - 8*i));
  43         row.push(10000*(125 + 125 * Math.sin(0.3*i)));
  44         data.push(row);
  45       }
  46
  47       var scales = {
  48         "parabola": 1,
  49         "line": 10,
  50         "another line": 100,
  51         "sine wave": 1000
  52       };
  53       var rescaled_data = [];
  54       for (var i = 0; i < data.length; i++) {
  55         var src = data[i];
  56         var row = [];
  57         row.push(src[0]);
  58         for (var j = 1; j < src.length; j++) {
  59           row.push(src[j] / scales[labels[j]]);
  60         }
  61         rescaled_data.push(row);
  62       }
  63
  64       g = new Dygraph(
  65               document.getElementById("demodiv"),
  66               rescaled_data,
  67               {
  68                 legend: 'always',
  69                 labels: labels,
  70                 width: 640,
  71                 height: 480,
  72                 title: 'Four series on different scales',
  73                 xlabel: 'Date',
  74                 ylabel: 'Count',
  75                 axes : {
  76                   y : {
  77                     valueFormatter: function(y, opts, series_name) {
  78                       var unscaled = y * scales[series_name];
  79                       if (series_name == 'sine wave') return unscaled.toPrecision(4);
  80                       return unscaled;
  81                     }
  82                   }
  83                 }
  84               }
  85           );
  86
  87       g_orig = new Dygraph(
  88               document.getElementById("reference_div"),
  89               data,
  90               {
  91                 legend: 'always',
  92                 labels: labels,
  93                 width: 640,
  94                 height: 480,
  95                 title: 'Four series on the same scale',
  96                 xlabel: 'Date',
  97                 ylabel: 'Count',
  98                 yAxisLabelWidth: 80
  99               }
 100           );
 101     </script>
 102 </body>
 103 </html>