<li><a href="http://github.com/danvk/dygraphs">Source</a></li>
<li><a href="http://code.google.com/p/dygraphs/issues/">Issues</a></li>
<li><a href="http://code.google.com/p/dygraphs/issues/entry">Report Bug</a></li>
- <li><a href="mailto:danvdk [at] gmail">Contact</a></li>
+ <li><a href="mailto:dygraphs-users [at] googlegroups.com">Contact</a></li>
</ul>
<h2>Gallery</h2>
<li><a href="tests/gviz.html">GViz Demo</a></li>
<li><a href="tests/plotter.html">Equation Plotter</a></li>
<li><a href="tests/perf.html">Performance Test</a></li>
+ <li><a href="tests/fillGraph.html">Filled Chart</a></li>
<li><a href="tests/perf.html">Fractions</a></li>
+ <li><a href="tests/visibility.html">Visibility</li>
<li><a href="tests/label-div.html">Labels in a DIV</a></li>
<li><a href="tests/numeric-axis.html">Numeric Axis</a></li>
<li><a href="tests/draw-points.html">Dotted Points</a></li>
<h1>dygraphs JavaScript Visualization Library</h1>
<p><a href="http://github.com/danvk/dygraphs">http://github.com/danvk/dygraphs</a></p>
- <p>See <a href="http://github.com/danvk/dygraphs/downloads/">downloads</a>, <a href="tests/">gallery</a> and <a href="http://code.google.com/p/dygraphs/issues/">open issues</a></p>
+ <p>See <a href="http://g
roups.google.com/group/dygraphs-users">mailing list</a>, <a href="http://github.com/danvk/dygraphs/downloads/">downloads</a>, <a href="tests/">gallery</a> and <a href="http://code.google.com/p/dygraphs/issues/">open issues</a></p>
<p>dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.</p>
</div>
</div>
- <p style="clear:both">In order to keep this example self-contained, the second parameter is raw CSV data. The dygraphs library parses this data (including column headers), resizes the its container to a reasonable default, calculates appropriate axis ranges and tick marks and draws the graph.</p>
+ <p style="clear:both">In order to keep this example self-contained, the second parameter is raw CSV data. The dygraphs library parses this data (including column headers), resizes its container to a reasonable default, calculates appropriate axis ranges and tick marks and draws the graph.</p>
<p>In most applications, it makes more sense to include a CSV file instead. If the second parameter to the constructor doesn't contain a newline, it will be interpreted as the path to a CSV file. The Dygraph 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>
<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:900px; height:350px;"></div>
+ <p><b>Display: </b>
+ <input type=checkbox id=0 onClick="stockchange(this)" checked>
+ <label for="0"> Nominal</label>
+ <input type=checkbox id=1 onClick="stockchange(this)" checked>
+ <label for="1"> Real</label>
+ </p>
+
<script type="text/javascript">
// From http://www.econstats.com/eqty/eq_d_mi_3.csv
- new Dygraph(
+ stockchart = new Dygraph(
document.getElementById('dow_chart'),
"dow.txt",
{
labelsKMB: true
}
);
+
+ function stockchange(el) {
+ stockchart.setVisibility(el.id, el.checked);
+ }
</script>
<!--
<thead>
<tr>
<th width="150">Name</th>
- <th>Values</th>
- <th>Default</th>
- <th width="150">Description</th>
+ <th width="200">Values</th>
+ <th width="150">Default</th>
+ <th>Description</th>
</tr>
</thead>
<tbody>
</tr>
<tr>
<td><strong>rollPeriod</strong></td>
- <td><code>integer >= 1</code></td>
+ <td><code>integer >= 1</code></td>
<td><code>1</code></td>
<td>Number of days over which to average data. Discussed extensively above.</td>
</tr>
<td>List of colors for the data series. These can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow", etc. If not specified, equally-spaced points around a color wheel are used.</td>
</tr>
<tr>
+ <td><strong>fillGraph</strong></td>
+ <td><code>boolean<br/></code></td>
+ <td><code>false</code></td>
+ <td>Should the area underneath the graph be filled? This option is not
+ compatible with error bars.</td>
+ </tr>
+ <tr>
+ <td><strong>visibility</strong></td>
+ <td><code>Array of booleans<br/></code></td>
+ <td><code>[true, true, ...]</code></td>
+ <td>Which series should initially be visible? Once the Dygraph has
+ been constructed, you can access and modify the visibility of each
+ series using the <code>visibility</code> and
+ <code>setVisibility</code> methods. See the <a
+ href="tests/visibility.html">visibility demo</a> for an example.</td>
+ </td>
+ </tr>
+ <tr>
<td><strong>colorSaturation</strong></td>
<td><code>0.0 - 1.0</code></td>
<td><code>1.0</code></td>
</tr>
<tr>
<td><strong>zoomCallback</strong></td>
- <td><code>function(minDate, maxDate){}</code></td>
+ <td><code>function(minDate,<br/>maxDate){}</code></td>
<td><code>null</code></td>
<td>A function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch.</td>
</tr>
<tr>
<td><strong>dateWindow</strong></td>
<td><code>[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]</code></td>
- <td rowspan="2"><code>Full range of the input is shown</code></td>
+ <td rowspan="2"><code>Full range of the<br/> input is shown</code></td>
<td>Initially zoom in on a section of the graph. Is of the form [earliest, latest], where earliest/latest are milliseconds since epoch.</td>
</tr>
<tr>
</tr>
<tr>
<td><strong>labelsDiv</strong></td>
- <td><code>document.getElementById('foo')</code></td>
+ <td><code>document.<br/>getElementById('foo')</code></td>
<td><code>null</code></td>
<td>Show data labels in an external div, rather than on the graph.</td>
</tr>
<td>Show K/M/B for thousands/millions/billions on y-axis.</td>
</tr>
<tr>
+ <td><strong>labelsKMG2</strong></td>
+ <td><code>true</code></td>
+ <td><code>false</code></td>
+ <td>Show k/M/G for kilo/Mega/Giga on y-axis. This is different than
+ <code>labelsKMB</code> in that it uses base 2, not 10.</td>
+ </tr>
+ <tr>
<td><strong>labelsDivWidth</strong></td>
<td><code>250</code></td>
<td><code></code></td>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">_uacct = "UA-769809-1";urchinTracker();</script>
</body>
-</html>
\ No newline at end of file
+</html>
projects / dygraphs.git / blobdiff