Merge
[dygraphs.git] / auto_tests / tests / stacked.js
CommitLineData
890e2a37
DV
1/**
2 * @fileoverview Tests using the "stackedGraph" option.
3 *
4 * @author dan@dygraphs.com (Dan Vanderkam)
5 */
6var stackedTestCase = TestCase("stacked");
7
30a5cfc6
KW
8stackedTestCase._origGetContext = Dygraph.getContext;
9
890e2a37
DV
10stackedTestCase.prototype.setUp = function() {
11 document.body.innerHTML = "<div id='graph'></div>";
30a5cfc6
KW
12 Dygraph.getContext = function(canvas) {
13 return new Proxy(stackedTestCase._origGetContext(canvas));
14 }
890e2a37
DV
15};
16
17stackedTestCase.prototype.tearDown = function() {
30a5cfc6 18 Dygraph.getContext = stackedTestCase._origGetContext;
890e2a37
DV
19};
20
21stackedTestCase.prototype.testCorrectColors = function() {
22 var opts = {
23 width: 400,
24 height: 300,
25 stackedGraph: true,
26 drawXGrid: false,
27 drawYGrid: false,
28 drawXAxis: false,
29 drawYAxis: false,
30 valueRange: [0, 3],
31 colors: ['#00ff00', '#0000ff'],
32 fillAlpha: 0.15
33 };
34 var data = "X,Y1,Y2\n" +
35 "0,1,1\n" +
36 "1,1,1\n" +
37 "2,1,1\n" +
38 "3,1,1\n"
39 ;
40
41 var graph = document.getElementById("graph");
42 var g = new Dygraph(graph, data, opts);
43
44 // y pixels 299-201 = y2 = transparent blue
45 // y pixel 200 = y2 line (blue)
46 // y pixels 199-101 = y1 = transparent green
47 // y pixel 100 = y1 line (green)
48 // y pixels 0-99 = nothing (white)
49
890e2a37 50 // 38 = round(0.15 * 255)
37819481
PH
51 assertEquals([0, 0, 255, 38], Util.samplePixel(g.hidden_, 200, 250));
52 assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 150));
890e2a37 53};
9b3d9459
DV
54
55// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=358
56stackedTestCase.prototype.testSelectionValues = function() {
57 var opts = {
58 stackedGraph: true
59 };
60 var data = "X,Y1,Y2\n" +
61 "0,1,1\n" +
62 "1,1,1\n" +
63 "2,1,1\n" +
64 "3,1,1\n"
65 ;
66
67 var graph = document.getElementById("graph");
68 g = new Dygraph(graph, data, opts);
69
70 g.setSelection(0);
71
79aabc9d 72 assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
9b3d9459
DV
73
74 // Verify that the behavior is correct with highlightSeriesOpts as well.
75 g.updateOptions({
76 highlightSeriesOpts: {
77 strokeWidth: 10
78 }
79 });
fa11f4e4
DV
80 g.setSelection(0);
81 assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
82
9b3d9459 83 g.setSelection(1);
79aabc9d 84 assertEquals("1: Y1: 1 Y2: 1", Util.getLegend());
9b3d9459
DV
85
86 g.setSelection(0, 'Y2');
79aabc9d 87 assertEquals("0: Y1: 1 Y2: 1", Util.getLegend());
9b3d9459 88};
12b879f4
DV
89
90// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=176
91stackedTestCase.prototype.testDuplicatedXValue = function() {
92 var opts = {
93 stackedGraph: true,
94 fillAlpha: 0.15,
95 colors: ['#00ff00'],
96 width: 400,
97 height: 300
98 };
99 var data = "X,Y1\n" +
100 "0,1\n" +
101 "1,1\n" +
102 "2,1\n" +
103 "2,1\n" + // duplicate x-value!
104 "3,1\n"
105 ;
106
107 var graph = document.getElementById("graph");
108 g = new Dygraph(graph, data, opts);
109
110 assert(g.yAxisRange()[1] < 2);
111
112 assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 200, 250));
113 assertEquals([0, 255, 0, 38], Util.samplePixel(g.hidden_, 317, 250));
114}
907121a8
VS
115
116// Validates regression when null values in stacked graphs show up
117// incorrectly in the legend.
118stackedTestCase.prototype.testNullValues = function() {
119 var opts = {
120 stackedGraph: true,
121 stepPlot:true
122 };
123 var data = "X,Y1,Y2,Y3\n" +
124 "0,-5,-1,1\n" +
125 "1,1,,1\n" +
126 "2,1,2,3\n" +
127 "3,3,,4\n" +
128 "4,3,2,3\n"
129 ;
130
131 var graph = document.getElementById("graph");
132 g = new Dygraph(graph, data, opts);
133
134 g.setSelection(0);
135 assertEquals("0: Y1: -5 Y2: -1 Y3: 1", Util.getLegend());
136
137 g.setSelection(1);
138 assertEquals("1: Y1: 1 Y3: 1", Util.getLegend());
139
140 g.setSelection(2);
141 assertEquals("2: Y1: 1 Y2: 2 Y3: 3", Util.getLegend());
142
143 g.setSelection(3);
144 assertEquals("3: Y1: 3 Y3: 4", Util.getLegend());
145
146 g.setSelection(4);
147 assertEquals("4: Y1: 3 Y2: 2 Y3: 3", Util.getLegend());
148};
cc87e270
VS
149
150// Regression test for http://code.google.com/p/dygraphs/issues/detail?id=438
151stackedTestCase.prototype.testMissingValueAtZero = function() {
152 var opts = {
153 stackedGraph: true
154 };
155 var data = "X,Y1,Y2\n" +
156 "0,,1\n" +
157 "1,1,2\n" +
158 "2,,3\n"
159 ;
160
161 var graph = document.getElementById("graph");
162 g = new Dygraph(graph, data, opts);
163
164 g.setSelection(0);
165 assertEquals("0: Y2: 1", Util.getLegend());
166
167 g.setSelection(1);
168 assertEquals("1: Y1: 1 Y2: 2", Util.getLegend());
169
170 g.setSelection(2);
171 assertEquals("2: Y2: 3", Util.getLegend());
172};
30a5cfc6
KW
173
174stackedTestCase.prototype.testInterpolation = function() {
175 var opts = {
176 colors: ['#ff0000', '#00ff00', '#0000ff'],
177 stackedGraph: true
178 };
179
180 // The last series is all-NaN, it ought to be treated as all zero
181 // for stacking purposes.
182 var N = NaN;
183 var data = [
184 [100, 1, 2, N, N],
185 [101, 1, 2, 2, N],
186 [102, 1, N, N, N],
187 [103, 1, 2, 4, N],
188 [104, N, N, N, N],
189 [105, 1, 2, N, N],
190 [106, 1, 2, 7, N],
191 [107, 1, 2, 8, N],
192 [108, 1, 2, 9, N],
193 [109, 1, N, N, N]];
194
195 var graph = document.getElementById("graph");
196 g = new Dygraph(graph, data, opts);
197
198 var htx = g.hidden_ctx_;
199 var attrs = {};
200
201 // Check that lines are drawn at the expected positions, using
202 // interpolated values for missing data.
203 CanvasAssertions.assertLineDrawn(
204 htx, g.toDomCoords(100, 4), g.toDomCoords(101, 4), {strokeStyle: '#00ff00'});
205 CanvasAssertions.assertLineDrawn(
206 htx, g.toDomCoords(102, 6), g.toDomCoords(103, 7), {strokeStyle: '#ff0000'});
207 CanvasAssertions.assertLineDrawn(
208 htx, g.toDomCoords(107, 8), g.toDomCoords(108, 9), {strokeStyle: '#0000ff'});
209 CanvasAssertions.assertLineDrawn(
210 htx, g.toDomCoords(108, 12), g.toDomCoords(109, 12), {strokeStyle: '#ff0000'});
211
212 // Check that the expected number of line segments gets drawn
213 // for each series. Gaps don't get a line.
214 assertEquals(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
215 assertEquals(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00'));
216 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
217
218 // Check that the selection returns the original (non-stacked)
219 // values and skips gaps.
220 g.setSelection(1);
221 assertEquals("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend());
222
223 g.setSelection(8);
224 assertEquals("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend());
225
226 g.setSelection(9);
227 assertEquals("109: Y1: 1", Util.getLegend());
228};
229
230stackedTestCase.prototype.testInterpolationOptions = function() {
231 var opts = {
232 colors: ['#ff0000', '#00ff00', '#0000ff'],
233 stackedGraph: true
234 };
235
236 var data = [
237 [100, 1, NaN, 3],
238 [101, 1, 2, 3],
239 [102, 1, NaN, 3],
240 [103, 1, 2, 3],
241 [104, 1, NaN, 3]];
242
243 var choices = ['all', 'inside', 'none'];
244 var stackedY = [
245 [6, 6, 6, 6, 6],
246 [4, 6, 6, 6, 4],
247 [4, 6, 4, 6, 4]];
248
249 for (var i = 0; i < choices.length; ++i) {
250 var graph = document.getElementById("graph");
251 opts['stackedGraphNaNFill'] = choices[i];
252 g = new Dygraph(graph, data, opts);
253
254 var htx = g.hidden_ctx_;
255 var attrs = {};
256
257 // Check top lines get drawn at the expected positions.
258 for (var j = 0; j < stackedY[i].length - 1; ++j) {
259 CanvasAssertions.assertLineDrawn(
260 htx,
261 g.toDomCoords(100 + j, stackedY[i][j]),
262 g.toDomCoords(101 + j, stackedY[i][j + 1]),
263 {strokeStyle: '#ff0000'});
264 }
265 }
266};
0d087599
JJS
267
268stackedTestCase.prototype.testMultiAxisInterpolation = function() {
269 // Setting 2 axes to test that each axis stacks separately
270 var opts = {
271 colors: ['#ff0000', '#00ff00', '#0000ff'],
272 stackedGraph: true,
273 series: {
274 "Y1": {
275 axis: 'y',
276 },
277 "Y2": {
278 axis: 'y',
279 },
280 "Y3": {
281 axis: 'y2',
282 },
283 "Y4": {
284 axis: 'y2',
285 }
286 }
287 };
288
289 // The last series is all-NaN, it ought to be treated as all zero
290 // for stacking purposes.
291 var N = NaN;
292 var data = [
293 [100, 1, 2, N, N],
294 [101, 1, 2, 2, N],
295 [102, 1, N, N, N],
296 [103, 1, 2, 4, N],
297 [104, N, N, N, N],
298 [105, 1, 2, N, N],
299 [106, 1, 2, 7, N],
300 [107, 1, 2, 8, N],
301 [108, 1, 2, 9, N],
302 [109, 1, N, N, N]];
303
304 var graph = document.getElementById("graph");
305 g = new Dygraph(graph, data, opts);
306
307 var htx = g.hidden_ctx_;
308 var attrs = {};
309
310 // Check that lines are drawn at the expected positions, using
311 // interpolated values for missing data.
312 CanvasAssertions.assertLineDrawn(
313 htx, g.toDomCoords(100, 2), g.toDomCoords(101, 2), {strokeStyle: '#00ff00'});
314 CanvasAssertions.assertLineDrawn(
315 htx, g.toDomCoords(102, 3), g.toDomCoords(103, 3), {strokeStyle: '#ff0000'});
316 CanvasAssertions.assertLineDrawn(
317 htx, g.toDomCoords(107, 2.71), g.toDomCoords(108, 3), {strokeStyle: '#0000ff'});
318 CanvasAssertions.assertLineDrawn(
319 htx, g.toDomCoords(108, 3), g.toDomCoords(109, 3), {strokeStyle: '#ff0000'});
320
321 // Check that the expected number of line segments gets drawn
322 // for each series. Gaps don't get a line.
323 assertEquals(7, CanvasAssertions.numLinesDrawn(htx, '#ff0000'));
324 assertEquals(4, CanvasAssertions.numLinesDrawn(htx, '#00ff00'));
325 assertEquals(2, CanvasAssertions.numLinesDrawn(htx, '#0000ff'));
326
327 // Check that the selection returns the original (non-stacked)
328 // values and skips gaps.
329 g.setSelection(1);
330 assertEquals("101: Y1: 1 Y2: 2 Y3: 2", Util.getLegend());
331
332 g.setSelection(8);
333 assertEquals("108: Y1: 1 Y2: 2 Y3: 9", Util.getLegend());
334
335 g.setSelection(9);
336 assertEquals("109: Y1: 1", Util.getLegend());
337};