fix gviz-numeric test
[dygraphs.git] / tests / independent-series.html
CommitLineData
75c589da
DV
1<html>
2 <head>
3 <title>Independent Series</title>
4 <!--[if IE]>
5 <script type="text/javascript" src="../excanvas.js"></script>
6 <![endif]-->
7 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
8 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
9 <script type="text/javascript" src="../dygraph-canvas.js"></script>
10 <script type="text/javascript" src="../dygraph.js"></script>
11 <style type="text/css">
12 .thinborder {
13 border-width: 1px;
14 border-spacing: 0px;
15 border-style: solid;
16 border-color: black;
17 border-collapse: collapse;
18 }
19
20 .thinborder td,
21 .thinborder th {
22 border-width: 1px;
23 padding: 5px;
24 border-style: solid;
25 border-color: black;
26 }
27 </style>
28 </head>
29 <body>
7219edb3 30 <h3>Independent Series</h3>
75c589da
DV
31 <p>By using the connectSeparated attribute, it's possible to display a chart of several time series with completely independent x-values.</p>
32
33 <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>
34
c6a0ebba 35 <div id="graph" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
75c589da
DV
36 <p>For example, say you had two series:</p>
37 <table><tr>
38 <td valign=top>
39 <table>
40 <table class=thinborder>
41 <tr><th>x</th><th>A</th></tr>
42 <tr><td>2</td><td>2</td></tr>
c6a0ebba
DV
43 <tr><td>4</td><td>6</td></tr>
44 <tr><td>6</td><td>4</td></tr>
75c589da
DV
45 </table>
46 </td>
47 <td valign=top style="padding-left:25px;">
48 <table class=thinborder>
49 <tr><th>x</th><th>B</th></tr>
50 <tr><td>1</td><td>3</td></tr>
c6a0ebba
DV
51 <tr><td>3</td><td>7</td></tr>
52 <tr><td>5</td><td>5</td></tr>
75c589da
DV
53 </table>
54 </td>
55 </tr></table>
56
57 <p>Then you would specify the following CSV or native data:</p>
58 <table><tr>
59 <td valign=top>
60 (CSV)
61 <pre>X,A,B
621,,3
632,2,
c6a0ebba
DV
643,,7
654,6,
665,,5
676,4,</pre>
75c589da
DV
68 </td>
69 <td valign=top style="padding-left: 25px;">
70 (native)
71 <pre>[
72[1, null, 3],
73[2, 2, null],
c6a0ebba
DV
74[3, null, 7],
75[4, 6, null],
76[5, null, 5],
77[6, 4, null] ]</pre>
75c589da
DV
78 </td>
79 </tr></table>
80
81 <script type="text/javascript">
82 new Dygraph(
83 document.getElementById("graph"),
84 [
85 [1, null, 3],
86 [2, 2, null],
c6a0ebba
DV
87 [3, null, 7],
88 [4, 5, null],
89 [5, null, 5],
90 [6, 3, null]
75c589da
DV
91 ],
92 {
93 labels: ["x", "A", "B" ],
c6a0ebba
DV
94 connectSeparatedPoints: true,
95 drawPoints: true
75c589da
DV
96 }
97 );
98 </script>
99
c6a0ebba
DV
100 <h3>Encoding a gap</h3>
101 <p>There's one extra wrinkle. What if one of the series has a missing
102 value, i.e. what if your series are something like </p>
75c589da
DV
103
104 <table><tr>
105 <td valign=top>
106 <table>
107 <table class=thinborder>
108 <tr><th>x</th><th>A</th></tr>
109 <tr><td>2</td><td>2</td></tr>
110 <tr><td>4</td><td>4</td></tr>
111 <tr><td>6</td><td>(gap)</td></tr>
112 <tr><td>8</td><td>8</td></tr>
113 <tr><td>10</td><td>10</td></tr>
114 </table>
115 </td>
116 <td valign=top style="padding-left:25px;">
117 <table class=thinborder>
118 <tr><th>x</th><th>B</th></tr>
119 <tr><td>1</td><td>3</td></tr>
120 <tr><td>3</td><td>5</td></tr>
121 <tr><td>5</td><td>7</td></tr>
122 </table>
123 </td>
124 </tr></table>
125
c6a0ebba 126 <div id="graph2" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
75c589da
DV
127 <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>
128
129 <script type="text/javascript">
876cc77c 130 g2 = new Dygraph(
75c589da 131 document.getElementById("graph2"),
c6a0ebba
DV
132"x,A,B \n" +
133"1,,3 \n" +
134"2,2, \n" +
135"3,,5 \n" +
136"4,4, \n" +
137"5,,7 \n" +
138"6,NaN, \n" +
139"8,8, \n" +
140"10,10, \n"
141 , {
75c589da 142 labels: ["x", "A", "B" ],
c6a0ebba
DV
143 connectSeparatedPoints: true,
144 drawPoints: true
75c589da
DV
145 }
146 );
147 </script>
148
c6a0ebba
DV
149 <table><tr>
150 <td valign=top>
151 (CSV)
152 <pre>x,A,B
1531,,3
1542,2,
1553,,5
1564,4,
1575,,7
1586,NaN,
1598,8,
16010,10,</pre>
161 </td>
162 <td valign=top style="padding-left: 25px;">
163 (native)
164 <pre>[ [1, null, 3],
165 [2, 2, null],
166 [3, null, 5],
167 [4, 4, null],
168 [5, null, 7],
169 [6, NaN, null],
170 [8, 8, null],
171 [10, 10, null] ]</pre>
172 </td>
173 </tr></table>
174
75c589da
DV
175 </body>
176</html>