-<html>
- <head>
- <title>dygraphs JavaScript Library</title>
- <!--[if IE]>
- <script type="text/javascript" src="excanvas.js"></script>
- <![endif]-->
- <script type="text/javascript" src="dygraph-combined.js"></script>
- <style type="text/css">
- .thinborder {
- border-width: 1px;
- border-spacing: 0px;
- border-style: solid;
- border-color: black;
- border-collapse: collapse;
- }
- .thinborder td, .thinborder th {
- border-width: 1px;
- padding: 5px;
- border-style: solid;
- border-color: black;
- }
- </style>
- </head>
-<body>
- <center>
- <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>Features</h3>
-<ul>
- <li>Plots time series without using an external server or Flash</li>
- <li>Supports multiple data series</li>
- <li>Supports error bands around data series</li>
- <li>Displays values on mouseover</li>
- <li>Interactive zoom</li>
- <li>Adjustable averaging period</li>
- <li>Customizable click-through actions</li>
-</ul>
-
-<h3>Caveats</h3>
-<ul>
- <li>Requires Firefox 1.5+ or Safari/WebKit 1.3+.</li>
- <li>Internet Explorer is poorly supported.</li>
-</ul>
-
-<h2>Demo</h2>
-<font size=-1>(Mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom out.)</font><br/>
-<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; padding-top:5px;"></div>
-</td>
-</tr></table>
-<script type="text/javascript">
- g = new DateGraph(
- document.getElementById("demodiv"),
- function() {
- var r = "date,parabola,line,another line,sine wave\n";
- for (var i=1; i<=31; i++) {
- r += "200610" + i;
- r += "," + 10*(i*(31-i));
- r += "," + 10*(8*i);
- r += "," + 10*(250 - 8*i);
- r += "," + 10*(125 + 125 * Math.sin(0.3*i));
- r += "\n";
- }
- return r;
- },
- null,
- {
- rollPeriod: 1,
- labelsDiv: document.getElementById('status'),
- labelsSeparateLines: true,
- labelsKMB: true,
- colors: ["hsl(180,60,50)",
- "rgb(255,100,100)",
- "#00DD55",
- "rgba(50,50,200,0.4)"],
- 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. 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>./generate-combined.sh</pre>
-
-<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>
- <td rowspan=2><img src=arrow.gif /></td>
- <th>Output</th></tr>
-<tr>
-<td valign=top><pre>
-<html>
-<head>
-<script type="text/javascript" src="combined.js"></script>
-</head>
-<body>
-<div id="graphdiv" style="width:400px; height:300px;"></div>
-<script type="text/javascript">
- g = new DateGraph(
- document.getElementById("graphdiv"), // containing div
- function() { // function or path to CSV file.
- return "20080507,75\n" +
- "20080508,70\n" +
- "20080509,80\n";
- },
- [ "Temperature" ], // names of data series
- {} // additional options (see below)
- );
-</script>
-</body>
-</html>
-</pre>
-</td><td valign=top>
- <div id="graphdiv" style="width:400px; height:300px;"></div>
- <script type="text/javascript">
- g = new DateGraph(
- document.getElementById("graphdiv"),
- function() { // function or path to CSV file.
- return "20080507,75\n" +
- "20080508,70\n" +
- "20080509,80\n";
- },
- [ "Temperature" ], // names of data series
- {} // additional options
- );
- </script>
-</td></tr></table>
-
-<p>In order to keep this example self-contained, the second parameter is a function that returns CSV data. These lines <i>must</i> begin with a date in the form <i>YYYYMMDD</i>. In most applications, it makes more sense to include a CSV file instead. If the second parameter to the constructor is a string, it will be interpreted as the path to a CSV file. The DateGraph will perform an XMLHttpRequest to retrieve this file and display the data when it becomes available. Make sure your CSV file is readable and serving from a place that understands XMLHttpRequest's! In particular, you cannot specify a CSV file using <code>"file:///"</code>. Here's an example: (data from <a href="http://www.wunderground.com/history/airport/KNUQ/2007/1/1/CustomHistory.html?dayend=31&monthend=12&yearend=2007&req_city=NA&req_state=NA&req_statename=NA">Weather Underground</a>)</p>
-
-<table>
- <tr><th>HTML</th>
- <td rowspan=2><img src=arrow.gif /></td>
- <th>Output</th></tr>
-<tr>
-<td valign=top><pre>
-<html>
-<head>
-<script type="text/javascript" src="combined.js"></script>
-</head>
-<body>
-<div id="graphdiv" style="width:600px; height:300px;"></div>
-<script type="text/javascript">
- g = new DateGraph(
- document.getElementById("graphdiv"),
- "temperatures.csv", // path to CSV file
- null, // labels in top line of CSV file
- {}
- );
-</script>
-</body>
-</html>
-</pre>
-</td><td valign=top>
- <div id="graphdiv2" style="width:600px; height:300px;"></div>
- <script type="text/javascript">
- g2 = new DateGraph(
- document.getElementById("graphdiv2"),
- "temperatures.csv", null, {}
- );
- </script>
-</td></tr></table>
-
-<p>Click <a href="temperatures.csv">here</a> to view the <code>temperatures.csv</code> file. There are a few things to note here:</p>
-
-<ul>
- <li>Because the third parameter to the DateGraph constructor was <code>null</code>, the labels were taken from the first line of the data instead. The first line of <code>temperatures.csv</code> is <code>Date,High,Low</code>.</li>
- <li>DateGraph automatically chose two different, easily-distinguishable colors for the two data series.</li>
- <li>The labels on the x-axis have switched from days to months. If you zoom in, they'll switch to weeks and then days.</li>
- <li>Some heuristics are used to determine a good vertical range for the data. The idea is to make all the data visible and have human-friendly values on the axis (i.e. 200 instead of 193.4). Generally this works well, but in this case the vertical range is way too large.</li>
- <li>The data is very spiky. A moving average would be easier to interpret.</li>
-</ul>