projects / dygraphs.git / blame
| Commit | Line | Data |
|---|---|---|
| 48e614ac DV |
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> | |
| d7153238 DV |
10 | <style type="text/css"> |
| 11 | body { | |
| 12 | line-height: 150%; | |
| 13 | } | |
| 14 | </style> | |
| 48e614ac DV |
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', | |
| c63e32d0 RK |
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 | } | |
| 48e614ac DV |
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> |