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