</head>
<body>
<center>
- <p><span style="font-size:30pt;">dygraphs JavaScript Library</span><br/>
- (Contact: <a href="mailto:danvdk@gmail.com">Dan Vanderkam</a>)</p>
+ <p><span style="font-size:28pt;">dygraphs JavaScript Library</span><br/>
+ <a href="http://code.google.com/p/dygraphs/">code.google.com/p/dygraphs</a></p>
</center>
<p>The dygraphs JavaScript library produces produces interactive, zoomable charts of time series based on CSV files.</p>
<h3>Caveats</h3>
<ul>
<li>Requires Firefox 1.5+ or Safari/WebKit 1.3+.</li>
- <li>Internet Explorer is not at all supported!</li>
- <li>Can only plot time series with granularity >= 1 day</li>
+ <li>Internet Explorer is poorly supported.</li>
</ul>
<h2>Demo</h2>
<table><tr><td>
<div id="demodiv" style="width:480px; height:320px;"></div>
</td><td valign=top>
-<div id="status" style="width:200px; font-size:0.8em"></div>
+<div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div>
</td>
-</tr></table></p>
+</tr></table>
<script type="text/javascript">
g = new DateGraph(
document.getElementById("demodiv"),
"rgb(255,100,100)",
"#00DD55",
"rgba(50,50,200,0.4)"],
- padding: {left: 40, right: 30, top: 5, bottom: 15},
+ padding: {left: 40, right: 30, top: 15, bottom: 15}
}
);
</script>
document.getElementById("graphdiv"),
"temperatures.csv", null,
{ rollPeriod: 7,
+ showRoller: true,
valueRange: [25, 100]
}
);
document.getElementById("graphdiv3"),
"temperatures.csv", null,
{ rollPeriod: 7,
+ showRoller: true,
valueRange: [25, 100]
}
);
</script>
</td></tr></table>
-<p>A rolling average can always be set using the text box in the lower left-hand corner of the graph.</p>
+<p>A rolling average can be set using the text box in the lower left-hand corner of the graph (the showRoller attribute is what makes this appear).</p>
<h2>Error Bars</h2>
<p>Another significant feature of the dygraphs library is the ability to display error bars around data series. One standard deviation must be specified for each data point. A +/-<i>n</i> sigma band will be drawn around the data series at that point. If a moving average is being displayed, DateGraph will compute the standard deviation of the average at each point. (i.e. <i>σ</i> = sqrt((<i>σ_1</i>^2 + <i>σ_2</i>^2 + ... + <i>σ_n</i>^2)/<i>n</i>))</p>
"twonormals.csv",
null,
{ rollPeriod: 7,
+ showRoller: true,
errorBars: true,
valueRange: [50,125]
}
"twonormals.csv",
null,
{ rollPeriod: 14,
+ showRoller: true,
errorBars: true,
valueRange: [50, 125]
}
<li>The error bars are partially transparent. This can be seen when they overlap one another.</li>
</ul>
+<h2>One last demo</h2>
+
+<p>This chart shows monthly closes of the Dow Jones Industrial Average, both in nominal and real (i.e. adjusted for inflation) dollars. The shaded areas show its monthly high and low. CPI values with a base from 1982-84 are used to adjust for inflation.</p>
+
+<div id=dow_chart style="width:1000px; height:400px;"></div>
+<script type="text/javascript">
+ // From http://www.econstats.com/eqty/eq_d_mi_3.csv
+ dow = new DateGraph(
+ document.getElementById('dow_chart'),
+ "dow.txt",
+ null,
+ {
+ showRoller: true,
+ customBars: true,
+ labelsKMB: true,
+ padding: {left:30, right:30, top:5, bottom:5}
+ });
+</script>
+
+
<h2>Other Options</h2>
<p>These are the options that can be passed in through the fourth parameter of the DateGraph constructor.</p>
<td><code>7</code></td>
<td>Number of days over which to average data. Discussed extensively above.</td>
</tr><tr>
+ <td><b>showRoller</b></td>
+ <td><code>true</code></td>
+ <td>Should the rolling average period text box be shown? Default is false.</td>
+ </tr><tr>
<td><b>colors</b></td>
<td><code>['red', '#00FF00']</code></td>
<td>List of colors for the data series. These can be of the form "#AABBCC"
projects / dygraphs.git / blobdiff