temporarily disable some ticker tests
[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 */
423f5ed3 26DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
9317362d 27 this.dygraph_ = dygraph;
fbe31dc8 28
fbe31dc8 29 this.layout = layout;
b0c3b730 30 this.element = element;
2cf95fff 31 this.elementContext = elementContext;
fbe31dc8
DV
32 this.container = this.element.parentNode;
33
fbe31dc8
DV
34 this.height = this.element.height;
35 this.width = this.element.width;
36
37 // --- check whether everything is ok before we return
38 if (!this.isIE && !(DygraphCanvasRenderer.isSupported(this.element)))
39 throw "Canvas is not supported.";
40
41 // internal state
42 this.xlabels = new Array();
43 this.ylabels = new Array();
ce49c2fa 44 this.annotations = new Array();
ad1798c2 45 this.chartLabels = {};
fbe31dc8 46
ccd9d7c2 47 this.area = layout.plotArea;
423f5ed3
DV
48 this.container.style.position = "relative";
49 this.container.style.width = this.width + "px";
50
51 // Set up a clipping area for the canvas (and the interaction canvas).
52 // This ensures that we don't overdraw.
53 var ctx = this.dygraph_.canvas_ctx_;
54 ctx.beginPath();
55 ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
56 ctx.clip();
57
58 ctx = this.dygraph_.hidden_ctx_;
59 ctx.beginPath();
60 ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
61 ctx.clip();
62};
63
64DygraphCanvasRenderer.prototype.attr_ = function(x) {
65 return this.dygraph_.attr_(x);
66};
67
fbe31dc8
DV
68DygraphCanvasRenderer.prototype.clear = function() {
69 if (this.isIE) {
70 // VML takes a while to start up, so we just poll every this.IEDelay
71 try {
72 if (this.clearDelay) {
73 this.clearDelay.cancel();
74 this.clearDelay = null;
75 }
2cf95fff 76 var context = this.elementContext;
fbe31dc8
DV
77 }
78 catch (e) {
76171648 79 // TODO(danvk): this is broken, since MochiKit.Async is gone.
fbe31dc8
DV
80 this.clearDelay = MochiKit.Async.wait(this.IEDelay);
81 this.clearDelay.addCallback(bind(this.clear, this));
82 return;
83 }
84 }
85
2cf95fff 86 var context = this.elementContext;
fbe31dc8
DV
87 context.clearRect(0, 0, this.width, this.height);
88
2160ed4a 89 for (var i = 0; i < this.xlabels.length; i++) {
b0c3b730 90 var el = this.xlabels[i];
b304aaec 91 if (el.parentNode) el.parentNode.removeChild(el);
2160ed4a
DV
92 }
93 for (var i = 0; i < this.ylabels.length; i++) {
b0c3b730 94 var el = this.ylabels[i];
b304aaec 95 if (el.parentNode) el.parentNode.removeChild(el);
2160ed4a 96 }
ce49c2fa
DV
97 for (var i = 0; i < this.annotations.length; i++) {
98 var el = this.annotations[i];
b304aaec 99 if (el.parentNode) el.parentNode.removeChild(el);
ce49c2fa 100 }
ad1798c2
DV
101 for (var k in this.chartLabels) {
102 if (!this.chartLabels.hasOwnProperty(k)) continue;
103 var el = this.chartLabels[k];
104 if (el.parentNode) el.parentNode.removeChild(el);
105 }
fbe31dc8
DV
106 this.xlabels = new Array();
107 this.ylabels = new Array();
ce49c2fa 108 this.annotations = new Array();
ad1798c2 109 this.chartLabels = {};
fbe31dc8
DV
110};
111
112
113DygraphCanvasRenderer.isSupported = function(canvasName) {
114 var canvas = null;
115 try {
21d3323f 116 if (typeof(canvasName) == 'undefined' || canvasName == null)
b0c3b730 117 canvas = document.createElement("canvas");
fbe31dc8 118 else
b0c3b730 119 canvas = canvasName;
fbe31dc8
DV
120 var context = canvas.getContext("2d");
121 }
122 catch (e) {
123 var ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
124 var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
125 if ((!ie) || (ie[1] < 6) || (opera))
126 return false;
127 return true;
128 }
129 return true;
6a1aa64f 130};
6a1aa64f
DV
131
132/**
600d841a
DV
133 * @param { [String] } colors Array of color strings. Should have one entry for
134 * each series to be rendered.
135 */
136DygraphCanvasRenderer.prototype.setColors = function(colors) {
137 this.colorScheme_ = colors;
138};
139
140/**
6a1aa64f
DV
141 * Draw an X/Y grid on top of the existing plot
142 */
285a6bda 143DygraphCanvasRenderer.prototype.render = function() {
528ce7e5
DV
144 // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to
145 // half-integers. This prevents them from drawing in two rows/cols.
2cf95fff 146 var ctx = this.elementContext;
528ce7e5
DV
147 function halfUp(x){return Math.round(x)+0.5};
148 function halfDown(y){return Math.round(y)-0.5};
e7746234 149
423f5ed3 150 if (this.attr_('underlayCallback')) {
1e41bd2d
DV
151 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
152 // users who expect a deprecated form of this callback.
423f5ed3 153 this.attr_('underlayCallback')(ctx, this.area, this.dygraph_, this.dygraph_);
e7746234
EC
154 }
155
423f5ed3 156 if (this.attr_('drawYGrid')) {
6a1aa64f
DV
157 var ticks = this.layout.yticks;
158 ctx.save();
423f5ed3 159 ctx.strokeStyle = this.attr_('gridLineColor');
990d6a35 160 ctx.lineWidth = this.attr_('gridLineWidth');
6a1aa64f 161 for (var i = 0; i < ticks.length; i++) {
880a574f
DV
162 // TODO(danvk): allow secondary axes to draw a grid, too.
163 if (ticks[i][0] != 0) continue;
528ce7e5
DV
164 var x = halfUp(this.area.x);
165 var y = halfDown(this.area.y + ticks[i][1] * this.area.h);
6a1aa64f
DV
166 ctx.beginPath();
167 ctx.moveTo(x, y);
168 ctx.lineTo(x + this.area.w, y);
169 ctx.closePath();
170 ctx.stroke();
171 }
172 }
173
423f5ed3 174 if (this.attr_('drawXGrid')) {
6a1aa64f
DV
175 var ticks = this.layout.xticks;
176 ctx.save();
423f5ed3 177 ctx.strokeStyle = this.attr_('gridLineColor');
990d6a35 178 ctx.lineWidth = this.attr_('gridLineWidth');
6a1aa64f 179 for (var i=0; i<ticks.length; i++) {
528ce7e5
DV
180 var x = halfUp(this.area.x + ticks[i][0] * this.area.w);
181 var y = halfDown(this.area.y + this.area.h);
6a1aa64f 182 ctx.beginPath();
880a574f 183 ctx.moveTo(x, y);
6a1aa64f
DV
184 ctx.lineTo(x, this.area.y);
185 ctx.closePath();
186 ctx.stroke();
187 }
188 }
2ce09b19
DV
189
190 // Do the ordinary rendering, as before
2ce09b19 191 this._renderLineChart();
fbe31dc8 192 this._renderAxis();
ccd9d7c2 193 this._renderChartLabels();
ce49c2fa 194 this._renderAnnotations();
fbe31dc8
DV
195};
196
197
198DygraphCanvasRenderer.prototype._renderAxis = function() {
423f5ed3 199 if (!this.attr_('drawXAxis') && !this.attr_('drawYAxis')) return;
fbe31dc8 200
528ce7e5
DV
201 // Round pixels to half-integer boundaries for crisper drawing.
202 function halfUp(x){return Math.round(x)+0.5};
203 function halfDown(y){return Math.round(y)-0.5};
204
2cf95fff 205 var context = this.elementContext;
fbe31dc8 206
34fedff8 207 var labelStyle = {
423f5ed3
DV
208 position: "absolute",
209 fontSize: this.attr_('axisLabelFontSize') + "px",
210 zIndex: 10,
211 color: this.attr_('axisLabelColor'),
212 width: this.attr_('axisLabelWidth') + "px",
74a5af31 213 // height: this.attr_('axisLabelFontSize') + 2 + "px",
ccd9d7c2 214 lineHeight: "normal", // Something other than "normal" line-height screws up label positioning.
423f5ed3 215 overflow: "hidden"
34fedff8 216 };
48e614ac 217 var makeDiv = function(txt, axis, prec_axis) {
34fedff8
DV
218 var div = document.createElement("div");
219 for (var name in labelStyle) {
85b99f0b
DV
220 if (labelStyle.hasOwnProperty(name)) {
221 div.style[name] = labelStyle[name];
222 }
fbe31dc8 223 }
ba451526 224 var inner_div = document.createElement("div");
48e614ac
DV
225 inner_div.className = 'dygraph-axis-label' +
226 ' dygraph-axis-label-' + axis +
227 (prec_axis ? ' dygraph-axis-label-' + prec_axis : '');
ba451526
DV
228 inner_div.appendChild(document.createTextNode(txt));
229 div.appendChild(inner_div);
34fedff8 230 return div;
fbe31dc8
DV
231 };
232
233 // axis lines
234 context.save();
423f5ed3
DV
235 context.strokeStyle = this.attr_('axisLineColor');
236 context.lineWidth = this.attr_('axisLineWidth');
fbe31dc8 237
423f5ed3 238 if (this.attr_('drawYAxis')) {
8b7a0cc3 239 if (this.layout.yticks && this.layout.yticks.length > 0) {
48e614ac 240 var num_axes = this.dygraph_.numAxes();
2160ed4a
DV
241 for (var i = 0; i < this.layout.yticks.length; i++) {
242 var tick = this.layout.yticks[i];
fbe31dc8
DV
243 if (typeof(tick) == "function") return;
244 var x = this.area.x;
880a574f 245 var sgn = 1;
48e614ac 246 var prec_axis = 'y1';
880a574f
DV
247 if (tick[0] == 1) { // right-side y-axis
248 x = this.area.x + this.area.w;
249 sgn = -1;
48e614ac 250 prec_axis = 'y2';
9012dd21
DV
251 }
252 var y = this.area.y + tick[1] * this.area.h;
fbe31dc8 253 context.beginPath();
528ce7e5 254 context.moveTo(halfUp(x), halfDown(y));
0e23cfc6 255 context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
fbe31dc8
DV
256 context.closePath();
257 context.stroke();
258
48e614ac 259 var label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null);
423f5ed3 260 var top = (y - this.attr_('axisLabelFontSize') / 2);
fbe31dc8
DV
261 if (top < 0) top = 0;
262
423f5ed3 263 if (top + this.attr_('axisLabelFontSize') + 3 > this.height) {
fbe31dc8
DV
264 label.style.bottom = "0px";
265 } else {
266 label.style.top = top + "px";
267 }
9012dd21 268 if (tick[0] == 0) {
423f5ed3 269 label.style.left = (this.area.x - this.attr_('yAxisLabelWidth') - this.attr_('axisTickSize')) + "px";
9012dd21
DV
270 label.style.textAlign = "right";
271 } else if (tick[0] == 1) {
272 label.style.left = (this.area.x + this.area.w +
423f5ed3 273 this.attr_('axisTickSize')) + "px";
9012dd21
DV
274 label.style.textAlign = "left";
275 }
423f5ed3 276 label.style.width = this.attr_('yAxisLabelWidth') + "px";
b0c3b730 277 this.container.appendChild(label);
fbe31dc8 278 this.ylabels.push(label);
2160ed4a 279 }
fbe31dc8
DV
280
281 // The lowest tick on the y-axis often overlaps with the leftmost
282 // tick on the x-axis. Shift the bottom tick up a little bit to
283 // compensate if necessary.
284 var bottomTick = this.ylabels[0];
423f5ed3 285 var fontSize = this.attr_('axisLabelFontSize');
fbe31dc8
DV
286 var bottom = parseInt(bottomTick.style.top) + fontSize;
287 if (bottom > this.height - fontSize) {
288 bottomTick.style.top = (parseInt(bottomTick.style.top) -
289 fontSize / 2) + "px";
290 }
291 }
292
528ce7e5 293 // draw a vertical line on the left to separate the chart from the labels.
fbe31dc8 294 context.beginPath();
528ce7e5
DV
295 context.moveTo(halfUp(this.area.x), halfDown(this.area.y));
296 context.lineTo(halfUp(this.area.x), halfDown(this.area.y + this.area.h));
fbe31dc8
DV
297 context.closePath();
298 context.stroke();
c1dbeb10 299
528ce7e5 300 // if there's a secondary y-axis, draw a vertical line for that, too.
c1dbeb10
DV
301 if (this.dygraph_.numAxes() == 2) {
302 context.beginPath();
528ce7e5
DV
303 context.moveTo(halfDown(this.area.x + this.area.w), halfDown(this.area.y));
304 context.lineTo(halfDown(this.area.x + this.area.w), halfDown(this.area.y + this.area.h));
c1dbeb10
DV
305 context.closePath();
306 context.stroke();
307 }
fbe31dc8
DV
308 }
309
423f5ed3 310 if (this.attr_('drawXAxis')) {
fbe31dc8 311 if (this.layout.xticks) {
2160ed4a
DV
312 for (var i = 0; i < this.layout.xticks.length; i++) {
313 var tick = this.layout.xticks[i];
fbe31dc8
DV
314 if (typeof(dataset) == "function") return;
315
316 var x = this.area.x + tick[0] * this.area.w;
317 var y = this.area.y + this.area.h;
318 context.beginPath();
528ce7e5 319 context.moveTo(halfUp(x), halfDown(y));
423f5ed3 320 context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
fbe31dc8
DV
321 context.closePath();
322 context.stroke();
323
ba451526 324 var label = makeDiv(tick[1], 'x');
fbe31dc8 325 label.style.textAlign = "center";
423f5ed3 326 label.style.top = (y + this.attr_('axisTickSize')) + 'px';
fbe31dc8 327
423f5ed3
DV
328 var left = (x - this.attr_('axisLabelWidth')/2);
329 if (left + this.attr_('axisLabelWidth') > this.width) {
330 left = this.width - this.attr_('xAxisLabelWidth');
fbe31dc8
DV
331 label.style.textAlign = "right";
332 }
333 if (left < 0) {
334 left = 0;
335 label.style.textAlign = "left";
336 }
337
338 label.style.left = left + "px";
423f5ed3 339 label.style.width = this.attr_('xAxisLabelWidth') + "px";
b0c3b730 340 this.container.appendChild(label);
fbe31dc8 341 this.xlabels.push(label);
2160ed4a 342 }
fbe31dc8
DV
343 }
344
345 context.beginPath();
528ce7e5
DV
346 context.moveTo(halfUp(this.area.x), halfDown(this.area.y + this.area.h));
347 context.lineTo(halfUp(this.area.x + this.area.w), halfDown(this.area.y + this.area.h));
fbe31dc8
DV
348 context.closePath();
349 context.stroke();
350 }
351
352 context.restore();
6a1aa64f
DV
353};
354
fbe31dc8 355
ad1798c2
DV
356DygraphCanvasRenderer.prototype._renderChartLabels = function() {
357 // Generate divs for the chart title, xlabel and ylabel.
358 // Space for these divs has already been taken away from the charting area in
359 // the DygraphCanvasRenderer constructor.
360 if (this.attr_('title')) {
361 var div = document.createElement("div");
362 div.style.position = 'absolute';
363 div.style.top = '0px';
364 div.style.left = this.area.x + 'px';
365 div.style.width = this.area.w + 'px';
366 div.style.height = this.attr_('titleHeight') + 'px';
367 div.style.textAlign = 'center';
b4202b3d 368 div.style.fontSize = (this.attr_('titleHeight') - 8) + 'px';
ad1798c2 369 div.style.fontWeight = 'bold';
ca49434a
DV
370 var class_div = document.createElement("div");
371 class_div.className = 'dygraph-label dygraph-title';
372 class_div.innerHTML = this.attr_('title');
373 div.appendChild(class_div);
ad1798c2
DV
374 this.container.appendChild(div);
375 this.chartLabels.title = div;
376 }
377
378 if (this.attr_('xlabel')) {
379 var div = document.createElement("div");
380 div.style.position = 'absolute';
381 div.style.bottom = 0; // TODO(danvk): this is lazy. Calculate style.top.
382 div.style.left = this.area.x + 'px';
383 div.style.width = this.area.w + 'px';
384 div.style.height = this.attr_('xLabelHeight') + 'px';
385 div.style.textAlign = 'center';
86cce9e8 386 div.style.fontSize = (this.attr_('xLabelHeight') - 2) + 'px';
ca49434a
DV
387
388 var class_div = document.createElement("div");
389 class_div.className = 'dygraph-label dygraph-xlabel';
390 class_div.innerHTML = this.attr_('xlabel');
391 div.appendChild(class_div);
ad1798c2
DV
392 this.container.appendChild(div);
393 this.chartLabels.xlabel = div;
394 }
395
396 if (this.attr_('ylabel')) {
397 var box = {
398 left: 0,
399 top: this.area.y,
400 width: this.attr_('yLabelWidth'),
401 height: this.area.h
402 };
ca49434a 403 // TODO(danvk): is this outer div actually necessary?
ad1798c2
DV
404 var div = document.createElement("div");
405 div.style.position = 'absolute';
406 div.style.left = box.left;
407 div.style.top = box.top + 'px';
408 div.style.width = box.width + 'px';
409 div.style.height = box.height + 'px';
86cce9e8 410 div.style.fontSize = (this.attr_('yLabelWidth') - 2) + 'px';
ad1798c2
DV
411
412 var inner_div = document.createElement("div");
413 inner_div.style.position = 'absolute';
ad1798c2
DV
414 inner_div.style.width = box.height + 'px';
415 inner_div.style.height = box.width + 'px';
416 inner_div.style.top = (box.height / 2 - box.width / 2) + 'px';
417 inner_div.style.left = (box.width / 2 - box.height / 2) + 'px';
418 inner_div.style.textAlign = 'center';
b56b6993
DV
419
420 // CSS rotation is an HTML5 feature which is not standardized. Hence every
421 // browser has its own name for the CSS style.
ad1798c2
DV
422 inner_div.style.transform = 'rotate(-90deg)'; // HTML5
423 inner_div.style.WebkitTransform = 'rotate(-90deg)'; // Safari/Chrome
424 inner_div.style.MozTransform = 'rotate(-90deg)'; // Firefox
425 inner_div.style.OTransform = 'rotate(-90deg)'; // Opera
52c47e80 426 inner_div.style.msTransform = 'rotate(-90deg)'; // IE9
b56b6993
DV
427
428 if (typeof(document.documentMode) !== 'undefined' &&
429 document.documentMode < 9) {
430 // We're dealing w/ an old version of IE, so we have to rotate the text
431 // using a BasicImage transform. This uses a different origin of rotation
432 // than HTML5 rotation (top left of div vs. its center).
433 inner_div.style.filter =
434 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
435 inner_div.style.left = '0px';
436 inner_div.style.top = '0px';
437 }
ad1798c2 438
ca49434a
DV
439 var class_div = document.createElement("div");
440 class_div.className = 'dygraph-label dygraph-ylabel';
441 class_div.innerHTML = this.attr_('ylabel');
442
443 inner_div.appendChild(class_div);
ad1798c2
DV
444 div.appendChild(inner_div);
445 this.container.appendChild(div);
446 this.chartLabels.ylabel = div;
447 }
448};
449
450
ce49c2fa
DV
451DygraphCanvasRenderer.prototype._renderAnnotations = function() {
452 var annotationStyle = {
453 "position": "absolute",
423f5ed3 454 "fontSize": this.attr_('axisLabelFontSize') + "px",
ce49c2fa 455 "zIndex": 10,
3bf2fa91 456 "overflow": "hidden"
ce49c2fa
DV
457 };
458
ab5e5c75
DV
459 var bindEvt = function(eventName, classEventName, p, self) {
460 return function(e) {
461 var a = p.annotation;
462 if (a.hasOwnProperty(eventName)) {
463 a[eventName](a, p, self.dygraph_, e);
464 } else if (self.dygraph_.attr_(classEventName)) {
465 self.dygraph_.attr_(classEventName)(a, p, self.dygraph_,e );
466 }
467 };
468 }
469
ce49c2fa
DV
470 // Get a list of point with annotations.
471 var points = this.layout.annotated_points;
472 for (var i = 0; i < points.length; i++) {
473 var p = points[i];
e6d53148
DV
474 if (p.canvasx < this.area.x || p.canvasx > this.area.x + this.area.w) {
475 continue;
476 }
477
ce5e8d36
DV
478 var a = p.annotation;
479 var tick_height = 6;
480 if (a.hasOwnProperty("tickHeight")) {
481 tick_height = a.tickHeight;
9a40897e
DV
482 }
483
ce49c2fa
DV
484 var div = document.createElement("div");
485 for (var name in annotationStyle) {
486 if (annotationStyle.hasOwnProperty(name)) {
487 div.style[name] = annotationStyle[name];
488 }
489 }
ce5e8d36
DV
490 if (!a.hasOwnProperty('icon')) {
491 div.className = "dygraphDefaultAnnotation";
492 }
493 if (a.hasOwnProperty('cssClass')) {
494 div.className += " " + a.cssClass;
495 }
496
a5ad69cc
DV
497 var width = a.hasOwnProperty('width') ? a.width : 16;
498 var height = a.hasOwnProperty('height') ? a.height : 16;
ce5e8d36
DV
499 if (a.hasOwnProperty('icon')) {
500 var img = document.createElement("img");
501 img.src = a.icon;
33030f33
DV
502 img.width = width;
503 img.height = height;
ce5e8d36
DV
504 div.appendChild(img);
505 } else if (p.annotation.hasOwnProperty('shortText')) {
506 div.appendChild(document.createTextNode(p.annotation.shortText));
5c528fa2 507 }
ce5e8d36 508 div.style.left = (p.canvasx - width / 2) + "px";
d14b9eed
DV
509 if (a.attachAtBottom) {
510 div.style.top = (this.area.h - height - tick_height) + "px";
511 } else {
512 div.style.top = (p.canvasy - height - tick_height) + "px";
513 }
ce5e8d36
DV
514 div.style.width = width + "px";
515 div.style.height = height + "px";
ce49c2fa
DV
516 div.title = p.annotation.text;
517 div.style.color = this.colors[p.name];
518 div.style.borderColor = this.colors[p.name];
e6d53148 519 a.div = div;
ab5e5c75 520
9a40897e
DV
521 Dygraph.addEvent(div, 'click',
522 bindEvt('clickHandler', 'annotationClickHandler', p, this));
523 Dygraph.addEvent(div, 'mouseover',
524 bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p, this));
525 Dygraph.addEvent(div, 'mouseout',
526 bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p, this));
527 Dygraph.addEvent(div, 'dblclick',
528 bindEvt('dblClickHandler', 'annotationDblClickHandler', p, this));
ab5e5c75 529
ce49c2fa
DV
530 this.container.appendChild(div);
531 this.annotations.push(div);
9a40897e 532
2cf95fff 533 var ctx = this.elementContext;
9a40897e
DV
534 ctx.strokeStyle = this.colors[p.name];
535 ctx.beginPath();
d14b9eed
DV
536 if (!a.attachAtBottom) {
537 ctx.moveTo(p.canvasx, p.canvasy);
538 ctx.lineTo(p.canvasx, p.canvasy - 2 - tick_height);
539 } else {
540 ctx.moveTo(p.canvasx, this.area.h);
541 ctx.lineTo(p.canvasx, this.area.h - 2 - tick_height);
542 }
9a40897e
DV
543 ctx.closePath();
544 ctx.stroke();
ce49c2fa
DV
545 }
546};
547
548
6a1aa64f
DV
549/**
550 * Overrides the CanvasRenderer method to draw error bars
551 */
285a6bda 552DygraphCanvasRenderer.prototype._renderLineChart = function() {
f9414b11
DV
553 var isNullOrNaN = function(x) {
554 return (x === null || isNaN(x));
555 };
ccd9d7c2 556
44c6bc29 557 // TODO(danvk): use this.attr_ for many of these.
2cf95fff 558 var context = this.elementContext;
423f5ed3 559 var fillAlpha = this.attr_('fillAlpha');
e4182459 560 var errorBars = this.attr_("errorBars") || this.attr_("customBars");
44c6bc29 561 var fillGraph = this.attr_("fillGraph");
b2c9222a
DV
562 var stackedGraph = this.attr_("stackedGraph");
563 var stepPlot = this.attr_("stepPlot");
c3e1495b
AR
564 var points = this.layout.points;
565 var pointsLength = points.length;
21d3323f
DV
566
567 var setNames = [];
ca43052c 568 for (var name in this.layout.datasets) {
85b99f0b
DV
569 if (this.layout.datasets.hasOwnProperty(name)) {
570 setNames.push(name);
571 }
ca43052c 572 }
21d3323f 573 var setCount = setNames.length;
6a1aa64f 574
0e23cfc6 575 // TODO(danvk): Move this mapping into Dygraph and get it out of here.
f032c51d
AV
576 this.colors = {}
577 for (var i = 0; i < setCount; i++) {
600d841a 578 this.colors[setNames[i]] = this.colorScheme_[i % this.colorScheme_.length];
f032c51d
AV
579 }
580
ff00d3e2
DV
581 // Update Points
582 // TODO(danvk): here
c3e1495b
AR
583 for (var i = pointsLength; i--;) {
584 var point = points[i];
6a1aa64f
DV
585 point.canvasx = this.area.w * point.x + this.area.x;
586 point.canvasy = this.area.h * point.y + this.area.y;
587 }
6a1aa64f
DV
588
589 // create paths
80aaae18
DV
590 var ctx = context;
591 if (errorBars) {
6a834bbb
DV
592 if (fillGraph) {
593 this.dygraph_.warn("Can't use fillGraph option with error bars");
594 }
595
6a1aa64f
DV
596 for (var i = 0; i < setCount; i++) {
597 var setName = setNames[i];
b2c9222a 598 var axis = this.dygraph_.axisPropertiesForSeries(setName);
f032c51d 599 var color = this.colors[setName];
6a1aa64f
DV
600
601 // setup graphics context
80aaae18 602 ctx.save();
56623f3b 603 var prevX = NaN;
afdc483f 604 var prevY = NaN;
6a1aa64f 605 var prevYs = [-1, -1];
ea4942ed 606 var yscale = axis.yscale;
f474c2a3
DV
607 // should be same color as the lines but only 15% opaque.
608 var rgb = new RGBColor(color);
43af96e7
NK
609 var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' +
610 fillAlpha + ')';
f474c2a3 611 ctx.fillStyle = err_color;
05c9d0c4 612 ctx.beginPath();
c3e1495b
AR
613 for (var j = 0; j < pointsLength; j++) {
614 var point = points[j];
6a1aa64f 615 if (point.name == setName) {
e9fe4a2f 616 if (!Dygraph.isOK(point.y)) {
56623f3b 617 prevX = NaN;
ae85914a 618 continue;
5011e7a1 619 }
ce49c2fa 620
3637724f 621 // TODO(danvk): here
afdc483f 622 if (stepPlot) {
7f028980 623 var newYs = [ point.y_bottom, point.y_top ];
afdc483f
NN
624 prevY = point.y;
625 } else {
7f028980 626 var newYs = [ point.y_bottom, point.y_top ];
afdc483f 627 }
6a1aa64f
DV
628 newYs[0] = this.area.h * newYs[0] + this.area.y;
629 newYs[1] = this.area.h * newYs[1] + this.area.y;
56623f3b 630 if (!isNaN(prevX)) {
afdc483f 631 if (stepPlot) {
47600757 632 ctx.moveTo(prevX, newYs[0]);
afdc483f 633 } else {
47600757 634 ctx.moveTo(prevX, prevYs[0]);
afdc483f 635 }
5954ef32
DV
636 ctx.lineTo(point.canvasx, newYs[0]);
637 ctx.lineTo(point.canvasx, newYs[1]);
afdc483f 638 if (stepPlot) {
47600757 639 ctx.lineTo(prevX, newYs[1]);
afdc483f 640 } else {
47600757 641 ctx.lineTo(prevX, prevYs[1]);
afdc483f 642 }
5954ef32
DV
643 ctx.closePath();
644 }
354e15ab 645 prevYs = newYs;
5954ef32
DV
646 prevX = point.canvasx;
647 }
648 }
649 ctx.fill();
650 }
651 } else if (fillGraph) {
354e15ab
DE
652 var baseline = [] // for stacked graphs: baseline for filling
653
654 // process sets in reverse order (needed for stacked graphs)
655 for (var i = setCount - 1; i >= 0; i--) {
5954ef32 656 var setName = setNames[i];
f032c51d 657 var color = this.colors[setName];
b2c9222a 658 var axis = this.dygraph_.axisPropertiesForSeries(setName);
ea4942ed
DV
659 var axisY = 1.0 + axis.minyval * axis.yscale;
660 if (axisY < 0.0) axisY = 0.0;
661 else if (axisY > 1.0) axisY = 1.0;
662 axisY = this.area.h * axisY + this.area.y;
5954ef32
DV
663
664 // setup graphics context
665 ctx.save();
56623f3b 666 var prevX = NaN;
5954ef32 667 var prevYs = [-1, -1];
ea4942ed 668 var yscale = axis.yscale;
5954ef32
DV
669 // should be same color as the lines but only 15% opaque.
670 var rgb = new RGBColor(color);
43af96e7
NK
671 var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' +
672 fillAlpha + ')';
5954ef32
DV
673 ctx.fillStyle = err_color;
674 ctx.beginPath();
c3e1495b
AR
675 for (var j = 0; j < pointsLength; j++) {
676 var point = points[j];
5954ef32 677 if (point.name == setName) {
e9fe4a2f 678 if (!Dygraph.isOK(point.y)) {
56623f3b 679 prevX = NaN;
5954ef32
DV
680 continue;
681 }
354e15ab
DE
682 var newYs;
683 if (stackedGraph) {
684 lastY = baseline[point.canvasx];
685 if (lastY === undefined) lastY = axisY;
686 baseline[point.canvasx] = point.canvasy;
687 newYs = [ point.canvasy, lastY ];
688 } else {
689 newYs = [ point.canvasy, axisY ];
690 }
56623f3b 691 if (!isNaN(prevX)) {
05c9d0c4 692 ctx.moveTo(prevX, prevYs[0]);
afdc483f 693 if (stepPlot) {
47600757 694 ctx.lineTo(point.canvasx, prevYs[0]);
afdc483f 695 } else {
47600757 696 ctx.lineTo(point.canvasx, newYs[0]);
afdc483f 697 }
05c9d0c4
DV
698 ctx.lineTo(point.canvasx, newYs[1]);
699 ctx.lineTo(prevX, prevYs[1]);
700 ctx.closePath();
6a1aa64f 701 }
354e15ab 702 prevYs = newYs;
6a1aa64f
DV
703 prevX = point.canvasx;
704 }
05c9d0c4 705 }
6a1aa64f
DV
706 ctx.fill();
707 }
80aaae18
DV
708 }
709
f9414b11 710 // Drawing the lines.
c3e1495b
AR
711 var firstIndexInSet = 0;
712 var afterLastIndexInSet = 0;
713 var setLength = 0;
714 for (var i = 0; i < setCount; i += 1) {
715 setLength = this.layout.setPointsLengths[i];
716 afterLastIndexInSet += setLength;
80aaae18 717 var setName = setNames[i];
f032c51d 718 var color = this.colors[setName];
227b93cc 719 var strokeWidth = this.dygraph_.attr_("strokeWidth", setName);
80aaae18
DV
720
721 // setup graphics context
722 context.save();
227b93cc 723 var pointSize = this.dygraph_.attr_("pointSize", setName);
80aaae18 724 var prevX = null, prevY = null;
227b93cc 725 var drawPoints = this.dygraph_.attr_("drawPoints", setName);
c3e1495b 726 for (var j = firstIndexInSet; j < afterLastIndexInSet; j++) {
80aaae18 727 var point = points[j];
c3e1495b
AR
728 if (isNullOrNaN(point.canvasy)) {
729 if (stepPlot && prevX != null) {
730 // Draw a horizontal line to the start of the missing data
731 ctx.beginPath();
732 ctx.strokeStyle = color;
733 ctx.lineWidth = this.attr_('strokeWidth');
734 ctx.moveTo(prevX, prevY);
735 ctx.lineTo(point.canvasx, prevY);
736 ctx.stroke();
737 }
738 // this will make us move to the next point, not draw a line to it.
739 prevX = prevY = null;
740 } else {
741 // A point is "isolated" if it is non-null but both the previous
742 // and next points are null.
743 var isIsolated = (!prevX && (j == points.length - 1 ||
744 isNullOrNaN(points[j+1].canvasy)));
5f453f17 745 if (prevX === null) {
c3e1495b
AR
746 prevX = point.canvasx;
747 prevY = point.canvasy;
748 } else {
f9414b11
DV
749 // Skip over points that will be drawn in the same pixel.
750 if (Math.round(prevX) == Math.round(point.canvasx) &&
751 Math.round(prevY) == Math.round(point.canvasy)) {
752 continue;
753 }
c3e1495b
AR
754 // TODO(antrob): skip over points that lie on a line that is already
755 // going to be drawn. There is no need to have more than 2
756 // consecutive points that are collinear.
757 if (strokeWidth) {
0599d13b
NN
758 ctx.beginPath();
759 ctx.strokeStyle = color;
c3e1495b 760 ctx.lineWidth = strokeWidth;
0599d13b 761 ctx.moveTo(prevX, prevY);
c3e1495b
AR
762 if (stepPlot) {
763 ctx.lineTo(point.canvasx, prevY);
764 }
80aaae18
DV
765 prevX = point.canvasx;
766 prevY = point.canvasy;
c3e1495b
AR
767 ctx.lineTo(prevX, prevY);
768 ctx.stroke();
80aaae18
DV
769 }
770 }
5f453f17
DV
771
772 if (drawPoints || isIsolated) {
773 ctx.beginPath();
774 ctx.fillStyle = color;
775 ctx.arc(point.canvasx, point.canvasy, pointSize,
776 0, 2 * Math.PI, false);
777 ctx.fill();
c3e1495b 778 }
80aaae18
DV
779 }
780 }
c3e1495b 781 firstIndexInSet = afterLastIndexInSet;
80aaae18 782 }
6a1aa64f 783
6a1aa64f
DV
784 context.restore();
785};