EXAMPLE: added new example for fixed bug
[dygraphs.git] / tests / independent-series.html
... / ...
CommitLineData
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>Independent Series</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
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
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>
34 <h3>Independent Series</h3>
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
39 <div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
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>
47 <tr><td>4</td><td>6</td></tr>
48 <tr><td>6</td><td>4</td></tr>
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>
55 <tr><td>3</td><td>7</td></tr>
56 <tr><td>5</td><td>5</td></tr>
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,
683,,7
694,6,
705,,5
716,4,</pre>
72 </td>
73 <td valign=top style="padding-left: 25px;">
74 (native)
75 <pre>[
76[1, null, 3],
77[2, 2, null],
78[3, null, 7],
79[4, 6, null],
80[5, null, 5],
81[6, 4, null] ]</pre>
82 </td>
83 </tr></table>
84
85 <script type="text/javascript">
86 var g1 = new Dygraph(
87 document.getElementById("graph"),
88 [
89 [1, null, 3],
90 [2, 2, null],
91 [3, null, 7],
92 [4, 5, null],
93 [5, null, 5],
94 [6, 3, null]
95 ],
96 {
97 labels: ["x", "A", "B" ],
98 connectSeparatedPoints: true,
99 drawPoints: true
100 }
101 );
102 </script>
103
104 <h3>Behavior at the edges of the panel for independent series</h3>
105 <p> In case only a part of the whole data is visible (e.g. after zooming in) the lines are
106 drawn to the respective next valid point outside the visible area. </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>0</td><td>2</td></tr>
114 <tr><td>1</td><td>3</td></tr>
115 <tr><td>2</td><td>3</td></tr>
116 <tr><td>4</td><td>4</td></tr>
117 <tr><td>5</td><td>3</td></tr>
118 <tr><td>6</td><td>3</td></tr>
119 <tr><td>7</td><td>3</td></tr>
120 <tr><td>8</td><td>4</td></tr>
121 </table>
122 </td>
123 <td valign=top style="padding-left:25px;">
124 <table class=thinborder>
125 <tr><th>x</th><th>B</th></tr>
126 <tr><td>0</td><td>1</td></tr>
127 <tr><td>1</td><td>2</td></tr>
128 <tr><td>2</td><td>1</td></tr>
129 <tr><td>8</td><td>2</td></tr>
130 </table>
131 </td>
132 </tr></table>
133
134 <div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
135 <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.
136 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>
137 <p>Use double click to unzoom and see the currently invisible points</p>
138
139 <script type="text/javascript">
140 g2 = new Dygraph(
141 document.getElementById("graph2"),
142"x,A,B \n" +
143"0,2,1 \n" +
144"1,3,2 \n" +
145"2,3,1 \n" +
146"3,, \n" +
147"4,4, \n" +
148"5,3, \n" +
149"6,3, \n" +
150"7,3, \n" +
151"8,4,2 \n"
152
153 , {
154 connectSeparatedPoints: true,
155 drawPoints: true,
156 pointSize: 3,
157 highlightCircleSize: 5,
158 dateWindow: [0,3]
159 }
160 );
161 </script>
162
163 <table><tr>
164 <td valign=top>
165 Index
166 <pre>&nbsp;
1670
1681
1692
1703
1714
1725
1736
1747
1758</pre>
176 </td>
177 <td valign=top>
178 (CSV)
179 <pre>x,A,B
1800,2,1
1811,3,2
1822,3,1
1833,,
1844,4,
1855,3,
1866,3,
1877,3,
1888,4,2</pre>
189 </td>
190 <td valign=top style="padding-left: 25px;">
191 (native)
192 <pre>[
193 [0, 2, 1],
194 [1, 3, 2],
195 [2, 3, 1],
196 [3, null, null],
197 [4, 4, null],
198 [5, 3, null],
199 [6, 3, null],
200 [7, 3, null],
201 [8, 4, 2] ]</pre>
202 </td>
203 </tr></table>
204
205 <h3>Encoding a gap</h3>
206 <p>There's one extra wrinkle. What if one of the series has a missing
207 value, i.e. what if your series are something like </p>
208
209 <table><tr>
210 <td valign=top>
211 <table>
212 <table class=thinborder>
213 <tr><th>x</th><th>A</th></tr>
214 <tr><td>2</td><td>2</td></tr>
215 <tr><td>4</td><td>4</td></tr>
216 <tr><td>6</td><td>(gap)</td></tr>
217 <tr><td>8</td><td>8</td></tr>
218 <tr><td>10</td><td>10</td></tr>
219 </table>
220 </td>
221 <td valign=top style="padding-left:25px;">
222 <table class=thinborder>
223 <tr><th>x</th><th>B</th></tr>
224 <tr><td>1</td><td>3</td></tr>
225 <tr><td>3</td><td>5</td></tr>
226 <tr><td>5</td><td>7</td></tr>
227 </table>
228 </td>
229 </tr></table>
230
231 <div id="graph3" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
232 <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>
233
234 <script type="text/javascript">
235 g2 = new Dygraph(
236 document.getElementById("graph3"),
237"x,A,B \n" +
238"1,,3 \n" +
239"2,2, \n" +
240"3,,5 \n" +
241"4,4, \n" +
242"5,,7 \n" +
243"6,NaN, \n" +
244"8,8, \n" +
245"10,10, \n"
246 , {
247 connectSeparatedPoints: true,
248 drawPoints: true
249 }
250 );
251 </script>
252
253 <table><tr>
254 <td valign=top>
255 (CSV)
256 <pre>x,A,B
2571,,3
2582,2,
2593,,5
2604,4,
2615,,7
2626,NaN,
2638,8,
26410,10,</pre>
265 </td>
266 <td valign=top style="padding-left: 25px;">
267 (native)
268 <pre>[ [1, null, 3],
269 [2, 2, null],
270 [3, null, 5],
271 [4, 4, null],
272 [5, null, 7],
273 [6, NaN, null],
274 [8, 8, null],
275 [10, 10, null] ]</pre>
276 </td>
277 </tr></table>
278
279 </body>
280</html>