- <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="900">
- <thead>
- <tr>
- <th width="150">Name</th>
- <th width="200">Values</th>
- <th width="150">Default</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><strong>includeZero</strong></td>
- <td><code>boolean</code></td>
- <td><code>false</code></td>
- <td>Usually, dygraphs will use the range of the data plus some padding to set the range of the y-axis. If this option is set, the y-axis will always include zero, typically as the lowest value. This can be used to avoid exaggerating the variance in the data.
- <div class="tests">Tests: no-range numeric-gviz small-range-zero</div>
- </td>
- </tr>
- <tr>
- <td><strong>rollPeriod</strong></td>
- <td><code>integer >= 1</code></td>
- <td><code>1</code></td>
- <td>Number of days over which to average data. Discussed extensively above.
- <div class="tests">Tests: demo two-series noise</div>
- </td>
- </tr>
- <tr>
- <td><strong>showRoller</strong></td>
- <td><code>boolean</code></td>
- <td><code>false</code></td>
- <td>If the rolling average period text box should be shown.
- <div class="tests">Tests: callback crosshair fractions isolated-points numeric-gviz underlay-callback</div>
- </td>
- </tr>
- <tr>
- <td><strong>colors</strong></td>
- <td><code>['red', '#00FF00']</code></td>
- <td><code></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.
- <div class="tests">Tests: color-visibility demo</div>
- </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.
- <div class="tests">Tests: fillGraph</div>
- </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.
- <div class="tests">Tests: visibility color-visibility</div>
- </td>
- </tr>
- <tr>
- <td><strong>colorSaturation</strong></td>
- <td><code>0.0 - 1.0</code></td>
- <td><code>1.0</code></td>
- <td>If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors.
- <div class="tests">Tests: <font color=red>none</font></div>
- </td>
- </tr>
- <tr>
- <td><strong>colorValue</strong></td>
- <td><code>float (0.0 — 1.0)</code></td>
- <td><code>1.0</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)
- <div class="tests">Tests: <font color=red>none</font></div>
- </td>
- </tr>
- <tr>
- <td><strong>clickCallback</strong></td>
- <td><code>function(e, date){<br> alert(date);<br>}</code></td>
- <td><code>null</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)
- <div class="tests">Tests: callback</div>
- </td>
- </tr>
- <tr>
- <td><strong>zoomCallback</strong></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.
- <div class="tests">Tests: callback</div>
- </td>
- </tr>
- <tr>
- <td><strong>strokeWidth</strong></td>
- <td><code>integer</code></td>
- <td><code>1</code></td>
- <td>Width of the data lines. This can be used to increase the contrast or some graphs.
- <div class="tests">Tests: <font color=red>none</font></div>
- </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<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.
- <div class="tests">Tests: dateWindow link-interaction</div>
- </td>
- </tr>
- <tr>
- <td><strong>valueRange</strong></td>
- <td><code>[10, 110]</code></td>
- <td>Explicitly set the vertical range of the graph to [low, high].
- <div class="tests">Tests: <font color=red>none</font></div>
- </td>
- </tr>
- <tr>
- <td><strong>labelsSeparateLines</strong></td>
- <td><code>boolean</code></td>
- <td><code>false</code></td>
- <td>Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>.
- <div class="tests">Tests: customLabel demo</div>
- </td>
- </tr>
- <tr>
- <td><strong>labelsDiv</strong></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.
- <div class="tests">Tests: demo label-div</div>
- </td>
- </tr>
- <tr>
- <td><strong>labelsKMB</strong></td>
- <td><code>true</code></td>
- <td><code>false</code></td>
- <td>Show K/M/B for thousands/millions/billions on y-axis.
- <div class="tests">Tests: demo labelsKMB no-range</div>
- </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.
- <div class="tests">Tests: labelsKMB</div>
- </td>
- </tr>
- <tr>
- <td><strong>labelsDivWidth</strong></td>
- <td><code>250</code></td>
- <td><code></code></td>
- <td>Width (in pixels) of the div which shows information on the currently-highlighted points.
- <div class="tests">Tests: customLabel</div>
- </td>
- </tr>
- <tr>
- <td><strong>labelsDivStyles</strong></td>
- <td><code>{}</code></td>
- <td><code>null</code></td>
- <td>Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold.
- <div class="tests">Tests: border customLabel</div>
- </td>
- </tr>
- <tr>
- <td><strong>highlightCircleSize</strong></td>
- <td><code>integer</code></td>
- <td><code>3</code></td>
- <td>The size in pixels of the dot drawn over highlighted points.
- <div class="tests">Tests: grid_dot</div>
- </td>
- </tr>
- <tr>
- <td><strong>drawPoints</strong></td>
- <td><code>boolean</code></td>
- <td><code>false</code></td>
- <td>Draw a small dot at each point, in addition to a line going through the point. This makes the individual data points easier to see, but can increase visual clutter in the chart.
- <div class="tests">Tests: draw-points</div>
- </td>
- </tr>
- <tr>
- <td><strong>pointSize</strong></td>
- <td><code>interger</code></td>
- <td><code>1</code></td>
- <td>The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is "isolated", i.e. there is a missing point on either side of it. This also controls the size of those dots.
- <div class="tests">Tests: <font color=red>none</font></div>
- </td>
- </tr>
- <tr>
- <td><strong>pixelsPerXLabel</strong></td>
- <td rowspan="2"><code>integer</code></td>
- <td><code>60</code></td>
- <td rowspan="2">Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks.
- <div class="tests">Tests: spacing</div>
- </td>
- </tr>
- <tr>
- <td><strong>pixelsPerYLabel</strong></td>
- <td><code>30</code></td>
- </tr>
- <tr>
- <td><strong>xAxisLabelWidth</strong></td>
- <td rowspan="2"><code>integer</code></td>
- <td><code></code></td>
- <td rowspan="2">Width (in pixels) of the x- and y-axis labels.
- <div class="tests">Tests: customLabel</div>
- </td>
- </tr>
- <tr>
- <td><strong>yAxisLabelWidth</strong></td>
- <td><code></code></td>
- </tr>
- <tr>
- <td><strong>axisLabelFontSize</strong></td>
- <td><code>integer</code></td>
- <td><code>14</code></td>
- <td>Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
- <div class="tests">Tests: <font color=red>none</font></div>
- </td>
- </tr>
- <tr>
- <td><strong>rightGap</strong></td>
- <td><code>integer</code></td>
- <td><code></code></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.
- <div class="tests">Tests: <font color=red>none</font></div>
- </td>
- </tr>
- <tr>
- <td><strong>errorBars</strong></td>
- <td><code>boolean</code></td>
- <td><code>false</code></td>
- <td>Does the data contain standard deviations? Setting this to true alters the input format (see above).
- <div class="tests">Tests: noise customLabel draw-points fillGraph fractions</div>
- </td>
- </tr>
- <tr>
- <td><strong>sigma</strong></td>
- <td><code>integer</code></td>
- <td><code></code></td>
- <td>When errorBars is set, shade this many standard deviations above/below each point.
- <div class="tests">Tests: <font color=red>none</font></div>
- </td>
- </tr>
- <tr>
- <td><strong>fractions</strong></td>
- <td><code>boolean</code></td>
- <td><code>false</code></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).
- <div class="tests">Tests: fractions</div>
- </td>
- </tr>
- <tr>
- <td><strong>wilsonInterval</strong></td>
- <td><code>boolean</code></td>
- <td><code>true</code></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.
- <div class="tests">Tests: <font color=red>none</font></div>
- </td>
- </tr>
- <tr>
- <td><strong>customBars</strong></td>
- <td><code>boolean</code></td>
- <td><code>false</code></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.
- <div class="tests">Tests: custom-bars zero-series</div>
- </td>
- </tr>
- </tbody>
- </table>