+<!DOCTYPE html>
<html>
<head>
<title>log scale</title>
</head>
<body>
- <h1>Log scale demo - work in progress</h1>
- <div id="div_g" style="width:600px; height:300px;"></div>
-
- <input type="button" value="log scale" onclick="logScale()">
- <input type="button" value="linear scale" onclick="linearScale()">
+ <center>
+ <input id='log' type="button" value="log scale" onclick="setLogScale(true)">
+ <input id='linear' type="button" value="linear scale" onclick="setLogScale(false)">
+ </center>
+
+ <h2>X axis of dates</h2>
+ <div id="div_g0" style="width:600px; height:300px;"></div>
+
+ <h2>X axis of numbers</h2>
+ <div id="div_g1" style="width:600px; height:300px;"></div>
+
<script type="text/javascript">
- function Data() {
+ function data0() {
return "Date,A\n" +
"20101201,5\n"+
"20101202,10\n"+
- "20101203,100\n"+
+ "20101203,-1\n"+
"20101204,250\n"+
"20101205,1000\n"+
"20101206,30\n"+
"20101207,80\n"+
"20101208,100\n"+
- "20101209,250\n"+
+ "20101209,500\n"+
"";
- }
- var g = new Dygraph(document.getElementById("div_g"),
- Data, { logscale : true });
- Dygraph.addEvent(g.canvas_, '_mousemove', function(e) {
- var y = Dygraph.pageY(e) - Dygraph.findPosY(g.canvas_);
- console.log(y, g.toDataYCoord(y));
- });
+ };
+ 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"+
+ "";
+ };
- function logScale() {
- g.updateOptions({ logscale : true });
- }
- function linearScale() {
- g.updateOptions({ logscale : null });
+ var g0 = new Dygraph(document.getElementById("div_g0"),
+ data0, { logscale : true });
+ var g1 = new Dygraph(document.getElementById("div_g1"),
+ data1, { logscale : true });
+ function setLogScale(val) {
+ g0.updateOptions({ logscale: val });
+ g1.updateOptions({ logscale: val });
+ document.getElementById("linear").disabled = !val;
+ document.getElementById("log").disabled = val;
}
</script>
projects / dygraphs.git / blobdiff