1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Based on PlotKit, but modified to meet the needs of dygraphs.
6 * In particular, support for:
9 * - dygraphs attribute system
11 * High level overview of classes:
14 * This contains all the data to be charted.
15 * It uses data coordinates, but also records the chart range (in data
16 * coordinates) and hence is able to calculate percentage positions ('In
17 * this view, Point A lies 25% down the x-axis.')
18 * Two things that it does not do are:
19 * 1. Record pixel coordinates for anything.
20 * 2. (oddly) determine anything about the layout of chart elements.
21 * The naming is a vestige of Dygraph's original PlotKit roots.
23 * - DygraphCanvasRenderer
24 * This class determines the charting area (in pixel coordinates), maps the
25 * percentage coordinates in the DygraphLayout to pixels and draws them.
26 * It's also responsible for creating chart DOM elements, i.e. annotations,
27 * tick mark labels, the title and the x/y-axis labels.
31 * Creates a new DygraphLayout object.
32 * @return {Object} The DygraphLayout object
34 DygraphLayout
= function(dygraph
) {
35 this.dygraph_
= dygraph
;
36 this.datasets
= new Array();
37 this.annotations
= new Array();
40 // TODO(danvk): it's odd that xTicks_ and yTicks_ are inputs, but xticks and
41 // yticks are outputs. Clean this up.
46 DygraphLayout
.prototype.attr_
= function(name
) {
47 return this.dygraph_
.attr_(name
);
50 DygraphLayout
.prototype.addDataset
= function(setname
, set_xy
) {
51 this.datasets
[setname
] = set_xy
;
54 DygraphLayout
.prototype.setAnnotations
= function(ann
) {
55 // The Dygraph object's annotations aren't parsed. We parse them here and
56 // save a copy. If there is no parser, then the user must be using raw format.
57 this.annotations
= [];
58 var parse
= this.attr_('xValueParser') || function(x
) { return x
; };
59 for (var i
= 0; i
< ann
.length
; i
++) {
61 if (!ann
[i
].xval
&& !ann
[i
].x
) {
62 this.dygraph_
.error("Annotations must have an 'x' property");
66 !(ann
[i
].hasOwnProperty('width') &&
67 ann
[i
].hasOwnProperty('height'))) {
68 this.dygraph_
.error("Must set width and height when setting " +
69 "annotation.icon property");
72 Dygraph
.update(a
, ann
[i
]);
73 if (!a
.xval
) a
.xval
= parse(a
.x
);
74 this.annotations
.push(a
);
78 DygraphLayout
.prototype.setXTicks
= function(xTicks
) {
79 this.xTicks_
= xTicks
;
82 // TODO(danvk): add this to the Dygraph object's API or move it into Layout.
83 DygraphLayout
.prototype.setYAxes
= function (yAxes
) {
87 DygraphLayout
.prototype.setDateWindow
= function(dateWindow
) {
88 this.dateWindow_
= dateWindow
;
91 DygraphLayout
.prototype.evaluate
= function() {
92 this._evaluateLimits();
93 this._evaluateLineCharts();
94 this._evaluateLineTicks();
95 this._evaluateAnnotations();
98 DygraphLayout
.prototype._evaluateLimits
= function() {
99 this.minxval
= this.maxxval
= null;
100 if (this.dateWindow_
) {
101 this.minxval
= this.dateWindow_
[0];
102 this.maxxval
= this.dateWindow_
[1];
104 for (var name
in this.datasets
) {
105 if (!this.datasets
.hasOwnProperty(name
)) continue;
106 var series
= this.datasets
[name
];
107 if (series
.length
> 1) {
108 var x1
= series
[0][0];
109 if (!this.minxval
|| x1
< this.minxval
) this.minxval
= x1
;
111 var x2
= series
[series
.length
- 1][0];
112 if (!this.maxxval
|| x2
> this.maxxval
) this.maxxval
= x2
;
116 this.xrange
= this.maxxval
- this.minxval
;
117 this.xscale
= (this.xrange
!= 0 ? 1/this.xrange
: 1.0);
119 for (var i
= 0; i
< this.yAxes_
.length
; i
++) {
120 var axis
= this.yAxes_
[i
];
121 axis
.minyval
= axis
.computedValueRange
[0];
122 axis
.maxyval
= axis
.computedValueRange
[1];
123 axis
.yrange
= axis
.maxyval
- axis
.minyval
;
124 axis
.yscale
= (axis
.yrange
!= 0 ? 1.0 / axis
.yrange
: 1.0);
126 if (axis
.g
.attr_("logscale")) {
127 axis
.ylogrange
= Dygraph
.log10(axis
.maxyval
) - Dygraph
.log10(axis
.minyval
);
128 axis
.ylogscale
= (axis
.ylogrange
!= 0 ? 1.0 / axis
.ylogrange
: 1.0);
129 if (!isFinite(axis
.ylogrange
) || isNaN(axis
.ylogrange
)) {
130 axis
.g
.error('axis ' + i
+ ' of graph at ' + axis
.g
+
131 ' can\'t be displayed in log scale for range [' +
132 axis
.minyval
+ ' - ' + axis
.maxyval
+ ']');
138 DygraphLayout
.prototype._evaluateLineCharts
= function() {
140 this.points
= new Array();
141 for (var setName
in this.datasets
) {
142 if (!this.datasets
.hasOwnProperty(setName
)) continue;
144 var dataset
= this.datasets
[setName
];
145 var axis
= this.dygraph_
.axisPropertiesForSeries(setName
);
147 for (var j
= 0; j
< dataset
.length
; j
++) {
148 var item
= dataset
[j
];
152 yval
= 1.0 - ((Dygraph
.log10(parseFloat(item
[1])) - Dygraph
.log10(axis
.minyval
)) * axis
.ylogscale
); // really should just be yscale.
154 yval
= 1.0 - ((parseFloat(item
[1]) - axis
.minyval
) * axis
.yscale
);
158 x
: ((parseFloat(item
[0]) - this.minxval
) * this.xscale
),
160 xval
: parseFloat(item
[0]),
161 yval
: parseFloat(item
[1]),
165 this.points
.push(point
);
170 DygraphLayout
.prototype._evaluateLineTicks
= function() {
171 this.xticks
= new Array();
172 for (var i
= 0; i
< this.xTicks_
.length
; i
++) {
173 var tick
= this.xTicks_
[i
];
174 var label
= tick
.label
;
175 var pos
= this.xscale
* (tick
.v
- this.minxval
);
176 if ((pos
>= 0.0) && (pos
<= 1.0)) {
177 this.xticks
.push([pos
, label
]);
181 this.yticks
= new Array();
182 for (var i
= 0; i
< this.yAxes_
.length
; i
++ ) {
183 var axis
= this.yAxes_
[i
];
184 for (var j
= 0; j
< axis
.ticks
.length
; j
++) {
185 var tick
= axis
.ticks
[j
];
186 var label
= tick
.label
;
187 var pos
= this.dygraph_
.toPercentYCoord(tick
.v
, i
);
188 if ((pos
>= 0.0) && (pos
<= 1.0)) {
189 this.yticks
.push([i
, pos
, label
]);
197 * Behaves the same way as PlotKit.Layout, but also copies the errors
200 DygraphLayout
.prototype.evaluateWithError
= function() {
202 if (!(this.attr_('errorBars') || this.attr_('customBars'))) return;
204 // Copy over the error terms
205 var i
= 0; // index in this.points
206 for (var setName
in this.datasets
) {
207 if (!this.datasets
.hasOwnProperty(setName
)) continue;
209 var dataset
= this.datasets
[setName
];
210 for (var j
= 0; j
< dataset
.length
; j
++, i
++) {
211 var item
= dataset
[j
];
212 var xv
= parseFloat(item
[0]);
213 var yv
= parseFloat(item
[1]);
215 if (xv
== this.points
[i
].xval
&&
216 yv
== this.points
[i
].yval
) {
217 this.points
[i
].errorMinus
= parseFloat(item
[2]);
218 this.points
[i
].errorPlus
= parseFloat(item
[3]);
224 DygraphLayout
.prototype._evaluateAnnotations
= function() {
225 // Add the annotations to the point to which they belong.
226 // Make a map from (setName, xval) to annotation for quick lookups.
227 var annotations
= {};
228 for (var i
= 0; i
< this.annotations
.length
; i
++) {
229 var a
= this.annotations
[i
];
230 annotations
[a
.xval
+ "," + a
.series
] = a
;
233 this.annotated_points
= [];
234 for (var i
= 0; i
< this.points
.length
; i
++) {
235 var p
= this.points
[i
];
236 var k
= p
.xval
+ "," + p
.name
;
237 if (k
in annotations
) {
238 p
.annotation
= annotations
[k
];
239 this.annotated_points
.push(p
);
245 * Convenience function to remove all the data sets from a graph
247 DygraphLayout
.prototype.removeAllDatasets
= function() {
248 delete this.datasets
;
249 this.datasets
= new Array();
253 * Return a copy of the point at the indicated index, with its yval unstacked.
254 * @param int index of point in layout_.points
256 DygraphLayout
.prototype.unstackPointAtIndex
= function(idx
) {
257 var point
= this.points
[idx
];
259 // Clone the point since we modify it
260 var unstackedPoint
= {};
261 for (var i
in point
) {
262 unstackedPoint
[i
] = point
[i
];
265 if (!this.attr_("stackedGraph")) {
266 return unstackedPoint
;
269 // The unstacked yval is equal to the current yval minus the yval of the
270 // next point at the same xval.
271 for (var i
= idx
+1; i
< this.points
.length
; i
++) {
272 if (this.points
[i
].xval
== point
.xval
) {
273 unstackedPoint
.yval
-= this.points
[i
].yval
;
278 return unstackedPoint
;
281 // Subclass PlotKit.CanvasRenderer to add:
282 // 1. X/Y grid overlay
283 // 2. Ability to draw error bars (if required)
286 * Sets some PlotKit.CanvasRenderer options
287 * @param {Object} element The canvas to attach to
288 * @param {Object} elementContext The 2d context of the canvas (injected so it
289 * can be mocked for testing.)
290 * @param {Layout} layout The DygraphLayout object for this graph.
291 * @param {Object} options Options to pass on to CanvasRenderer
293 DygraphCanvasRenderer
= function(dygraph
, element
, elementContext
, layout
,
295 // TODO(danvk): remove options, just use dygraph.attr_.
296 this.dygraph_
= dygraph
;
303 "axisLineColor": "black",
304 "axisLineWidth": 0.5,
306 "axisLabelColor": "black",
307 "axisLabelFont": "Arial",
308 "axisLabelFontSize": 9,
309 "axisLabelWidth": 50,
312 "gridLineColor": "rgb(128,128,128)",
314 "underlayCallback": null
316 Dygraph
.update(this.options
, options
);
318 this.layout
= layout
;
319 this.element
= element
;
320 this.elementContext
= elementContext
;
321 this.container
= this.element
.parentNode
;
323 this.height
= this.element
.height
;
324 this.width
= this.element
.width
;
326 // --- check whether everything is ok before we return
327 if (!this.isIE
&& !(DygraphCanvasRenderer
.isSupported(this.element
)))
328 throw "Canvas is not supported.";
331 this.xlabels
= new Array();
332 this.ylabels
= new Array();
333 this.annotations
= new Array();
334 this.chartLabels
= {};
336 // TODO(danvk): consider all axes in this computation.
338 // TODO(danvk): per-axis setting.
339 x
: this.options
.yAxisLabelWidth
+ 2 * this.options
.axisTickSize
,
342 this.area
.w
= this.width
- this.area
.x
- this.options
.rightGap
;
343 this.area
.h
= this.height
- this.options
.axisLabelFontSize
-
344 2 * this.options
.axisTickSize
;
346 // Shrink the drawing area to accomodate additional y-axes.
347 if (this.dygraph_
.numAxes() == 2) {
348 // TODO(danvk): per-axis setting.
349 this.area
.w
-= (this.options
.yAxisLabelWidth
+ 2 * this.options
.axisTickSize
);
350 } else if (this.dygraph_
.numAxes() > 2) {
351 this.dygraph_
.error("Only two y-axes are supported at this time. (Trying " +
352 "to use " + this.dygraph_
.numAxes() + ")");
355 // Add space for chart labels: title, xlabel and ylabel.
356 if (this.attr_('title')) {
357 this.area
.h
-= this.attr_('titleHeight');
358 this.area
.y
+= this.attr_('titleHeight');
360 if (this.attr_('xlabel')) {
361 this.area
.h
-= this.attr_('xLabelHeight');
363 if (this.attr_('ylabel')) {
364 // It would make sense to shift the chart here to make room for the y-axis
365 // label, but the default yAxisLabelWidth is large enough that this results
366 // in overly-padded charts. The y-axis label should fit fine. If it
367 // doesn't, the yAxisLabelWidth option can be increased.
370 this.container
.style
.position
= "relative";
371 this.container
.style
.width
= this.width
+ "px";
373 // Set up a clipping area for the canvas (and the interaction canvas).
374 // This ensures that we don't overdraw.
375 var ctx
= this.dygraph_
.canvas_ctx_
;
377 ctx
.rect(this.area
.x
, this.area
.y
, this.area
.w
, this.area
.h
);
380 ctx
= this.dygraph_
.hidden_ctx_
;
382 ctx
.rect(this.area
.x
, this.area
.y
, this.area
.w
, this.area
.h
);
386 DygraphCanvasRenderer
.prototype.attr_
= function(x
) {
387 return this.dygraph_
.attr_(x
);
390 DygraphCanvasRenderer
.prototype.clear
= function() {
392 // VML takes a while to start up, so we just poll every this.IEDelay
394 if (this.clearDelay
) {
395 this.clearDelay
.cancel();
396 this.clearDelay
= null;
398 var context
= this.elementContext
;
401 // TODO(danvk): this is broken, since MochiKit.Async is gone.
402 this.clearDelay
= MochiKit
.Async
.wait(this.IEDelay
);
403 this.clearDelay
.addCallback(bind(this.clear
, this));
408 var context
= this.elementContext
;
409 context
.clearRect(0, 0, this.width
, this.height
);
411 for (var i
= 0; i
< this.xlabels
.length
; i
++) {
412 var el
= this.xlabels
[i
];
413 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
415 for (var i
= 0; i
< this.ylabels
.length
; i
++) {
416 var el
= this.ylabels
[i
];
417 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
419 for (var i
= 0; i
< this.annotations
.length
; i
++) {
420 var el
= this.annotations
[i
];
421 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
423 for (var k
in this.chartLabels
) {
424 if (!this.chartLabels
.hasOwnProperty(k
)) continue;
425 var el
= this.chartLabels
[k
];
426 if (el
.parentNode
) el
.parentNode
.removeChild(el
);
428 this.xlabels
= new Array();
429 this.ylabels
= new Array();
430 this.annotations
= new Array();
431 this.chartLabels
= {};
435 DygraphCanvasRenderer
.isSupported
= function(canvasName
) {
438 if (typeof(canvasName
) == 'undefined' || canvasName
== null)
439 canvas
= document
.createElement("canvas");
442 var context
= canvas
.getContext("2d");
445 var ie
= navigator
.appVersion
.match(/MSIE (\d\.\d)/);
446 var opera
= (navigator
.userAgent
.toLowerCase().indexOf("opera") != -1);
447 if ((!ie
) || (ie
[1] < 6) || (opera
))
455 * Draw an X/Y grid on top of the existing plot
457 DygraphCanvasRenderer
.prototype.render
= function() {
458 // Draw the new X/Y grid
. Lines appear crisper when pixels are rounded to
459 // half-integers. This prevents them from drawing in two rows/cols.
460 var ctx
= this.elementContext
;
461 function halfUp(x
){return Math
.round(x
)+0.5};
462 function halfDown(y
){return Math
.round(y
)-0.5};
464 if (this.options
.underlayCallback
) {
465 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
466 // users who expect a deprecated form of this callback.
467 this.options
.underlayCallback(ctx
, this.area
, this.dygraph_
, this.dygraph_
);
470 if (this.options
.drawYGrid
) {
471 var ticks
= this.layout
.yticks
;
473 ctx
.strokeStyle
= this.options
.gridLineColor
;
474 ctx
.lineWidth
= this.options
.axisLineWidth
;
475 for (var i
= 0; i
< ticks
.length
; i
++) {
476 // TODO(danvk): allow secondary axes to draw a grid, too.
477 if (ticks
[i
][0] != 0) continue;
478 var x
= halfUp(this.area
.x
);
479 var y
= halfDown(this.area
.y
+ ticks
[i
][1] * this.area
.h
);
482 ctx
.lineTo(x
+ this.area
.w
, y
);
488 if (this.options
.drawXGrid
) {
489 var ticks
= this.layout
.xticks
;
491 ctx
.strokeStyle
= this.options
.gridLineColor
;
492 ctx
.lineWidth
= this.options
.axisLineWidth
;
493 for (var i
=0; i
<ticks
.length
; i
++) {
494 var x
= halfUp(this.area
.x
+ ticks
[i
][0] * this.area
.w
);
495 var y
= halfDown(this.area
.y
+ this.area
.h
);
498 ctx
.lineTo(x
, this.area
.y
);
504 // Do the ordinary rendering, as before
505 this._renderLineChart();
507 this._renderChartLabels();
508 this._renderAnnotations();
512 DygraphCanvasRenderer
.prototype._renderAxis
= function() {
513 if (!this.options
.drawXAxis
&& !this.options
.drawYAxis
)
516 // Round pixels to half-integer boundaries for crisper drawing.
517 function halfUp(x
){return Math
.round(x
)+0.5};
518 function halfDown(y
){return Math
.round(y
)-0.5};
520 var context
= this.elementContext
;
523 "position": "absolute",
524 "fontSize": this.options
.axisLabelFontSize
+ "px",
526 "color": this.options
.axisLabelColor
,
527 "width": this.options
.axisLabelWidth
+ "px",
530 var makeDiv
= function(txt
) {
531 var div
= document
.createElement("div");
532 for (var name
in labelStyle
) {
533 if (labelStyle
.hasOwnProperty(name
)) {
534 div
.style
[name
] = labelStyle
[name
];
537 div
.appendChild(document
.createTextNode(txt
));
543 context
.strokeStyle
= this.options
.axisLineColor
;
544 context
.lineWidth
= this.options
.axisLineWidth
;
546 if (this.options
.drawYAxis
) {
547 if (this.layout
.yticks
&& this.layout
.yticks
.length
> 0) {
548 for (var i
= 0; i
< this.layout
.yticks
.length
; i
++) {
549 var tick
= this.layout
.yticks
[i
];
550 if (typeof(tick
) == "function") return;
553 if (tick
[0] == 1) { // right-side y-axis
554 x
= this.area
.x
+ this.area
.w
;
557 var y
= this.area
.y
+ tick
[1] * this.area
.h
;
559 context
.moveTo(halfUp(x
), halfDown(y
));
560 context
.lineTo(halfUp(x
- sgn
* this.options
.axisTickSize
), halfDown(y
));
564 var label
= makeDiv(tick
[2]);
565 var top
= (y
- this.options
.axisLabelFontSize
/ 2);
566 if (top
< 0) top
= 0;
568 if (top
+ this.options
.axisLabelFontSize
+ 3 > this.height
) {
569 label
.style
.bottom
= "0px";
571 label
.style
.top
= top
+ "px";
574 label
.style
.left
= (this.area
.x
- this.options
.yAxisLabelWidth
- this.options
.axisTickSize
) + "px";
575 label
.style
.textAlign
= "right";
576 } else if (tick
[0] == 1) {
577 label
.style
.left
= (this.area
.x
+ this.area
.w
+
578 this.options
.axisTickSize
) + "px";
579 label
.style
.textAlign
= "left";
581 label
.style
.width
= this.options
.yAxisLabelWidth
+ "px";
582 this.container
.appendChild(label
);
583 this.ylabels
.push(label
);
586 // The lowest tick on the y-axis often overlaps with the leftmost
587 // tick on the x-axis. Shift the bottom tick up a little bit to
588 // compensate if necessary.
589 var bottomTick
= this.ylabels
[0];
590 var fontSize
= this.options
.axisLabelFontSize
;
591 var bottom
= parseInt(bottomTick
.style
.top
) + fontSize
;
592 if (bottom
> this.height
- fontSize
) {
593 bottomTick
.style
.top
= (parseInt(bottomTick
.style
.top
) -
594 fontSize
/ 2) + "px";
598 // draw a vertical line on the left to separate the chart from the labels.
600 context
.moveTo(halfUp(this.area
.x
), halfDown(this.area
.y
));
601 context
.lineTo(halfUp(this.area
.x
), halfDown(this.area
.y
+ this.area
.h
));
605 // if there's a secondary y-axis, draw a vertical line for that, too.
606 if (this.dygraph_
.numAxes() == 2) {
608 context
.moveTo(halfDown(this.area
.x
+ this.area
.w
), halfDown(this.area
.y
));
609 context
.lineTo(halfDown(this.area
.x
+ this.area
.w
), halfDown(this.area
.y
+ this.area
.h
));
615 if (this.options
.drawXAxis
) {
616 if (this.layout
.xticks
) {
617 for (var i
= 0; i
< this.layout
.xticks
.length
; i
++) {
618 var tick
= this.layout
.xticks
[i
];
619 if (typeof(dataset
) == "function") return;
621 var x
= this.area
.x
+ tick
[0] * this.area
.w
;
622 var y
= this.area
.y
+ this.area
.h
;
624 context
.moveTo(halfUp(x
), halfDown(y
));
625 context
.lineTo(halfUp(x
), halfDown(y
+ this.options
.axisTickSize
));
629 var label
= makeDiv(tick
[1]);
630 label
.style
.textAlign
= "center";
631 label
.style
.top
= (y
+ this.options
.axisTickSize
) + 'px';
633 var left
= (x
- this.options
.axisLabelWidth
/2);
634 if (left
+ this.options
.axisLabelWidth
> this.width
) {
635 left
= this.width
- this.options
.xAxisLabelWidth
;
636 label
.style
.textAlign
= "right";
640 label
.style
.textAlign
= "left";
643 label
.style
.left
= left
+ "px";
644 label
.style
.width
= this.options
.xAxisLabelWidth
+ "px";
645 this.container
.appendChild(label
);
646 this.xlabels
.push(label
);
651 context
.moveTo(halfUp(this.area
.x
), halfDown(this.area
.y
+ this.area
.h
));
652 context
.lineTo(halfUp(this.area
.x
+ this.area
.w
), halfDown(this.area
.y
+ this.area
.h
));
661 DygraphCanvasRenderer
.prototype._renderChartLabels
= function() {
662 // Generate divs for the chart title, xlabel and ylabel.
663 // Space for these divs has already been taken away from the charting area in
664 // the DygraphCanvasRenderer constructor.
665 if (this.attr_('title')) {
666 var div
= document
.createElement("div");
667 div
.style
.position
= 'absolute';
668 div
.style
.top
= '0px';
669 div
.style
.left
= this.area
.x
+ 'px';
670 div
.style
.width
= this.area
.w
+ 'px';
671 div
.style
.height
= this.attr_('titleHeight') + 'px';
672 div
.style
.textAlign
= 'center';
673 div
.style
.fontSize
= (this.attr_('titleHeight') - 8) + 'px';
674 div
.style
.fontWeight
= 'bold';
675 var class_div
= document
.createElement("div");
676 class_div
.className
= 'dygraph-label dygraph-title';
677 class_div
.innerHTML
= this.attr_('title');
678 div
.appendChild(class_div
);
679 this.container
.appendChild(div
);
680 this.chartLabels
.title
= div
;
683 if (this.attr_('xlabel')) {
684 var div
= document
.createElement("div");
685 div
.style
.position
= 'absolute';
686 div
.style
.bottom
= 0; // TODO(danvk): this is lazy. Calculate style.top.
687 div
.style
.left
= this.area
.x
+ 'px';
688 div
.style
.width
= this.area
.w
+ 'px';
689 div
.style
.height
= this.attr_('xLabelHeight') + 'px';
690 div
.style
.textAlign
= 'center';
691 div
.style
.fontSize
= (this.attr_('xLabelHeight') - 2) + 'px';
693 var class_div
= document
.createElement("div");
694 class_div
.className
= 'dygraph-label dygraph-xlabel';
695 class_div
.innerHTML
= this.attr_('xlabel');
696 div
.appendChild(class_div
);
697 this.container
.appendChild(div
);
698 this.chartLabels
.xlabel
= div
;
701 if (this.attr_('ylabel')) {
705 width
: this.attr_('yLabelWidth'),
708 // TODO(danvk): is this outer div actually necessary?
709 var div
= document
.createElement("div");
710 div
.style
.position
= 'absolute';
711 div
.style
.left
= box
.left
;
712 div
.style
.top
= box
.top
+ 'px';
713 div
.style
.width
= box
.width
+ 'px';
714 div
.style
.height
= box
.height
+ 'px';
715 div
.style
.fontSize
= (this.attr_('yLabelWidth') - 2) + 'px';
717 var inner_div
= document
.createElement("div");
718 inner_div
.style
.position
= 'absolute';
719 inner_div
.style
.width
= box
.height
+ 'px';
720 inner_div
.style
.height
= box
.width
+ 'px';
721 inner_div
.style
.top
= (box
.height
/ 2 - box.width / 2) + 'px';
722 inner_div
.style
.left
= (box
.width
/ 2 - box.height / 2) + 'px';
723 inner_div
.style
.textAlign
= 'center';
725 // CSS rotation is an HTML5 feature which is not standardized. Hence every
726 // browser has its own name for the CSS style.
727 inner_div
.style
.transform
= 'rotate(-90deg)'; // HTML5
728 inner_div
.style
.WebkitTransform
= 'rotate(-90deg)'; // Safari/Chrome
729 inner_div
.style
.MozTransform
= 'rotate(-90deg)'; // Firefox
730 inner_div
.style
.OTransform
= 'rotate(-90deg)'; // Opera
731 inner_div
.style
.msTransform
= 'rotate(-90deg)'; // IE9
733 if (typeof(document
.documentMode
) !== 'undefined' &&
734 document
.documentMode
< 9) {
735 // We're dealing w/ an old version of IE
, so we have to rotate the text
736 // using a BasicImage transform. This uses a different origin of rotation
737 // than HTML5 rotation (top left of div vs. its center).
738 inner_div
.style
.filter
=
739 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
740 inner_div
.style
.left
= '0px';
741 inner_div
.style
.top
= '0px';
744 var class_div
= document
.createElement("div");
745 class_div
.className
= 'dygraph-label dygraph-ylabel';
746 class_div
.innerHTML
= this.attr_('ylabel');
748 inner_div
.appendChild(class_div
);
749 div
.appendChild(inner_div
);
750 this.container
.appendChild(div
);
751 this.chartLabels
.ylabel
= div
;
756 DygraphCanvasRenderer
.prototype._renderAnnotations
= function() {
757 var annotationStyle
= {
758 "position": "absolute",
759 "fontSize": this.options
.axisLabelFontSize
+ "px",
764 var bindEvt
= function(eventName
, classEventName
, p
, self
) {
766 var a
= p
.annotation
;
767 if (a
.hasOwnProperty(eventName
)) {
768 a
[eventName
](a
, p
, self
.dygraph_
, e
);
769 } else if (self
.dygraph_
.attr_(classEventName
)) {
770 self
.dygraph_
.attr_(classEventName
)(a
, p
, self
.dygraph_
,e
);
775 // Get a list of point with annotations.
776 var points
= this.layout
.annotated_points
;
777 for (var i
= 0; i
< points
.length
; i
++) {
779 if (p
.canvasx
< this.area
.x
|| p
.canvasx
> this.area
.x
+ this.area
.w
) {
783 var a
= p
.annotation
;
785 if (a
.hasOwnProperty("tickHeight")) {
786 tick_height
= a
.tickHeight
;
789 var div
= document
.createElement("div");
790 for (var name
in annotationStyle
) {
791 if (annotationStyle
.hasOwnProperty(name
)) {
792 div
.style
[name
] = annotationStyle
[name
];
795 if (!a
.hasOwnProperty('icon')) {
796 div
.className
= "dygraphDefaultAnnotation";
798 if (a
.hasOwnProperty('cssClass')) {
799 div
.className
+= " " + a
.cssClass
;
802 var width
= a
.hasOwnProperty('width') ? a
.width
: 16;
803 var height
= a
.hasOwnProperty('height') ? a
.height
: 16;
804 if (a
.hasOwnProperty('icon')) {
805 var img
= document
.createElement("img");
809 div
.appendChild(img
);
810 } else if (p
.annotation
.hasOwnProperty('shortText')) {
811 div
.appendChild(document
.createTextNode(p
.annotation
.shortText
));
813 div
.style
.left
= (p
.canvasx
- width
/ 2) + "px";
814 if (a
.attachAtBottom
) {
815 div
.style
.top
= (this.area
.h
- height
- tick_height
) + "px";
817 div
.style
.top
= (p
.canvasy
- height
- tick_height
) + "px";
819 div
.style
.width
= width
+ "px";
820 div
.style
.height
= height
+ "px";
821 div
.title
= p
.annotation
.text
;
822 div
.style
.color
= this.colors
[p
.name
];
823 div
.style
.borderColor
= this.colors
[p
.name
];
826 Dygraph
.addEvent(div
, 'click',
827 bindEvt('clickHandler', 'annotationClickHandler', p
, this));
828 Dygraph
.addEvent(div
, 'mouseover',
829 bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p
, this));
830 Dygraph
.addEvent(div
, 'mouseout',
831 bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p
, this));
832 Dygraph
.addEvent(div
, 'dblclick',
833 bindEvt('dblClickHandler', 'annotationDblClickHandler', p
, this));
835 this.container
.appendChild(div
);
836 this.annotations
.push(div
);
838 var ctx
= this.elementContext
;
839 ctx
.strokeStyle
= this.colors
[p
.name
];
841 if (!a
.attachAtBottom
) {
842 ctx
.moveTo(p
.canvasx
, p
.canvasy
);
843 ctx
.lineTo(p
.canvasx
, p
.canvasy
- 2 - tick_height
);
845 ctx
.moveTo(p
.canvasx
, this.area
.h
);
846 ctx
.lineTo(p
.canvasx
, this.area
.h
- 2 - tick_height
);
855 * Overrides the CanvasRenderer method to draw error bars
857 DygraphCanvasRenderer
.prototype._renderLineChart
= function() {
858 // TODO(danvk): use this.attr_ for many of these.
859 var context
= this.elementContext
;
860 var colorCount
= this.options
.colorScheme
.length
;
861 var colorScheme
= this.options
.colorScheme
;
862 var fillAlpha
= this.options
.fillAlpha
;
863 var errorBars
= this.attr_("errorBars");
864 var fillGraph
= this.attr_("fillGraph");
865 var stackedGraph
= this.attr_("stackedGraph");
866 var stepPlot
= this.attr_("stepPlot");
869 for (var name
in this.layout
.datasets
) {
870 if (this.layout
.datasets
.hasOwnProperty(name
)) {
874 var setCount
= setNames
.length
;
877 for (var i
= 0; i
< setCount
; i
++) {
878 this.colors
[setNames
[i
]] = colorScheme
[i
% colorCount
];
883 for (var i
= 0; i
< this.layout
.points
.length
; i
++) {
884 var point
= this.layout
.points
[i
];
885 point
.canvasx
= this.area
.w
* point
.x
+ this.area
.x
;
886 point
.canvasy
= this.area
.h
* point
.y
+ this.area
.y
;
893 this.dygraph_
.warn("Can't use fillGraph option with error bars");
896 for (var i
= 0; i
< setCount
; i
++) {
897 var setName
= setNames
[i
];
898 var axis
= this.dygraph_
.axisPropertiesForSeries(setName
);
899 var color
= this.colors
[setName
];
901 // setup graphics context
905 var prevYs
= [-1, -1];
906 var yscale
= axis
.yscale
;
907 // should be same color as the lines but only 15% opaque.
908 var rgb
= new RGBColor(color
);
909 var err_color
= 'rgba(' + rgb
.r
+ ',' + rgb
.g
+ ',' + rgb
.b
+ ',' +
911 ctx
.fillStyle
= err_color
;
913 for (var j
= 0; j
< this.layout
.points
.length
; j
++) {
914 var point
= this.layout
.points
[j
];
915 if (point
.name
== setName
) {
916 if (!Dygraph
.isOK(point
.y
)) {
923 var newYs
= [ prevY
- point
.errorPlus
* yscale
,
924 prevY
+ point
.errorMinus
* yscale
];
927 var newYs
= [ point
.y
- point
.errorPlus
* yscale
,
928 point
.y
+ point
.errorMinus
* yscale
];
930 newYs
[0] = this.area
.h
* newYs
[0] + this.area
.y
;
931 newYs
[1] = this.area
.h
* newYs
[1] + this.area
.y
;
934 ctx
.moveTo(prevX
, newYs
[0]);
936 ctx
.moveTo(prevX
, prevYs
[0]);
938 ctx
.lineTo(point
.canvasx
, newYs
[0]);
939 ctx
.lineTo(point
.canvasx
, newYs
[1]);
941 ctx
.lineTo(prevX
, newYs
[1]);
943 ctx
.lineTo(prevX
, prevYs
[1]);
948 prevX
= point
.canvasx
;
953 } else if (fillGraph
) {
954 var baseline
= [] // for stacked graphs: baseline for filling
956 // process sets in reverse order (needed for stacked graphs)
957 for (var i
= setCount
- 1; i
>= 0; i
--) {
958 var setName
= setNames
[i
];
959 var color
= this.colors
[setName
];
960 var axis
= this.dygraph_
.axisPropertiesForSeries(setName
);
961 var axisY
= 1.0 + axis
.minyval
* axis
.yscale
;
962 if (axisY
< 0.0) axisY
= 0.0;
963 else if (axisY
> 1.0) axisY
= 1.0;
964 axisY
= this.area
.h
* axisY
+ this.area
.y
;
966 // setup graphics context
969 var prevYs
= [-1, -1];
970 var yscale
= axis
.yscale
;
971 // should be same color as the lines but only 15% opaque.
972 var rgb
= new RGBColor(color
);
973 var err_color
= 'rgba(' + rgb
.r
+ ',' + rgb
.g
+ ',' + rgb
.b
+ ',' +
975 ctx
.fillStyle
= err_color
;
977 for (var j
= 0; j
< this.layout
.points
.length
; j
++) {
978 var point
= this.layout
.points
[j
];
979 if (point
.name
== setName
) {
980 if (!Dygraph
.isOK(point
.y
)) {
986 lastY
= baseline
[point
.canvasx
];
987 if (lastY
=== undefined
) lastY
= axisY
;
988 baseline
[point
.canvasx
] = point
.canvasy
;
989 newYs
= [ point
.canvasy
, lastY
];
991 newYs
= [ point
.canvasy
, axisY
];
994 ctx
.moveTo(prevX
, prevYs
[0]);
996 ctx
.lineTo(point
.canvasx
, prevYs
[0]);
998 ctx
.lineTo(point
.canvasx
, newYs
[0]);
1000 ctx
.lineTo(point
.canvasx
, newYs
[1]);
1001 ctx
.lineTo(prevX
, prevYs
[1]);
1005 prevX
= point
.canvasx
;
1012 for (var i
= 0; i
< setCount
; i
++) {
1013 var setName
= setNames
[i
];
1014 var color
= this.colors
[setName
];
1015 var strokeWidth
= this.dygraph_
.attr_("strokeWidth", setName
);
1017 // setup graphics context
1019 var point
= this.layout
.points
[0];
1020 var pointSize
= this.dygraph_
.attr_("pointSize", setName
);
1021 var prevX
= null, prevY
= null;
1022 var drawPoints
= this.dygraph_
.attr_("drawPoints", setName
);
1023 var points
= this.layout
.points
;
1024 for (var j
= 0; j
< points
.length
; j
++) {
1025 var point
= points
[j
];
1026 if (point
.name
== setName
) {
1027 if (!Dygraph
.isOK(point
.canvasy
)) {
1028 if (stepPlot
&& prevX
!= null) {
1029 // Draw a horizontal line to the start of the missing data
1031 ctx
.strokeStyle
= color
;
1032 ctx
.lineWidth
= this.options
.strokeWidth
;
1033 ctx
.moveTo(prevX
, prevY
);
1034 ctx
.lineTo(point
.canvasx
, prevY
);
1037 // this will make us move to the next point, not draw a line to it.
1038 prevX
= prevY
= null;
1040 // A point is "isolated" if it is non-null but both the previous
1041 // and next points are null.
1042 var isIsolated
= (!prevX
&& (j
== points
.length
- 1 ||
1043 !Dygraph
.isOK(points
[j
+1].canvasy
)));
1046 prevX
= point
.canvasx
;
1047 prevY
= point
.canvasy
;
1049 // TODO(danvk): figure out why this conditional is necessary.
1052 ctx
.strokeStyle
= color
;
1053 ctx
.lineWidth
= strokeWidth
;
1054 ctx
.moveTo(prevX
, prevY
);
1056 ctx
.lineTo(point
.canvasx
, prevY
);
1058 prevX
= point
.canvasx
;
1059 prevY
= point
.canvasy
;
1060 ctx
.lineTo(prevX
, prevY
);
1065 if (drawPoints
|| isIsolated
) {
1067 ctx
.fillStyle
= color
;
1068 ctx
.arc(point
.canvasx
, point
.canvasy
, pointSize
,
1069 0, 2 * Math
.PI
, false);