Add methods to DygraphOps to dispatch mouseover and mouseout; some simplification...
[dygraphs.git] / dygraph-canvas.js
1 /**
2 * @license
3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
5 */
6
7 /**
8 * @fileoverview Based on PlotKit.CanvasRenderer, but modified to meet the
9 * needs of dygraphs.
10 *
11 * In particular, support for:
12 * - grid overlays
13 * - error bars
14 * - dygraphs attribute system
15 */
16
17 /**
18 * The DygraphCanvasRenderer class does the actual rendering of the chart onto
19 * a canvas. It's based on PlotKit.CanvasRenderer.
20 * @param {Object} element The canvas to attach to
21 * @param {Object} elementContext The 2d context of the canvas (injected so it
22 * can be mocked for testing.)
23 * @param {Layout} layout The DygraphLayout object for this graph.
24 * @constructor
25 */
26
27 /*jshint globalstrict: true */
28 /*global Dygraph:false,RGBColorParser:false */
29 "use strict";
30
31
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 */
49 var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
50 this.dygraph_ = dygraph;
51
52 this.layout = layout;
53 this.element = element;
54 this.elementContext = elementContext;
55 this.container = this.element.parentNode;
56
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
65 this.area = layout.getPlotArea();
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.
71 if (this.dygraph_.isUsingExcanvas_) {
72 this._createIEClipArea();
73 } else {
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();
81
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 }
87 }
88 };
89
90 /**
91 * This just forwards to dygraph.attr_.
92 * TODO(danvk): remove this?
93 * @private
94 */
95 DygraphCanvasRenderer.prototype.attr_ = function(name, opt_seriesName) {
96 return this.dygraph_.attr_(name, opt_seriesName);
97 };
98
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 */
105 DygraphCanvasRenderer.prototype.clear = function() {
106 var context;
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 }
114 context = this.elementContext;
115 }
116 catch (e) {
117 // TODO(danvk): this is broken, since MochiKit.Async is gone.
118 // this.clearDelay = MochiKit.Async.wait(this.IEDelay);
119 // this.clearDelay.addCallback(bind(this.clear, this));
120 return;
121 }
122 }
123
124 context = this.elementContext;
125 context.clearRect(0, 0, this.width, this.height);
126 };
127
128 /**
129 * Checks whether the browser supports the <canvas> tag.
130 * @private
131 */
132 DygraphCanvasRenderer.isSupported = function(canvasName) {
133 var canvas = null;
134 try {
135 if (typeof(canvasName) == 'undefined' || canvasName === null) {
136 canvas = document.createElement("canvas");
137 } else {
138 canvas = canvasName;
139 }
140 canvas.getContext("2d");
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;
150 };
151
152 /**
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
158 */
159 DygraphCanvasRenderer.prototype.render = function() {
160 // attaches point.canvas{x,y}
161 this._updatePoints();
162
163 // actually draws the chart.
164 this._renderLineChart();
165 };
166
167 DygraphCanvasRenderer.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) {
191 if (area.w === 0 || area.h === 0) {
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
207 createClipDiv({
208 x:0, y:0,
209 w:plotArea.x,
210 h:this.height
211 });
212
213 // Top
214 createClipDiv({
215 x: plotArea.x, y: 0,
216 w: this.width - plotArea.x,
217 h: plotArea.y
218 });
219
220 // Right side
221 createClipDiv({
222 x: plotArea.x + plotArea.w, y: 0,
223 w: this.width-plotArea.x - plotArea.w,
224 h: this.height
225 });
226
227 // Bottom
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 };
235
236
237 /**
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.
242 */
243 DygraphCanvasRenderer._getIteratorPredicate = function(connectSeparatedPoints) {
244 return connectSeparatedPoints ?
245 DygraphCanvasRenderer._predicateThatSkipsEmptyPoints :
246 null;
247 };
248
249 DygraphCanvasRenderer._predicateThatSkipsEmptyPoints =
250 function(array, idx) {
251 return array[idx].yval !== null;
252 };
253
254 /**
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.
257 * @private
258 */
259 DygraphCanvasRenderer._drawStyledLine = function(e,
260 color, strokeWidth, strokePattern, drawPoints,
261 drawPointCallback, pointSize) {
262 var g = e.dygraph;
263 // TODO(konigsberg): Compute attributes outside this method call.
264 var stepPlot = g.getOption("stepPlot", e.setName);
265
266 if (!Dygraph.isArrayLike(strokePattern)) {
267 strokePattern = null;
268 }
269
270 var drawGapPoints = g.getOption('drawGapEdgePoints', e.setName);
271
272 var points = e.points;
273 var iter = Dygraph.createIterator(points, 0, points.length,
274 DygraphCanvasRenderer._getIteratorPredicate(
275 g.getOption("connectSeparatedPoints"))); // TODO(danvk): per-series?
276
277 var stroking = strokePattern && (strokePattern.length >= 2);
278
279 var ctx = e.drawingContext;
280 ctx.save();
281 if (stroking) {
282 ctx.installPattern(strokePattern);
283 }
284
285 var pointsOnLine = DygraphCanvasRenderer._drawSeries(
286 e, iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color);
287 DygraphCanvasRenderer._drawPointsOnLine(
288 e, pointsOnLine, drawPointCallback, color, pointSize);
289
290 if (stroking) {
291 ctx.uninstallPattern();
292 }
293
294 ctx.restore();
295 };
296
297 /**
298 * This does the actual drawing of lines on the canvas, for just one series.
299 * Returns a list of [canvasx, canvasy] pairs for points for which a
300 * drawPointCallback should be fired. These include isolated points, or all
301 * points if drawPoints=true.
302 * @param {Object} e The dictionary passed to the plotter function.
303 * @private
304 */
305 DygraphCanvasRenderer._drawSeries = function(e,
306 iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color) {
307
308 var prevCanvasX = null;
309 var prevCanvasY = null;
310 var nextCanvasY = null;
311 var isIsolated; // true if this point is isolated (no line segments)
312 var point; // the point being processed in the while loop
313 var pointsOnLine = []; // Array of [canvasx, canvasy] pairs.
314 var first = true; // the first cycle through the while loop
315
316 var ctx = e.drawingContext;
317 ctx.beginPath();
318 ctx.strokeStyle = color;
319 ctx.lineWidth = strokeWidth;
320
321 // NOTE: we break the iterator's encapsulation here for about a 25% speedup.
322 var arr = iter.array_;
323 var limit = iter.end_;
324 var predicate = iter.predicate_;
325
326 for (var i = iter.start_; i < limit; i++) {
327 point = arr[i];
328 if (predicate) {
329 while (i < limit && !predicate(arr, i)) {
330 i++;
331 }
332 if (i == limit) break;
333 point = arr[i];
334 }
335
336 if (point.canvasy === null || point.canvasy != point.canvasy) {
337 if (stepPlot && prevCanvasX !== null) {
338 // Draw a horizontal line to the start of the missing data
339 ctx.moveTo(prevCanvasX, prevCanvasY);
340 ctx.lineTo(point.canvasx, prevCanvasY);
341 }
342 prevCanvasX = prevCanvasY = null;
343 } else {
344 isIsolated = false;
345 if (drawGapPoints || !prevCanvasX) {
346 iter.nextIdx_ = i;
347 iter.next();
348 nextCanvasY = iter.hasNext ? iter.peek.canvasy : null;
349
350 var isNextCanvasYNullOrNaN = nextCanvasY === null ||
351 nextCanvasY != nextCanvasY;
352 isIsolated = (!prevCanvasX && isNextCanvasYNullOrNaN);
353 if (drawGapPoints) {
354 // Also consider a point to be "isolated" if it's adjacent to a
355 // null point, excluding the graph edges.
356 if ((!first && !prevCanvasX) ||
357 (iter.hasNext && isNextCanvasYNullOrNaN)) {
358 isIsolated = true;
359 }
360 }
361 }
362
363 if (prevCanvasX !== null) {
364 if (strokeWidth) {
365 if (stepPlot) {
366 ctx.moveTo(prevCanvasX, prevCanvasY);
367 ctx.lineTo(point.canvasx, prevCanvasY);
368 }
369
370 ctx.lineTo(point.canvasx, point.canvasy);
371 }
372 } else {
373 ctx.moveTo(point.canvasx, point.canvasy);
374 }
375 if (drawPoints || isIsolated) {
376 pointsOnLine.push([point.canvasx, point.canvasy]);
377 }
378 prevCanvasX = point.canvasx;
379 prevCanvasY = point.canvasy;
380 }
381 first = false;
382 }
383 ctx.stroke();
384 return pointsOnLine;
385 };
386
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 */
394 DygraphCanvasRenderer._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();
403 }
404 };
405
406 /**
407 * Attaches canvas coordinates to the points array.
408 * @private
409 */
410 DygraphCanvasRenderer.prototype._updatePoints = function() {
411 // Update Points
412 // TODO(danvk): here
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.
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%.
423 var sets = this.layout.points;
424 for (var i = sets.length; i--;) {
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 }
431 }
432 };
433
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 */
446 DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ctx) {
447 var ctx = opt_ctx || this.elementContext;
448 var i;
449
450 var sets = this.layout.points;
451 var setNames = this.layout.setNames;
452 var setName;
453
454 this.colors = this.dygraph_.colorsMap_;
455
456 // Determine which series have specialized plotters.
457 var plotter_attr = this.attr_("plotter");
458 var plotters = plotter_attr;
459 if (!Dygraph.isArrayLike(plotters)) {
460 plotters = [plotters];
461 }
462
463 var setPlotters = {}; // series name -> plotter fn.
464 for (i = 0; i < setNames.length; i++) {
465 setName = setNames[i];
466 var setPlotter = this.attr_("plotter", setName);
467 if (setPlotter == plotter_attr) continue; // not specialized.
468
469 setPlotters[setName] = setPlotter;
470 }
471
472 for (i = 0; i < plotters.length; i++) {
473 var plotter = plotters[i];
474 var is_last = (i == plotters.length - 1);
475
476 for (var j = 0; j < sets.length; j++) {
477 setName = setNames[j];
478 if (opt_seriesName && setName != opt_seriesName) continue;
479
480 var points = sets[j];
481
482 // Only throw in the specialized plotters on the last iteration.
483 var p = plotter;
484 if (setName in setPlotters) {
485 if (is_last) {
486 p = setPlotters[setName];
487 } else {
488 // Don't use the standard plotters in this case.
489 continue;
490 }
491 }
492
493 var color = this.colors[setName];
494 var strokeWidth = this.dygraph_.getOption("strokeWidth", setName);
495
496 ctx.save();
497 ctx.strokeStyle = color;
498 ctx.lineWidth = strokeWidth;
499 p({
500 points: points,
501 setName: setName,
502 drawingContext: ctx,
503 color: color,
504 strokeWidth: strokeWidth,
505 dygraph: this.dygraph_,
506 axis: this.dygraph_.axisPropertiesForSeries(setName),
507 plotArea: this.area,
508 seriesIndex: j,
509 seriesCount: sets.length,
510 allSeriesPoints: sets
511 });
512 ctx.restore();
513 }
514 }
515 };
516
517 /**
518 * Standard plotters. These may be used by clients via Dygraph.Plotters.
519 * See comments there for more details.
520 */
521 DygraphCanvasRenderer._Plotters = {
522 linePlotter: function(e) {
523 DygraphCanvasRenderer._linePlotter(e);
524 },
525
526 fillPlotter: function(e) {
527 DygraphCanvasRenderer._fillPlotter(e);
528 },
529
530 errorPlotter: function(e) {
531 DygraphCanvasRenderer._errorPlotter(e);
532 }
533 };
534
535 /**
536 * Plotter which draws the central lines for a series.
537 * @private
538 */
539 DygraphCanvasRenderer._linePlotter = function(e) {
540 var g = e.dygraph;
541 var setName = e.setName;
542 var strokeWidth = e.strokeWidth;
543
544 // TODO(danvk): Check if there's any performance impact of just calling
545 // getOption() inside of _drawStyledLine. Passing in so many parameters makes
546 // this code a bit nasty.
547 var borderWidth = g.getOption("strokeBorderWidth", setName);
548 var drawPointCallback = g.getOption("drawPointCallback", setName) ||
549 Dygraph.Circles.DEFAULT;
550 var strokePattern = g.getOption("strokePattern", setName);
551 var drawPoints = g.getOption("drawPoints", setName);
552 var pointSize = g.getOption("pointSize", setName);
553
554 if (borderWidth && strokeWidth) {
555 DygraphCanvasRenderer._drawStyledLine(e,
556 g.getOption("strokeBorderColor", setName),
557 strokeWidth + 2 * borderWidth,
558 strokePattern,
559 drawPoints,
560 drawPointCallback,
561 pointSize
562 );
563 }
564
565 DygraphCanvasRenderer._drawStyledLine(e,
566 e.color,
567 strokeWidth,
568 strokePattern,
569 drawPoints,
570 drawPointCallback,
571 pointSize
572 );
573 };
574
575 /**
576 * Draws the shaded error bars/confidence intervals for each series.
577 * This happens before the center lines are drawn, since the center lines
578 * need to be drawn on top of the error bars for all series.
579 * @private
580 */
581 DygraphCanvasRenderer._errorPlotter = function(e) {
582 var g = e.dygraph;
583 var setName = e.setName;
584 var errorBars = g.getOption("errorBars") || g.getOption("customBars");
585 if (!errorBars) return;
586
587 var fillGraph = g.getOption("fillGraph", setName);
588 if (fillGraph) {
589 g.warn("Can't use fillGraph option with error bars");
590 }
591
592 var ctx = e.drawingContext;
593 var color = e.color;
594 var fillAlpha = g.getOption('fillAlpha', setName);
595 var stepPlot = g.getOption("stepPlot", setName);
596 var points = e.points;
597
598 var iter = Dygraph.createIterator(points, 0, points.length,
599 DygraphCanvasRenderer._getIteratorPredicate(
600 g.getOption("connectSeparatedPoints")));
601
602 var newYs;
603
604 // setup graphics context
605 var prevX = NaN;
606 var prevY = NaN;
607 var prevYs = [-1, -1];
608 // should be same color as the lines but only 15% opaque.
609 var rgb = new RGBColorParser(color);
610 var err_color =
611 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')';
612 ctx.fillStyle = err_color;
613 ctx.beginPath();
614
615 var isNullUndefinedOrNaN = function(x) {
616 return (x === null ||
617 x === undefined ||
618 isNaN(x));
619 };
620
621 while (iter.hasNext) {
622 var point = iter.next();
623 if ((!stepPlot && isNullUndefinedOrNaN(point.y)) ||
624 (stepPlot && !isNaN(prevY) && isNullUndefinedOrNaN(prevY))) {
625 prevX = NaN;
626 continue;
627 }
628
629 if (stepPlot) {
630 newYs = [ point.y_bottom, point.y_top ];
631 prevY = point.y;
632 } else {
633 newYs = [ point.y_bottom, point.y_top ];
634 }
635 newYs[0] = e.plotArea.h * newYs[0] + e.plotArea.y;
636 newYs[1] = e.plotArea.h * newYs[1] + e.plotArea.y;
637 if (!isNaN(prevX)) {
638 if (stepPlot) {
639 ctx.moveTo(prevX, prevYs[0]);
640 ctx.lineTo(point.canvasx, prevYs[0]);
641 ctx.lineTo(point.canvasx, prevYs[1]);
642 } else {
643 ctx.moveTo(prevX, prevYs[0]);
644 ctx.lineTo(point.canvasx, newYs[0]);
645 ctx.lineTo(point.canvasx, newYs[1]);
646 }
647 ctx.lineTo(prevX, prevYs[1]);
648 ctx.closePath();
649 }
650 prevYs = newYs;
651 prevX = point.canvasx;
652 }
653 ctx.fill();
654 };
655
656 /**
657 * Draws the shaded regions when "fillGraph" is set. Not to be confused with
658 * error bars.
659 *
660 * For stacked charts, it's more convenient to handle all the series
661 * simultaneously. So this plotter plots all the points on the first series
662 * it's asked to draw, then ignores all the other series.
663 *
664 * @private
665 */
666 DygraphCanvasRenderer._fillPlotter = function(e) {
667 // We'll handle all the series at once, not one-by-one.
668 if (e.seriesIndex !== 0) return;
669
670 var g = e.dygraph;
671 var setNames = g.getLabels().slice(1); // remove x-axis
672
673 // getLabels() includes names for invisible series, which are not included in
674 // allSeriesPoints. We remove those to make the two match.
675 // TODO(danvk): provide a simpler way to get this information.
676 for (var i = setNames.length; i >= 0; i--) {
677 if (!g.visibility()[i]) setNames.splice(i, 1);
678 }
679
680 var anySeriesFilled = (function() {
681 for (var i = 0; i < setNames.length; i++) {
682 if (g.getOption("fillGraph", setNames[i])) return true;
683 }
684 return false;
685 })();
686
687 if (!anySeriesFilled) return;
688
689 var ctx = e.drawingContext;
690 var area = e.plotArea;
691 var sets = e.allSeriesPoints;
692 var setCount = sets.length;
693
694 var fillAlpha = g.getOption('fillAlpha');
695 var stackedGraph = g.getOption("stackedGraph");
696 var colors = g.getColors();
697
698 var baseline = {}; // for stacked graphs: baseline for filling
699 var currBaseline;
700 var prevStepPlot; // for different line drawing modes (line/step) per series
701
702 // process sets in reverse order (needed for stacked graphs)
703 for (var setIdx = setCount - 1; setIdx >= 0; setIdx--) {
704 var setName = setNames[setIdx];
705 if (!g.getOption('fillGraph', setName)) continue;
706
707 var stepPlot = g.getOption('stepPlot', setName);
708 var color = colors[setIdx];
709 var axis = g.axisPropertiesForSeries(setName);
710 var axisY = 1.0 + axis.minyval * axis.yscale;
711 if (axisY < 0.0) axisY = 0.0;
712 else if (axisY > 1.0) axisY = 1.0;
713 axisY = area.h * axisY + area.y;
714
715 var points = sets[setIdx];
716 var iter = Dygraph.createIterator(points, 0, points.length,
717 DygraphCanvasRenderer._getIteratorPredicate(
718 g.getOption("connectSeparatedPoints")));
719
720 // setup graphics context
721 var prevX = NaN;
722 var prevYs = [-1, -1];
723 var newYs;
724 // should be same color as the lines but only 15% opaque.
725 var rgb = new RGBColorParser(color);
726 var err_color =
727 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')';
728 ctx.fillStyle = err_color;
729 ctx.beginPath();
730 while(iter.hasNext) {
731 var point = iter.next();
732 if (!Dygraph.isOK(point.y)) {
733 prevX = NaN;
734 continue;
735 }
736 if (stackedGraph) {
737 currBaseline = baseline[point.canvasx];
738 var lastY;
739 if (currBaseline === undefined) {
740 lastY = axisY;
741 } else {
742 if(prevStepPlot) {
743 lastY = currBaseline[0];
744 } else {
745 lastY = currBaseline;
746 }
747 }
748 newYs = [ point.canvasy, lastY ];
749
750 if(stepPlot) {
751 // Step plots must keep track of the top and bottom of
752 // the baseline at each point.
753 if(prevYs[0] === -1) {
754 baseline[point.canvasx] = [ point.canvasy, axisY ];
755 } else {
756 baseline[point.canvasx] = [ point.canvasy, prevYs[0] ];
757 }
758 } else {
759 baseline[point.canvasx] = point.canvasy;
760 }
761
762 } else {
763 newYs = [ point.canvasy, axisY ];
764 }
765 if (!isNaN(prevX)) {
766 ctx.moveTo(prevX, prevYs[0]);
767
768 // Move to top fill point
769 if (stepPlot) {
770 ctx.lineTo(point.canvasx, prevYs[0]);
771 } else {
772 ctx.lineTo(point.canvasx, newYs[0]);
773 }
774 // Move to bottom fill point
775 if (prevStepPlot && currBaseline) {
776 // Draw to the bottom of the baseline
777 ctx.lineTo(point.canvasx, currBaseline[1]);
778 } else {
779 ctx.lineTo(point.canvasx, newYs[1]);
780 }
781
782 ctx.lineTo(prevX, prevYs[1]);
783 ctx.closePath();
784 }
785 prevYs = newYs;
786 prevX = point.canvasx;
787 }
788 prevStepPlot = stepPlot;
789 ctx.fill();
790 }
791 };