-<h2>Other Options</h2>
-<p>These are the options that can be passed in through the optional third parameter of the Dygraph constructor. To see demonstrations of many of these options, browse the <a href="tests/">dygraphs tests</a> directory.</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>zoomCallback</b></td>
- <td><code>function(minDate,maxDate) {}</code></td>
- <td>A function to call when the zoom window is changed (either by zooming
- in or out). minDate and maxDate are millis since epoch.</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>[Date.parse('2006-01-01'),<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>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>labelsDivWidth</b></td>
- <td>250</td>
- <td>Width (in pixels) of the div which shows information on the
- currently-highlighted points.</td>
- </tr>
-
- <tr>
- <td><b>labelsDivStyles</b></td>
- <td>{}</td>
- <td>Additional styles to apply to the currently-highlighted points div. For
- example, { 'font-weigth': 'bold' } will make the labels bold.</td>
- </tr>
-
- <tr>
- <td><b>highlightCircleSize</b></td>
- <td><code>3</code></td>
- <td>Size (in pixels) of the dot drawn over highlighted points (default 3).</td>
- </tr>
-
- <tr>
- <td><b>pixelsPerXLabel</b>, <b>pixelsPerYLabel</b></td>
- <td>50</td>
- <td>Number of pixels to require between each x- and y-label. Larger values
- will yield a sparser axis with fewer ticks. Defaults: 60 (x-axis), 30
- (y-axis).</td>
- </tr>
-
- <tr>
- <td><b>xAxisLabelWidth</b>, <b>yAxisLabelWidth</b></td>
- <td>50</td>
- <td>Width (in pixels) of the x- and y-axis labels.</td>
- </tr>
-
- <tr>
- <td><b>axisLabelFontSize</b></td>
- <td>14</td>
- <td>Size of the font (in pixels) to use in the axis labels, both x- and
- y-axis.</td>
- </tr>
-
- <tr>
- <td><b>rightGap</b></td>
- <td>5</td>
- <td>Number of pixels to leave blank at the right edge of the Dygraph. This
- makes it easier to highlight the right-most data point.</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>sigma</b></td>
- <td>2</td>
- <td>When errorBars is set, shade this many standard deviations above/below
- each point.</td>
- </tr>
-
- <tr>
- <td><b>fractions</b></td>
- <td>false</td>
- <td>When set, attempt to parse each cell in the CSV file as "a/b", where a
- and b are integers. The ratio will be plotted. This allows computation of
- Wilson confidence intervals (see below).</td>
- </tr>
-
- <tr>
- <td><b>wilsonInterval</b></td>
- <td>true</td>
- <td>Use in conjunction with the "fractions" option. Instead of plotting +/-
- N standard deviations, dygraphs will compute a Wilson confidence interval
- and plot that. This has more reasonable behavior for ratios close to 0 or
- 1.</td>
- </tr>
-
- <tr>
- <td><b>customBars</b></td>
- <td>false</td>
- <td>When set, parse each CSV cell as "low;middle;high". Error bars will be
- drawn for each point between low and high, with the series itself going
- through middle.</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. dygraphs 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>. 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 Dygraph, put it inside a table with "align=center"
- set.</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>