4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>multi-scale
</title>
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
7 <style type=
"text/css">
13 <body style=
"max-width: 700px;">
14 <p>Gridlines and axis labels make charts easier to understand. They give
15 the lines a clear scale. Unless you tell it otherwise, dygraphs will choose
16 a y-axis and set of gridlines which include all of your data.
</p>
18 <p>If you have many series with different scales, this will compress the
19 variation in all but the largest one. Standard ways to deal with this
20 include
<a href=
"two-axes.html">secondary y-axes
</a> and
<a
21 href=
"logscale.html">log scales
</a>.
</p>
23 <p>If neither of these is to your liking, you can manually rescale your
24 series and undo that scaling for the hover values. This demo shows how to
27 <div id=
"demodiv"></div>
29 <p>Hover over to see the original values. This is what the data looks
30 like without any rescaling:
</p>
32 <div id=
"reference_div"></div>
34 <script type=
"text/javascript">
35 var zp = function(x) { if (x <
10) return
"0"+x; else return x; };
36 var labels = [
"date",
"parabola",
"line",
"another line",
"sine wave"];
38 for (var i=
1; i<=
31; i++) {
40 row.push(new Date(
"2006/10/" + zp(i)));
41 row.push(
10*(i*(
31-i)));
43 row.push(
1000*(
250 -
8*i));
44 row.push(
10000*(
125 +
125 * Math.sin(
0.3*i)));
54 var rescaled_data = [];
55 for (var i =
0; i < data.length; i++) {
59 for (var j =
1; j < src.length; j++) {
60 row.push(src[j] / scales[labels[j]]);
62 rescaled_data.push(row);
66 document.getElementById(
"demodiv"),
73 title: 'Four series on different scales',
78 valueFormatter: function(y, opts, series_name) {
79 var unscaled = y * scales[series_name];
80 if (series_name == 'sine wave') return unscaled.toPrecision(
4);
89 document.getElementById(
"reference_div"),
96 title: 'Four series on the same scale',