-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>dygraphs per-series and per-axis options</title>
- <style type="text/css">
- code { white-space: pre; border: 1px dashed black; display: block; }
- pre { white-space: pre; border: 1px dashed black; }
- body { max-width: 800px; }
- </style>
- </head>
- <body>
- <h2>dygraphs per-series and per-axis options</h2>
-
- <p>When you create a Dygraph object, your code looks something like
- this:</p>
-
- <code>
- g = new Dygraph(document.getElementById("div"),
- <i>data</i>,
- { <i>options</i> });
- </code>
-
- <p>This document is about some of the values you can put in the
- <i>options</i> parameter.</p>
-
- <h3>per-series options</h3>
-
- <p>Typically, an option applies to the whole chart: if you set the
- strokeWidth option, it will apply to all data-series equally:</p>
-
- <code>
- g = new Dygraph(document.getElementById("div"),
- "X,Y1,Y2,Y3\n" +
- "1,2,3,4\n" +
- ...,
- {
- strokeWidth: 5
- });
- </code>
-
- <p>Some options, however, can be applied on a per-series or a per-axis
- basis. For instance, to set three different strokeWidths, you could
- write:</p>
-
- <code>
- g = new Dygraph(document.getElementById("div"),
- "X,Y1,Y2,Y3\n" +
- "1,2,3,4\n" +
- ...,
- {
- strokeWidth: 5, // default stroke width
- 'Y1': {
- strokeWidth: 3 // Y1 gets a special value.
- },
- 'Y3': {
- strokeWidth: 1 // so does Y3.
+<!--#include virtual="header.html" -->
+<h2>dygraphs per-series and per-axis options</h2>
+
+<p>When you create a Dygraph object, your code looks something like
+this:</p>
+
+<pre>
+ g = new Dygraph(document.getElementById("div"),
+ <i>data</i>,
+ { <i>options</i> });
+</pre>
+
+<p>This document is about some of the values you can put in the
+<i>options</i> parameter.</p>
+
+<h3>per-series options</h3>
+
+<p>Typically, an option applies to the whole chart: if you set the
+strokeWidth option, it will apply to all data-series equally:</p>
+
+<pre>
+ g = new Dygraph(document.getElementById("div"),
+ "X,Y1,Y2,Y3\n" +
+ "1,2,3,4\n" +
+ ...,
+ {
+ strokeWidth: 5
+ });
+</pre>
+
+<p>Some options, however, can be applied on a per-series or a per-axis
+basis. For instance, to set three different strokeWidths, you could
+write:</p>
+
+<pre>
+ g = new Dygraph(document.getElementById("div"),
+ "X,Y1,Y2,Y3\n" +
+ "1,2,3,4\n" +
+ ...,
+ {
+ strokeWidth: 5, // default stroke width
+ series: {
+ Y1: {
+ strokeWidth: 3 // Y1 gets a special value.
+ },
+ Y3: {
+ strokeWidth: 1 // so does Y3.
+ }
+ }
+ });
+</pre>
+
+<p>The result of these options is that Y1 will have a strokeWidth of 1, Y2 will have a strokeWidth of 5 and Y3 will have a strokeWidth of 1. You can see a demonstration of this <a href='tests/per-series.html'>here</a>.</p>
+
+<h3>per-axis options</h3>
+
+<p>Some options make more sense when applied to an entire axis, rather than to individual series. For instance, the axisLabelFormatter option lets you specify a function for format the labels on axis tick marks for display. You might want one function for the x-axis and another one for the y-axis.</p>
+
+<p>Here's how you can do that:</p>
+
+<pre>
+ g = new Dygraph(document.getElementById("div"),
+ "X,Y1,Y2,Y3\n" +
+ "1,2,3,4\n" +
+ ...,
+ {
+ axes: {
+ x: {
+ axisLabelFormatter: function(x) {
+ return 'x' + x;
}
- });
- </code>
-
- <p>The result of these options is that Y1 will have a strokeWidth of 1, Y2 will have a strokeWidth of 5 and Y3 will have a strokeWidth of 1. You can see a demonstration of this <a href='tests/per-series.html'>here</a>.</p>
-
- <h3>per-axis options</h3>
-
- <p>Some options make more sense when applied to an entire axis, rather than to individual series. For instance, the axisLabelFormatter option lets you specify a function for format the labels on axis tick marks for display. You might want one function for the x-axis and another one for the y-axis.</p>
-
- <p>Here's how you can do that:</p>
-
- <code>
- g = new Dygraph(document.getElementById("div"),
- "X,Y1,Y2,Y3\n" +
- "1,2,3,4\n" +
- ...,
- {
- axes: {
- x: {
- axisLabelFormatter: function(x) {
- return 'x' + x;
- }
- },
- y: {
- axisLabelFormatter: function(y) {
- return 'y' + y;
- }
- }
+ },
+ y: {
+ axisLabelFormatter: function(y) {
+ return 'y' + y;
}
- });
- </code>
-
- <p>The keys in the 'axes' option are always 'x', 'y' and, if you have a
- secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
- top level, it will apply to all axes.</p>
-
- <p>To see this in practice, check out the <a
- href="tests/two-axes.html">two-axes</a> test.</p>
-
- <!-- Google Analytics -->
-<script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-769809-2']);
- _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-</script>
- </body>
-</html>
+ }
+ }
+ });
+</pre>
+
+<p>The keys in the 'axes' option are always 'x', 'y' and, if you have a
+secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
+top level, it will apply to all axes.</p>
+
+<p>To see this in practice, check out the <a
+href="tests/two-axes.html">two-axes</a> test.</p>
+
+<!--#include virtual="footer.html" -->
projects / dygraphs.git / blobdiff