| 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> |
| 5 | <title>log scale</title> |
| 6 | <!--[if IE]> |
| 7 | <script type="text/javascript" src="../excanvas.js"></script> |
| 8 | <![endif]--> |
| 9 | <!-- |
| 10 | For production (minified) code, use: |
| 11 | <script type="text/javascript" src="dygraph-combined.js"></script> |
| 12 | --> |
| 13 | <script type="text/javascript" src="../dygraph-dev.js"></script> |
| 14 | |
| 15 | </head> |
| 16 | |
| 17 | <body> |
| 18 | <center> |
| 19 | <input id='ylog' type="button" value="y log scale" onclick="setLogScale('y', true)"> |
| 20 | <input id='ylinear' type="button" value="y linear scale" onclick="setLogScale('y', false)"> |
| 21 | <input id='xlog' type="button" value="x log scale" onclick="setLogScale('x', true)"> |
| 22 | <input id='xlinear' type="button" value="x linear scale" onclick="setLogScale('x', false)"> |
| 23 | <div>Current scales: <span id="description"></span></div> |
| 24 | </center> |
| 25 | |
| 26 | <h2>X axis of dates</h2> |
| 27 | <div id="div_g0" style="width:600px; height:300px;"></div> |
| 28 | <div style="font-style: italic; margin-left: 40px;">(Note: when the x-axis is dates, logscale is ignored on that axis.)</div> |
| 29 | |
| 30 | <h2>X axis of numbers</h2> |
| 31 | <div id="div_g1" style="width:600px; height:300px;"></div> |
| 32 | |
| 33 | <script type="text/javascript"> |
| 34 | Dygraph.Interaction.DEBUG = true; |
| 35 | |
| 36 | function data0() { |
| 37 | return "Date,A\n" + |
| 38 | "20101201,5\n"+ |
| 39 | "20101202,10\n"+ |
| 40 | "20101203,-1\n"+ |
| 41 | "20101204,250\n"+ |
| 42 | "20101205,1000\n"+ |
| 43 | "20101206,30\n"+ |
| 44 | "20101207,80\n"+ |
| 45 | "20101208,100\n"+ |
| 46 | "20101209,500\n"+ |
| 47 | ""; |
| 48 | }; |
| 49 | function data1() { |
| 50 | return "X,A\n" + |
| 51 | "1,0.000001\n"+ |
| 52 | "2,10\n"+ |
| 53 | "3,100\n"+ |
| 54 | "4,250\n"+ |
| 55 | "5,1000\n"+ |
| 56 | "6,30\n"+ |
| 57 | "7,0\n"+ |
| 58 | "8,100\n"+ |
| 59 | "9,500\n"+ |
| 60 | "101,500\n"+ |
| 61 | "30,500\n"+ |
| 62 | "50,400\n"+ |
| 63 | "100,300\n"+ |
| 64 | "300,200\n"+ |
| 65 | "1000,100\n"+ |
| 66 | ""; |
| 67 | }; |
| 68 | |
| 69 | var g0 = new Dygraph(document.getElementById("div_g0"), data0, {}); |
| 70 | var g1 = new Dygraph(document.getElementById("div_g1"), data1, {}); |
| 71 | var graphs = [ g0, g1 ]; |
| 72 | var scales = { x : false, y : false }; |
| 73 | function setLogScale(axis, val) { |
| 74 | if (axis === 'y') { |
| 75 | for (var idx = 0; idx < graphs.length; idx++) { |
| 76 | graphs[idx].updateOptions({ logscale: val }); |
| 77 | } |
| 78 | } else { |
| 79 | for (var idx = 0; idx < graphs.length; idx++) { |
| 80 | graphs[idx].updateOptions({ axes : { x : { logscale : val } } }); |
| 81 | } |
| 82 | } |
| 83 | scales[axis] = val; |
| 84 | var text = "y: " + (scales.y ? "log" : "linear") + ", x: " + (scales.x ? "log" : "linear"); |
| 85 | document.getElementById("description").innerText = text; |
| 86 | } |
| 87 | |
| 88 | setLogScale('y', true); |
| 89 | </script> |
| 90 | |
| 91 | </body> |
| 92 | </html> |