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
;
35 * Array of points for each series.
37 * [series index][row index in series] = |Point| structure,
38 * where series index refers to visible series only, and the
39 * point index is for the reduced set of points for the current
40 * zoom region (including one point just outside the window).
41 * All points in the same row index share the same X value.
43 * @type {Array.<Array.<Dygraph.PointType>>}
47 this.annotations
= [];
50 // TODO(danvk): it's odd that xTicks_ and yTicks_ are inputs, but xticks and
51 // yticks are outputs. Clean this up.
57 * Add points for a single series.
59 * @param {string} setname Name of the series.
60 * @param {Array.<Dygraph.PointType>} set_xy Points for the series.
62 DygraphLayout
.prototype.addDataset
= function(setname
, set_xy
) {
63 this.points
.push(set_xy
);
64 this.setNames
.push(setname
);
68 * Returns the box which the chart should be drawn in. This is the canvas's
69 * box, less space needed for the axis and chart labels.
71 * @return {{x: number, y: number, w: number, h: number}}
73 DygraphLayout
.prototype.getPlotArea
= function() {
77 // Compute the box which the chart should be drawn in. This is the canvas's
78 // box, less space needed for axis, chart labels, and other plug-ins.
79 // NOTE: This should only be called by Dygraph.predraw_().
80 DygraphLayout
.prototype.computePlotArea
= function() {
82 // TODO(danvk): per-axis setting.
87 area
.w
= this.dygraph_
.width_
- area
.x
- this.dygraph_
.getOption('rightGap');
88 area
.h
= this.dygraph_
.height_
;
90 // Let plugins reserve space.
92 chart_div
: this.dygraph_
.graphDiv
,
93 reserveSpaceLeft
: function(px
) {
104 reserveSpaceRight
: function(px
) {
106 x
: area
.x
+ area
.w
- px
,
114 reserveSpaceTop
: function(px
) {
125 reserveSpaceBottom
: function(px
) {
128 y
: area
.y
+ area
.h
- px
,
135 chartRect
: function() {
136 return {x
:area
.x
, y
:area
.y
, w
:area
.w
, h
:area
.h
};
139 this.dygraph_
.cascadeEvents_('layout', e
);
144 DygraphLayout
.prototype.setAnnotations
= function(ann
) {
145 // The Dygraph object's annotations aren't parsed. We parse them here and
146 // save a copy. If there is no parser, then the user must be using raw format.
147 this.annotations
= [];
148 var parse
= this.dygraph_
.getOption('xValueParser') || function(x
) { return x
; };
149 for (var i
= 0; i
< ann
.length
; i
++) {
151 if (!ann
[i
].xval
&& ann
[i
].x
=== undefined
) {
152 Dygraph
.error("Annotations must have an 'x' property");
156 !(ann
[i
].hasOwnProperty('width') &&
157 ann
[i
].hasOwnProperty('height'))) {
158 Dygraph
.error("Must set width and height when setting " +
159 "annotation.icon property");
162 Dygraph
.update(a
, ann
[i
]);
163 if (!a
.xval
) a
.xval
= parse(a
.x
);
164 this.annotations
.push(a
);
168 DygraphLayout
.prototype.setXTicks
= function(xTicks
) {
169 this.xTicks_
= xTicks
;
172 // TODO(danvk): add this to the Dygraph object's API or move it into Layout.
173 DygraphLayout
.prototype.setYAxes
= function (yAxes
) {
177 DygraphLayout
.prototype.evaluate
= function() {
178 this._evaluateLimits();
179 this._evaluateLineCharts();
180 this._evaluateLineTicks();
181 this._evaluateAnnotations();
184 DygraphLayout
.prototype._evaluateLimits
= function() {
185 var xlimits
= this.dygraph_
.xAxisRange();
186 this.minxval
= xlimits
[0];
187 this.maxxval
= xlimits
[1];
188 var xrange
= xlimits
[1] - xlimits
[0];
189 this.xscale
= (xrange
!== 0 ? 1 / xrange
: 1.0);
191 for (var i
= 0; i
< this.yAxes_
.length
; i
++) {
192 var axis
= this.yAxes_
[i
];
193 axis
.minyval
= axis
.computedValueRange
[0];
194 axis
.maxyval
= axis
.computedValueRange
[1];
195 axis
.yrange
= axis
.maxyval
- axis
.minyval
;
196 axis
.yscale
= (axis
.yrange
!== 0 ? 1.0 / axis
.yrange
: 1.0);
198 if (axis
.g
.getOption("logscale")) {
199 axis
.ylogrange
= Dygraph
.log10(axis
.maxyval
) - Dygraph
.log10(axis
.minyval
);
200 axis
.ylogscale
= (axis
.ylogrange
!== 0 ? 1.0 / axis
.ylogrange
: 1.0);
201 if (!isFinite(axis
.ylogrange
) || isNaN(axis
.ylogrange
)) {
202 Dygraph
.error('axis ' + i
+ ' of graph at ' + axis
.g
+
203 ' can\'t be displayed in log scale for range [' +
204 axis
.minyval
+ ' - ' + axis
.maxyval
+ ']');
211 * @param {DygraphAxisType} axis
212 * @param {number} value
213 * @param {boolean} logscale
216 DygraphLayout
.calcYNormal_
= function(axis
, value
, logscale
) {
218 var x
= 1.0 - ((Dygraph
.log10(value
) - Dygraph
.log10(axis
.minyval
)) * axis
.ylogscale
);
219 return isFinite(x
) ? x
: NaN
; // shim for v8 issue; see pull request 276
221 return 1.0 - ((value
- axis
.minyval
) * axis
.yscale
);
225 DygraphLayout
.prototype._evaluateLineCharts
= function() {
226 var isStacked
= this.dygraph_
.getOption("stackedGraph");
228 for (var setIdx
= 0; setIdx
< this.points
.length
; setIdx
++) {
229 var points
= this.points
[setIdx
];
230 var setName
= this.setNames
[setIdx
];
231 var connectSeparated
= this.dygraph_
.getOption('connectSeparatedPoints', setName
);
232 var axis
= this.dygraph_
.axisPropertiesForSeries(setName
);
233 // TODO (konigsberg): use optionsForAxis instead.
234 var logscale
= this.dygraph_
.attributes_
.getForSeries("logscale", setName
);
236 for (var j
= 0; j
< points
.length
; j
++) {
237 var point
= points
[j
];
239 // Range from 0-1 where 0 represents left and 1 represents right.
240 point
.x
= (point
.xval
- this.minxval
) * this.xscale
;
241 // Range from 0-1 where 0 represents top and 1 represents bottom
242 var yval
= point
.yval
;
244 point
.y_stacked
= DygraphLayout
.calcYNormal_(
245 axis
, point
.yval_stacked
, logscale
);
246 if (yval
!== null && !isNaN(yval
)) {
247 yval
= point
.yval_stacked
;
252 if (!connectSeparated
) {
256 point
.y
= DygraphLayout
.calcYNormal_(axis
, yval
, logscale
);
259 this.dygraph_
.dataHandler_
.onLineEvaluated(points
, axis
, logscale
);
263 DygraphLayout
.prototype._evaluateLineTicks
= function() {
264 var i
, tick
, label
, pos
;
266 for (i
= 0; i
< this.xTicks_
.length
; i
++) {
267 tick
= this.xTicks_
[i
];
269 pos
= this.xscale
* (tick
.v
- this.minxval
);
270 if ((pos
>= 0.0) && (pos
< 1.0)) {
271 this.xticks
.push([pos
, label
]);
276 for (i
= 0; i
< this.yAxes_
.length
; i
++ ) {
277 var axis
= this.yAxes_
[i
];
278 for (var j
= 0; j
< axis
.ticks
.length
; j
++) {
279 tick
= axis
.ticks
[j
];
281 pos
= this.dygraph_
.toPercentYCoord(tick
.v
, i
);
282 if ((pos
> 0.0) && (pos
<= 1.0)) {
283 this.yticks
.push([i
, pos
, label
]);
289 DygraphLayout
.prototype._evaluateAnnotations
= function() {
290 // Add the annotations to the point to which they belong.
291 // Make a map from (setName, xval) to annotation for quick lookups.
293 var annotations
= {};
294 for (i
= 0; i
< this.annotations
.length
; i
++) {
295 var a
= this.annotations
[i
];
296 annotations
[a
.xval
+ "," + a
.series
] = a
;
299 this.annotated_points
= [];
301 // Exit the function early if there are no annotations.
302 if (!this.annotations
|| !this.annotations
.length
) {
306 // TODO(antrob): loop through annotations not points.
307 for (var setIdx
= 0; setIdx
< this.points
.length
; setIdx
++) {
308 var points
= this.points
[setIdx
];
309 for (i
= 0; i
< points
.length
; i
++) {
311 var k
= p
.xval
+ "," + p
.name
;
312 if (k
in annotations
) {
313 p
.annotation
= annotations
[k
];
314 this.annotated_points
.push(p
);
321 * Convenience function to remove all the data sets from a graph
323 DygraphLayout
.prototype.removeAllDatasets
= function() {
325 delete this.setNames
;
326 delete this.setPointsLengths
;
327 delete this.setPointsOffsets
;
330 this.setPointsLengths
= [];
331 this.setPointsOffsets
= [];