allow lint.sh to take a file as a command-line argument
[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) {
9f6db80e
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
0140347d
DV
338 ctx.moveTo(prevX, prevY);
339 ctx.lineTo(point.canvasx, prevY);
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);
31f8e58b 367 prevCanvasX = point.canvasx;
857a6931 368 }
239454e2
DV
369
370 // TODO(danvk): this moveTo is rarely necessary
0140347d
DV
371 ctx.moveTo(prevCanvasX, prevCanvasY);
372 ctx.lineTo(point.canvasx, point.canvasy);
b843b52c
RK
373 }
374 }
b843b52c
RK
375 if (drawPoints || isIsolated) {
376 pointsOnLine.push([point.canvasx, point.canvasy]);
377 }
31f8e58b
RK
378 prevCanvasX = point.canvasx;
379 prevCanvasY = point.canvasy;
b843b52c 380 }
7d1afbb9 381 first = false;
b843b52c 382 }
0140347d 383 ctx.stroke();
31f8e58b 384 return pointsOnLine;
857a6931
KW
385};
386
38e3d209
DV
387/**
388 * This fires the drawPointCallback functions, which draw dots on the points by
389 * default. This gets used when the "drawPoints" option is set, or when there
390 * are isolated points.
391 * @param {Object} e The dictionary passed to the plotter function.
392 * @private
393 */
394DygraphCanvasRenderer._drawPointsOnLine = function(
395 e, pointsOnLine, drawPointCallback, color, pointSize) {
396 var ctx = e.drawingContext;
397 for (var idx = 0; idx < pointsOnLine.length; idx++) {
398 var cb = pointsOnLine[idx];
399 ctx.save();
400 drawPointCallback(
401 e.dygraph, e.setName, ctx, cb[0], cb[1], color, pointSize);
402 ctx.restore();
857a6931 403 }
38e3d209 404}
ce49c2fa 405
6a1aa64f 406/**
38e3d209 407 * Attaches canvas coordinates to the points array.
758a629f 408 * @private
6a1aa64f 409 */
38e3d209 410DygraphCanvasRenderer.prototype._updatePoints = function() {
ff00d3e2
DV
411 // Update Points
412 // TODO(danvk): here
b843b52c
RK
413 //
414 // TODO(bhs): this loop is a hot-spot for high-point-count charts. These
415 // transformations can be pushed into the canvas via linear transformation
416 // matrices.
e60234cd
DV
417 // NOTE(danvk): this is trickier than it sounds at first. The transformation
418 // needs to be done before the .moveTo() and .lineTo() calls, but must be
419 // undone before the .stroke() call to ensure that the stroke width is
420 // unaffected. An alternative is to reduce the stroke width in the
421 // transformed coordinate space, but you can't specify different values for
422 // each dimension (as you can with .scale()). The speedup here is ~12%.
a12a78ae 423 var sets = this.layout.points;
38e3d209 424 for (var i = sets.length; i--;) {
a12a78ae
DV
425 var points = sets[i];
426 for (var j = points.length; j--;) {
427 var point = points[j];
428 point.canvasx = this.area.w * point.x + this.area.x;
429 point.canvasy = this.area.h * point.y + this.area.y;
430 }
6a1aa64f 431 }
38e3d209 432};
6a1aa64f 433
38e3d209
DV
434/**
435 * Add canvas Actually draw the lines chart, including error bars.
436 * If opt_seriesName is specified, only that series will be drawn.
437 * (This is used for expedited redrawing with highlightSeriesOpts)
438 * Lines are typically drawn in the non-interactive dygraph canvas. If opt_ctx
439 * is specified, they can be drawn elsewhere.
440 *
441 * This function can only be called if DygraphLayout's points array has been
442 * updated with canvas{x,y} attributes, i.e. by
443 * DygraphCanvasRenderer._updatePoints.
444 * @private
445 */
446DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ctx) {
447 var ctx = opt_ctx || this.elementContext;
448 var errorBars = this.attr_("errorBars") || this.attr_("customBars");
449 var fillGraph = this.attr_("fillGraph");
450 var i;
6a834bbb 451
38e3d209
DV
452 var sets = this.layout.points;
453 var setNames = this.layout.setNames;
454 var setCount = setNames.length;
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++) {
467 var setName = setNames[i];
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++) {
479 var setName = setNames[j];
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 );
575}
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;
585 var errorBars = g.getOption("errorBars") || g.getOption("customBars");
586 if (!errorBars) return;
587
588 var fillGraph = g.getOption("fillGraph");
589 if (fillGraph) {
590 g.warn("Can't use fillGraph option with error bars");
591 }
6a6439da 592
38e3d209
DV
593 var setName = e.setName;
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();
620 if (!Dygraph.isOK(point.y)) {
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, newYs[0]);
a5701188 636 } else {
38e3d209 637 ctx.moveTo(prevX, prevYs[0]);
a5701188 638 }
38e3d209
DV
639 ctx.lineTo(point.canvasx, newYs[0]);
640 ctx.lineTo(point.canvasx, newYs[1]);
641 if (stepPlot) {
642 ctx.lineTo(prevX, newYs[1]);
643 } else {
644 ctx.lineTo(prevX, prevYs[1]);
6a6439da 645 }
38e3d209 646 ctx.closePath();
6a6439da 647 }
38e3d209
DV
648 prevYs = newYs;
649 prevX = point.canvasx;
6a6439da 650 }
38e3d209
DV
651 ctx.fill();
652}
6a6439da 653
79253bd0 654/**
01a14b85
DV
655 * Draws the shaded regions when "fillGraph" is set. Not to be confused with
656 * error bars.
657 *
38e3d209
DV
658 * For stacked charts, it's more convenient to handle all the series
659 * simultaneously. So this plotter plots all the points on the first series
660 * it's asked to draw, then ignores all the other series.
661 *
01a14b85
DV
662 * @private
663 */
38e3d209
DV
664DygraphCanvasRenderer._fillPlotter = function(e) {
665 var g = e.dygraph;
666 if (!g.getOption("fillGraph")) return;
667
668 // We'll handle all the series at once, not one-by-one.
669 if (e.seriesIndex !== 0) return;
670
671 var ctx = e.drawingContext;
672 var area = e.plotArea;
673 var sets = e.allSeriesPoints;
674 var setCount = sets.length;
675
676 var setNames = g.getLabels().slice(1); // remove x-axis
677 // getLabels() includes names for invisible series, which are not included in
678 // allSeriesPoints. We remove those to make the two match.
679 // TODO(danvk): provide a simpler way to get this information.
680 for (var i = setNames.length; i >= 0; i--) {
681 if (!g.visibility()[i]) setNames.splice(i, 1);
682 }
683
684 var fillAlpha = g.getOption('fillAlpha');
685 var stepPlot = g.getOption('stepPlot');
686 var stackedGraph = g.getOption("stackedGraph");
687 var colors = g.getColors();
01a14b85
DV
688
689 var baseline = {}; // for stacked graphs: baseline for filling
690 var currBaseline;
691
692 // process sets in reverse order (needed for stacked graphs)
9e85a8f4
DV
693 for (var setIdx = setCount - 1; setIdx >= 0; setIdx--) {
694 var setName = setNames[setIdx];
38e3d209
DV
695 var color = colors[setIdx];
696 var axis = g.axisPropertiesForSeries(setName);
01a14b85
DV
697 var axisY = 1.0 + axis.minyval * axis.yscale;
698 if (axisY < 0.0) axisY = 0.0;
699 else if (axisY > 1.0) axisY = 1.0;
38e3d209 700 axisY = area.h * axisY + area.y;
01a14b85 701
38e3d209 702 var points = sets[setIdx];
9e85a8f4 703 var iter = Dygraph.createIterator(points, 0, points.length,
01a14b85 704 DygraphCanvasRenderer._getIteratorPredicate(
38e3d209 705 g.getOption("connectSeparatedPoints")));
01a14b85
DV
706
707 // setup graphics context
708 var prevX = NaN;
709 var prevYs = [-1, -1];
710 var newYs;
711 var yscale = axis.yscale;
712 // should be same color as the lines but only 15% opaque.
713 var rgb = new RGBColor(color);
714 var err_color =
715 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')';
716 ctx.fillStyle = err_color;
717 ctx.beginPath();
718 while(iter.hasNext) {
719 var point = iter.next();
16febe6b
DV
720 if (!Dygraph.isOK(point.y)) {
721 prevX = NaN;
722 continue;
723 }
724 if (stackedGraph) {
725 currBaseline = baseline[point.canvasx];
726 var lastY;
727 if (currBaseline === undefined) {
728 lastY = axisY;
729 } else {
730 if(stepPlot) {
731 lastY = currBaseline[0];
01a14b85 732 } else {
16febe6b 733 lastY = currBaseline;
01a14b85 734 }
16febe6b
DV
735 }
736 newYs = [ point.canvasy, lastY ];
01a14b85 737
16febe6b
DV
738 if(stepPlot) {
739 // Step plots must keep track of the top and bottom of
740 // the baseline at each point.
741 if(prevYs[0] === -1) {
742 baseline[point.canvasx] = [ point.canvasy, axisY ];
01a14b85 743 } else {
16febe6b 744 baseline[point.canvasx] = [ point.canvasy, prevYs[0] ];
01a14b85 745 }
01a14b85 746 } else {
16febe6b 747 baseline[point.canvasx] = point.canvasy;
01a14b85 748 }
01a14b85 749
16febe6b
DV
750 } else {
751 newYs = [ point.canvasy, axisY ];
752 }
753 if (!isNaN(prevX)) {
754 ctx.moveTo(prevX, prevYs[0]);
755
756 if (stepPlot) {
757 ctx.lineTo(point.canvasx, prevYs[0]);
758 if(currBaseline) {
759 // Draw to the bottom of the baseline
760 ctx.lineTo(point.canvasx, currBaseline[1]);
01a14b85 761 } else {
01a14b85
DV
762 ctx.lineTo(point.canvasx, newYs[1]);
763 }
16febe6b
DV
764 } else {
765 ctx.lineTo(point.canvasx, newYs[0]);
766 ctx.lineTo(point.canvasx, newYs[1]);
01a14b85 767 }
16febe6b
DV
768
769 ctx.lineTo(prevX, prevYs[1]);
770 ctx.closePath();
01a14b85 771 }
16febe6b
DV
772 prevYs = newYs;
773 prevX = point.canvasx;
01a14b85
DV
774 }
775 ctx.fill();
776 }
777};