This example demostrates log scale visualziation across the x and y axes.
Note that x axis log scales are not permitted when the x axis is a date.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script> | |
| </head> | |
| <body> | |
| <div id="div_g1" style="width:600px; height:300px;"></div> | |
| <center> | |
| <input id='ylog' type="button" value="y log scale" onclick="setLogScale('y', true)"> | |
| <input id='ylinear' type="button" value="y linear scale" onclick="setLogScale('y', false)"> | |
| <input id='xlog' type="button" value="x log scale" onclick="setLogScale('x', true)"> | |
| <input id='xlinear' type="button" value="x linear scale" onclick="setLogScale('x', false)"> | |
| <div>Current scales: <span id="description"></span></div> | |
| </center> | |
| <script type="text/javascript"> | |
| Dygraph.Interaction.DEBUG = true; | |
| function data1() { | |
| return "X,A\n" + | |
| "1,0.000001\n"+ | |
| "2,10\n"+ | |
| "3,100\n"+ | |
| "4,250\n"+ | |
| "5,1000\n"+ | |
| "6,30\n"+ | |
| "7,0\n"+ | |
| "8,100\n"+ | |
| "9,500\n"+ | |
| "101,500\n"+ | |
| "30,500\n"+ | |
| "50,400\n"+ | |
| "100,300\n"+ | |
| "300,200\n"+ | |
| "1000,100\n"+ | |
| ""; | |
| }; | |
| var g1 = new Dygraph(document.getElementById("div_g1"), data1, {}); | |
| var scales = { x : false, y : false }; | |
| function setLogScale(axis, val) { | |
| if (axis === 'y') { | |
| g1.updateOptions({ logscale: val }); | |
| } else { | |
| g1.updateOptions({ axes : { x : { logscale : val } } }); | |
| } | |
| scales[axis] = val; | |
| var text = "y: " + (scales.y ? "log" : "linear") + ", x: " + (scales.x ? "log" : "linear"); | |
| document.getElementById("description").innerText = text; | |
| } | |
| setLogScale('y', true); | |
| </script> | |
| </body> | |
| </html> |