Document the value of `this`.
[dygraphs.git] / docs / per-axis.html
CommitLineData
14403441
DV
1<!--#include virtual="header.html" -->
2<h2>dygraphs per-series and per-axis options</h2>
3
4<p>When you create a Dygraph object, your code looks something like
5this:</p>
6
7<pre>
8 g = new Dygraph(document.getElementById("div"),
9 <i>data</i>,
10 { <i>options</i> });
11</pre>
12
13<p>This document is about some of the values you can put in the
14<i>options</i> parameter.</p>
15
16<h3>per-series options</h3>
17
18<p>Typically, an option applies to the whole chart: if you set the
19strokeWidth option, it will apply to all data-series equally:</p>
20
21<pre>
22 g = new Dygraph(document.getElementById("div"),
23 "X,Y1,Y2,Y3\n" +
24 "1,2,3,4\n" +
25 ...,
26 {
27 strokeWidth: 5
28 });
29</pre>
30
31<p>Some options, however, can be applied on a per-series or a per-axis
32basis. For instance, to set three different strokeWidths, you could
33write:</p>
34
35<pre>
36 g = new Dygraph(document.getElementById("div"),
37 "X,Y1,Y2,Y3\n" +
38 "1,2,3,4\n" +
39 ...,
40 {
41 strokeWidth: 5, // default stroke width
fd81b1d8
DV
42 series: {
43 Y1: {
44 strokeWidth: 3 // Y1 gets a special value.
45 },
46 Y3: {
47 strokeWidth: 1 // so does Y3.
48 }
14403441
DV
49 }
50 });
51</pre>
52
53<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>
54
55<h3>per-axis options</h3>
56
57<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>
58
59<p>Here's how you can do that:</p>
60
61<pre>
62 g = new Dygraph(document.getElementById("div"),
63 "X,Y1,Y2,Y3\n" +
64 "1,2,3,4\n" +
65 ...,
66 {
67 axes: {
68 x: {
69 axisLabelFormatter: function(x) {
70 return 'x' + x;
48e614ac 71 }
14403441
DV
72 },
73 y: {
74 axisLabelFormatter: function(y) {
75 return 'y' + y;
48e614ac 76 }
14403441
DV
77 }
78 }
79 });
80</pre>
81
82<p>The keys in the 'axes' option are always 'x', 'y' and, if you have a
83secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
84top level, it will apply to all axes.</p>
85
86<p>To see this in practice, check out the <a
87href="tests/two-axes.html">two-axes</a> test.</p>
88
89<!--#include virtual="footer.html" -->