3 * Copyright 2011 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
8 * @fileoverview Based on PlotKitLayout, but modified to meet the needs of
12 /*jshint globalstrict: true */
13 /*global Dygraph:false */
17 * Creates a new DygraphLayout object.
19 * This class contains all the data to be charted.
20 * It uses data coordinates, but also records the chart range (in data
21 * coordinates) and hence is able to calculate percentage positions ('In this
22 * view, Point A lies 25% down the x-axis.')
24 * Two things that it does not do are:
25 * 1. Record pixel coordinates for anything.
26 * 2. (oddly) determine anything about the layout of chart elements.
28 * The naming is a vestige of Dygraph's original PlotKit roots.
32 var DygraphLayout
= function(dygraph
) {
33 this.dygraph_
= dygraph
;
36 this.annotations
= [];
39 // TODO(danvk): it's odd that xTicks_ and yTicks_ are inputs, but xticks and
40 // yticks are outputs. Clean this up.
45 DygraphLayout
.prototype.attr_
= function(name
) {
46 return this.dygraph_
.attr_(name
);
49 DygraphLayout
.prototype.addDataset
= function(setname
, set_xy
) {
50 this.datasets
.push(set_xy
);
51 this.setNames
.push(setname
);
54 DygraphLayout
.prototype.getPlotArea
= function() {
55 return this.computePlotArea_();
58 // Compute the box which the chart should be drawn in. This is the canvas's
59 // box, less space needed for axis and chart labels.
60 DygraphLayout
.prototype.computePlotArea_
= function() {
62 // TODO(danvk): per-axis setting.
68 if (this.attr_('drawYAxis')) {
69 area.x = this.attr_('yAxisLabelWidth') + 2 * this.attr_('axisTickSize');
73 area
.w
= this.dygraph_
.width_
- area
.x
- this.attr_('rightGap');
74 area
.h
= this.dygraph_
.height_
;
76 // Let plugins reserve space.
78 chart_div
: this.dygraph_
.graphDiv
,
79 reserveSpaceLeft
: function(px
) {
90 reserveSpaceRight
: function(px
) {
92 x
: area
.x
+ area
.w
- px
,
100 reserveSpaceTop
: function(px
) {
111 reserveSpaceBottom
: function(px
) {
114 y
: area
.y
+ area
.h
- px
,
121 chartRect
: function() {
122 return {x
:area
.x
, y
:area
.y
, w
:area
.w
, h
:area
.h
};
125 this.dygraph_
.cascadeEvents_('layout', e
);
128 if (this.attr_('drawXAxis')) {
129 if (this.attr_('xAxisHeight')) {
130 area.h -= this.attr_('xAxisHeight');
132 area.h -= this.attr_('axisLabelFontSize') + 2 * this.attr_('axisTickSize');
137 // Shrink the drawing area to accomodate additional y-axes.
138 if (this.dygraph_
.numAxes() == 2) {
139 // TODO(danvk): per-axis setting.
140 area
.w
-= (this.attr_('yAxisLabelWidth') + 2 * this.attr_('axisTickSize'));
141 } else if (this.dygraph_
.numAxes() > 2) {
142 this.dygraph_
.error("Only two y-axes are supported at this time. (Trying " +
143 "to use " + this.dygraph_
.numAxes() + ")");
146 // Add space for range selector, if needed.
147 if (this.attr_('showRangeSelector')) {
148 area
.h
-= this.attr_('rangeSelectorHeight') + 4;
154 DygraphLayout
.prototype.setAnnotations
= function(ann
) {
155 // The Dygraph object's annotations aren't parsed. We parse them here and
156 // save a copy. If there is no parser, then the user must be using raw format.
157 this.annotations
= [];
158 var parse
= this.attr_('xValueParser') || function(x
) { return x
; };
159 for (var i
= 0; i
< ann
.length
; i
++) {
161 if (!ann
[i
].xval
&& !ann
[i
].x
) {
162 this.dygraph_
.error("Annotations must have an 'x' property");
166 !(ann
[i
].hasOwnProperty('width') &&
167 ann
[i
].hasOwnProperty('height'))) {
168 this.dygraph_
.error("Must set width and height when setting " +
169 "annotation.icon property");
172 Dygraph
.update(a
, ann
[i
]);
173 if (!a
.xval
) a
.xval
= parse(a
.x
);
174 this.annotations
.push(a
);
178 DygraphLayout
.prototype.setXTicks
= function(xTicks
) {
179 this.xTicks_
= xTicks
;
182 // TODO(danvk): add this to the Dygraph object's API or move it into Layout.
183 DygraphLayout
.prototype.setYAxes
= function (yAxes
) {
187 DygraphLayout
.prototype.setDateWindow
= function(dateWindow
) {
188 this.dateWindow_
= dateWindow
;
191 DygraphLayout
.prototype.evaluate
= function() {
192 this._evaluateLimits();
193 this._evaluateLineCharts();
194 this._evaluateLineTicks();
195 this._evaluateAnnotations();
198 DygraphLayout
.prototype._evaluateLimits
= function() {
199 this.minxval
= this.maxxval
= null;
200 if (this.dateWindow_
) {
201 this.minxval
= this.dateWindow_
[0];
202 this.maxxval
= this.dateWindow_
[1];
204 for (var setIdx
= 0; setIdx
< this.datasets
.length
; ++setIdx
) {
205 var series
= this.datasets
[setIdx
];
206 if (series
.length
> 1) {
207 var x1
= series
[0][0];
208 if (!this.minxval
|| x1
< this.minxval
) this.minxval
= x1
;
210 var x2
= series
[series
.length
- 1][0];
211 if (!this.maxxval
|| x2
> this.maxxval
) this.maxxval
= x2
;
215 this.xrange
= this.maxxval
- this.minxval
;
216 this.xscale
= (this.xrange
!== 0 ? 1/this.xrange
: 1.0);
218 for (var i
= 0; i
< this.yAxes_
.length
; i
++) {
219 var axis
= this.yAxes_
[i
];
220 axis
.minyval
= axis
.computedValueRange
[0];
221 axis
.maxyval
= axis
.computedValueRange
[1];
222 axis
.yrange
= axis
.maxyval
- axis
.minyval
;
223 axis
.yscale
= (axis
.yrange
!== 0 ? 1.0 / axis
.yrange
: 1.0);
225 if (axis
.g
.attr_("logscale")) {
226 axis
.ylogrange
= Dygraph
.log10(axis
.maxyval
) - Dygraph
.log10(axis
.minyval
);
227 axis
.ylogscale
= (axis
.ylogrange
!== 0 ? 1.0 / axis
.ylogrange
: 1.0);
228 if (!isFinite(axis
.ylogrange
) || isNaN(axis
.ylogrange
)) {
229 axis
.g
.error('axis ' + i
+ ' of graph at ' + axis
.g
+
230 ' can\'t be displayed in log scale for range [' +
231 axis
.minyval
+ ' - ' + axis
.maxyval
+ ']');
237 DygraphLayout
._calcYNormal
= function(axis
, value
) {
239 return 1.0 - ((Dygraph
.log10(value
) - Dygraph
.log10(axis
.minyval
)) * axis
.ylogscale
);
241 return 1.0 - ((value
- axis
.minyval
) * axis
.yscale
);
245 DygraphLayout
.prototype._evaluateLineCharts
= function() {
246 // An array to keep track of how many points will be drawn for each set.
247 // This will allow for the canvas renderer to not have to check every point
248 // for every data set since the points are added in order of the sets in
250 this.setPointsLengths
= [];
251 this.setPointsOffsets
= [];
253 var connectSeparated
= this.attr_('connectSeparatedPoints');
254 // TODO(bhs): these loops are a hot-spot for high-point-count charts. In fact,
255 // on chrome+linux, they are 6 times more expensive than iterating through the
256 // points and drawing the lines. The brunt of the cost comes from allocating
257 // the |point| structures.
261 // Preallocating the size of points reduces reallocations, and therefore,
262 // calls to collect garbage.
264 for (setIdx
= 0; setIdx
< this.datasets
.length
; ++setIdx
) {
265 totalPoints
+= this.datasets
[setIdx
].length
;
267 this.points
= new Array(totalPoints
);
269 for (setIdx
= 0; setIdx
< this.datasets
.length
; ++setIdx
) {
270 this.setPointsOffsets
.push(i
);
271 var dataset
= this.datasets
[setIdx
];
272 var setName
= this.setNames
[setIdx
];
273 var axis
= this.dygraph_
.axisPropertiesForSeries(setName
);
275 for (var j
= 0; j
< dataset
.length
; j
++) {
276 var item
= dataset
[j
];
277 var xValue
= DygraphLayout
.parseFloat_(item
[0]);
278 var yValue
= DygraphLayout
.parseFloat_(item
[1]);
280 // Range from 0-1 where 0 represents left and 1 represents right.
281 var xNormal
= (xValue
- this.minxval
) * this.xscale
;
282 // Range from 0-1 where 0 represents top and 1 represents bottom
283 var yNormal
= DygraphLayout
._calcYNormal(axis
, yValue
);
285 if (connectSeparated
&& item
[1] === null) {
298 this.setPointsLengths
.push(i
- this.setPointsOffsets
[setIdx
]);
303 * Optimized replacement for parseFloat, which was way too slow when almost
304 * all values were type number, with few edge cases, none of which were strings.
306 DygraphLayout
.parseFloat_
= function(val
) {
307 // parseFloat(null) is NaN
312 // Assume it's a number or NaN. If it's something else, I'll be shocked.
316 DygraphLayout
.prototype._evaluateLineTicks
= function() {
317 var i
, tick
, label
, pos
;
319 for (i
= 0; i
< this.xTicks_
.length
; i
++) {
320 tick
= this.xTicks_
[i
];
322 pos
= this.xscale
* (tick
.v
- this.minxval
);
323 if ((pos
>= 0.0) && (pos
<= 1.0)) {
324 this.xticks
.push([pos
, label
]);
329 for (i
= 0; i
< this.yAxes_
.length
; i
++ ) {
330 var axis
= this.yAxes_
[i
];
331 for (var j
= 0; j
< axis
.ticks
.length
; j
++) {
332 tick
= axis
.ticks
[j
];
334 pos
= this.dygraph_
.toPercentYCoord(tick
.v
, i
);
335 if ((pos
>= 0.0) && (pos
<= 1.0)) {
336 this.yticks
.push([i
, pos
, label
]);
344 * Behaves the same way as PlotKit.Layout, but also copies the errors
347 DygraphLayout
.prototype.evaluateWithError
= function() {
349 if (!(this.attr_('errorBars') || this.attr_('customBars'))) return;
351 // Copy over the error terms
352 var i
= 0; // index in this.points
353 for (var setIdx
= 0; setIdx
< this.datasets
.length
; ++setIdx
) {
355 var dataset
= this.datasets
[setIdx
];
356 var setName
= this.setNames
[setIdx
];
357 var axis
= this.dygraph_
.axisPropertiesForSeries(setName
);
358 for (j
= 0; j
< dataset
.length
; j
++, i
++) {
359 var item
= dataset
[j
];
360 var xv
= DygraphLayout
.parseFloat_(item
[0]);
361 var yv
= DygraphLayout
.parseFloat_(item
[1]);
363 if (xv
== this.points
[i
].xval
&&
364 yv
== this.points
[i
].yval
) {
365 var errorMinus
= DygraphLayout
.parseFloat_(item
[2]);
366 var errorPlus
= DygraphLayout
.parseFloat_(item
[3]);
368 var yv_minus
= yv
- errorMinus
;
369 var yv_plus
= yv
+ errorPlus
;
370 this.points
[i
].y_top
= DygraphLayout
._calcYNormal(axis
, yv_minus
);
371 this.points
[i
].y_bottom
= DygraphLayout
._calcYNormal(axis
, yv_plus
);
377 DygraphLayout
.prototype._evaluateAnnotations
= function() {
378 // Add the annotations to the point to which they belong.
379 // Make a map from (setName, xval) to annotation for quick lookups.
381 var annotations
= {};
382 for (i
= 0; i
< this.annotations
.length
; i
++) {
383 var a
= this.annotations
[i
];
384 annotations
[a
.xval
+ "," + a
.series
] = a
;
387 this.annotated_points
= [];
389 // Exit the function early if there are no annotations.
390 if (!this.annotations
|| !this.annotations
.length
) {
394 // TODO(antrob): loop through annotations not points.
395 for (i
= 0; i
< this.points
.length
; i
++) {
396 var p
= this.points
[i
];
397 var k
= p
.xval
+ "," + p
.name
;
398 if (k
in annotations
) {
399 p
.annotation
= annotations
[k
];
400 this.annotated_points
.push(p
);
406 * Convenience function to remove all the data sets from a graph
408 DygraphLayout
.prototype.removeAllDatasets
= function() {
409 delete this.datasets
;
410 delete this.setNames
;
411 delete this.setPointsLengths
;
412 delete this.setPointsOffsets
;
415 this.setPointsLengths
= [];
416 this.setPointsOffsets
= [];
420 * Return a copy of the point at the indicated index, with its yval unstacked.
421 * @param int index of point in layout_.points
423 DygraphLayout
.prototype.unstackPointAtIndex
= function(idx
) {
424 var point
= this.points
[idx
];
425 // If the point is missing, no unstacking is necessary
430 // Clone the point since we modify it
431 var unstackedPoint
= {};
432 for (var pt
in point
) {
433 unstackedPoint
[pt
] = point
[pt
];
436 if (!this.attr_("stackedGraph")) {
437 return unstackedPoint
;
440 // The unstacked yval is equal to the current yval minus the yval of the
441 // next point at the same xval.
442 for (var i
= idx
+1; i
< this.points
.length
; i
++) {
443 if ((this.points
[i
].xval
== point
.xval
) && this.points
[i
].yval
) {
444 unstackedPoint
.yval
-= this.points
[i
].yval
;
449 return unstackedPoint
;