Add comments including the tracking bug for the label format options not used on...
[dygraphs.git] / tests / independent-series.html
CommitLineData
54425b14 1<!DOCTYPE html>
75c589da
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
75c589da
DV
5 <title>Independent Series</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
7e5ddc94
DV
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
75c589da
DV
15 <style type="text/css">
16 .thinborder {
17 border-width: 1px;
18 border-spacing: 0px;
19 border-style: solid;
20 border-color: black;
21 border-collapse: collapse;
22 }
23
24 .thinborder td,
25 .thinborder th {
26 border-width: 1px;
27 padding: 5px;
28 border-style: solid;
29 border-color: black;
30 }
31 </style>
32 </head>
33 <body>
7219edb3 34 <h3>Independent Series</h3>
75c589da
DV
35 <p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.</p>
36
37 <p>The trick is to specify values for the series at the union of the x-values of all series. For one series' x values, specify <code>null</code> for each of the other series.</p>
38
c6a0ebba 39 <div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
75c589da
DV
40 <p>For example, say you had two series:</p>
41 <table><tr>
42 <td valign=top>
43 <table>
44 <table class=thinborder>
45 <tr><th>x</th><th>A</th></tr>
46 <tr><td>2</td><td>2</td></tr>
c6a0ebba
DV
47 <tr><td>4</td><td>6</td></tr>
48 <tr><td>6</td><td>4</td></tr>
75c589da
DV
49 </table>
50 </td>
51 <td valign=top style="padding-left:25px;">
52 <table class=thinborder>
53 <tr><th>x</th><th>B</th></tr>
54 <tr><td>1</td><td>3</td></tr>
c6a0ebba
DV
55 <tr><td>3</td><td>7</td></tr>
56 <tr><td>5</td><td>5</td></tr>
75c589da
DV
57 </table>
58 </td>
59 </tr></table>
60
61 <p>Then you would specify the following CSV or native data:</p>
62 <table><tr>
63 <td valign=top>
64 (CSV)
65 <pre>X,A,B
661,,3
672,2,
c6a0ebba
DV
683,,7
694,6,
705,,5
716,4,</pre>
75c589da
DV
72 </td>
73 <td valign=top style="padding-left: 25px;">
74 (native)
75 <pre>[
76[1, null, 3],
77[2, 2, null],
c6a0ebba
DV
78[3, null, 7],
79[4, 6, null],
80[5, null, 5],
81[6, 4, null] ]</pre>
75c589da
DV
82 </td>
83 </tr></table>
84
85 <script type="text/javascript">
f6fbf9e0 86 var g1 = new Dygraph(
75c589da
DV
87 document.getElementById("graph"),
88 [
89 [1, null, 3],
90 [2, 2, null],
c6a0ebba
DV
91 [3, null, 7],
92 [4, 5, null],
93 [5, null, 5],
94 [6, 3, null]
75c589da
DV
95 ],
96 {
97 labels: ["x", "A", "B" ],
c6a0ebba
DV
98 connectSeparatedPoints: true,
99 drawPoints: true
75c589da
DV
100 }
101 );
102 </script>
103
141064ff
DE
104 <h3>Encoding a gap</h3>
105 <p>There's one extra wrinkle. What if one of the series has a missing
106 value, i.e. what if your series are something like </p>
107
108 <table><tr>
109 <td valign=top>
110 <table>
111 <table class=thinborder>
112 <tr><th>x</th><th>A</th></tr>
113 <tr><td>2</td><td>2</td></tr>
114 <tr><td>4</td><td>4</td></tr>
115 <tr><td>6</td><td>(gap)</td></tr>
116 <tr><td>8</td><td>8</td></tr>
117 <tr><td>10</td><td>10</td></tr>
118 </table>
119 </td>
120 <td valign=top style="padding-left:25px;">
121 <table class=thinborder>
122 <tr><th>x</th><th>B</th></tr>
123 <tr><td>1</td><td>3</td></tr>
124 <tr><td>3</td><td>5</td></tr>
125 <tr><td>5</td><td>7</td></tr>
126 </table>
127 </td>
128 </tr></table>
129
130 <div id="graph3" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
131 <p>The gap would normally be encoded as a null, or missing value. But when you use <code>connectSeparatedPoints</code>, that has a special meaning. Instead, you have to use <code>NaN</code>. This is a bit of a hack, but it gets the job done.</p>
132
133 <script type="text/javascript">
134 g2 = new Dygraph(
135 document.getElementById("graph3"),
136"x,A,B \n" +
137"1,,3 \n" +
138"2,2, \n" +
139"3,,5 \n" +
140"4,4, \n" +
141"5,,7 \n" +
142"6,NaN, \n" +
143"8,8, \n" +
144"10,10, \n"
145 , {
146 connectSeparatedPoints: true,
147 drawPoints: true
148 }
149 );
150 </script>
151
152 <table><tr>
153 <td valign=top>
154 (CSV)
155 <pre>x,A,B
1561,,3
1572,2,
1583,,5
1594,4,
1605,,7
1616,NaN,
1628,8,
16310,10,</pre>
164 </td>
165 <td valign=top style="padding-left: 25px;">
166 (native)
167 <pre>[ [1, null, 3],
168 [2, 2, null],
169 [3, null, 5],
170 [4, 4, null],
171 [5, null, 7],
172 [6, NaN, null],
173 [8, 8, null],
174 [10, 10, null] ]</pre>
175 </td>
176 </tr></table>
177
1ef9d2f7 178 <h3>Behavior at the edges of the panel for independent series</h3>
179 <p> In case only a part of the whole data is visible (e.g. after zooming in) the lines are
180 drawn to the respective next valid point outside the visible area. </p>
181
182 <table><tr>
183 <td valign=top>
184 <table>
185 <table class=thinborder>
186 <tr><th>x</th><th>A</th></tr>
187 <tr><td>0</td><td>2</td></tr>
188 <tr><td>1</td><td>3</td></tr>
189 <tr><td>2</td><td>3</td></tr>
190 <tr><td>4</td><td>4</td></tr>
191 <tr><td>5</td><td>3</td></tr>
192 <tr><td>6</td><td>3</td></tr>
193 <tr><td>7</td><td>3</td></tr>
194 <tr><td>8</td><td>4</td></tr>
195 </table>
196 </td>
197 <td valign=top style="padding-left:25px;">
198 <table class=thinborder>
199 <tr><th>x</th><th>B</th></tr>
200 <tr><td>0</td><td>1</td></tr>
201 <tr><td>1</td><td>2</td></tr>
202 <tr><td>2</td><td>1</td></tr>
203 <tr><td>8</td><td>2</td></tr>
204 </table>
205 </td>
206 </tr></table>
207
208 <div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
209 <p>Both graphs have no value at the right edge of the panel (x=3). The lines that are drawn to the right edge are determined by their respective next valid value outside the visible area.
210 Therefore it is neither necessary that the next valid values are on the same point nor that they have the same index (index 4 for the green line and index 8 for the blue line).</p>
211 <p>Use double click to unzoom and see the currently invisible points</p>
212
213 <script type="text/javascript">
214 g2 = new Dygraph(
215 document.getElementById("graph2"),
216"x,A,B \n" +
217"0,2,1 \n" +
218"1,3,2 \n" +
219"2,3,1 \n" +
220"3,, \n" +
221"4,4, \n" +
222"5,3, \n" +
223"6,3, \n" +
224"7,3, \n" +
225"8,4,2 \n"
226
227 , {
228 connectSeparatedPoints: true,
229 drawPoints: true,
230 pointSize: 3,
231 highlightCircleSize: 5,
232 dateWindow: [0,3]
233 }
234 );
235 </script>
236
237 <table><tr>
238 <td valign=top>
239 Index
240 <pre>&nbsp;
2410
2421
2432
2443
2454
2465
2476
2487
2498</pre>
250 </td>
251 <td valign=top>
252 (CSV)
253 <pre>x,A,B
2540,2,1
2551,3,2
2562,3,1
2573,,
2584,4,
2595,3,
2606,3,
2617,3,
2628,4,2</pre>
263 </td>
264 <td valign=top style="padding-left: 25px;">
265 (native)
266 <pre>[
267 [0, 2, 1],
268 [1, 3, 2],
269 [2, 3, 1],
270 [3, null, null],
271 [4, 4, null],
272 [5, 3, null],
273 [6, 3, null],
274 [7, 3, null],
275 [8, 4, 2] ]</pre>
276 </td>
277 </tr></table>
c6a0ebba 278
75c589da
DV
279 </body>
280</html>