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