| | 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> |
projects / dygraphs.git / blame_incremental