resolve issue 180 via better documentation
[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
758a629f
DV
27/*jshint globalstrict: true */
28/*global Dygraph:false,RGBColor: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 *
42 * @param {Dyraph} dygraph The chart to which this renderer belongs.
43 * @param {Canvas} element The <canvas> DOM element on which to draw.
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
DV
55 this.container = this.element.parentNode;
56
fbe31dc8
DV
57 this.height = this.element.height;
58 this.width = this.element.width;
59
60 // --- check whether everything is ok before we return
61 if (!this.isIE && !(DygraphCanvasRenderer.isSupported(this.element)))
62 throw "Canvas is not supported.";
63
64 // internal state
70be5ed1 65 this.area = layout.getPlotArea();
423f5ed3
DV
66 this.container.style.position = "relative";
67 this.container.style.width = this.width + "px";
68
69 // Set up a clipping area for the canvas (and the interaction canvas).
70 // This ensures that we don't overdraw.
920208fb
PF
71 if (this.dygraph_.isUsingExcanvas_) {
72 this._createIEClipArea();
73 } else {
971870e5
DV
74 // on Android 3 and 4, setting a clipping area on a canvas prevents it from
75 // displaying anything.
76 if (!Dygraph.isAndroid()) {
77 var ctx = this.dygraph_.canvas_ctx_;
78 ctx.beginPath();
79 ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
80 ctx.clip();
920208fb 81
971870e5
DV
82 ctx = this.dygraph_.hidden_ctx_;
83 ctx.beginPath();
84 ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
85 ctx.clip();
86 }
920208fb 87 }
423f5ed3
DV
88};
89
38e3d209
DV
90/**
91 * This just forwards to dygraph.attr_.
92 * TODO(danvk): remove this?
93 * @private
94 */
95DygraphCanvasRenderer.prototype.attr_ = function(name, opt_seriesName) {
96 return this.dygraph_.attr_(name, opt_seriesName);
423f5ed3
DV
97};
98
8cfe592f
DV
99/**
100 * Clears out all chart content and DOM elements.
101 * This is called immediately before render() on every frame, including
102 * during zooms and pans.
103 * @private
104 */
fbe31dc8 105DygraphCanvasRenderer.prototype.clear = function() {
758a629f 106 var context;
fbe31dc8
DV
107 if (this.isIE) {
108 // VML takes a while to start up, so we just poll every this.IEDelay
109 try {
110 if (this.clearDelay) {
111 this.clearDelay.cancel();
112 this.clearDelay = null;
113 }
758a629f 114 context = this.elementContext;
fbe31dc8
DV
115 }
116 catch (e) {
76171648 117 // TODO(danvk): this is broken, since MochiKit.Async is gone.
758a629f
DV
118 // this.clearDelay = MochiKit.Async.wait(this.IEDelay);
119 // this.clearDelay.addCallback(bind(this.clear, this));
fbe31dc8
DV
120 return;
121 }
122 }
123
758a629f 124 context = this.elementContext;
fbe31dc8 125 context.clearRect(0, 0, this.width, this.height);
fbe31dc8
DV
126};
127
8cfe592f
DV
128/**
129 * Checks whether the browser supports the <canvas> tag.
130 * @private
131 */
fbe31dc8
DV
132DygraphCanvasRenderer.isSupported = function(canvasName) {
133 var canvas = null;
134 try {
758a629f 135 if (typeof(canvasName) == 'undefined' || canvasName === null) {
b0c3b730 136 canvas = document.createElement("canvas");
758a629f 137 } else {
b0c3b730 138 canvas = canvasName;
758a629f
DV
139 }
140 canvas.getContext("2d");
fbe31dc8
DV
141 }
142 catch (e) {
143 var ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
144 var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
145 if ((!ie) || (ie[1] < 6) || (opera))
146 return false;
147 return true;
148 }
149 return true;
6a1aa64f 150};
6a1aa64f
DV
151
152/**
8cfe592f
DV
153 * This method is responsible for drawing everything on the chart, including
154 * lines, error bars, fills and axes.
155 * It is called immediately after clear() on every frame, including during pans
156 * and zooms.
157 * @private
6a1aa64f 158 */
285a6bda 159DygraphCanvasRenderer.prototype.render = function() {
38e3d209
DV
160 // attaches point.canvas{x,y}
161 this._updatePoints();
162
163 // actually draws the chart.
2ce09b19 164 this._renderLineChart();
fbe31dc8
DV
165};
166
920208fb
PF
167DygraphCanvasRenderer.prototype._createIEClipArea = function() {
168 var className = 'dygraph-clip-div';
169 var graphDiv = this.dygraph_.graphDiv;
170
171 // Remove old clip divs.
172 for (var i = graphDiv.childNodes.length-1; i >= 0; i--) {
173 if (graphDiv.childNodes[i].className == className) {
174 graphDiv.removeChild(graphDiv.childNodes[i]);
175 }
176 }
177
178 // Determine background color to give clip divs.
179 var backgroundColor = document.bgColor;
180 var element = this.dygraph_.graphDiv;
181 while (element != document) {
182 var bgcolor = element.currentStyle.backgroundColor;
183 if (bgcolor && bgcolor != 'transparent') {
184 backgroundColor = bgcolor;
185 break;
186 }
187 element = element.parentNode;
188 }
189
190 function createClipDiv(area) {
758a629f 191 if (area.w === 0 || area.h === 0) {
920208fb
PF
192 return;
193 }
194 var elem = document.createElement('div');
195 elem.className = className;
196 elem.style.backgroundColor = backgroundColor;
197 elem.style.position = 'absolute';
198 elem.style.left = area.x + 'px';
199 elem.style.top = area.y + 'px';
200 elem.style.width = area.w + 'px';
201 elem.style.height = area.h + 'px';
202 graphDiv.appendChild(elem);
203 }
204
205 var plotArea = this.area;
206 // Left side
758a629f
DV
207 createClipDiv({
208 x:0, y:0,
209 w:plotArea.x,
210 h:this.height
211 });
212
920208fb 213 // Top
758a629f
DV
214 createClipDiv({
215 x: plotArea.x, y: 0,
216 w: this.width - plotArea.x,
217 h: plotArea.y
218 });
219
920208fb 220 // Right side
758a629f
DV
221 createClipDiv({
222 x: plotArea.x + plotArea.w, y: 0,
223 w: this.width-plotArea.x - plotArea.w,
224 h: this.height
225 });
226
920208fb 227 // Bottom
758a629f
DV
228 createClipDiv({
229 x: plotArea.x,
230 y: plotArea.y + plotArea.h,
231 w: this.width - plotArea.x,
232 h: this.height - plotArea.h - plotArea.y
233 });
234};
fbe31dc8 235
fbe31dc8 236
ccb0001c 237/**
8722284b
RK
238 * Returns a predicate to be used with an iterator, which will
239 * iterate over points appropriately, depending on whether
240 * connectSeparatedPoints is true. When it's false, the predicate will
241 * skip over points with missing yVals.
ccb0001c 242 */
8722284b 243DygraphCanvasRenderer._getIteratorPredicate = function(connectSeparatedPoints) {
42a9ebb8
DV
244 return connectSeparatedPoints ?
245 DygraphCanvasRenderer._predicateThatSkipsEmptyPoints :
246 null;
0f20de1c 247};
8722284b
RK
248
249DygraphCanvasRenderer._predicateThatSkipsEmptyPoints =
0f20de1c
DV
250 function(array, idx) {
251 return array[idx].yval !== null;
252};
04c104d7 253
9f6db80e 254/**
38e3d209
DV
255 * Draws a line with the styles passed in and calls all the drawPointCallbacks.
256 * @param {Object} e The dictionary passed to the plotter function.
9f6db80e
DV
257 * @private
258 */
38e3d209
DV
259DygraphCanvasRenderer._drawStyledLine = function(e,
260 color, strokeWidth, strokePattern, drawPoints,
5469113b 261 drawPointCallback, pointSize) {
38e3d209 262 var g = e.dygraph;
99a77a04 263 // TODO(konigsberg): Compute attributes outside this method call.
38e3d209 264 var stepPlot = g.getOption("stepPlot"); // TODO(danvk): per-series
857a6931
KW
265 if (!Dygraph.isArrayLike(strokePattern)) {
266 strokePattern = null;
267 }
268
38e3d209
DV
269 var drawGapPoints = g.getOption('drawGapEdgePoints', e.setName);
270
271 var points = e.points;
a12a78ae 272 var iter = Dygraph.createIterator(points, 0, points.length,
9f6db80e 273 DygraphCanvasRenderer._getIteratorPredicate(
38e3d209 274 g.getOption("connectSeparatedPoints"))); // TODO(danvk): per-series?
7d1afbb9 275
fb63bf1b
DV
276 var stroking = strokePattern && (strokePattern.length >= 2);
277
38e3d209 278 var ctx = e.drawingContext;
0140347d 279 ctx.save();
fb63bf1b
DV
280 if (stroking) {
281 ctx.installPattern(strokePattern);
b843b52c 282 }
fb63bf1b 283
38e3d209
DV
284 var pointsOnLine = DygraphCanvasRenderer._drawSeries(
285 e, iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color);
286 DygraphCanvasRenderer._drawPointsOnLine(
287 e, pointsOnLine, drawPointCallback, color, pointSize);
31f8e58b 288
fb63bf1b
DV
289 if (stroking) {
290 ctx.uninstallPattern();
291 }
b843b52c 292
fb63bf1b 293 ctx.restore();
31f8e58b
RK
294};
295
38e3d209
DV
296/**
297 * This does the actual drawing of lines on the canvas, for just one series.
298 * Returns a list of [canvasx, canvasy] pairs for points for which a
299 * drawPointCallback should be fired. These include isolated points, or all
300 * points if drawPoints=true.
301 * @param {Object} e The dictionary passed to the plotter function.
302 * @private
303 */
304DygraphCanvasRenderer._drawSeries = function(e,
305 iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color) {
31f8e58b 306
31f8e58b
RK
307 var prevCanvasX = null;
308 var prevCanvasY = null;
309 var nextCanvasY = null;
310 var isIsolated; // true if this point is isolated (no line segments)
311 var point; // the point being processed in the while loop
b843b52c 312 var pointsOnLine = []; // Array of [canvasx, canvasy] pairs.
31f8e58b
RK
313 var first = true; // the first cycle through the while loop
314
38e3d209 315 var ctx = e.drawingContext;
0140347d
DV
316 ctx.beginPath();
317 ctx.strokeStyle = color;
318 ctx.lineWidth = strokeWidth;
31f8e58b 319
239454e2 320 // NOTE: we break the iterator's encapsulation here for about a 25% speedup.
c560c848
DV
321 var arr = iter.array_;
322 var limit = iter.end_;
323 var predicate = iter.predicate_;
324
325 for (var i = iter.start_; i < limit; i++) {
326 point = arr[i];
327 if (predicate) {
328 while (i < limit && !predicate(arr, i)) {
0f20de1c
DV
329 i++;
330 }
c560c848
DV
331 if (i == limit) break;
332 point = arr[i];
0f20de1c
DV
333 }
334
a02978e2 335 if (point.canvasy === null || point.canvasy != point.canvasy) {
31f8e58b 336 if (stepPlot && prevCanvasX !== null) {
857a6931 337 // Draw a horizontal line to the start of the missing data
42a9ebb8
DV
338 ctx.moveTo(prevCanvasX, prevCanvasY);
339 ctx.lineTo(point.canvasx, prevCanvasY);
857a6931 340 }
31f8e58b 341 prevCanvasX = prevCanvasY = null;
857a6931 342 } else {
0f20de1c
DV
343 isIsolated = false;
344 if (drawGapPoints || !prevCanvasX) {
0f20de1c
DV
345 iter.nextIdx_ = i;
346 var peek = iter.next();
82f9b10f 347 nextCanvasY = iter.hasNext ? iter.peek.canvasy : null;
0f20de1c 348
0f20de1c
DV
349 var isNextCanvasYNullOrNaN = nextCanvasY === null ||
350 nextCanvasY != nextCanvasY;
351 isIsolated = (!prevCanvasX && isNextCanvasYNullOrNaN);
352 if (drawGapPoints) {
353 // Also consider a point to be "isolated" if it's adjacent to a
354 // null point, excluding the graph edges.
355 if ((!first && !prevCanvasX) ||
356 (iter.hasNext && isNextCanvasYNullOrNaN)) {
357 isIsolated = true;
358 }
19b84fe7
KW
359 }
360 }
0f20de1c 361
31f8e58b 362 if (prevCanvasX !== null) {
857a6931 363 if (strokeWidth) {
857a6931 364 if (stepPlot) {
0140347d
DV
365 ctx.moveTo(prevCanvasX, prevCanvasY);
366 ctx.lineTo(point.canvasx, prevCanvasY);
857a6931 367 }
239454e2 368
0140347d 369 ctx.lineTo(point.canvasx, point.canvasy);
b843b52c 370 }
9f636500
DV
371 } else {
372 ctx.moveTo(point.canvasx, point.canvasy);
b843b52c 373 }
b843b52c
RK
374 if (drawPoints || isIsolated) {
375 pointsOnLine.push([point.canvasx, point.canvasy]);
376 }
31f8e58b
RK
377 prevCanvasX = point.canvasx;
378 prevCanvasY = point.canvasy;
b843b52c 379 }
7d1afbb9 380 first = false;
b843b52c 381 }
0140347d 382 ctx.stroke();
31f8e58b 383 return pointsOnLine;
857a6931
KW
384};
385
38e3d209
DV
386/**
387 * This fires the drawPointCallback functions, which draw dots on the points by
388 * default. This gets used when the "drawPoints" option is set, or when there
389 * are isolated points.
390 * @param {Object} e The dictionary passed to the plotter function.
391 * @private
392 */
393DygraphCanvasRenderer._drawPointsOnLine = function(
394 e, pointsOnLine, drawPointCallback, color, pointSize) {
395 var ctx = e.drawingContext;
396 for (var idx = 0; idx < pointsOnLine.length; idx++) {
397 var cb = pointsOnLine[idx];
398 ctx.save();
399 drawPointCallback(
400 e.dygraph, e.setName, ctx, cb[0], cb[1], color, pointSize);
401 ctx.restore();
857a6931 402 }
42a9ebb8 403};
ce49c2fa 404
6a1aa64f 405/**
38e3d209 406 * Attaches canvas coordinates to the points array.
758a629f 407 * @private
6a1aa64f 408 */
38e3d209 409DygraphCanvasRenderer.prototype._updatePoints = function() {
ff00d3e2
DV
410 // Update Points
411 // TODO(danvk): here
b843b52c
RK
412 //
413 // TODO(bhs): this loop is a hot-spot for high-point-count charts. These
414 // transformations can be pushed into the canvas via linear transformation
415 // matrices.
e60234cd
DV
416 // NOTE(danvk): this is trickier than it sounds at first. The transformation
417 // needs to be done before the .moveTo() and .lineTo() calls, but must be
418 // undone before the .stroke() call to ensure that the stroke width is
419 // unaffected. An alternative is to reduce the stroke width in the
420 // transformed coordinate space, but you can't specify different values for
421 // each dimension (as you can with .scale()). The speedup here is ~12%.
a12a78ae 422 var sets = this.layout.points;
38e3d209 423 for (var i = sets.length; i--;) {
a12a78ae
DV
424 var points = sets[i];
425 for (var j = points.length; j--;) {
426 var point = points[j];
427 point.canvasx = this.area.w * point.x + this.area.x;
428 point.canvasy = this.area.h * point.y + this.area.y;
429 }
6a1aa64f 430 }
38e3d209 431};
6a1aa64f 432
38e3d209
DV
433/**
434 * Add canvas Actually draw the lines chart, including error bars.
435 * If opt_seriesName is specified, only that series will be drawn.
436 * (This is used for expedited redrawing with highlightSeriesOpts)
437 * Lines are typically drawn in the non-interactive dygraph canvas. If opt_ctx
438 * is specified, they can be drawn elsewhere.
439 *
440 * This function can only be called if DygraphLayout's points array has been
441 * updated with canvas{x,y} attributes, i.e. by
442 * DygraphCanvasRenderer._updatePoints.
443 * @private
444 */
445DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ctx) {
446 var ctx = opt_ctx || this.elementContext;
447 var errorBars = this.attr_("errorBars") || this.attr_("customBars");
448 var fillGraph = this.attr_("fillGraph");
449 var i;
6a834bbb 450
38e3d209
DV
451 var sets = this.layout.points;
452 var setNames = this.layout.setNames;
453 var setCount = setNames.length;
42a9ebb8 454 var setName;
38e3d209
DV
455
456 this.colors = this.dygraph_.colorsMap_;
457
458 // Determine which series have specialized plotters.
459 var plotter_attr = this.attr_("plotter");
460 var plotters = plotter_attr;
461 if (!Dygraph.isArrayLike(plotters)) {
462 plotters = [plotters];
80aaae18
DV
463 }
464
38e3d209
DV
465 var setPlotters = {}; // series name -> plotter fn.
466 for (i = 0; i < setNames.length; i++) {
42a9ebb8 467 setName = setNames[i];
38e3d209
DV
468 var setPlotter = this.attr_("plotter", setName);
469 if (setPlotter == plotter_attr) continue; // not specialized.
470
471 setPlotters[setName] = setPlotter;
472 }
473
474 for (i = 0; i < plotters.length; i++) {
475 var plotter = plotters[i];
476 var is_last = (i == plotters.length - 1);
477
478 for (var j = 0; j < sets.length; j++) {
42a9ebb8 479 setName = setNames[j];
38e3d209
DV
480 if (opt_seriesName && setName != opt_seriesName) continue;
481
482 var points = sets[j];
483
484 // Only throw in the specialized plotters on the last iteration.
485 var p = plotter;
486 if (setName in setPlotters) {
487 if (is_last) {
488 p = setPlotters[setName];
489 } else {
490 // Don't use the standard plotters in this case.
491 continue;
492 }
493 }
494
495 var color = this.colors[setName];
496 var strokeWidth = this.dygraph_.getOption("strokeWidth", setName);
497
498 ctx.save();
499 ctx.strokeStyle = color;
500 ctx.lineWidth = strokeWidth;
501 p({
502 points: points,
503 setName: setName,
504 drawingContext: ctx,
505 color: color,
506 strokeWidth: strokeWidth,
507 dygraph: this.dygraph_,
508 axis: this.dygraph_.axisPropertiesForSeries(setName),
509 plotArea: this.area,
510 seriesIndex: j,
511 seriesCount: sets.length,
512 allSeriesPoints: sets
513 });
514 ctx.restore();
515 }
516 }
517};
518
519/**
520 * Standard plotters. These may be used by clients via Dygraph.Plotters.
521 * See comments there for more details.
522 */
523DygraphCanvasRenderer._Plotters = {
524 linePlotter: function(e) {
525 DygraphCanvasRenderer._linePlotter(e);
526 },
527
528 fillPlotter: function(e) {
529 DygraphCanvasRenderer._fillPlotter(e);
530 },
531
532 errorPlotter: function(e) {
533 DygraphCanvasRenderer._errorPlotter(e);
80aaae18 534 }
6a1aa64f 535};
79253bd0 536
01a14b85 537/**
38e3d209
DV
538 * Plotter which draws the central lines for a series.
539 * @private
540 */
541DygraphCanvasRenderer._linePlotter = function(e) {
542 var g = e.dygraph;
543 var setName = e.setName;
544 var strokeWidth = e.strokeWidth;
545
546 // TODO(danvk): Check if there's any performance impact of just calling
547 // getOption() inside of _drawStyledLine. Passing in so many parameters makes
548 // this code a bit nasty.
549 var borderWidth = g.getOption("strokeBorderWidth", setName);
550 var drawPointCallback = g.getOption("drawPointCallback", setName) ||
551 Dygraph.Circles.DEFAULT;
552 var strokePattern = g.getOption("strokePattern", setName);
553 var drawPoints = g.getOption("drawPoints", setName);
554 var pointSize = g.getOption("pointSize", setName);
555
556 if (borderWidth && strokeWidth) {
557 DygraphCanvasRenderer._drawStyledLine(e,
558 g.getOption("strokeBorderColor", setName),
559 strokeWidth + 2 * borderWidth,
560 strokePattern,
561 drawPoints,
562 drawPointCallback,
563 pointSize
564 );
565 }
566
567 DygraphCanvasRenderer._drawStyledLine(e,
568 e.color,
569 strokeWidth,
570 strokePattern,
571 drawPoints,
572 drawPointCallback,
573 pointSize
574 );
42a9ebb8 575};
38e3d209
DV
576
577/**
01a14b85
DV
578 * Draws the shaded error bars/confidence intervals for each series.
579 * This happens before the center lines are drawn, since the center lines
580 * need to be drawn on top of the error bars for all series.
01a14b85
DV
581 * @private
582 */
38e3d209
DV
583DygraphCanvasRenderer._errorPlotter = function(e) {
584 var g = e.dygraph;
e2d8db3a 585 var setName = e.setName;
38e3d209
DV
586 var errorBars = g.getOption("errorBars") || g.getOption("customBars");
587 if (!errorBars) return;
588
e2d8db3a 589 var fillGraph = g.getOption("fillGraph", setName);
38e3d209
DV
590 if (fillGraph) {
591 g.warn("Can't use fillGraph option with error bars");
592 }
6a6439da 593
38e3d209
DV
594 var ctx = e.drawingContext;
595 var color = e.color;
596 var fillAlpha = g.getOption('fillAlpha', setName);
597 var stepPlot = g.getOption('stepPlot'); // TODO(danvk): per-series
598 var axis = e.axis;
599 var points = e.points;
6a6439da 600
38e3d209
DV
601 var iter = Dygraph.createIterator(points, 0, points.length,
602 DygraphCanvasRenderer._getIteratorPredicate(
603 g.getOption("connectSeparatedPoints")));
6a6439da 604
38e3d209 605 var newYs;
6a6439da 606
38e3d209
DV
607 // setup graphics context
608 var prevX = NaN;
609 var prevY = NaN;
610 var prevYs = [-1, -1];
611 var yscale = axis.yscale;
612 // should be same color as the lines but only 15% opaque.
613 var rgb = new RGBColor(color);
614 var err_color =
615 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')';
616 ctx.fillStyle = err_color;
617 ctx.beginPath();
618 while (iter.hasNext) {
619 var point = iter.next();
82dd90c5 620 if ((!stepPlot && !Dygraph.isOK(point.y)) || (stepPlot && !isNaN(prevY) && !Dygraph.isOK(prevY))) {
38e3d209
DV
621 prevX = NaN;
622 continue;
623 }
6a6439da 624
38e3d209
DV
625 if (stepPlot) {
626 newYs = [ point.y_bottom, point.y_top ];
627 prevY = point.y;
628 } else {
629 newYs = [ point.y_bottom, point.y_top ];
630 }
631 newYs[0] = e.plotArea.h * newYs[0] + e.plotArea.y;
632 newYs[1] = e.plotArea.h * newYs[1] + e.plotArea.y;
633 if (!isNaN(prevX)) {
a5701188 634 if (stepPlot) {
38e3d209 635 ctx.moveTo(prevX, prevYs[0]);
82dd90c5 636 ctx.lineTo(point.canvasx, prevYs[0]);
637 ctx.lineTo(point.canvasx, prevYs[1]);
38e3d209 638 } else {
82dd90c5 639 ctx.moveTo(prevX, prevYs[0]);
640 ctx.lineTo(point.canvasx, newYs[0]);
641 ctx.lineTo(point.canvasx, newYs[1]);
6a6439da 642 }
82dd90c5 643 ctx.lineTo(prevX, prevYs[1]);
38e3d209 644 ctx.closePath();
6a6439da 645 }
38e3d209
DV
646 prevYs = newYs;
647 prevX = point.canvasx;
6a6439da 648 }
38e3d209 649 ctx.fill();
42a9ebb8 650};
6a6439da 651
79253bd0 652/**
01a14b85
DV
653 * Draws the shaded regions when "fillGraph" is set. Not to be confused with
654 * error bars.
655 *
38e3d209
DV
656 * For stacked charts, it's more convenient to handle all the series
657 * simultaneously. So this plotter plots all the points on the first series
658 * it's asked to draw, then ignores all the other series.
659 *
01a14b85
DV
660 * @private
661 */
38e3d209 662DygraphCanvasRenderer._fillPlotter = function(e) {
38e3d209
DV
663 // We'll handle all the series at once, not one-by-one.
664 if (e.seriesIndex !== 0) return;
665
e2d8db3a 666 var g = e.dygraph;
38e3d209 667 var setNames = g.getLabels().slice(1); // remove x-axis
e2d8db3a 668
38e3d209
DV
669 // getLabels() includes names for invisible series, which are not included in
670 // allSeriesPoints. We remove those to make the two match.
671 // TODO(danvk): provide a simpler way to get this information.
672 for (var i = setNames.length; i >= 0; i--) {
673 if (!g.visibility()[i]) setNames.splice(i, 1);
674 }
675
e2d8db3a
DV
676 var anySeriesFilled = (function() {
677 for (var i = 0; i < setNames.length; i++) {
678 if (g.getOption("fillGraph", setNames[i])) return true;
679 }
680 return false;
681 })();
682
683 if (!anySeriesFilled) return;
684
685 var ctx = e.drawingContext;
686 var area = e.plotArea;
687 var sets = e.allSeriesPoints;
688 var setCount = sets.length;
689
38e3d209
DV
690 var fillAlpha = g.getOption('fillAlpha');
691 var stepPlot = g.getOption('stepPlot');
692 var stackedGraph = g.getOption("stackedGraph");
693 var colors = g.getColors();
01a14b85
DV
694
695 var baseline = {}; // for stacked graphs: baseline for filling
696 var currBaseline;
697
698 // process sets in reverse order (needed for stacked graphs)
9e85a8f4
DV
699 for (var setIdx = setCount - 1; setIdx >= 0; setIdx--) {
700 var setName = setNames[setIdx];
e2d8db3a
DV
701 if (!g.getOption('fillGraph', setName)) continue;
702
38e3d209
DV
703 var color = colors[setIdx];
704 var axis = g.axisPropertiesForSeries(setName);
01a14b85
DV
705 var axisY = 1.0 + axis.minyval * axis.yscale;
706 if (axisY < 0.0) axisY = 0.0;
707 else if (axisY > 1.0) axisY = 1.0;
38e3d209 708 axisY = area.h * axisY + area.y;
01a14b85 709
38e3d209 710 var points = sets[setIdx];
9e85a8f4 711 var iter = Dygraph.createIterator(points, 0, points.length,
01a14b85 712 DygraphCanvasRenderer._getIteratorPredicate(
38e3d209 713 g.getOption("connectSeparatedPoints")));
01a14b85
DV
714
715 // setup graphics context
716 var prevX = NaN;
717 var prevYs = [-1, -1];
718 var newYs;
719 var yscale = axis.yscale;
720 // should be same color as the lines but only 15% opaque.
721 var rgb = new RGBColor(color);
722 var err_color =
723 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')';
724 ctx.fillStyle = err_color;
725 ctx.beginPath();
726 while(iter.hasNext) {
727 var point = iter.next();
16febe6b
DV
728 if (!Dygraph.isOK(point.y)) {
729 prevX = NaN;
730 continue;
731 }
732 if (stackedGraph) {
733 currBaseline = baseline[point.canvasx];
734 var lastY;
735 if (currBaseline === undefined) {
736 lastY = axisY;
737 } else {
738 if(stepPlot) {
739 lastY = currBaseline[0];
01a14b85 740 } else {
16febe6b 741 lastY = currBaseline;
01a14b85 742 }
16febe6b
DV
743 }
744 newYs = [ point.canvasy, lastY ];
01a14b85 745
16febe6b
DV
746 if(stepPlot) {
747 // Step plots must keep track of the top and bottom of
748 // the baseline at each point.
749 if(prevYs[0] === -1) {
750 baseline[point.canvasx] = [ point.canvasy, axisY ];
01a14b85 751 } else {
16febe6b 752 baseline[point.canvasx] = [ point.canvasy, prevYs[0] ];
01a14b85 753 }
01a14b85 754 } else {
16febe6b 755 baseline[point.canvasx] = point.canvasy;
01a14b85 756 }
01a14b85 757
16febe6b
DV
758 } else {
759 newYs = [ point.canvasy, axisY ];
760 }
761 if (!isNaN(prevX)) {
762 ctx.moveTo(prevX, prevYs[0]);
763
764 if (stepPlot) {
765 ctx.lineTo(point.canvasx, prevYs[0]);
766 if(currBaseline) {
767 // Draw to the bottom of the baseline
768 ctx.lineTo(point.canvasx, currBaseline[1]);
01a14b85 769 } else {
01a14b85
DV
770 ctx.lineTo(point.canvasx, newYs[1]);
771 }
16febe6b
DV
772 } else {
773 ctx.lineTo(point.canvasx, newYs[0]);
774 ctx.lineTo(point.canvasx, newYs[1]);
01a14b85 775 }
16febe6b
DV
776
777 ctx.lineTo(prevX, prevYs[1]);
778 ctx.closePath();
01a14b85 779 }
16febe6b
DV
780 prevYs = newYs;
781 prevX = point.canvasx;
01a14b85
DV
782 }
783 ctx.fill();
784 }
785};