Add more option specifications per series, and nullify the 'series' and 'axis' warnin...
[dygraphs.git] / dygraph-layout.js
CommitLineData
88e95c46
DV
1/**
2 * @license
3 * Copyright 2011 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
5 */
74a5af31
DV
6
7/**
8 * @fileoverview Based on PlotKitLayout, but modified to meet the needs of
9 * dygraphs.
10 */
11
758a629f
DV
12/*jshint globalstrict: true */
13/*global Dygraph:false */
c0f54d4f
DV
14"use strict";
15
74a5af31
DV
16/**
17 * Creates a new DygraphLayout object.
18 *
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.')
23 *
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.
27 *
28 * The naming is a vestige of Dygraph's original PlotKit roots.
29 *
30 * @constructor
31 */
c0f54d4f 32var DygraphLayout = function(dygraph) {
74a5af31 33 this.dygraph_ = dygraph;
758a629f 34 this.datasets = [];
82c6fe4d 35 this.setNames = [];
758a629f 36 this.annotations = [];
74a5af31 37 this.yAxes_ = null;
a12a78ae 38 this.points = null;
74a5af31
DV
39
40 // TODO(danvk): it's odd that xTicks_ and yTicks_ are inputs, but xticks and
41 // yticks are outputs. Clean this up.
42 this.xTicks_ = null;
43 this.yTicks_ = null;
44};
45
46DygraphLayout.prototype.attr_ = function(name) {
47 return this.dygraph_.attr_(name);
48};
49
50DygraphLayout.prototype.addDataset = function(setname, set_xy) {
82c6fe4d
KW
51 this.datasets.push(set_xy);
52 this.setNames.push(setname);
74a5af31
DV
53};
54
70be5ed1
AV
55DygraphLayout.prototype.getPlotArea = function() {
56 return this.computePlotArea_();
758a629f 57};
70be5ed1 58
ccd9d7c2
PF
59// Compute the box which the chart should be drawn in. This is the canvas's
60// box, less space needed for axis and chart labels.
61DygraphLayout.prototype.computePlotArea_ = function() {
62 var area = {
63 // TODO(danvk): per-axis setting.
64 x: 0,
65 y: 0
66 };
f8540c66 67
ccd9d7c2
PF
68 area.w = this.dygraph_.width_ - area.x - this.attr_('rightGap');
69 area.h = this.dygraph_.height_;
6dca682f
DV
70
71 // Let plugins reserve space.
72 var e = {
73 chart_div: this.dygraph_.graphDiv,
74 reserveSpaceLeft: function(px) {
75 var r = {
76 x: area.x,
77 y: area.y,
78 w: px,
79 h: area.h
80 };
81 area.x += px;
82 area.w -= px;
83 return r;
84 },
1c177b6a
DV
85 reserveSpaceRight: function(px) {
86 var r = {
87 x: area.x + area.w - px,
88 y: area.y,
89 w: px,
90 h: area.h
91 };
92 area.w -= px;
93 return r;
94 },
6dca682f
DV
95 reserveSpaceTop: function(px) {
96 var r = {
97 x: area.x,
98 y: area.y,
99 w: area.w,
100 h: px
101 };
102 area.y += px;
103 area.h -= px;
104 return r;
105 },
1c177b6a
DV
106 reserveSpaceBottom: function(px) {
107 var r = {
108 x: area.x,
109 y: area.y + area.h - px,
110 w: area.w,
111 h: px
112 };
113 area.h -= px;
114 return r;
115 },
6dca682f
DV
116 chartRect: function() {
117 return {x:area.x, y:area.y, w:area.w, h:area.h};
118 }
119 };
120 this.dygraph_.cascadeEvents_('layout', e);
121
ccd9d7c2
PF
122 // Add space for range selector, if needed.
123 if (this.attr_('showRangeSelector')) {
124 area.h -= this.attr_('rangeSelectorHeight') + 4;
125 }
126
127 return area;
128};
129
74a5af31
DV
130DygraphLayout.prototype.setAnnotations = function(ann) {
131 // The Dygraph object's annotations aren't parsed. We parse them here and
132 // save a copy. If there is no parser, then the user must be using raw format.
133 this.annotations = [];
134 var parse = this.attr_('xValueParser') || function(x) { return x; };
135 for (var i = 0; i < ann.length; i++) {
136 var a = {};
137 if (!ann[i].xval && !ann[i].x) {
138 this.dygraph_.error("Annotations must have an 'x' property");
139 return;
140 }
141 if (ann[i].icon &&
142 !(ann[i].hasOwnProperty('width') &&
143 ann[i].hasOwnProperty('height'))) {
144 this.dygraph_.error("Must set width and height when setting " +
145 "annotation.icon property");
146 return;
147 }
148 Dygraph.update(a, ann[i]);
149 if (!a.xval) a.xval = parse(a.x);
150 this.annotations.push(a);
151 }
152};
153
154DygraphLayout.prototype.setXTicks = function(xTicks) {
155 this.xTicks_ = xTicks;
156};
157
158// TODO(danvk): add this to the Dygraph object's API or move it into Layout.
159DygraphLayout.prototype.setYAxes = function (yAxes) {
160 this.yAxes_ = yAxes;
161};
162
163DygraphLayout.prototype.setDateWindow = function(dateWindow) {
164 this.dateWindow_ = dateWindow;
165};
166
167DygraphLayout.prototype.evaluate = function() {
168 this._evaluateLimits();
169 this._evaluateLineCharts();
170 this._evaluateLineTicks();
171 this._evaluateAnnotations();
172};
173
174DygraphLayout.prototype._evaluateLimits = function() {
175 this.minxval = this.maxxval = null;
176 if (this.dateWindow_) {
177 this.minxval = this.dateWindow_[0];
178 this.maxxval = this.dateWindow_[1];
179 } else {
82c6fe4d
KW
180 for (var setIdx = 0; setIdx < this.datasets.length; ++setIdx) {
181 var series = this.datasets[setIdx];
74a5af31
DV
182 if (series.length > 1) {
183 var x1 = series[0][0];
184 if (!this.minxval || x1 < this.minxval) this.minxval = x1;
ccd9d7c2 185
74a5af31
DV
186 var x2 = series[series.length - 1][0];
187 if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2;
188 }
189 }
190 }
191 this.xrange = this.maxxval - this.minxval;
758a629f 192 this.xscale = (this.xrange !== 0 ? 1/this.xrange : 1.0);
74a5af31
DV
193
194 for (var i = 0; i < this.yAxes_.length; i++) {
195 var axis = this.yAxes_[i];
196 axis.minyval = axis.computedValueRange[0];
197 axis.maxyval = axis.computedValueRange[1];
198 axis.yrange = axis.maxyval - axis.minyval;
758a629f 199 axis.yscale = (axis.yrange !== 0 ? 1.0 / axis.yrange : 1.0);
74a5af31
DV
200
201 if (axis.g.attr_("logscale")) {
202 axis.ylogrange = Dygraph.log10(axis.maxyval) - Dygraph.log10(axis.minyval);
758a629f 203 axis.ylogscale = (axis.ylogrange !== 0 ? 1.0 / axis.ylogrange : 1.0);
74a5af31
DV
204 if (!isFinite(axis.ylogrange) || isNaN(axis.ylogrange)) {
205 axis.g.error('axis ' + i + ' of graph at ' + axis.g +
206 ' can\'t be displayed in log scale for range [' +
207 axis.minyval + ' - ' + axis.maxyval + ']');
208 }
209 }
210 }
211};
212
7f028980
DV
213DygraphLayout._calcYNormal = function(axis, value) {
214 if (axis.logscale) {
215 return 1.0 - ((Dygraph.log10(value) - Dygraph.log10(axis.minyval)) * axis.ylogscale);
216 } else {
217 return 1.0 - ((value - axis.minyval) * axis.yscale);
218 }
219};
220
74a5af31 221DygraphLayout.prototype._evaluateLineCharts = function() {
04c104d7 222 var connectSeparated = this.attr_('connectSeparatedPoints');
a12a78ae
DV
223
224 // series index -> point index in series -> |point| structure
225 this.points = new Array(this.datasets.length);
226
b843b52c
RK
227 // TODO(bhs): these loops are a hot-spot for high-point-count charts. In fact,
228 // on chrome+linux, they are 6 times more expensive than iterating through the
229 // points and drawing the lines. The brunt of the cost comes from allocating
230 // the |point| structures.
a12a78ae 231 for (var setIdx = 0; setIdx < this.datasets.length; setIdx++) {
82c6fe4d
KW
232 var dataset = this.datasets[setIdx];
233 var setName = this.setNames[setIdx];
74a5af31
DV
234 var axis = this.dygraph_.axisPropertiesForSeries(setName);
235
a12a78ae
DV
236 // Preallocating the size of points reduces reallocations, and therefore,
237 // calls to collect garbage.
238 var seriesPoints = new Array(dataset.length);
239
74a5af31
DV
240 for (var j = 0; j < dataset.length; j++) {
241 var item = dataset[j];
57915b7a
RK
242 var xValue = DygraphLayout.parseFloat_(item[0]);
243 var yValue = DygraphLayout.parseFloat_(item[1]);
ecf9b464 244
4ab8db0c 245 // Range from 0-1 where 0 represents left and 1 represents right.
7f028980
DV
246 var xNormal = (xValue - this.minxval) * this.xscale;
247 // Range from 0-1 where 0 represents top and 1 represents bottom
248 var yNormal = DygraphLayout._calcYNormal(axis, yValue);
249
a12a78ae
DV
250 // TODO(danvk): drop the point in this case, don't null it.
251 // The nulls create complexity in DygraphCanvasRenderer._drawSeries.
57915b7a 252 if (connectSeparated && item[1] === null) {
b843b52c
RK
253 yValue = null;
254 }
a12a78ae 255 seriesPoints[j] = {
f9414b11
DV
256 x: xNormal,
257 y: yNormal,
258 xval: xValue,
259 yval: yValue,
a12a78ae 260 name: setName // TODO(danvk): is this really necessary?
f9414b11 261 };
74a5af31 262 }
a12a78ae
DV
263
264 this.points[setIdx] = seriesPoints;
74a5af31
DV
265 }
266};
267
57915b7a
RK
268/**
269 * Optimized replacement for parseFloat, which was way too slow when almost
270 * all values were type number, with few edge cases, none of which were strings.
271 */
272DygraphLayout.parseFloat_ = function(val) {
273 // parseFloat(null) is NaN
274 if (val === null) {
275 return NaN;
276 }
277
278 // Assume it's a number or NaN. If it's something else, I'll be shocked.
279 return val;
42a9ebb8 280};
57915b7a 281
74a5af31 282DygraphLayout.prototype._evaluateLineTicks = function() {
758a629f
DV
283 var i, tick, label, pos;
284 this.xticks = [];
285 for (i = 0; i < this.xTicks_.length; i++) {
286 tick = this.xTicks_[i];
287 label = tick.label;
288 pos = this.xscale * (tick.v - this.minxval);
74a5af31
DV
289 if ((pos >= 0.0) && (pos <= 1.0)) {
290 this.xticks.push([pos, label]);
291 }
292 }
293
758a629f
DV
294 this.yticks = [];
295 for (i = 0; i < this.yAxes_.length; i++ ) {
74a5af31
DV
296 var axis = this.yAxes_[i];
297 for (var j = 0; j < axis.ticks.length; j++) {
758a629f
DV
298 tick = axis.ticks[j];
299 label = tick.label;
300 pos = this.dygraph_.toPercentYCoord(tick.v, i);
74a5af31
DV
301 if ((pos >= 0.0) && (pos <= 1.0)) {
302 this.yticks.push([i, pos, label]);
303 }
304 }
305 }
306};
307
308
309/**
310 * Behaves the same way as PlotKit.Layout, but also copies the errors
311 * @private
312 */
313DygraphLayout.prototype.evaluateWithError = function() {
314 this.evaluate();
315 if (!(this.attr_('errorBars') || this.attr_('customBars'))) return;
316
317 // Copy over the error terms
758a629f 318 var i = 0; // index in this.points
82c6fe4d 319 for (var setIdx = 0; setIdx < this.datasets.length; ++setIdx) {
a12a78ae 320 var points = this.points[setIdx];
74a5af31 321 var j = 0;
82c6fe4d
KW
322 var dataset = this.datasets[setIdx];
323 var setName = this.setNames[setIdx];
7f028980 324 var axis = this.dygraph_.axisPropertiesForSeries(setName);
758a629f 325 for (j = 0; j < dataset.length; j++, i++) {
74a5af31 326 var item = dataset[j];
57915b7a
RK
327 var xv = DygraphLayout.parseFloat_(item[0]);
328 var yv = DygraphLayout.parseFloat_(item[1]);
74a5af31 329
a12a78ae
DV
330 if (xv == points[j].xval &&
331 yv == points[j].yval) {
57915b7a
RK
332 var errorMinus = DygraphLayout.parseFloat_(item[2]);
333 var errorPlus = DygraphLayout.parseFloat_(item[3]);
7f028980
DV
334
335 var yv_minus = yv - errorMinus;
336 var yv_plus = yv + errorPlus;
a12a78ae
DV
337 points[j].y_top = DygraphLayout._calcYNormal(axis, yv_minus);
338 points[j].y_bottom = DygraphLayout._calcYNormal(axis, yv_plus);
74a5af31
DV
339 }
340 }
341 }
342};
343
344DygraphLayout.prototype._evaluateAnnotations = function() {
345 // Add the annotations to the point to which they belong.
346 // Make a map from (setName, xval) to annotation for quick lookups.
758a629f 347 var i;
74a5af31 348 var annotations = {};
758a629f 349 for (i = 0; i < this.annotations.length; i++) {
74a5af31
DV
350 var a = this.annotations[i];
351 annotations[a.xval + "," + a.series] = a;
352 }
353
354 this.annotated_points = [];
d570a072
AR
355
356 // Exit the function early if there are no annotations.
357 if (!this.annotations || !this.annotations.length) {
358 return;
359 }
ccd9d7c2 360
d570a072 361 // TODO(antrob): loop through annotations not points.
a12a78ae
DV
362 for (var setIdx = 0; setIdx < this.points.length; setIdx++) {
363 var points = this.points[setIdx];
364 for (i = 0; i < points.length; i++) {
365 var p = points[i];
366 var k = p.xval + "," + p.name;
367 if (k in annotations) {
368 p.annotation = annotations[k];
369 this.annotated_points.push(p);
370 }
74a5af31
DV
371 }
372 }
373};
374
375/**
376 * Convenience function to remove all the data sets from a graph
377 */
378DygraphLayout.prototype.removeAllDatasets = function() {
379 delete this.datasets;
82c6fe4d
KW
380 delete this.setNames;
381 delete this.setPointsLengths;
382 delete this.setPointsOffsets;
758a629f 383 this.datasets = [];
82c6fe4d
KW
384 this.setNames = [];
385 this.setPointsLengths = [];
386 this.setPointsOffsets = [];
74a5af31
DV
387};
388
389/**
390 * Return a copy of the point at the indicated index, with its yval unstacked.
391 * @param int index of point in layout_.points
392 */
a12a78ae
DV
393DygraphLayout.prototype.unstackPointAtIndex = function(setIdx, row) {
394 var point = this.points[setIdx][row];
52ca2280 395 // If the point is missing, no unstacking is necessary
c6bdcd60
AV
396 if (!point.yval) {
397 return point;
398 }
ccd9d7c2 399
74a5af31 400 // Clone the point since we modify it
ccd9d7c2 401 var unstackedPoint = {};
758a629f
DV
402 for (var pt in point) {
403 unstackedPoint[pt] = point[pt];
74a5af31 404 }
ccd9d7c2 405
74a5af31
DV
406 if (!this.attr_("stackedGraph")) {
407 return unstackedPoint;
408 }
ccd9d7c2
PF
409
410 // The unstacked yval is equal to the current yval minus the yval of the
74a5af31 411 // next point at the same xval.
9b3d9459
DV
412 if (setIdx == this.points.length - 1) {
413 // We're the last series, so no unstacking is necessary.
414 return unstackedPoint;
415 }
416
417 var points = this.points[setIdx + 1];
418 if (points[row].xval == point.xval && // should always be true?
419 points[row].yval) {
420 unstackedPoint.yval -= points[row].yval;
74a5af31 421 }
ccd9d7c2 422
74a5af31 423 return unstackedPoint;
758a629f 424};