<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
- <script type="text/javascript" src="combined.js"></script>
+ <script type="text/javascript" src="dygraph-combined.js"></script>
<style type="text/css">
.thinborder {
border-width: 1px;
</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>
<h2>Usage</h2>
-<p>The DateGraph library depends on two other JS libraries: <a href="http://www.mochikit.com/">MochiKit</a> and <a href="http://www.liquidx.net/plotkit/">PlotKit</a>. Rather than tracking down copies of these libraries, I recommend using a packed version of dygraphs that combines all three libraries into a single JS file. To generate this file, go to a perforce client and run:</p>
+<p>The DateGraph library depends on two other JS libraries: <a href="http://www.mochikit.com/">MochiKit</a> and <a href="http://www.liquidx.net/plotkit/">PlotKit</a>. Rather than tracking down copies of these libraries, I recommend using a packed version of dygraphs that combines all three libraries into a single JS file. Either grab this file from dygraph project's <a href="http://code.google.com/p/dygraphs/downloads/list">downloads</a> page or create it yourself by <a href="http://code.google.com/p/dygraphs/source/checkout">checking out</a> a copy of the code and running:
-<pre>blaze build spam/utils/dygraphs:combined</pre>
+<pre>./generate-combined.sh</pre>
-<p>The combined JS file is now in <code>blaze-genfiles/spam/utils/dygraphs/combined.js</code>. Here's a basic example to get things started:</p>
+<p>The combined JS file is now in <code>dygraph-combined.js</code>. Here's a basic example to get things started:</p>
<table>
<tr><th>HTML</th>
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