1 // Copyright 2011 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Based on PlotKitLayout, but modified to meet the needs of
10 * Creates a new DygraphLayout object.
12 * This class contains all the data to be charted.
13 * It uses data coordinates, but also records the chart range (in data
14 * coordinates) and hence is able to calculate percentage positions ('In this
15 * view, Point A lies 25% down the x-axis.')
17 * Two things that it does not do are:
18 * 1. Record pixel coordinates for anything.
19 * 2. (oddly) determine anything about the layout of chart elements.
21 * The naming is a vestige of Dygraph's original PlotKit roots.
25 DygraphLayout
= function(dygraph
) {
26 this.dygraph_
= dygraph
;
27 this.datasets
= new Array();
28 this.annotations
= new Array();
31 // TODO(danvk): it's odd that xTicks_ and yTicks_ are inputs, but xticks and
32 // yticks are outputs. Clean this up.
37 DygraphLayout
.prototype.attr_
= function(name
) {
38 return this.dygraph_
.attr_(name
);
41 DygraphLayout
.prototype.addDataset
= function(setname
, set_xy
) {
42 this.datasets
[setname
] = set_xy
;
45 DygraphLayout
.prototype.setAnnotations
= function(ann
) {
46 // The Dygraph object's annotations aren't parsed. We parse them here and
47 // save a copy. If there is no parser, then the user must be using raw format.
48 this.annotations
= [];
49 var parse
= this.attr_('xValueParser') || function(x
) { return x
; };
50 for (var i
= 0; i
< ann
.length
; i
++) {
52 if (!ann
[i
].xval
&& !ann
[i
].x
) {
53 this.dygraph_
.error("Annotations must have an 'x' property");
57 !(ann
[i
].hasOwnProperty('width') &&
58 ann
[i
].hasOwnProperty('height'))) {
59 this.dygraph_
.error("Must set width and height when setting " +
60 "annotation.icon property");
63 Dygraph
.update(a
, ann
[i
]);
64 if (!a
.xval
) a
.xval
= parse(a
.x
);
65 this.annotations
.push(a
);
69 DygraphLayout
.prototype.setXTicks
= function(xTicks
) {
70 this.xTicks_
= xTicks
;
73 // TODO(danvk): add this to the Dygraph object's API or move it into Layout.
74 DygraphLayout
.prototype.setYAxes
= function (yAxes
) {
78 DygraphLayout
.prototype.setDateWindow
= function(dateWindow
) {
79 this.dateWindow_
= dateWindow
;
82 DygraphLayout
.prototype.evaluate
= function() {
83 this._evaluateLimits();
84 this._evaluateLineCharts();
85 this._evaluateLineTicks();
86 this._evaluateAnnotations();
89 DygraphLayout
.prototype._evaluateLimits
= function() {
90 this.minxval
= this.maxxval
= null;
91 if (this.dateWindow_
) {
92 this.minxval
= this.dateWindow_
[0];
93 this.maxxval
= this.dateWindow_
[1];
95 for (var name
in this.datasets
) {
96 if (!this.datasets
.hasOwnProperty(name
)) continue;
97 var series
= this.datasets
[name
];
98 if (series
.length
> 1) {
99 var x1
= series
[0][0];
100 if (!this.minxval
|| x1
< this.minxval
) this.minxval
= x1
;
102 var x2
= series
[series
.length
- 1][0];
103 if (!this.maxxval
|| x2
> this.maxxval
) this.maxxval
= x2
;
107 this.xrange
= this.maxxval
- this.minxval
;
108 this.xscale
= (this.xrange
!= 0 ? 1/this.xrange
: 1.0);
110 for (var i
= 0; i
< this.yAxes_
.length
; i
++) {
111 var axis
= this.yAxes_
[i
];
112 axis
.minyval
= axis
.computedValueRange
[0];
113 axis
.maxyval
= axis
.computedValueRange
[1];
114 axis
.yrange
= axis
.maxyval
- axis
.minyval
;
115 axis
.yscale
= (axis
.yrange
!= 0 ? 1.0 / axis
.yrange
: 1.0);
117 if (axis
.g
.attr_("logscale")) {
118 axis
.ylogrange
= Dygraph
.log10(axis
.maxyval
) - Dygraph
.log10(axis
.minyval
);
119 axis
.ylogscale
= (axis
.ylogrange
!= 0 ? 1.0 / axis
.ylogrange
: 1.0);
120 if (!isFinite(axis
.ylogrange
) || isNaN(axis
.ylogrange
)) {
121 axis
.g
.error('axis ' + i
+ ' of graph at ' + axis
.g
+
122 ' can\'t be displayed in log scale for range [' +
123 axis
.minyval
+ ' - ' + axis
.maxyval
+ ']');
129 DygraphLayout
.prototype._evaluateLineCharts
= function() {
131 this.points
= new Array();
132 // An array to keep track of how many points will be drawn for each set.
133 // This will allow for the canvas renderer to not have to check every point
134 // for every data set since the points are added in order of the sets in datasets
135 this.setPointsLengths
= new Array();
137 for (var setName
in this.datasets
) {
138 if (!this.datasets
.hasOwnProperty(setName
)) continue;
140 var dataset
= this.datasets
[setName
];
141 var axis
= this.dygraph_
.axisPropertiesForSeries(setName
);
143 var graphWidth
= this.dygraph_
.width_
;
144 var graphHeight
= this.dygraph_
.height_
;
149 var setPointsLength
= 0;
151 // Ignore the pixel skipping optimization if there are error bars.
152 var skip_opt
= (this.attr_("errorBars") ||
153 this.attr_("customBars") ||
154 this.annotations
.length
> 0);
156 for (var j
= 0; j
< dataset
.length
; j
++) {
157 var item
= dataset
[j
];
158 var xValue
= parseFloat(dataset
[j
][0]);
159 var yValue
= parseFloat(dataset
[j
][1]);
161 // Range from 0-1 where 0 represents top and 1 represents bottom
162 var xNormal
= (xValue
- this.minxval
) * this.xscale
;
163 // Range from 0-1 where 0 represents left and 1 represents right.
166 yNormal
= 1.0 - ((Dygraph
.log10(yValue
) - Dygraph
.log10(axis
.minyval
)) * axis
.ylogscale
);
168 yNormal
= 1.0 - ((yValue
- axis
.minyval
) * axis
.yscale
);
171 // Current pixel coordinates that the data point would fill.
172 currXPx
= Math
.round(xNormal
* graphWidth
);
173 currYPx
= Math
.round(yNormal
* graphHeight
);
175 // Skip over pushing points that lie on the same pixel.
176 // TODO(antrob): optimize this for graphs with error bars.
177 if (skip_opt
|| prevXPx
!= currXPx
|| prevYPx
!= currYPx
) {
186 this.points
.push(point
);
187 setPointsLength
+= 1;
192 this.setPointsLengths
.push(setPointsLength
);
196 DygraphLayout
.prototype._evaluateLineTicks
= function() {
197 this.xticks
= new Array();
198 for (var i
= 0; i
< this.xTicks_
.length
; i
++) {
199 var tick
= this.xTicks_
[i
];
200 var label
= tick
.label
;
201 var pos
= this.xscale
* (tick
.v
- this.minxval
);
202 if ((pos
>= 0.0) && (pos
<= 1.0)) {
203 this.xticks
.push([pos
, label
]);
207 this.yticks
= new Array();
208 for (var i
= 0; i
< this.yAxes_
.length
; i
++ ) {
209 var axis
= this.yAxes_
[i
];
210 for (var j
= 0; j
< axis
.ticks
.length
; j
++) {
211 var tick
= axis
.ticks
[j
];
212 var label
= tick
.label
;
213 var pos
= this.dygraph_
.toPercentYCoord(tick
.v
, i
);
214 if ((pos
>= 0.0) && (pos
<= 1.0)) {
215 this.yticks
.push([i
, pos
, label
]);
223 * Behaves the same way as PlotKit.Layout, but also copies the errors
226 DygraphLayout
.prototype.evaluateWithError
= function() {
228 if (!(this.attr_('errorBars') || this.attr_('customBars'))) return;
230 // Copy over the error terms
231 var i
= 0; // index in this.points
232 for (var setName
in this.datasets
) {
233 if (!this.datasets
.hasOwnProperty(setName
)) continue;
235 var dataset
= this.datasets
[setName
];
236 for (var j
= 0; j
< dataset
.length
; j
++, i
++) {
237 var item
= dataset
[j
];
238 var xv
= parseFloat(item
[0]);
239 var yv
= parseFloat(item
[1]);
241 if (xv
== this.points
[i
].xval
&&
242 yv
== this.points
[i
].yval
) {
243 this.points
[i
].errorMinus
= parseFloat(item
[2]);
244 this.points
[i
].errorPlus
= parseFloat(item
[3]);
250 DygraphLayout
.prototype._evaluateAnnotations
= function() {
251 // Add the annotations to the point to which they belong.
252 // Make a map from (setName, xval) to annotation for quick lookups.
253 var annotations
= {};
254 for (var i
= 0; i
< this.annotations
.length
; i
++) {
255 var a
= this.annotations
[i
];
256 annotations
[a
.xval
+ "," + a
.series
] = a
;
259 this.annotated_points
= [];
261 // Exit the function early if there are no annotations.
262 if (!this.annotations
|| !this.annotations
.length
) {
266 // TODO(antrob): loop through annotations not points.
267 for (var i
= 0; i
< this.points
.length
; i
++) {
268 var p
= this.points
[i
];
269 var k
= p
.xval
+ "," + p
.name
;
270 if (k
in annotations
) {
271 p
.annotation
= annotations
[k
];
272 this.annotated_points
.push(p
);
278 * Convenience function to remove all the data sets from a graph
280 DygraphLayout
.prototype.removeAllDatasets
= function() {
281 delete this.datasets
;
282 this.datasets
= new Array();
286 * Return a copy of the point at the indicated index, with its yval unstacked.
287 * @param int index of point in layout_.points
289 DygraphLayout
.prototype.unstackPointAtIndex
= function(idx
) {
290 var point
= this.points
[idx
];
292 // Clone the point since we modify it
293 var unstackedPoint
= {};
294 for (var i
in point
) {
295 unstackedPoint
[i
] = point
[i
];
298 if (!this.attr_("stackedGraph")) {
299 return unstackedPoint
;
302 // The unstacked yval is equal to the current yval minus the yval of the
303 // next point at the same xval.
304 for (var i
= idx
+1; i
< this.points
.length
; i
++) {
305 if (this.points
[i
].xval
== point
.xval
) {
306 unstackedPoint
.yval
-= this.points
[i
].yval
;
311 return unstackedPoint
;