Merge branch 'master' of github.com:danvk/dygraphs
[dygraphs.git] / 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>