1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Subclasses various parts of PlotKit to meet the additional
6 * needs of Dygraph: grid overlays and error bars
9 // Subclass PlotKit.Layout to add:
10 // 1. Sigma/errorBars properties
11 // 2. Copy error terms for PlotKit.CanvasRenderer._renderLineChart
14 * Creates a new DygraphLayout object. Options are the same as those allowed
15 * by the PlotKit.Layout constructor.
16 * @param {Object} options Options for PlotKit.Layout
17 * @return {Object} The DygraphLayout object
19 DygraphLayout
= function(dygraph
, options
) {
20 this.dygraph_
= dygraph
;
21 this.options
= {}; // TODO(danvk): remove, use attr_ instead.
22 MochiKit
.Base
.update(this.options
, options
? options
: {});
23 this.datasets
= new Array();
26 DygraphLayout
.prototype.attr_
= function(name
) {
27 return this.dygraph_
.attr_(name
);
30 DygraphLayout
.prototype.addDataset
= function(setname
, set_xy
) {
31 this.datasets
[setname
] = set_xy
;
34 DygraphLayout
.prototype.evaluate
= function() {
35 this._evaluateLimits();
36 this._evaluateLineCharts();
37 this._evaluateLineTicks();
40 DygraphLayout
.prototype._evaluateLimits
= function() {
41 this.minxval
= this.maxxval
= null;
42 for (var name
in this.datasets
) {
43 var series
= this.datasets
[name
];
44 var x1
= series
[0][0];
45 if (!this.minxval
|| x1
< this.minxval
) this.minxval
= x1
;
47 var x2
= series
[series
.length
- 1][0];
48 if (!this.maxxval
|| x2
> this.maxxval
) this.maxxval
= x2
;
50 this.xrange
= this.maxxval
- this.minxval
;
51 this.xscale
= (this.xrange
!= 0 ? 1/this.xrange
: 1.0);
53 this.minyval
= this.options
.yAxis
[0];
54 this.maxyval
= this.options
.yAxis
[1];
55 this.yrange
= this.maxyval
- this.minyval
;
56 this.yscale
= (this.yrange
!= 0 ? 1/this.yrange
: 1.0);
59 DygraphLayout
.prototype._evaluateLineCharts
= function() {
61 this.points
= new Array();
62 for (var setName
in this.datasets
) {
63 var dataset
= this.datasets
[setName
];
64 for (var j
= 0; j
< dataset
.length
; j
++) {
65 var item
= dataset
[j
];
67 x
: ((parseFloat(item
[0]) - this.minxval
) * this.xscale
),
68 y
: 1.0 - ((parseFloat(item
[1]) - this.minyval
) * this.yscale
),
69 xval
: parseFloat(item
[0]),
70 yval
: parseFloat(item
[1]),
74 // limit the x, y values so they do not overdraw
81 if ((point
.x
>= 0.0) && (point
.x
<= 1.0)) {
82 this.points
.push(point
);
88 DygraphLayout
.prototype._evaluateLineTicks
= function() {
89 this.xticks
= new Array();
90 for (var i
= 0; i
< this.options
.xTicks
.length
; i
++) {
91 var tick
= this.options
.xTicks
[i
];
92 var label
= tick
.label
;
93 var pos
= this.xscale
* (tick
.v
- this.minxval
);
94 if ((pos
>= 0.0) && (pos
<= 1.0)) {
95 this.xticks
.push([pos
, label
]);
99 this.yticks
= new Array();
100 for (var i
= 0; i
< this.options
.yTicks
.length
; i
++) {
101 var tick
= this.options
.yTicks
[i
];
102 var label
= tick
.label
;
103 var pos
= 1.0 - (this.yscale
* (tick
.v
- this.minyval
));
104 if ((pos
>= 0.0) && (pos
<= 1.0)) {
105 this.yticks
.push([pos
, label
]);
112 * Behaves the same way as PlotKit.Layout, but also copies the errors
115 DygraphLayout
.prototype.evaluateWithError
= function() {
117 if (!this.options
.errorBars
) return;
119 // Copy over the error terms
120 var i
= 0; // index in this.points
121 for (var setName
in this.datasets
) {
123 var dataset
= this.datasets
[setName
];
124 if (PlotKit
.Base
.isFuncLike(dataset
)) continue;
125 for (var j
= 0; j
< dataset
.length
; j
++, i
++) {
126 var item
= dataset
[j
];
127 var xv
= parseFloat(item
[0]);
128 var yv
= parseFloat(item
[1]);
130 if (xv
== this.points
[i
].xval
&&
131 yv
== this.points
[i
].yval
) {
132 this.points
[i
].errorMinus
= parseFloat(item
[2]);
133 this.points
[i
].errorPlus
= parseFloat(item
[3]);
140 * Convenience function to remove all the data sets from a graph
142 DygraphLayout
.prototype.removeAllDatasets
= function() {
143 delete this.datasets
;
144 this.datasets
= new Array();
148 * Change the values of various layout options
149 * @param {Object} new_options an associative array of new properties
151 DygraphLayout
.prototype.updateOptions
= function(new_options
) {
152 MochiKit
.Base
.update(this.options
, new_options
? new_options
: {});
155 // Subclass PlotKit.CanvasRenderer to add:
156 // 1. X/Y grid overlay
157 // 2. Ability to draw error bars (if required)
160 * Sets some PlotKit.CanvasRenderer options
161 * @param {Object} element The canvas to attach to
162 * @param {Layout} layout The DygraphLayout object for this graph.
163 * @param {Object} options Options to pass on to CanvasRenderer
165 DygraphCanvasRenderer
= function(dygraph
, element
, layout
, options
) {
166 // TODO(danvk): remove options, just use dygraph.attr_.
167 this.dygraph_
= dygraph
;
174 "axisLineColor": Color
.blackColor(),
175 "axisLineWidth": 0.5,
177 "axisLabelColor": Color
.blackColor(),
178 "axisLabelFont": "Arial",
179 "axisLabelFontSize": 9,
180 "axisLabelWidth": 50,
183 "gridLineColor": MochiKit
.Color
.Color
.grayColor()
185 MochiKit
.Base
.update(this.options
, options
);
187 this.layout
= layout
;
188 this.element
= MochiKit
.DOM
.getElement(element
);
189 this.container
= this.element
.parentNode
;
191 // Stuff relating to Canvas on IE support
192 this.isIE
= PlotKit
.Base
.excanvasSupported();
194 if (this.isIE
&& !isNil(G_vmlCanvasManager
)) {
197 this.renderDelay
= null;
198 this.clearDelay
= null;
199 this.element
= G_vmlCanvasManager
.initElement(this.element
);
202 this.height
= this.element
.height
;
203 this.width
= this.element
.width
;
205 // --- check whether everything is ok before we return
206 if (!this.isIE
&& !(DygraphCanvasRenderer
.isSupported(this.element
)))
207 throw "Canvas is not supported.";
210 this.xlabels
= new Array();
211 this.ylabels
= new Array();
214 x
: this.options
.yAxisLabelWidth
+ 2 * this.options
.axisTickSize
,
217 this.area
.w
= this.width
- this.area
.x
- this.options
.rightGap
;
218 this.area
.h
= this.height
- this.options
.axisLabelFontSize
-
219 2 * this.options
.axisTickSize
;
221 MochiKit
.DOM
.updateNodeAttributes(this.container
,
222 {"style":{ "position": "relative", "width": this.width
+ "px"}});
225 DygraphCanvasRenderer
.prototype.clear
= function() {
227 // VML takes a while to start up, so we just poll every this.IEDelay
229 if (this.clearDelay
) {
230 this.clearDelay
.cancel();
231 this.clearDelay
= null;
233 var context
= this.element
.getContext("2d");
236 this.clearDelay
= MochiKit
.Async
.wait(this.IEDelay
);
237 this.clearDelay
.addCallback(bind(this.clear
, this));
242 var context
= this.element
.getContext("2d");
243 context
.clearRect(0, 0, this.width
, this.height
);
245 MochiKit
.Iter
.forEach(this.xlabels
, MochiKit
.DOM
.removeElement
);
246 MochiKit
.Iter
.forEach(this.ylabels
, MochiKit
.DOM
.removeElement
);
247 this.xlabels
= new Array();
248 this.ylabels
= new Array();
252 DygraphCanvasRenderer
.isSupported
= function(canvasName
) {
255 if (MochiKit
.Base
.isUndefinedOrNull(canvasName
))
256 canvas
= MochiKit
.DOM
.CANVAS({});
258 canvas
= MochiKit
.DOM
.getElement(canvasName
);
259 var context
= canvas
.getContext("2d");
262 var ie
= navigator
.appVersion
.match(/MSIE (\d\.\d)/);
263 var opera
= (navigator
.userAgent
.toLowerCase().indexOf("opera") != -1);
264 if ((!ie
) || (ie
[1] < 6) || (opera
))
272 * Draw an X/Y grid on top of the existing plot
274 DygraphCanvasRenderer
.prototype.render
= function() {
275 // Draw the new X/Y grid
276 var ctx
= this.element
.getContext("2d");
277 if (this.options
.drawYGrid
) {
278 var ticks
= this.layout
.yticks
;
280 ctx
.strokeStyle
= this.options
.gridLineColor
.toRGBString();
281 ctx
.lineWidth
= this.options
.axisLineWidth
;
282 for (var i
= 0; i
< ticks
.length
; i
++) {
284 var y
= this.area
.y
+ ticks
[i
][0] * this.area
.h
;
287 ctx
.lineTo(x
+ this.area
.w
, y
);
293 if (this.options
.drawXGrid
) {
294 var ticks
= this.layout
.xticks
;
296 ctx
.strokeStyle
= this.options
.gridLineColor
.toRGBString();
297 ctx
.lineWidth
= this.options
.axisLineWidth
;
298 for (var i
=0; i
<ticks
.length
; i
++) {
299 var x
= this.area
.x
+ ticks
[i
][0] * this.area
.w
;
300 var y
= this.area
.y
+ this.area
.h
;
303 ctx
.lineTo(x
, this.area
.y
);
309 // Do the ordinary rendering, as before
310 // TODO(danvk) Call super.render()
311 this._renderLineChart();
316 DygraphCanvasRenderer
.prototype._renderAxis
= function() {
317 if (!this.options
.drawXAxis
&& !this.options
.drawYAxis
)
320 var context
= this.element
.getContext("2d");
322 var labelStyle
= {"style":
323 {"position": "absolute",
324 "fontSize": this.options
.axisLabelFontSize
+ "px",
326 "color": this.options
.axisLabelColor
.toRGBString(),
327 "width": this.options
.axisLabelWidth
+ "px",
334 context
.strokeStyle
= this.options
.axisLineColor
.toRGBString();
335 context
.lineWidth
= this.options
.axisLineWidth
;
338 if (this.options
.drawYAxis
) {
339 if (this.layout
.yticks
) {
340 var drawTick
= function(tick
) {
341 if (typeof(tick
) == "function") return;
343 var y
= this.area
.y
+ tick
[0] * this.area
.h
;
345 context
.moveTo(x
, y
);
346 context
.lineTo(x
- this.options
.axisTickSize
, y
);
350 var label
= DIV(labelStyle
, tick
[1]);
351 var top
= (y
- this.options
.axisLabelFontSize
/ 2);
352 if (top
< 0) top
= 0;
354 if (top
+ this.options
.axisLabelFontSize
+ 3 > this.height
) {
355 label
.style
.bottom
= "0px";
357 label
.style
.top
= top
+ "px";
359 label
.style
.left
= "0px";
360 label
.style
.textAlign
= "right";
361 label
.style
.width
= this.options
.yAxisLabelWidth
+ "px";
362 MochiKit
.DOM
.appendChildNodes(this.container
, label
);
363 this.ylabels
.push(label
);
366 MochiKit
.Iter
.forEach(this.layout
.yticks
, bind(drawTick
, this));
368 // The lowest tick on the y-axis often overlaps with the leftmost
369 // tick on the x-axis. Shift the bottom tick up a little bit to
370 // compensate if necessary.
371 var bottomTick
= this.ylabels
[0];
372 var fontSize
= this.options
.axisLabelFontSize
;
373 var bottom
= parseInt(bottomTick
.style
.top
) + fontSize
;
374 if (bottom
> this.height
- fontSize
) {
375 bottomTick
.style
.top
= (parseInt(bottomTick
.style
.top
) -
376 fontSize
/ 2) + "px";
381 context
.moveTo(this.area
.x
, this.area
.y
);
382 context
.lineTo(this.area
.x
, this.area
.y
+ this.area
.h
);
387 if (this.options
.drawXAxis
) {
388 if (this.layout
.xticks
) {
389 var drawTick
= function(tick
) {
390 if (typeof(dataset
) == "function") return;
392 var x
= this.area
.x
+ tick
[0] * this.area
.w
;
393 var y
= this.area
.y
+ this.area
.h
;
395 context
.moveTo(x
, y
);
396 context
.lineTo(x
, y
+ this.options
.axisTickSize
);
400 var label
= DIV(labelStyle
, tick
[1]);
401 label
.style
.textAlign
= "center";
402 label
.style
.bottom
= "0px";
404 var left
= (x
- this.options
.axisLabelWidth
/2);
405 if (left
+ this.options
.axisLabelWidth
> this.width
) {
406 left
= this.width
- this.options
.xAxisLabelWidth
;
407 label
.style
.textAlign
= "right";
411 label
.style
.textAlign
= "left";
414 label
.style
.left
= left
+ "px";
415 label
.style
.width
= this.options
.xAxisLabelWidth
+ "px";
416 MochiKit
.DOM
.appendChildNodes(this.container
, label
);
417 this.xlabels
.push(label
);
420 MochiKit
.Iter
.forEach(this.layout
.xticks
, bind(drawTick
, this));
424 context
.moveTo(this.area
.x
, this.area
.y
+ this.area
.h
);
425 context
.lineTo(this.area
.x
+ this.area
.w
, this.area
.y
+ this.area
.h
);
435 * Overrides the CanvasRenderer method to draw error bars
437 DygraphCanvasRenderer
.prototype._renderLineChart
= function() {
438 var context
= this.element
.getContext("2d");
439 var colorCount
= this.options
.colorScheme
.length
;
440 var colorScheme
= this.options
.colorScheme
;
441 var setNames
= MochiKit
.Base
.keys(this.layout
.datasets
);
442 var errorBars
= this.layout
.options
.errorBars
;
443 var setCount
= setNames
.length
;
444 var bind
= MochiKit
.Base
.bind
;
445 var partial
= MochiKit
.Base
.partial
;
448 var updatePoint
= function(point
) {
449 point
.canvasx
= this.area
.w
* point
.x
+ this.area
.x
;
450 point
.canvasy
= this.area
.h
* point
.y
+ this.area
.y
;
452 MochiKit
.Iter
.forEach(this.layout
.points
, updatePoint
, this);
455 var isOK
= function(x
) { return x
&& !isNaN(x
); };
456 var makePath
= function(ctx
) {
457 for (var i
= 0; i
< setCount
; i
++) {
458 var setName
= setNames
[i
];
459 var color
= colorScheme
[i
%colorCount
];
460 var strokeX
= this.options
.strokeColorTransform
;
462 // setup graphics context
464 context
.strokeStyle
= color
.toRGBString();
465 context
.lineWidth
= this.options
.strokeWidth
;
466 var point
= this.layout
.points
[0];
467 var pointSize
= this.dygraph_
.attr_("pointSize");
468 var prevX
= null, prevY
= null;
469 var drawPoints
= this.dygraph_
.attr_("drawPoints");
470 var points
= this.layout
.points
;
471 for (var j
= 0; j
< points
.length
; j
++) {
472 var point
= points
[j
];
473 if (point
.name
== setName
) {
474 if (!isOK(point
.canvasy
)) {
475 // this will make us move to the next point, not draw a line to it.
476 prevX
= prevY
= null;
478 // A point is "isolated" if it is non-null but both the previous
479 // and next points are null.
480 var isIsolated
= (!prevX
&& (j
== points
.length
- 1 ||
481 !isOK(points
[j
+1].canvasy
)));
484 prevX
= point
.canvasx
;
485 prevY
= point
.canvasy
;
488 ctx
.moveTo(prevX
, prevY
);
489 prevX
= point
.canvasx
;
490 prevY
= point
.canvasy
;
491 ctx
.lineTo(prevX
, prevY
);
495 if (drawPoints
|| isIsolated
) {
497 ctx
.fillStyle
= color
.toRGBString();
498 ctx
.arc(point
.canvasx
, point
.canvasy
, pointSize
, 0, 360, false);
507 var makeErrorBars
= function(ctx
) {
508 for (var i
= 0; i
< setCount
; i
++) {
509 var setName
= setNames
[i
];
510 var color
= colorScheme
[i
% colorCount
];
511 var strokeX
= this.options
.strokeColorTransform
;
513 // setup graphics context
515 context
.strokeStyle
= color
.toRGBString();
516 context
.lineWidth
= this.options
.strokeWidth
;
518 var prevYs
= [-1, -1];
520 var yscale
= this.layout
.yscale
;
521 var errorTrapezoid
= function(ctx_
,point
) {
523 if (point
.name
== setName
) {
524 if (!point
.y
|| isNaN(point
.y
)) {
528 var newYs
= [ point
.y
- point
.errorPlus
* yscale
,
529 point
.y
+ point
.errorMinus
* yscale
];
530 newYs
[0] = this.area
.h
* newYs
[0] + this.area
.y
;
531 newYs
[1] = this.area
.h
* newYs
[1] + this.area
.y
;
533 ctx_
.moveTo(prevX
, prevYs
[0]);
534 ctx_
.lineTo(point
.canvasx
, newYs
[0]);
535 ctx_
.lineTo(point
.canvasx
, newYs
[1]);
536 ctx_
.lineTo(prevX
, prevYs
[1]);
539 prevYs
[0] = newYs
[0];
540 prevYs
[1] = newYs
[1];
541 prevX
= point
.canvasx
;
544 // should be same color as the lines
545 var err_color
= color
.colorWithAlpha(0.15);
546 ctx
.fillStyle
= err_color
.toRGBString();
548 MochiKit
.Iter
.forEach(this.layout
.points
, partial(errorTrapezoid
, ctx
), this);
554 bind(makeErrorBars
, this)(context
);
555 bind(makePath
, this)(context
);