tests/multi-scale.html

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