Merge remote-tracking branch 'danvk/292-squash' into utc_datetime_labels-issue_498-v2
[dygraphs.git] / gallery / independent-series.js
CommitLineData
e88a95b4 1/*global Gallery,Dygraph,data */
c1f22b5a
RK
2Gallery.register(
3 'independent-series',
4 {
5 name: 'Independent Series',
6 title: 'Independent Series',
7 setup: function(parent) {
605b6119
RK
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>"].join("\n");
c1f22b5a
RK
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
e88a95b4 129 new Dygraph(
c1f22b5a
RK
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
e88a95b4 146 new Dygraph(
c1f22b5a 147 document.getElementById('graph2'),
e1e80cce
DV
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 {
c1f22b5a
RK
158 labels: ['x', 'A', 'B' ],
159 connectSeparatedPoints: true,
160 drawPoints: true
161 }
162 );
163 }
164 });
165