Commit | Line | Data |
---|---|---|
c1f22b5a RK |
1 | // Use this as a template for new Gallery entries. |
2 | Gallery.register( | |
3 | 'independent-series', | |
4 | { | |
5 | name: 'Independent Series', | |
6 | title: 'Independent Series', | |
7 | setup: function(parent) { | |
8 | parent.innerHTML = | |
9 | "<p>By using the <i>connectSeparated</i> attribute, it's possible to display a chart of several time series with completely independent x-values.</p> \ | |
10 | \ | |
11 | <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> \ | |
12 | \ | |
13 | <div id='graph' style='float: right; margin-right: 50px; width: 400px; height: 300px;'></div> \ | |
14 | <p>For example, say you had two series:</p> \ | |
15 | <table><tr> \ | |
16 | <td valign=top> \ | |
17 | <table> \ | |
18 | <table class='thinborder'> \ | |
19 | <tr><th>x</th><th>A</th></tr> \ | |
20 | <tr><td>2</td><td>2</td></tr> \ | |
21 | <tr><td>4</td><td>6</td></tr> \ | |
22 | <tr><td>6</td><td>4</td></tr> \ | |
23 | </table> \ | |
24 | </td> \ | |
25 | <td valign=top style='padding-left:25px;'> \ | |
26 | <table class='thinborder'> \ | |
27 | <tr><th>x</th><th>B</th></tr> \ | |
28 | <tr><td>1</td><td>3</td></tr> \ | |
29 | <tr><td>3</td><td>7</td></tr> \ | |
30 | <tr><td>5</td><td>5</td></tr> \ | |
31 | </table> \ | |
32 | </td> \ | |
33 | </tr></table> \ | |
34 | \ | |
35 | <p>Then you would specify the following CSV or native data:</p> \ | |
36 | <table><tr> \ | |
37 | <td valign=top> \ | |
38 | (CSV) \ | |
39 | <pre id='csv1'></pre> \ | |
40 | </td> \ | |
41 | <td valign=top style='padding-left: 25px;'>\ | |
42 | (native) \ | |
43 | <pre id='native1'></pre> \ | |
44 | </td> \ | |
45 | </tr></table> \ | |
46 | \ | |
47 | <h3>Encoding a gap</h3>\ | |
48 | <p>There's one extra wrinkle. What if one of the series has a missing \ | |
49 | value, i.e. what if your series are something like </p> \ | |
50 | \ | |
51 | <table><tr> \ | |
52 | <td valign=top> \ | |
53 | <table> \ | |
54 | <table class='thinborder'> \ | |
55 | <tr><th>x</th><th>A</th></tr> \ | |
56 | <tr><td>2</td><td>2</td></tr> \ | |
57 | <tr><td>4</td><td>4</td></tr> \ | |
58 | <tr><td>6</td><td>(gap)</td></tr> \ | |
59 | <tr><td>8</td><td>8</td></tr> \ | |
60 | <tr><td>10</td><td>10</td></tr> \ | |
61 | </table> \ | |
62 | </td> \ | |
63 | <td valign=top style='padding-left:25px;'> \ | |
64 | <table class='thinborder'> \ | |
65 | <tr><th>x</th><th>B</th></tr> \ | |
66 | <tr><td>1</td><td>3</td></tr> \ | |
67 | <tr><td>3</td><td>5</td></tr> \ | |
68 | <tr><td>5</td><td>7</td></tr> \ | |
69 | </table> \ | |
70 | </td> \ | |
71 | </tr></table> \ | |
72 | \ | |
73 | <div id='graph2' style='float: right; margin-right: 50px; width: 400px; height: 300px;'></div> \ | |
74 | <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> \ | |
75 | \ | |
76 | <table><tr> \ | |
77 | <td valign=top> \ | |
78 | (CSV) \ | |
79 | <pre id='csv2'></pre> \ | |
80 | </td> \ | |
81 | <td valign=top style='padding-left: 25px;'> \ | |
82 | (native) \ | |
83 | <pre id='native2'></pre> \ | |
84 | </td> \ | |
85 | </tr></table>" | |
86 | }, | |
87 | run: function() { | |
88 | document.getElementById("csv1").textContent = | |
89 | "X,A,B\n" + | |
90 | "1,,3\n" + | |
91 | "2,2,\n" + | |
92 | "3,,7\n" + | |
93 | "4,6,\n" + | |
94 | "5,,5\n" + | |
95 | "6,4,"; | |
96 | ||
97 | document.getElementById("native1").textContent = | |
98 | "[\n" + | |
99 | " [1, null, 3],\n" + | |
100 | " [2, 2, null],\n" + | |
101 | " [3, null, 7],\n" + | |
102 | " [4, 6, null],\n" + | |
103 | " [5, null, 5],\n" + | |
104 | " [6, 4, null]\n" + | |
105 | "]"; | |
106 | ||
107 | document.getElementById("csv2").textContent = | |
108 | "X,A,B\n" + | |
109 | "1,,3\n" + | |
110 | "2,2,\n" + | |
111 | "3,,5\n" + | |
112 | "4,4,\n" + | |
113 | "6,Nan,\n" + | |
114 | "8,8,\n" + | |
115 | "10,10,"; | |
116 | ||
117 | document.getElementById("native2").textContent = | |
118 | "[\n" + | |
119 | " [1, null, 3],\n" + | |
120 | " [2, 2, null],\n" + | |
121 | " [3, null, 5],\n" + | |
122 | " [4, 4, null],\n" + | |
123 | " [5, null, 7],\n" + | |
124 | " [6, NaN, null],\n" + | |
125 | " [8, 8, null]\n" + | |
126 | " [10, 10, null]\n" + | |
127 | "]"; | |
128 | ||
129 | var g1 = new Dygraph( | |
130 | document.getElementById('graph'), | |
131 | [ | |
132 | [1, null, 3], | |
133 | [2, 2, null], | |
134 | [3, null, 7], | |
135 | [4, 5, null], | |
136 | [5, null, 5], | |
137 | [6, 3, null] | |
138 | ], | |
139 | { | |
140 | labels: ['x', 'A', 'B' ], | |
141 | connectSeparatedPoints: true, | |
142 | drawPoints: true | |
143 | } | |
144 | ); | |
145 | ||
146 | g2 = new Dygraph( | |
147 | document.getElementById('graph2'), | |
148 | 'x,A,B \n' + | |
149 | '1,,3 \n' + | |
150 | '2,2, \n' + | |
151 | '3,,5 \n' + | |
152 | '4,4, \n' + | |
153 | '5,,7 \n' + | |
154 | '6,NaN, \n' + | |
155 | '8,8, \n' + | |
156 | '10,10, \n' | |
157 | , { | |
158 | labels: ['x', 'A', 'B' ], | |
159 | connectSeparatedPoints: true, | |
160 | drawPoints: true | |
161 | } | |
162 | ); | |
163 | } | |
164 | }); | |
165 |