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