2e81359305952ebe51a0d316bfc024dfebf06f58
[dygraphs.git] / dygraph-layout.js
1 /**
2 * @license
3 * Copyright 2011 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
5 */
6
7 /**
8 * @fileoverview Based on PlotKitLayout, but modified to meet the needs of
9 * dygraphs.
10 */
11
12 /*jshint globalstrict: true */
13 /*global Dygraph:false */
14 "use strict";
15
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 */
32 var DygraphLayout = function(dygraph) {
33 this.dygraph_ = dygraph;
34 /**
35 * Array of points for each series.
36 *
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.
42 *
43 * @type {Array.<Array.<Dygraph.PointType>>}
44 */
45 this.points = [];
46 this.setNames = [];
47 this.annotations = [];
48 this.yAxes_ = null;
49
50 // TODO(danvk): it's odd that xTicks_ and yTicks_ are inputs, but xticks and
51 // yticks are outputs. Clean this up.
52 this.xTicks_ = null;
53 this.yTicks_ = null;
54 };
55
56 /**
57 * Add points for a single series.
58 *
59 * @param {string} setname Name of the series.
60 * @param {Array.<Dygraph.PointType>} set_xy Points for the series.
61 */
62 DygraphLayout.prototype.addDataset = function(setname, set_xy) {
63 this.points.push(set_xy);
64 this.setNames.push(setname);
65 };
66
67 /**
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.
70 *
71 * @return {{x: number, y: number, w: number, h: number}}
72 */
73 DygraphLayout.prototype.getPlotArea = function() {
74 return this.area_;
75 };
76
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() {
81 var area = {
82 // TODO(danvk): per-axis setting.
83 x: 0,
84 y: 0
85 };
86
87 area.w = this.dygraph_.width_ - area.x - this.dygraph_.getOption('rightGap');
88 area.h = this.dygraph_.height_;
89
90 // Let plugins reserve space.
91 var e = {
92 chart_div: this.dygraph_.graphDiv,
93 reserveSpaceLeft: function(px) {
94 var r = {
95 x: area.x,
96 y: area.y,
97 w: px,
98 h: area.h
99 };
100 area.x += px;
101 area.w -= px;
102 return r;
103 },
104 reserveSpaceRight: function(px) {
105 var r = {
106 x: area.x + area.w - px,
107 y: area.y,
108 w: px,
109 h: area.h
110 };
111 area.w -= px;
112 return r;
113 },
114 reserveSpaceTop: function(px) {
115 var r = {
116 x: area.x,
117 y: area.y,
118 w: area.w,
119 h: px
120 };
121 area.y += px;
122 area.h -= px;
123 return r;
124 },
125 reserveSpaceBottom: function(px) {
126 var r = {
127 x: area.x,
128 y: area.y + area.h - px,
129 w: area.w,
130 h: px
131 };
132 area.h -= px;
133 return r;
134 },
135 chartRect: function() {
136 return {x:area.x, y:area.y, w:area.w, h:area.h};
137 }
138 };
139 this.dygraph_.cascadeEvents_('layout', e);
140
141 this.area_ = area;
142 };
143
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++) {
150 var a = {};
151 if (!ann[i].xval && ann[i].x === undefined) {
152 this.dygraph_.error("Annotations must have an 'x' property");
153 return;
154 }
155 if (ann[i].icon &&
156 !(ann[i].hasOwnProperty('width') &&
157 ann[i].hasOwnProperty('height'))) {
158 this.dygraph_.error("Must set width and height when setting " +
159 "annotation.icon property");
160 return;
161 }
162 Dygraph.update(a, ann[i]);
163 if (!a.xval) a.xval = parse(a.x);
164 this.annotations.push(a);
165 }
166 };
167
168 DygraphLayout.prototype.setXTicks = function(xTicks) {
169 this.xTicks_ = xTicks;
170 };
171
172 // TODO(danvk): add this to the Dygraph object's API or move it into Layout.
173 DygraphLayout.prototype.setYAxes = function (yAxes) {
174 this.yAxes_ = yAxes;
175 };
176
177 DygraphLayout.prototype.evaluate = function() {
178 this._xAxis = {};
179 this._evaluateLimits();
180 this._evaluateLineCharts();
181 this._evaluateLineTicks();
182 this._evaluateAnnotations();
183 };
184
185 DygraphLayout.prototype._evaluateLimits = function() {
186 var xlimits = this.dygraph_.xAxisRange();
187 this._xAxis.minxval = xlimits[0];
188 this._xAxis.maxxval = xlimits[1];
189 var xrange = xlimits[1] - xlimits[0];
190 this._xAxis.xscale = (xrange !== 0 ? 1 / xrange : 1.0);
191
192 if (this.dygraph_.getOptionForAxis("logscale", 'x')) {
193 this._xAxis.xlogrange = Dygraph.log10(this._xAxis.maxxval) - Dygraph.log10(this._xAxis.minxval);
194 this._xAxis.xlogscale = (this._xAxis.xlogrange !== 0 ? 1.0 / this._xAxis.xlogrange : 1.0);
195 }
196 for (var i = 0; i < this.yAxes_.length; i++) {
197 var axis = this.yAxes_[i];
198 axis.minyval = axis.computedValueRange[0];
199 axis.maxyval = axis.computedValueRange[1];
200 axis.yrange = axis.maxyval - axis.minyval;
201 axis.yscale = (axis.yrange !== 0 ? 1.0 / axis.yrange : 1.0);
202
203 if (this.dygraph_.getOption("logscale")) {
204 axis.ylogrange = Dygraph.log10(axis.maxyval) - Dygraph.log10(axis.minyval);
205 axis.ylogscale = (axis.ylogrange !== 0 ? 1.0 / axis.ylogrange : 1.0);
206 if (!isFinite(axis.ylogrange) || isNaN(axis.ylogrange)) {
207 axis.g.error('axis ' + i + ' of graph at ' + axis.g +
208 ' can\'t be displayed in log scale for range [' +
209 axis.minyval + ' - ' + axis.maxyval + ']');
210 }
211 }
212 }
213 };
214
215 DygraphLayout._calcXNormal = function(value, axis, logscale) {
216 if (logscale) {
217 return ((Dygraph.log10(value) - Dygraph.log10(axis.minxval)) * axis.xlogscale);
218 } else {
219 return (value - axis.minxval) * axis.xscale;
220 }
221 };
222
223 DygraphLayout._calcYNormal = function(axis, value, logscale) {
224 if (logscale) {
225 return 1.0 - ((Dygraph.log10(value) - Dygraph.log10(axis.minyval)) * axis.ylogscale);
226 } else {
227 return 1.0 - ((value - axis.minyval) * axis.yscale);
228 }
229 };
230
231 DygraphLayout.prototype._evaluateLineCharts = function() {
232 var isStacked = this.dygraph_.getOption("stackedGraph");
233 var isLogscaleForX = this.dygraph_.getOptionForAxis("logscale", 'x');
234
235 for (var setIdx = 0; setIdx < this.points.length; setIdx++) {
236 var points = this.points[setIdx];
237 var setName = this.setNames[setIdx];
238 var connectSeparated = this.dygraph_.getOption('connectSeparatedPoints', setName);
239 var axis = this.dygraph_.axisPropertiesForSeries(setName);
240 // TODO (konigsberg): use optionsForAxis instead.
241 var logscale = this.dygraph_.attributes_.getForSeries("logscale", setName);
242
243 for (var j = 0; j < points.length; j++) {
244 var point = points[j];
245
246 // Range from 0-1 where 0 represents left and 1 represents right.
247 point.x = DygraphLayout._calcXNormal(point.xval, this._xAxis, isLogscaleForX);
248 // Range from 0-1 where 0 represents top and 1 represents bottom
249 var yval = point.yval;
250 if (isStacked) {
251 point.y_stacked = DygraphLayout._calcYNormal(
252 axis, point.yval_stacked, logscale);
253 if (yval !== null && !isNaN(yval)) {
254 yval = point.yval_stacked;
255 }
256 }
257 if (yval === null) {
258 yval = NaN;
259 if (!connectSeparated) {
260 point.yval = NaN;
261 }
262 }
263 point.y = DygraphLayout._calcYNormal(axis, yval, logscale);
264 }
265
266 this.dygraph_.dataHandler_.onLineEvaluated(points, axis, logscale);
267 }
268 };
269
270 /**
271 * Optimized replacement for parseFloat, which was way too slow when almost
272 * all values were type number, with few edge cases, none of which were strings.
273 */
274 DygraphLayout.parseFloat_ = function(val) {
275 // parseFloat(null) is NaN
276 if (val === null) {
277 return NaN;
278 }
279
280 // Assume it's a number or NaN. If it's something else, I'll be shocked.
281 return val;
282 };
283
284 DygraphLayout.prototype._evaluateLineTicks = function() {
285 var i, tick, label, pos;
286 this.xticks = [];
287 for (i = 0; i < this.xTicks_.length; i++) {
288 tick = this.xTicks_[i];
289 label = tick.label;
290 pos = this.dygraph_.toPercentXCoord(tick.v);
291 if ((pos >= 0.0) && (pos <= 1.0)) {
292 this.xticks.push([pos, label]);
293 }
294 }
295
296 this.yticks = [];
297 for (i = 0; i < this.yAxes_.length; i++ ) {
298 var axis = this.yAxes_[i];
299 for (var j = 0; j < axis.ticks.length; j++) {
300 tick = axis.ticks[j];
301 label = tick.label;
302 pos = this.dygraph_.toPercentYCoord(tick.v, i);
303 if ((pos >= 0.0) && (pos <= 1.0)) {
304 this.yticks.push([i, pos, label]);
305 }
306 }
307 }
308 };
309
310 DygraphLayout.prototype._evaluateAnnotations = function() {
311 // Add the annotations to the point to which they belong.
312 // Make a map from (setName, xval) to annotation for quick lookups.
313 var i;
314 var annotations = {};
315 for (i = 0; i < this.annotations.length; i++) {
316 var a = this.annotations[i];
317 annotations[a.xval + "," + a.series] = a;
318 }
319
320 this.annotated_points = [];
321
322 // Exit the function early if there are no annotations.
323 if (!this.annotations || !this.annotations.length) {
324 return;
325 }
326
327 // TODO(antrob): loop through annotations not points.
328 for (var setIdx = 0; setIdx < this.points.length; setIdx++) {
329 var points = this.points[setIdx];
330 for (i = 0; i < points.length; i++) {
331 var p = points[i];
332 var k = p.xval + "," + p.name;
333 if (k in annotations) {
334 p.annotation = annotations[k];
335 this.annotated_points.push(p);
336 }
337 }
338 }
339 };
340
341 /**
342 * Convenience function to remove all the data sets from a graph
343 */
344 DygraphLayout.prototype.removeAllDatasets = function() {
345 delete this.points;
346 delete this.setNames;
347 delete this.setPointsLengths;
348 delete this.setPointsOffsets;
349 this.points = [];
350 this.setNames = [];
351 this.setPointsLengths = [];
352 this.setPointsOffsets = [];
353 };