Anatomy of a range selector
[dygraphs.git] / dygraph-canvas.js
CommitLineData
88e95c46
DV
1/**
2 * @license
3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
5 */
6a1aa64f
DV
6
7/**
74a5af31
DV
8 * @fileoverview Based on PlotKit.CanvasRenderer, but modified to meet the
9 * needs of dygraphs.
10 *
3df0ccf0 11 * In particular, support for:
0abfbd7e 12 * - grid overlays
3df0ccf0
DV
13 * - error bars
14 * - dygraphs attribute system
6a1aa64f
DV
15 */
16
6a1aa64f 17/**
423f5ed3
DV
18 * The DygraphCanvasRenderer class does the actual rendering of the chart onto
19 * a canvas. It's based on PlotKit.CanvasRenderer.
6a1aa64f 20 * @param {Object} element The canvas to attach to
2cf95fff
RK
21 * @param {Object} elementContext The 2d context of the canvas (injected so it
22 * can be mocked for testing.)
285a6bda 23 * @param {Layout} layout The DygraphLayout object for this graph.
74a5af31 24 * @constructor
6a1aa64f 25 */
c0f54d4f 26
3ce712e6 27var DygraphCanvasRenderer = (function() {
464b5f50 28/*global Dygraph:false */
c0f54d4f
DV
29"use strict";
30
79253bd0 31
8cfe592f
DV
32/**
33 * @constructor
34 *
35 * This gets called when there are "new points" to chart. This is generally the
36 * case when the underlying data being charted has changed. It is _not_ called
37 * in the common case that the user has zoomed or is panning the view.
38 *
39 * The chart canvas has already been created by the Dygraph object. The
40 * renderer simply gets a drawing context.
41 *
7b00a3cd 42 * @param {Dygraph} dygraph The chart to which this renderer belongs.
48fc4786 43 * @param {HTMLCanvasElement} element The <canvas> DOM element on which to draw.
8cfe592f
DV
44 * @param {CanvasRenderingContext2D} elementContext The drawing context.
45 * @param {DygraphLayout} layout The chart's DygraphLayout object.
46 *
47 * TODO(danvk): remove the elementContext property.
48 */
c0f54d4f 49var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
9317362d 50 this.dygraph_ = dygraph;
fbe31dc8 51
fbe31dc8 52 this.layout = layout;
b0c3b730 53 this.element = element;
2cf95fff 54 this.elementContext = elementContext;
fbe31dc8 55
7c39bb3a
DV
56 this.height = dygraph.height_;
57 this.width = dygraph.width_;
fbe31dc8
DV
58
59 // --- check whether everything is ok before we return
9901b0c1
DV
60 if (!Dygraph.isCanvasSupported(this.element)) {
61 throw "Canvas is not supported.";
62 }
fbe31dc8
DV
63
64 // internal state
70be5ed1 65 this.area = layout.getPlotArea();
423f5ed3
DV
66
67 // Set up a clipping area for the canvas (and the interaction canvas).
68 // This ensures that we don't overdraw.
9901b0c1
DV
69 // on Android 3 and 4, setting a clipping area on a canvas prevents it from
70 // displaying anything.
71 if (!Dygraph.isAndroid()) {
72 var ctx = this.dygraph_.canvas_ctx_;
73 ctx.beginPath();
74 ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
75 ctx.clip();
76
77 ctx = this.dygraph_.hidden_ctx_;
78 ctx.beginPath();
79 ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
80 ctx.clip();
920208fb 81 }
423f5ed3
DV
82};
83
38e3d209 84/**
8cfe592f
DV
85 * Clears out all chart content and DOM elements.
86 * This is called immediately before render() on every frame, including
87 * during zooms and pans.
88 * @private
89 */
fbe31dc8 90DygraphCanvasRenderer.prototype.clear = function() {
9901b0c1 91 this.elementContext.clearRect(0, 0, this.width, this.height);
fbe31dc8
DV
92};
93
8cfe592f 94/**
8cfe592f
DV
95 * This method is responsible for drawing everything on the chart, including
96 * lines, error bars, fills and axes.
97 * It is called immediately after clear() on every frame, including during pans
98 * and zooms.
99 * @private
6a1aa64f 100 */
285a6bda 101DygraphCanvasRenderer.prototype.render = function() {
38e3d209
DV
102 // attaches point.canvas{x,y}
103 this._updatePoints();
104
105 // actually draws the chart.
2ce09b19 106 this._renderLineChart();
fbe31dc8
DV
107};
108
ccb0001c 109/**
8722284b
RK
110 * Returns a predicate to be used with an iterator, which will
111 * iterate over points appropriately, depending on whether
112 * connectSeparatedPoints is true. When it's false, the predicate will
113 * skip over points with missing yVals.
ccb0001c 114 */
8722284b 115DygraphCanvasRenderer._getIteratorPredicate = function(connectSeparatedPoints) {
42a9ebb8
DV
116 return connectSeparatedPoints ?
117 DygraphCanvasRenderer._predicateThatSkipsEmptyPoints :
118 null;
0f20de1c 119};
8722284b
RK
120
121DygraphCanvasRenderer._predicateThatSkipsEmptyPoints =
0f20de1c
DV
122 function(array, idx) {
123 return array[idx].yval !== null;
124};
04c104d7 125
9f6db80e 126/**
38e3d209
DV
127 * Draws a line with the styles passed in and calls all the drawPointCallbacks.
128 * @param {Object} e The dictionary passed to the plotter function.
9f6db80e
DV
129 * @private
130 */
38e3d209
DV
131DygraphCanvasRenderer._drawStyledLine = function(e,
132 color, strokeWidth, strokePattern, drawPoints,
5469113b 133 drawPointCallback, pointSize) {
38e3d209 134 var g = e.dygraph;
99a77a04 135 // TODO(konigsberg): Compute attributes outside this method call.
0e85a437 136 var stepPlot = g.getBooleanOption("stepPlot", e.setName);
2f56cd46 137
857a6931
KW
138 if (!Dygraph.isArrayLike(strokePattern)) {
139 strokePattern = null;
140 }
141
0e85a437 142 var drawGapPoints = g.getBooleanOption('drawGapEdgePoints', e.setName);
38e3d209
DV
143
144 var points = e.points;
b85358e2 145 var setName = e.setName;
a12a78ae 146 var iter = Dygraph.createIterator(points, 0, points.length,
9f6db80e 147 DygraphCanvasRenderer._getIteratorPredicate(
0e85a437 148 g.getBooleanOption("connectSeparatedPoints", setName)));
7d1afbb9 149
fb63bf1b
DV
150 var stroking = strokePattern && (strokePattern.length >= 2);
151
38e3d209 152 var ctx = e.drawingContext;
0140347d 153 ctx.save();
fb63bf1b
DV
154 if (stroking) {
155 ctx.installPattern(strokePattern);
b843b52c 156 }
fb63bf1b 157
38e3d209
DV
158 var pointsOnLine = DygraphCanvasRenderer._drawSeries(
159 e, iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color);
160 DygraphCanvasRenderer._drawPointsOnLine(
161 e, pointsOnLine, drawPointCallback, color, pointSize);
31f8e58b 162
fb63bf1b
DV
163 if (stroking) {
164 ctx.uninstallPattern();
165 }
b843b52c 166
fb63bf1b 167 ctx.restore();
31f8e58b
RK
168};
169
38e3d209
DV
170/**
171 * This does the actual drawing of lines on the canvas, for just one series.
172 * Returns a list of [canvasx, canvasy] pairs for points for which a
173 * drawPointCallback should be fired. These include isolated points, or all
174 * points if drawPoints=true.
175 * @param {Object} e The dictionary passed to the plotter function.
176 * @private
177 */
178DygraphCanvasRenderer._drawSeries = function(e,
179 iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color) {
31f8e58b 180
31f8e58b
RK
181 var prevCanvasX = null;
182 var prevCanvasY = null;
183 var nextCanvasY = null;
184 var isIsolated; // true if this point is isolated (no line segments)
185 var point; // the point being processed in the while loop
b843b52c 186 var pointsOnLine = []; // Array of [canvasx, canvasy] pairs.
31f8e58b
RK
187 var first = true; // the first cycle through the while loop
188
38e3d209 189 var ctx = e.drawingContext;
0140347d
DV
190 ctx.beginPath();
191 ctx.strokeStyle = color;
192 ctx.lineWidth = strokeWidth;
31f8e58b 193
239454e2 194 // NOTE: we break the iterator's encapsulation here for about a 25% speedup.
c560c848
DV
195 var arr = iter.array_;
196 var limit = iter.end_;
197 var predicate = iter.predicate_;
198
199 for (var i = iter.start_; i < limit; i++) {
200 point = arr[i];
201 if (predicate) {
202 while (i < limit && !predicate(arr, i)) {
0f20de1c
DV
203 i++;
204 }
c560c848
DV
205 if (i == limit) break;
206 point = arr[i];
0f20de1c
DV
207 }
208
b7ec6c55
PH
209 // FIXME: The 'canvasy != canvasy' test here catches NaN values but the test
210 // doesn't catch Infinity values. Could change this to
211 // !isFinite(point.canvasy), but I assume it avoids isNaN for performance?
a02978e2 212 if (point.canvasy === null || point.canvasy != point.canvasy) {
31f8e58b 213 if (stepPlot && prevCanvasX !== null) {
857a6931 214 // Draw a horizontal line to the start of the missing data
42a9ebb8
DV
215 ctx.moveTo(prevCanvasX, prevCanvasY);
216 ctx.lineTo(point.canvasx, prevCanvasY);
857a6931 217 }
31f8e58b 218 prevCanvasX = prevCanvasY = null;
857a6931 219 } else {
0f20de1c
DV
220 isIsolated = false;
221 if (drawGapPoints || !prevCanvasX) {
0f20de1c 222 iter.nextIdx_ = i;
0cd1ad15 223 iter.next();
82f9b10f 224 nextCanvasY = iter.hasNext ? iter.peek.canvasy : null;
0f20de1c 225
0f20de1c
DV
226 var isNextCanvasYNullOrNaN = nextCanvasY === null ||
227 nextCanvasY != nextCanvasY;
228 isIsolated = (!prevCanvasX && isNextCanvasYNullOrNaN);
229 if (drawGapPoints) {
230 // Also consider a point to be "isolated" if it's adjacent to a
231 // null point, excluding the graph edges.
232 if ((!first && !prevCanvasX) ||
233 (iter.hasNext && isNextCanvasYNullOrNaN)) {
234 isIsolated = true;
235 }
19b84fe7
KW
236 }
237 }
0f20de1c 238
31f8e58b 239 if (prevCanvasX !== null) {
857a6931 240 if (strokeWidth) {
857a6931 241 if (stepPlot) {
0140347d
DV
242 ctx.moveTo(prevCanvasX, prevCanvasY);
243 ctx.lineTo(point.canvasx, prevCanvasY);
857a6931 244 }
239454e2 245
0140347d 246 ctx.lineTo(point.canvasx, point.canvasy);
b843b52c 247 }
9f636500
DV
248 } else {
249 ctx.moveTo(point.canvasx, point.canvasy);
b843b52c 250 }
b843b52c 251 if (drawPoints || isIsolated) {
b616fad1 252 pointsOnLine.push([point.canvasx, point.canvasy, point.idx]);
b843b52c 253 }
31f8e58b
RK
254 prevCanvasX = point.canvasx;
255 prevCanvasY = point.canvasy;
b843b52c 256 }
7d1afbb9 257 first = false;
b843b52c 258 }
0140347d 259 ctx.stroke();
31f8e58b 260 return pointsOnLine;
857a6931
KW
261};
262
38e3d209
DV
263/**
264 * This fires the drawPointCallback functions, which draw dots on the points by
265 * default. This gets used when the "drawPoints" option is set, or when there
266 * are isolated points.
267 * @param {Object} e The dictionary passed to the plotter function.
268 * @private
269 */
270DygraphCanvasRenderer._drawPointsOnLine = function(
271 e, pointsOnLine, drawPointCallback, color, pointSize) {
272 var ctx = e.drawingContext;
273 for (var idx = 0; idx < pointsOnLine.length; idx++) {
274 var cb = pointsOnLine[idx];
275 ctx.save();
4ee251cb 276 drawPointCallback.call(e.dygraph,
ba697462 277 e.dygraph, e.setName, ctx, cb[0], cb[1], color, pointSize, cb[2]);
38e3d209 278 ctx.restore();
857a6931 279 }
42a9ebb8 280};
ce49c2fa 281
6a1aa64f 282/**
38e3d209 283 * Attaches canvas coordinates to the points array.
758a629f 284 * @private
6a1aa64f 285 */
38e3d209 286DygraphCanvasRenderer.prototype._updatePoints = function() {
ff00d3e2
DV
287 // Update Points
288 // TODO(danvk): here
b843b52c
RK
289 //
290 // TODO(bhs): this loop is a hot-spot for high-point-count charts. These
291 // transformations can be pushed into the canvas via linear transformation
292 // matrices.
e60234cd
DV
293 // NOTE(danvk): this is trickier than it sounds at first. The transformation
294 // needs to be done before the .moveTo() and .lineTo() calls, but must be
295 // undone before the .stroke() call to ensure that the stroke width is
296 // unaffected. An alternative is to reduce the stroke width in the
297 // transformed coordinate space, but you can't specify different values for
298 // each dimension (as you can with .scale()). The speedup here is ~12%.
a12a78ae 299 var sets = this.layout.points;
38e3d209 300 for (var i = sets.length; i--;) {
a12a78ae
DV
301 var points = sets[i];
302 for (var j = points.length; j--;) {
303 var point = points[j];
304 point.canvasx = this.area.w * point.x + this.area.x;
305 point.canvasy = this.area.h * point.y + this.area.y;
306 }
6a1aa64f 307 }
38e3d209 308};
6a1aa64f 309
38e3d209
DV
310/**
311 * Add canvas Actually draw the lines chart, including error bars.
38e3d209
DV
312 *
313 * This function can only be called if DygraphLayout's points array has been
314 * updated with canvas{x,y} attributes, i.e. by
315 * DygraphCanvasRenderer._updatePoints.
48fc4786
RK
316 *
317 * @param {string=} opt_seriesName when specified, only that series will
34655aba
RK
318 * be drawn. (This is used for expedited redrawing with highlightSeriesOpts)
319 * @param {CanvasRenderingContext2D} opt_ctx when specified, the drawing
320 * context. However, lines are typically drawn on the object's
321 * elementContext.
38e3d209
DV
322 * @private
323 */
324DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ctx) {
325 var ctx = opt_ctx || this.elementContext;
38e3d209 326 var i;
6a834bbb 327
38e3d209
DV
328 var sets = this.layout.points;
329 var setNames = this.layout.setNames;
42a9ebb8 330 var setName;
38e3d209
DV
331
332 this.colors = this.dygraph_.colorsMap_;
333
334 // Determine which series have specialized plotters.
0e85a437 335 var plotter_attr = this.dygraph_.getOption("plotter");
38e3d209
DV
336 var plotters = plotter_attr;
337 if (!Dygraph.isArrayLike(plotters)) {
338 plotters = [plotters];
80aaae18
DV
339 }
340
38e3d209
DV
341 var setPlotters = {}; // series name -> plotter fn.
342 for (i = 0; i < setNames.length; i++) {
42a9ebb8 343 setName = setNames[i];
0e85a437 344 var setPlotter = this.dygraph_.getOption("plotter", setName);
38e3d209
DV
345 if (setPlotter == plotter_attr) continue; // not specialized.
346
347 setPlotters[setName] = setPlotter;
348 }
349
350 for (i = 0; i < plotters.length; i++) {
351 var plotter = plotters[i];
352 var is_last = (i == plotters.length - 1);
353
354 for (var j = 0; j < sets.length; j++) {
42a9ebb8 355 setName = setNames[j];
4b2e41a4 356 if (opt_seriesName && setName != opt_seriesName) continue;
38e3d209
DV
357
358 var points = sets[j];
359
360 // Only throw in the specialized plotters on the last iteration.
361 var p = plotter;
362 if (setName in setPlotters) {
363 if (is_last) {
364 p = setPlotters[setName];
365 } else {
366 // Don't use the standard plotters in this case.
367 continue;
368 }
369 }
370
371 var color = this.colors[setName];
372 var strokeWidth = this.dygraph_.getOption("strokeWidth", setName);
373
374 ctx.save();
375 ctx.strokeStyle = color;
376 ctx.lineWidth = strokeWidth;
377 p({
378 points: points,
379 setName: setName,
380 drawingContext: ctx,
381 color: color,
382 strokeWidth: strokeWidth,
383 dygraph: this.dygraph_,
384 axis: this.dygraph_.axisPropertiesForSeries(setName),
385 plotArea: this.area,
386 seriesIndex: j,
387 seriesCount: sets.length,
3c080cd0 388 singleSeriesName: opt_seriesName,
38e3d209
DV
389 allSeriesPoints: sets
390 });
391 ctx.restore();
392 }
393 }
394};
395
396/**
397 * Standard plotters. These may be used by clients via Dygraph.Plotters.
398 * See comments there for more details.
399 */
400DygraphCanvasRenderer._Plotters = {
401 linePlotter: function(e) {
402 DygraphCanvasRenderer._linePlotter(e);
403 },
404
405 fillPlotter: function(e) {
406 DygraphCanvasRenderer._fillPlotter(e);
407 },
408
409 errorPlotter: function(e) {
410 DygraphCanvasRenderer._errorPlotter(e);
80aaae18 411 }
6a1aa64f 412};
79253bd0 413
01a14b85 414/**
38e3d209
DV
415 * Plotter which draws the central lines for a series.
416 * @private
417 */
418DygraphCanvasRenderer._linePlotter = function(e) {
419 var g = e.dygraph;
420 var setName = e.setName;
421 var strokeWidth = e.strokeWidth;
422
423 // TODO(danvk): Check if there's any performance impact of just calling
424 // getOption() inside of _drawStyledLine. Passing in so many parameters makes
425 // this code a bit nasty.
0e85a437 426 var borderWidth = g.getNumericOption("strokeBorderWidth", setName);
38e3d209
DV
427 var drawPointCallback = g.getOption("drawPointCallback", setName) ||
428 Dygraph.Circles.DEFAULT;
429 var strokePattern = g.getOption("strokePattern", setName);
0e85a437
DV
430 var drawPoints = g.getBooleanOption("drawPoints", setName);
431 var pointSize = g.getNumericOption("pointSize", setName);
38e3d209
DV
432
433 if (borderWidth && strokeWidth) {
434 DygraphCanvasRenderer._drawStyledLine(e,
435 g.getOption("strokeBorderColor", setName),
436 strokeWidth + 2 * borderWidth,
437 strokePattern,
438 drawPoints,
439 drawPointCallback,
440 pointSize
441 );
442 }
443
444 DygraphCanvasRenderer._drawStyledLine(e,
445 e.color,
446 strokeWidth,
447 strokePattern,
448 drawPoints,
449 drawPointCallback,
450 pointSize
451 );
42a9ebb8 452};
38e3d209
DV
453
454/**
01a14b85
DV
455 * Draws the shaded error bars/confidence intervals for each series.
456 * This happens before the center lines are drawn, since the center lines
457 * need to be drawn on top of the error bars for all series.
01a14b85
DV
458 * @private
459 */
38e3d209
DV
460DygraphCanvasRenderer._errorPlotter = function(e) {
461 var g = e.dygraph;
e2d8db3a 462 var setName = e.setName;
0e85a437
DV
463 var errorBars = g.getBooleanOption("errorBars") ||
464 g.getBooleanOption("customBars");
38e3d209
DV
465 if (!errorBars) return;
466
0e85a437 467 var fillGraph = g.getBooleanOption("fillGraph", setName);
38e3d209 468 if (fillGraph) {
8a68db7d 469 console.warn("Can't use fillGraph option with error bars");
38e3d209 470 }
6a6439da 471
38e3d209
DV
472 var ctx = e.drawingContext;
473 var color = e.color;
0e85a437
DV
474 var fillAlpha = g.getNumericOption('fillAlpha', setName);
475 var stepPlot = g.getBooleanOption("stepPlot", setName);
38e3d209 476 var points = e.points;
6a6439da 477
38e3d209
DV
478 var iter = Dygraph.createIterator(points, 0, points.length,
479 DygraphCanvasRenderer._getIteratorPredicate(
0e85a437 480 g.getBooleanOption("connectSeparatedPoints", setName)));
6a6439da 481
38e3d209 482 var newYs;
6a6439da 483
38e3d209
DV
484 // setup graphics context
485 var prevX = NaN;
486 var prevY = NaN;
487 var prevYs = [-1, -1];
38e3d209 488 // should be same color as the lines but only 15% opaque.
464b5f50 489 var rgb = Dygraph.toRGB_(color);
38e3d209
DV
490 var err_color =
491 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')';
492 ctx.fillStyle = err_color;
493 ctx.beginPath();
cf89eeed
DV
494
495 var isNullUndefinedOrNaN = function(x) {
496 return (x === null ||
497 x === undefined ||
498 isNaN(x));
499 };
500
38e3d209
DV
501 while (iter.hasNext) {
502 var point = iter.next();
cf89eeed
DV
503 if ((!stepPlot && isNullUndefinedOrNaN(point.y)) ||
504 (stepPlot && !isNaN(prevY) && isNullUndefinedOrNaN(prevY))) {
38e3d209
DV
505 prevX = NaN;
506 continue;
507 }
6a6439da 508
87c5a64c 509 newYs = [ point.y_bottom, point.y_top ];
38e3d209 510 if (stepPlot) {
38e3d209 511 prevY = point.y;
38e3d209 512 }
87c5a64c
DV
513
514 // The documentation specifically disallows nulls inside the point arrays,
515 // but in case it happens we should do something sensible.
516 if (isNaN(newYs[0])) newYs[0] = point.y;
517 if (isNaN(newYs[1])) newYs[1] = point.y;
518
38e3d209
DV
519 newYs[0] = e.plotArea.h * newYs[0] + e.plotArea.y;
520 newYs[1] = e.plotArea.h * newYs[1] + e.plotArea.y;
521 if (!isNaN(prevX)) {
a5701188 522 if (stepPlot) {
38e3d209 523 ctx.moveTo(prevX, prevYs[0]);
82dd90c5 524 ctx.lineTo(point.canvasx, prevYs[0]);
525 ctx.lineTo(point.canvasx, prevYs[1]);
38e3d209 526 } else {
82dd90c5 527 ctx.moveTo(prevX, prevYs[0]);
528 ctx.lineTo(point.canvasx, newYs[0]);
529 ctx.lineTo(point.canvasx, newYs[1]);
6a6439da 530 }
82dd90c5 531 ctx.lineTo(prevX, prevYs[1]);
38e3d209 532 ctx.closePath();
6a6439da 533 }
38e3d209
DV
534 prevYs = newYs;
535 prevX = point.canvasx;
6a6439da 536 }
38e3d209 537 ctx.fill();
42a9ebb8 538};
6a6439da 539
20b87d28
DV
540
541/**
542 * Proxy for CanvasRenderingContext2D which drops moveTo/lineTo calls which are
543 * superfluous. It accumulates all movements which haven't changed the x-value
544 * and only applies the two with the most extreme y-values.
545 *
546 * Calls to lineTo/moveTo must have non-decreasing x-values.
547 */
548DygraphCanvasRenderer._fastCanvasProxy = function(context) {
549 var pendingActions = []; // array of [type, x, y] tuples
550 var lastRoundedX = null;
20b87d28
DV
551
552 var LINE_TO = 1,
553 MOVE_TO = 2;
554
555 var actionCount = 0; // number of moveTos and lineTos passed to context.
556
557 // Drop superfluous motions
558 // Assumes all pendingActions have the same (rounded) x-value.
559 var compressActions = function(opt_losslessOnly) {
560 if (pendingActions.length <= 1) return;
561
562 // Lossless compression: drop inconsequential moveTos.
563 for (var i = pendingActions.length - 1; i > 0; i--) {
564 var action = pendingActions[i];
565 if (action[0] == MOVE_TO) {
566 var prevAction = pendingActions[i - 1];
567 if (prevAction[1] == action[1] && prevAction[2] == action[2]) {
568 pendingActions.splice(i, 1);
569 }
570 }
571 }
572
573 // Lossless compression: ... drop consecutive moveTos ...
574 for (var i = 0; i < pendingActions.length - 1; /* incremented internally */) {
575 var action = pendingActions[i];
576 if (action[0] == MOVE_TO && pendingActions[i + 1][0] == MOVE_TO) {
577 pendingActions.splice(i, 1);
578 } else {
579 i++;
580 }
581 }
582
583 // Lossy compression: ... drop all but the extreme y-values ...
584 if (pendingActions.length > 2 && !opt_losslessOnly) {
585 // keep an initial moveTo, but drop all others.
586 var startIdx = 0;
587 if (pendingActions[0][0] == MOVE_TO) startIdx++;
588 var minIdx = null, maxIdx = null;
589 for (var i = startIdx; i < pendingActions.length; i++) {
590 var action = pendingActions[i];
591 if (action[0] != LINE_TO) continue;
592 if (minIdx === null && maxIdx === null) {
593 minIdx = i;
594 maxIdx = i;
595 } else {
596 var y = action[2];
597 if (y < pendingActions[minIdx][2]) {
598 minIdx = i;
599 } else if (y > pendingActions[maxIdx][2]) {
600 maxIdx = i;
601 }
602 }
603 }
604 var minAction = pendingActions[minIdx],
605 maxAction = pendingActions[maxIdx];
606 pendingActions.splice(startIdx, pendingActions.length - startIdx);
607 if (minIdx < maxIdx) {
608 pendingActions.push(minAction);
609 pendingActions.push(maxAction);
610 } else if (minIdx > maxIdx) {
611 pendingActions.push(maxAction);
612 pendingActions.push(minAction);
613 } else {
614 pendingActions.push(minAction);
615 }
616 }
617 };
618
619 var flushActions = function(opt_noLossyCompression) {
620 compressActions(opt_noLossyCompression);
621 for (var i = 0, len = pendingActions.length; i < len; i++) {
622 var action = pendingActions[i];
623 if (action[0] == LINE_TO) {
624 context.lineTo(action[1], action[2]);
625 } else if (action[0] == MOVE_TO) {
626 context.moveTo(action[1], action[2]);
627 }
628 }
629 actionCount += pendingActions.length;
630 pendingActions = [];
631 };
632
633 var addAction = function(action, x, y) {
634 var rx = Math.round(x);
635 if (lastRoundedX === null || rx != lastRoundedX) {
636 flushActions();
637 lastRoundedX = rx;
638 }
639 pendingActions.push([action, x, y]);
640 };
641
642 return {
643 moveTo: function(x, y) {
644 addAction(MOVE_TO, x, y);
645 },
646 lineTo: function(x, y) {
647 addAction(LINE_TO, x, y);
648 },
649
650 // for major operations like stroke/fill, we skip compression to ensure
651 // that there are no artifacts at the right edge.
652 stroke: function() { flushActions(true); context.stroke(); },
653 fill: function() { flushActions(true); context.fill(); },
654 beginPath: function() { flushActions(true); context.beginPath(); },
655 closePath: function() { flushActions(true); context.closePath(); },
656
657 _count: function() { return actionCount; }
658 };
46fd9089 659};
20b87d28 660
79253bd0 661/**
01a14b85
DV
662 * Draws the shaded regions when "fillGraph" is set. Not to be confused with
663 * error bars.
664 *
38e3d209
DV
665 * For stacked charts, it's more convenient to handle all the series
666 * simultaneously. So this plotter plots all the points on the first series
667 * it's asked to draw, then ignores all the other series.
668 *
01a14b85
DV
669 * @private
670 */
38e3d209 671DygraphCanvasRenderer._fillPlotter = function(e) {
3c080cd0
KW
672 // Skip if we're drawing a single series for interactive highlight overlay.
673 if (e.singleSeriesName) return;
674
38e3d209
DV
675 // We'll handle all the series at once, not one-by-one.
676 if (e.seriesIndex !== 0) return;
677
e2d8db3a 678 var g = e.dygraph;
38e3d209 679 var setNames = g.getLabels().slice(1); // remove x-axis
e2d8db3a 680
38e3d209
DV
681 // getLabels() includes names for invisible series, which are not included in
682 // allSeriesPoints. We remove those to make the two match.
683 // TODO(danvk): provide a simpler way to get this information.
684 for (var i = setNames.length; i >= 0; i--) {
685 if (!g.visibility()[i]) setNames.splice(i, 1);
686 }
687
e2d8db3a
DV
688 var anySeriesFilled = (function() {
689 for (var i = 0; i < setNames.length; i++) {
0e85a437 690 if (g.getBooleanOption("fillGraph", setNames[i])) return true;
e2d8db3a
DV
691 }
692 return false;
693 })();
694
695 if (!anySeriesFilled) return;
696
e2d8db3a
DV
697 var area = e.plotArea;
698 var sets = e.allSeriesPoints;
699 var setCount = sets.length;
700
0e85a437
DV
701 var fillAlpha = g.getNumericOption('fillAlpha');
702 var stackedGraph = g.getBooleanOption("stackedGraph");
38e3d209 703 var colors = g.getColors();
01a14b85 704
30a5cfc6
KW
705 // For stacked graphs, track the baseline for filling.
706 //
707 // The filled areas below graph lines are trapezoids with two
708 // vertical edges. The top edge is the line segment being drawn, and
709 // the baseline is the bottom edge. Each baseline corresponds to the
710 // top line segment from the previous stacked line. In the case of
711 // step plots, the trapezoids are rectangles.
712 var baseline = {};
01a14b85 713 var currBaseline;
104d87c5 714 var prevStepPlot; // for different line drawing modes (line/step) per series
01a14b85 715
46fd9089
DV
716 // Helper function to trace a line back along the baseline.
717 var traceBackPath = function(ctx, baselineX, baselineY, pathBack) {
718 ctx.lineTo(baselineX, baselineY);
719 if (stackedGraph) {
720 for (var i = pathBack.length - 1; i >= 0; i--) {
721 var pt = pathBack[i];
722 ctx.lineTo(pt[0], pt[1]);
723 }
724 }
725 };
726
01a14b85 727 // process sets in reverse order (needed for stacked graphs)
9e85a8f4 728 for (var setIdx = setCount - 1; setIdx >= 0; setIdx--) {
20b87d28 729 var ctx = e.drawingContext;
9e85a8f4 730 var setName = setNames[setIdx];
0e85a437 731 if (!g.getBooleanOption('fillGraph', setName)) continue;
20b87d28 732
0e85a437 733 var stepPlot = g.getBooleanOption('stepPlot', setName);
38e3d209
DV
734 var color = colors[setIdx];
735 var axis = g.axisPropertiesForSeries(setName);
01a14b85
DV
736 var axisY = 1.0 + axis.minyval * axis.yscale;
737 if (axisY < 0.0) axisY = 0.0;
738 else if (axisY > 1.0) axisY = 1.0;
38e3d209 739 axisY = area.h * axisY + area.y;
01a14b85 740
38e3d209 741 var points = sets[setIdx];
9e85a8f4 742 var iter = Dygraph.createIterator(points, 0, points.length,
01a14b85 743 DygraphCanvasRenderer._getIteratorPredicate(
0e85a437 744 g.getBooleanOption("connectSeparatedPoints", setName)));
01a14b85
DV
745
746 // setup graphics context
747 var prevX = NaN;
748 var prevYs = [-1, -1];
749 var newYs;
01a14b85 750 // should be same color as the lines but only 15% opaque.
464b5f50 751 var rgb = Dygraph.toRGB_(color);
01a14b85
DV
752 var err_color =
753 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')';
754 ctx.fillStyle = err_color;
755 ctx.beginPath();
12b879f4 756 var last_x, is_first = true;
20b87d28
DV
757
758 // If the point density is high enough, dropping segments on their way to
759 // the canvas justifies the overhead of doing so.
760 if (points.length > 2 * g.width_) {
761 ctx = DygraphCanvasRenderer._fastCanvasProxy(ctx);
762 }
763
764 // For filled charts, we draw points from left to right, then back along
765 // the x-axis to complete a shape for filling.
766 // For stacked plots, this "back path" is a more complex shape. This array
767 // stores the [x, y] values needed to trace that shape.
768 var pathBack = [];
769
20b87d28
DV
770 // TODO(danvk): there are a lot of options at play in this loop.
771 // The logic would be much clearer if some (e.g. stackGraph and
772 // stepPlot) were split off into separate sub-plotters.
46fd9089 773 var point;
12b879f4 774 while (iter.hasNext) {
46fd9089 775 point = iter.next();
8c31c7db 776 if (!Dygraph.isOK(point.y) && !stepPlot) {
46fd9089
DV
777 traceBackPath(ctx, prevX, prevYs[1], pathBack);
778 pathBack = [];
16febe6b 779 prevX = NaN;
30a5cfc6
KW
780 if (point.y_stacked !== null && !isNaN(point.y_stacked)) {
781 baseline[point.canvasx] = area.h * point.y_stacked + area.y;
782 }
16febe6b
DV
783 continue;
784 }
785 if (stackedGraph) {
12b879f4
DV
786 if (!is_first && last_x == point.xval) {
787 continue;
788 } else {
789 is_first = false;
790 last_x = point.xval;
791 }
792
16febe6b
DV
793 currBaseline = baseline[point.canvasx];
794 var lastY;
795 if (currBaseline === undefined) {
796 lastY = axisY;
797 } else {
104d87c5 798 if(prevStepPlot) {
16febe6b 799 lastY = currBaseline[0];
01a14b85 800 } else {
16febe6b 801 lastY = currBaseline;
01a14b85 802 }
16febe6b
DV
803 }
804 newYs = [ point.canvasy, lastY ];
01a14b85 805
20b87d28 806 if (stepPlot) {
16febe6b
DV
807 // Step plots must keep track of the top and bottom of
808 // the baseline at each point.
20b87d28 809 if (prevYs[0] === -1) {
16febe6b 810 baseline[point.canvasx] = [ point.canvasy, axisY ];
01a14b85 811 } else {
16febe6b 812 baseline[point.canvasx] = [ point.canvasy, prevYs[0] ];
01a14b85 813 }
01a14b85 814 } else {
16febe6b 815 baseline[point.canvasx] = point.canvasy;
01a14b85 816 }
01a14b85 817
16febe6b 818 } else {
8c31c7db 819 if (isNaN(point.canvasy) && stepPlot) {
e988d192 820 newYs = [ area.y + area.h, axisY ];
8c31c7db 821 } else {
e988d192
BB
822 newYs = [ point.canvasy, axisY ];
823 }
16febe6b
DV
824 }
825 if (!isNaN(prevX)) {
104d87c5 826 // Move to top fill point
16febe6b
DV
827 if (stepPlot) {
828 ctx.lineTo(point.canvasx, prevYs[0]);
16febe6b 829 ctx.lineTo(point.canvasx, newYs[0]);
104d87c5 830 } else {
20b87d28 831 ctx.lineTo(point.canvasx, newYs[0]);
01a14b85 832 }
16febe6b 833
20b87d28
DV
834 // Record the baseline for the reverse path.
835 if (stackedGraph) {
836 pathBack.push([prevX, prevYs[1]]);
837 if (prevStepPlot && currBaseline) {
838 // Draw to the bottom of the baseline
839 pathBack.push([point.canvasx, currBaseline[1]]);
840 } else {
841 pathBack.push([point.canvasx, newYs[1]]);
842 }
843 }
844 } else {
845 ctx.moveTo(point.canvasx, newYs[1]);
846 ctx.lineTo(point.canvasx, newYs[0]);
01a14b85 847 }
16febe6b
DV
848 prevYs = newYs;
849 prevX = point.canvasx;
01a14b85 850 }
104d87c5 851 prevStepPlot = stepPlot;
46fd9089
DV
852 if (newYs && point) {
853 traceBackPath(ctx, point.canvasx, newYs[1], pathBack);
854 pathBack = [];
20b87d28 855 }
01a14b85
DV
856 ctx.fill();
857 }
858};
3ce712e6
DV
859
860return DygraphCanvasRenderer;
861
862})();