-</script>
-
-
-<h2>Other Options</h2>
-<p>These are the options that can be passed in through the fourth parameter of the DateGraph constructor.</p>
-
-<table class=thinborder width=1000>
- <tr><th>Name</th><th>Sample Value</th><th>Description</th></tr>
- <tr>
- <td><b>rollPeriod</b></td>
- <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"
- or "rgb(255,100,200)" or "yellow", etc. If not specified, equally-spaced
- points around a color wheel are used.</td>
- </tr><tr>
- <td><b>colorSaturation</b></td>
- <td><code>1.0</code></td>
- <td>If <b>colors</b> is not specified, saturation of the
- automatically-generated data series colors. (0.0-1.0, default:
- 1.0)</td>
- </tr><tr>
- <td><b>colorValue</b></td>
- <td><code>0.5</code></td>
- <td>If colors is not specified, value of the data series colors, as in
- hue/saturation/value. (0.0-1.0, default 0.5)</td>
- </tr><tr>
- <td><b>clickCallback</b></td>
- <td><code>function(e,date){ alert(date); }</code></td>
- <td>A function to call when a data point is clicked. The function should take
- two arguments, the event object for the click and the date that was
- clicked. (default null)</td>
- </tr><tr>
- <td><b>errorBars</b></td>
- <td><code>false</code></td>
- <td>Does the data contain standard deviations? Setting this to true alters
- the input format (see above). (default false)</td>
- </tr><tr>
- <td><b>strokeWidth</b></td>
- <td><code>2.0</code></td>
- <td>Width of the data lines. This can be used to increase the contrast or
- some graphs. (default 1.0)</td>
- </tr><tr>
- <td><b>dateWindow</b></td>
- <td><code>[(new Date('2006-01-01')).valueOf(),<br/>
- (new Date()).valueOf()]</code></td>
- <td>Initially zoom in on a section of the graph. Is of the form [earliest,
- latest], where earliest/latest are millis since epoch. By default, the
- full range of the input is shown.</td>
- </tr><tr>
- <td><b>valueRange</b></td>
- <td><code>[10, 110]</code></td>
- <td>Explicitly set the vertical range of the graph to [low, high]. By
- default, some clever heuristics are used (see above).</td>
- </tr><tr>
- <td><b>minTickSize</b></td>
- <td><code>1</code</td>
- <td>The difference between ticks on the y-axis can be greater than or equal
- to this, but no less. If you set it to 1, for instance, you'll never get
- nonintegral gaps between ticks.</td>
- </tr><tr>
- <td><b>labelsSeparateLines</b></td>
- <td><code>true</code></td>
- <td>Put <br/> between lines in the label string. Often used in
- conjunction with <b>labelsDiv</b>. (default false)</td>
- </tr><tr>
- <td><b>labelsDiv</b></td>
- <td><code>document.getElementById('foo')</code></td>
- <td>Show data labels in an external div, rather than on the graph. (default
- null)</td>
- </tr><tr>
- <td><b>labelsKMB</b></td>
- <td><code>true</code></td>
- <td>Show K/M/B for thousands/millions/billions on y-axis (default
- false).</td>
- </tr>
- <tr>
- <td><b>padding</b></td>
- <td><code>{left: 40, right: 30,<br/>top: 5,
- bottom: 15}</code></td>
- <td>Adds extra pixels of padding around the graph. Sometimes a dygraph
- gets clipped by surrounding text (see the Demo at the top of this page).
- Setting this property appropriately will fix this problem.</td>
- </tr>
-</table>
-
-<p>Any options you specify also get passed on to PlotKit's <a href="http://media.liquidx.net/js/plotkit-doc/PlotKit.Renderer.html">Renderer</a> class. DateGraph will override some of these (e.g. strokeColor), but others may be useful. The <code>padding</code> property is an example of this.</p>
-
-<h2>Common Gotchas</h2>
-<p>Here are a few problems that I've frequently run into while using the
-dygraphs library.</p>
-
-<ul>
- <li>Make sure your CSV files are readable! If your graph isn't showing up,
- the XMLHttpRequest for the CSV file may be failing. You can determine whether
- this is the case using tools like <a
- href="http://www.getfirebug.com/">Firebug</a>.</li>
-
- <li>Make sure your CSV files are in the correct format. They must be of the
- form <code>YYYYMMDD,series1,series2,...</code>. If you're specifying the
- names of each data series in the CSV file itself, make sure that you pass
- <code>null</code> as the third parameter to the DateGraph constructor to let
- the library know that. And if you set the <code>errorBars</code> property,
- make sure you alternate data series and standard deviations.</li>
-
- <li>dygraphs are not happy when placed inside a <code><center></code>
- tag. This applies to the CSS <code>text-align</code> property as well. If you
- want to center a DateGraph, put it inside a table with "align=center"
- set.</li>
-
- <li>If you specify the <code>colors</code> property or name the data series
- using the third parameter of the DateGraph constructor, make sure the number
- of data series agree in all places: <code>colors</code>, third parameter and
- in each line of the CSV file itself.</li>
-
- <li>Don't set the <code>dateWindow</code> property to a date. It expects
- milliseconds since epoch, which can be obtained from a JavaScript Date
- object's valueOf method.</li>
-</ul>
-
-<p><font size=-1>Created May 9, 2008 by <a href=mailto:danvdk@gmail.com>Dan Vanderkam</a></font></p>
+ return chart;
+}-*/;
+</pre>
+
+ <a name="gallery" />
+ <h2>Usage Gallery</h2>
+ <p>Since its public release in late 2009, dygraphs has found many users
+ across the web. This is a small collection of the uses that we know about.
+ If you're using dygraphs, please send <a
+ href="mailto:dan@dygraphs.com">Dan</a> a link and he'll add it to this
+ list.</p>
+
+ <p>dygraphs was originally developed at Google and has found wide use on
+ internal dashboards and servers there. There are also a few uses of
+ dygraphs on public Google products:</p>
+
+ <ul class='padded-list'>
+ <li><a href="http://www.google.com/trends/correlate/search?e=id:20xKcnNqHrk&t=weekly">Google Correlate</a><br/>
+ <span class="desc">Uses dygraphs for time series visualization. Mostly a standard configuration, with just a few tweaks to match Google style.</span></li>
+
+ <li><a href="http://www.google.com/trends/correlate/draw?p=us">Google Correlate - Search by Drawing</a><br/>
+ <span class="desc">This is a highly customized configuration which lets the user draw a time series. Based on <a href="tests/drawing.html">this demo</a>.</span></li>
+
+ <li><a href="https://www.google.com/latitude/b/0/history/manage">Google Latitude History Dashboard</a><br/>
+ <span class="desc">Uses mouse interaction callbacks to synchronize time series points with markers on a Google Map.</span></li>
+ </ul>
+
+ <p>dygraphs has also found use in other organizations:</p>
+
+ <ul class='padded-list'>
+ <li><a href="http://toolserver.org/~dartar/moodbar/">Wikimedia Foundation - Moodbar data dashboard</a><br/>
+ <span class="desc">dygraphs is used internally at Wikimedia as a handy solution to monitor the
+ results of a bunch of small experiments.</span></li>
+
+ <li><a href="http://www.socib.es/jwebchart/?file=http://thredds.socib.es/thredds/dodsC/mooring/weather_station/mobims_calamillor-scb_met001/L1/dep0001_mobims-calamillor_scb-met001_L1_latest.nc">Jwebchart</a><br/>
+ <span class="desc">
+ jWebChart is a stand-alone and Thredds' embedded plotting system for
+ netCDF files. NetCDF is a common standard for the storage and
+ distribution of scientific data.
+ </span></li>
+
+ <li><a href="http://ngrams.cavorite.com/">n-gramas - Explore las tendencias en los artÃculos periodÃsticos de Colombia.</a><br/>
+
+
+ <span class="desc">(English: "Explore trends in newspaper articles of
+ Colombia"). dygraphs is used for displaying the results of this n-grams
+ viewer. Uses an extension for exporting the plots as PNG images
+ (<a href="http://cavorite.com/labs/js/dygraphs-export/">[1]</a>, <a href="https://github.com/cavorite/dygraphs">[2]</a>).
+ </span></li>
+
+ </ul>
+
+ <p>Are you using dygraphs? Please let <a href="mailto:dan@dygraphs.com">Dan</a> know and he'll add your link here!</p>
+
+
+ <h2 id="policy">Data Policy</h2>
+ <p>dygraphs is purely client-side JavaScript. It does not send your data to any servers – the data is processed entirely in the client's browser.</p>
+
+ <p style="font-size:0.8em">Created May 9, 2008 by <a href=mailto:danvdk@gmail.com>Dan Vanderkam</a></p>
+ </div>