Bug in the function that splits variables.
[dygraphs.git] / dygraph.js
... / ...
CommitLineData
1/**
2 * @license
3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
5 */
6
7/**
8 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
9 * string. Dygraph can handle multiple series with or without error bars. The
10 * date/value ranges will be automatically set. Dygraph uses the
11 * <canvas> tag, so it only works in FF1.5+.
12 * @author danvdk@gmail.com (Dan Vanderkam)
13
14 Usage:
15 <div id="graphdiv" style="width:800px; height:500px;"></div>
16 <script type="text/javascript">
17 new Dygraph(document.getElementById("graphdiv"),
18 "datafile.csv", // CSV file with headers
19 { }); // options
20 </script>
21
22 The CSV file is of the form
23
24 Date,SeriesA,SeriesB,SeriesC
25 YYYYMMDD,A1,B1,C1
26 YYYYMMDD,A2,B2,C2
27
28 If the 'errorBars' option is set in the constructor, the input should be of
29 the form
30 Date,SeriesA,SeriesB,...
31 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
32 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
33
34 If the 'fractions' option is set, the input should be of the form:
35
36 Date,SeriesA,SeriesB,...
37 YYYYMMDD,A1/B1,A2/B2,...
38 YYYYMMDD,A1/B1,A2/B2,...
39
40 And error bars will be calculated automatically using a binomial distribution.
41
42 For further documentation and examples, see http://dygraphs.com/
43
44 */
45
46/*jshint globalstrict: true */
47/*global DygraphRangeSelector:false, DygraphLayout:false, DygraphCanvasRenderer:false, G_vmlCanvasManager:false */
48"use strict";
49
50/**
51 * Creates an interactive, zoomable chart.
52 *
53 * @constructor
54 * @param {div | String} div A div or the id of a div into which to construct
55 * the chart.
56 * @param {String | Function} file A file containing CSV data or a function
57 * that returns this data. The most basic expected format for each line is
58 * "YYYY/MM/DD,val1,val2,...". For more information, see
59 * http://dygraphs.com/data.html.
60 * @param {Object} attrs Various other attributes, e.g. errorBars determines
61 * whether the input data contains error ranges. For a complete list of
62 * options, see http://dygraphs.com/options.html.
63 */
64var Dygraph = function(div, data, opts) {
65 if (arguments.length > 0) {
66 if (arguments.length == 4) {
67 // Old versions of dygraphs took in the series labels as a constructor
68 // parameter. This doesn't make sense anymore, but it's easy to continue
69 // to support this usage.
70 this.warn("Using deprecated four-argument dygraph constructor");
71 this.__old_init__(div, data, arguments[2], arguments[3]);
72 } else {
73 this.__init__(div, data, opts);
74 }
75 }
76};
77
78Dygraph.NAME = "Dygraph";
79Dygraph.VERSION = "1.2";
80Dygraph.__repr__ = function() {
81 return "[" + this.NAME + " " + this.VERSION + "]";
82};
83
84/**
85 * Returns information about the Dygraph class.
86 */
87Dygraph.toString = function() {
88 return this.__repr__();
89};
90
91// Various default values
92Dygraph.DEFAULT_ROLL_PERIOD = 1;
93Dygraph.DEFAULT_WIDTH = 480;
94Dygraph.DEFAULT_HEIGHT = 320;
95
96Dygraph.ANIMATION_STEPS = 10;
97Dygraph.ANIMATION_DURATION = 200;
98
99// These are defined before DEFAULT_ATTRS so that it can refer to them.
100/**
101 * @private
102 * Return a string version of a number. This respects the digitsAfterDecimal
103 * and maxNumberWidth options.
104 * @param {Number} x The number to be formatted
105 * @param {Dygraph} opts An options view
106 * @param {String} name The name of the point's data series
107 * @param {Dygraph} g The dygraph object
108 */
109Dygraph.numberValueFormatter = function(x, opts, pt, g) {
110 var sigFigs = opts('sigFigs');
111
112 if (sigFigs !== null) {
113 // User has opted for a fixed number of significant figures.
114 return Dygraph.floatFormat(x, sigFigs);
115 }
116
117 var digits = opts('digitsAfterDecimal');
118 var maxNumberWidth = opts('maxNumberWidth');
119
120 // switch to scientific notation if we underflow or overflow fixed display.
121 if (x !== 0.0 &&
122 (Math.abs(x) >= Math.pow(10, maxNumberWidth) ||
123 Math.abs(x) < Math.pow(10, -digits))) {
124 return x.toExponential(digits);
125 } else {
126 return '' + Dygraph.round_(x, digits);
127 }
128};
129
130/**
131 * variant for use as an axisLabelFormatter.
132 * @private
133 */
134Dygraph.numberAxisLabelFormatter = function(x, granularity, opts, g) {
135 return Dygraph.numberValueFormatter(x, opts, g);
136};
137
138/**
139 * Convert a JS date (millis since epoch) to YYYY/MM/DD
140 * @param {Number} date The JavaScript date (ms since epoch)
141 * @return {String} A date of the form "YYYY/MM/DD"
142 * @private
143 */
144Dygraph.dateString_ = function(date) {
145 var zeropad = Dygraph.zeropad;
146 var d = new Date(date);
147
148 // Get the year:
149 var year = "" + d.getFullYear();
150 // Get a 0 padded month string
151 var month = zeropad(d.getMonth() + 1); //months are 0-offset, sigh
152 // Get a 0 padded day string
153 var day = zeropad(d.getDate());
154
155 var ret = "";
156 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
157 if (frac) ret = " " + Dygraph.hmsString_(date);
158
159 return year + "/" + month + "/" + day + ret;
160};
161
162/**
163 * Convert a JS date to a string appropriate to display on an axis that
164 * is displaying values at the stated granularity.
165 * @param {Date} date The date to format
166 * @param {Number} granularity One of the Dygraph granularity constants
167 * @return {String} The formatted date
168 * @private
169 */
170Dygraph.dateAxisFormatter = function(date, granularity) {
171 if (granularity >= Dygraph.DECADAL) {
172 return date.strftime('%Y');
173 } else if (granularity >= Dygraph.MONTHLY) {
174 return date.strftime('%b %y');
175 } else {
176 var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
177 if (frac === 0 || granularity >= Dygraph.DAILY) {
178 return new Date(date.getTime() + 3600*1000).strftime('%d%b');
179 } else {
180 return Dygraph.hmsString_(date.getTime());
181 }
182 }
183};
184
185
186// Default attribute values.
187Dygraph.DEFAULT_ATTRS = {
188 highlightCircleSize: 3,
189
190 labelsDivWidth: 250,
191 labelsDivStyles: {
192 // TODO(danvk): move defaults from createStatusMessage_ here.
193 },
194 labelsSeparateLines: false,
195 labelsShowZeroValues: true,
196 labelsKMB: false,
197 labelsKMG2: false,
198 showLabelsOnHighlight: true,
199
200 digitsAfterDecimal: 2,
201 maxNumberWidth: 6,
202 sigFigs: null,
203
204 strokeWidth: 1.0,
205
206 axisTickSize: 3,
207 axisLabelFontSize: 14,
208 xAxisLabelWidth: 50,
209 yAxisLabelWidth: 50,
210 rightGap: 5,
211
212 showRoller: false,
213 xValueParser: Dygraph.dateParser,
214
215 delimiter: ',',
216
217 sigma: 2.0,
218 errorBars: false,
219 fractions: false,
220 wilsonInterval: true, // only relevant if fractions is true
221 customBars: false,
222 fillGraph: false,
223 fillAlpha: 0.15,
224 connectSeparatedPoints: false,
225
226 stackedGraph: false,
227 hideOverlayOnMouseOut: true,
228
229 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
230 legend: 'onmouseover', // the only relevant value at the moment is 'always'.
231
232 stepPlot: false,
233 avoidMinZero: false,
234
235 // Sizes of the various chart labels.
236 titleHeight: 28,
237 xLabelHeight: 18,
238 yLabelWidth: 18,
239
240 drawXAxis: true,
241 drawYAxis: true,
242 axisLineColor: "black",
243 axisLineWidth: 0.3,
244 gridLineWidth: 0.3,
245 axisLabelColor: "black",
246 axisLabelFont: "Arial", // TODO(danvk): is this implemented?
247 axisLabelWidth: 50,
248 drawYGrid: true,
249 drawXGrid: true,
250 gridLineColor: "rgb(128,128,128)",
251
252 interactionModel: null, // will be set to Dygraph.Interaction.defaultModel
253 animatedZooms: false, // (for now)
254
255 // Range selector options
256 showRangeSelector: false,
257 rangeSelectorHeight: 40,
258 rangeSelectorPlotStrokeColor: "#808FAB",
259 rangeSelectorPlotFillColor: "#A7B1C4",
260
261 // per-axis options
262 axes: {
263 x: {
264 pixelsPerLabel: 60,
265 axisLabelFormatter: Dygraph.dateAxisFormatter,
266 valueFormatter: Dygraph.dateString_,
267 ticker: null // will be set in dygraph-tickers.js
268 },
269 y: {
270 pixelsPerLabel: 30,
271 valueFormatter: Dygraph.numberValueFormatter,
272 axisLabelFormatter: Dygraph.numberAxisLabelFormatter,
273 ticker: null // will be set in dygraph-tickers.js
274 },
275 y2: {
276 pixelsPerLabel: 30,
277 valueFormatter: Dygraph.numberValueFormatter,
278 axisLabelFormatter: Dygraph.numberAxisLabelFormatter,
279 ticker: null // will be set in dygraph-tickers.js
280 }
281 }
282};
283
284// Directions for panning and zooming. Use bit operations when combined
285// values are possible.
286Dygraph.HORIZONTAL = 1;
287Dygraph.VERTICAL = 2;
288
289// Used for initializing annotation CSS rules only once.
290Dygraph.addedAnnotationCSS = false;
291
292Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
293 // Labels is no longer a constructor parameter, since it's typically set
294 // directly from the data source. It also conains a name for the x-axis,
295 // which the previous constructor form did not.
296 if (labels !== null) {
297 var new_labels = ["Date"];
298 for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
299 Dygraph.update(attrs, { 'labels': new_labels });
300 }
301 this.__init__(div, file, attrs);
302};
303
304/**
305 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
306 * and context &lt;canvas&gt; inside of it. See the constructor for details.
307 * on the parameters.
308 * @param {Element} div the Element to render the graph into.
309 * @param {String | Function} file Source data
310 * @param {Object} attrs Miscellaneous other options
311 * @private
312 */
313Dygraph.prototype.__init__ = function(div, file, attrs) {
314 // Hack for IE: if we're using excanvas and the document hasn't finished
315 // loading yet (and hence may not have initialized whatever it needs to
316 // initialize), then keep calling this routine periodically until it has.
317 if (/MSIE/.test(navigator.userAgent) && !window.opera &&
318 typeof(G_vmlCanvasManager) != 'undefined' &&
319 document.readyState != 'complete') {
320 var self = this;
321 setTimeout(function() { self.__init__(div, file, attrs); }, 100);
322 return;
323 }
324
325 // Support two-argument constructor
326 if (attrs === null || attrs === undefined) { attrs = {}; }
327
328 attrs = Dygraph.mapLegacyOptions_(attrs);
329
330 if (!div) {
331 Dygraph.error("Constructing dygraph with a non-existent div!");
332 return;
333 }
334
335 this.isUsingExcanvas_ = typeof(G_vmlCanvasManager) != 'undefined';
336
337 // Copy the important bits into the object
338 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
339 this.maindiv_ = div;
340 this.file_ = file;
341 this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD;
342 this.previousVerticalX_ = -1;
343 this.fractions_ = attrs.fractions || false;
344 this.dateWindow_ = attrs.dateWindow || null;
345
346 this.is_initial_draw_ = true;
347 this.annotations_ = [];
348
349 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
350 this.zoomed_x_ = false;
351 this.zoomed_y_ = false;
352
353 // Clear the div. This ensure that, if multiple dygraphs are passed the same
354 // div, then only one will be drawn.
355 div.innerHTML = "";
356
357 // For historical reasons, the 'width' and 'height' options trump all CSS
358 // rules _except_ for an explicit 'width' or 'height' on the div.
359 // As an added convenience, if the div has zero height (like <div></div> does
360 // without any styles), then we use a default height/width.
361 if (div.style.width === '' && attrs.width) {
362 div.style.width = attrs.width + "px";
363 }
364 if (div.style.height === '' && attrs.height) {
365 div.style.height = attrs.height + "px";
366 }
367 if (div.style.height === '' && div.clientHeight === 0) {
368 div.style.height = Dygraph.DEFAULT_HEIGHT + "px";
369 if (div.style.width === '') {
370 div.style.width = Dygraph.DEFAULT_WIDTH + "px";
371 }
372 }
373 // these will be zero if the dygraph's div is hidden.
374 this.width_ = div.clientWidth;
375 this.height_ = div.clientHeight;
376
377 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
378 if (attrs.stackedGraph) {
379 attrs.fillGraph = true;
380 // TODO(nikhilk): Add any other stackedGraph checks here.
381 }
382
383 // Dygraphs has many options, some of which interact with one another.
384 // To keep track of everything, we maintain two sets of options:
385 //
386 // this.user_attrs_ only options explicitly set by the user.
387 // this.attrs_ defaults, options derived from user_attrs_, data.
388 //
389 // Options are then accessed this.attr_('attr'), which first looks at
390 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
391 // defaults without overriding behavior that the user specifically asks for.
392 this.user_attrs_ = {};
393 Dygraph.update(this.user_attrs_, attrs);
394
395 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
396 this.attrs_ = {};
397 Dygraph.updateDeep(this.attrs_, Dygraph.DEFAULT_ATTRS);
398
399 this.boundaryIds_ = [];
400
401 // Create the containing DIV and other interactive elements
402 this.createInterface_();
403
404 this.start_();
405};
406
407/**
408 * Returns the zoomed status of the chart for one or both axes.
409 *
410 * Axis is an optional parameter. Can be set to 'x' or 'y'.
411 *
412 * The zoomed status for an axis is set whenever a user zooms using the mouse
413 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
414 * option is also specified).
415 */
416Dygraph.prototype.isZoomed = function(axis) {
417 if (axis == null) return this.zoomed_x_ || this.zoomed_y_;
418 if (axis === 'x') return this.zoomed_x_;
419 if (axis === 'y') return this.zoomed_y_;
420 throw "axis parameter is [" + axis + "] must be null, 'x' or 'y'.";
421};
422
423/**
424 * Returns information about the Dygraph object, including its containing ID.
425 */
426Dygraph.prototype.toString = function() {
427 var maindiv = this.maindiv_;
428 var id = (maindiv && maindiv.id) ? maindiv.id : maindiv;
429 return "[Dygraph " + id + "]";
430};
431
432/**
433 * @private
434 * Returns the value of an option. This may be set by the user (either in the
435 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
436 * per-series value.
437 * @param { String } name The name of the option, e.g. 'rollPeriod'.
438 * @param { String } [seriesName] The name of the series to which the option
439 * will be applied. If no per-series value of this option is available, then
440 * the global value is returned. This is optional.
441 * @return { ... } The value of the option.
442 */
443Dygraph.prototype.attr_ = function(name, seriesName) {
444// <REMOVE_FOR_COMBINED>
445 if (typeof(Dygraph.OPTIONS_REFERENCE) === 'undefined') {
446 this.error('Must include options reference JS for testing');
447 } else if (!Dygraph.OPTIONS_REFERENCE.hasOwnProperty(name)) {
448 this.error('Dygraphs is using property ' + name + ', which has no entry ' +
449 'in the Dygraphs.OPTIONS_REFERENCE listing.');
450 // Only log this error once.
451 Dygraph.OPTIONS_REFERENCE[name] = true;
452 }
453// </REMOVE_FOR_COMBINED>
454 if (seriesName &&
455 typeof(this.user_attrs_[seriesName]) != 'undefined' &&
456 this.user_attrs_[seriesName] !== null &&
457 typeof(this.user_attrs_[seriesName][name]) != 'undefined') {
458 return this.user_attrs_[seriesName][name];
459 } else if (typeof(this.user_attrs_[name]) != 'undefined') {
460 return this.user_attrs_[name];
461 } else if (typeof(this.attrs_[name]) != 'undefined') {
462 return this.attrs_[name];
463 } else {
464 return null;
465 }
466};
467
468/**
469 * @private
470 * @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2')
471 * @return { ... } A function mapping string -> option value
472 */
473Dygraph.prototype.optionsViewForAxis_ = function(axis) {
474 var self = this;
475 return function(opt) {
476 var axis_opts = self.user_attrs_.axes;
477 if (axis_opts && axis_opts[axis] && axis_opts[axis][opt]) {
478 return axis_opts[axis][opt];
479 }
480 // user-specified attributes always trump defaults, even if they're less
481 // specific.
482 if (typeof(self.user_attrs_[opt]) != 'undefined') {
483 return self.user_attrs_[opt];
484 }
485
486 axis_opts = self.attrs_.axes;
487 if (axis_opts && axis_opts[axis] && axis_opts[axis][opt]) {
488 return axis_opts[axis][opt];
489 }
490 // check old-style axis options
491 // TODO(danvk): add a deprecation warning if either of these match.
492 if (axis == 'y' && self.axes_[0].hasOwnProperty(opt)) {
493 return self.axes_[0][opt];
494 } else if (axis == 'y2' && self.axes_[1].hasOwnProperty(opt)) {
495 return self.axes_[1][opt];
496 }
497 return self.attr_(opt);
498 };
499};
500
501/**
502 * Returns the current rolling period, as set by the user or an option.
503 * @return {Number} The number of points in the rolling window
504 */
505Dygraph.prototype.rollPeriod = function() {
506 return this.rollPeriod_;
507};
508
509/**
510 * Returns the currently-visible x-range. This can be affected by zooming,
511 * panning or a call to updateOptions.
512 * Returns a two-element array: [left, right].
513 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
514 */
515Dygraph.prototype.xAxisRange = function() {
516 return this.dateWindow_ ? this.dateWindow_ : this.xAxisExtremes();
517};
518
519/**
520 * Returns the lower- and upper-bound x-axis values of the
521 * data set.
522 */
523Dygraph.prototype.xAxisExtremes = function() {
524 var left = this.rawData_[0][0];
525 var right = this.rawData_[this.rawData_.length - 1][0];
526 return [left, right];
527};
528
529/**
530 * Returns the currently-visible y-range for an axis. This can be affected by
531 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
532 * called with no arguments, returns the range of the first axis.
533 * Returns a two-element array: [bottom, top].
534 */
535Dygraph.prototype.yAxisRange = function(idx) {
536 if (typeof(idx) == "undefined") idx = 0;
537 if (idx < 0 || idx >= this.axes_.length) {
538 return null;
539 }
540 var axis = this.axes_[idx];
541 return [ axis.computedValueRange[0], axis.computedValueRange[1] ];
542};
543
544/**
545 * Returns the currently-visible y-ranges for each axis. This can be affected by
546 * zooming, panning, calls to updateOptions, etc.
547 * Returns an array of [bottom, top] pairs, one for each y-axis.
548 */
549Dygraph.prototype.yAxisRanges = function() {
550 var ret = [];
551 for (var i = 0; i < this.axes_.length; i++) {
552 ret.push(this.yAxisRange(i));
553 }
554 return ret;
555};
556
557// TODO(danvk): use these functions throughout dygraphs.
558/**
559 * Convert from data coordinates to canvas/div X/Y coordinates.
560 * If specified, do this conversion for the coordinate system of a particular
561 * axis. Uses the first axis by default.
562 * Returns a two-element array: [X, Y]
563 *
564 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
565 * instead of toDomCoords(null, y, axis).
566 */
567Dygraph.prototype.toDomCoords = function(x, y, axis) {
568 return [ this.toDomXCoord(x), this.toDomYCoord(y, axis) ];
569};
570
571/**
572 * Convert from data x coordinates to canvas/div X coordinate.
573 * If specified, do this conversion for the coordinate system of a particular
574 * axis.
575 * Returns a single value or null if x is null.
576 */
577Dygraph.prototype.toDomXCoord = function(x) {
578 if (x === null) {
579 return null;
580 }
581
582 var area = this.plotter_.area;
583 var xRange = this.xAxisRange();
584 return area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
585};
586
587/**
588 * Convert from data x coordinates to canvas/div Y coordinate and optional
589 * axis. Uses the first axis by default.
590 *
591 * returns a single value or null if y is null.
592 */
593Dygraph.prototype.toDomYCoord = function(y, axis) {
594 var pct = this.toPercentYCoord(y, axis);
595
596 if (pct === null) {
597 return null;
598 }
599 var area = this.plotter_.area;
600 return area.y + pct * area.h;
601};
602
603/**
604 * Convert from canvas/div coords to data coordinates.
605 * If specified, do this conversion for the coordinate system of a particular
606 * axis. Uses the first axis by default.
607 * Returns a two-element array: [X, Y].
608 *
609 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
610 * instead of toDataCoords(null, y, axis).
611 */
612Dygraph.prototype.toDataCoords = function(x, y, axis) {
613 return [ this.toDataXCoord(x), this.toDataYCoord(y, axis) ];
614};
615
616/**
617 * Convert from canvas/div x coordinate to data coordinate.
618 *
619 * If x is null, this returns null.
620 */
621Dygraph.prototype.toDataXCoord = function(x) {
622 if (x === null) {
623 return null;
624 }
625
626 var area = this.plotter_.area;
627 var xRange = this.xAxisRange();
628 return xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
629};
630
631/**
632 * Convert from canvas/div y coord to value.
633 *
634 * If y is null, this returns null.
635 * if axis is null, this uses the first axis.
636 */
637Dygraph.prototype.toDataYCoord = function(y, axis) {
638 if (y === null) {
639 return null;
640 }
641
642 var area = this.plotter_.area;
643 var yRange = this.yAxisRange(axis);
644
645 if (typeof(axis) == "undefined") axis = 0;
646 if (!this.axes_[axis].logscale) {
647 return yRange[0] + (area.y + area.h - y) / area.h * (yRange[1] - yRange[0]);
648 } else {
649 // Computing the inverse of toDomCoord.
650 var pct = (y - area.y) / area.h;
651
652 // Computing the inverse of toPercentYCoord. The function was arrived at with
653 // the following steps:
654 //
655 // Original calcuation:
656 // pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
657 //
658 // Move denominator to both sides:
659 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
660 //
661 // subtract logr1, and take the negative value.
662 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
663 //
664 // Swap both sides of the equation, and we can compute the log of the
665 // return value. Which means we just need to use that as the exponent in
666 // e^exponent.
667 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
668
669 var logr1 = Dygraph.log10(yRange[1]);
670 var exponent = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
671 var value = Math.pow(Dygraph.LOG_SCALE, exponent);
672 return value;
673 }
674};
675
676/**
677 * Converts a y for an axis to a percentage from the top to the
678 * bottom of the drawing area.
679 *
680 * If the coordinate represents a value visible on the canvas, then
681 * the value will be between 0 and 1, where 0 is the top of the canvas.
682 * However, this method will return values outside the range, as
683 * values can fall outside the canvas.
684 *
685 * If y is null, this returns null.
686 * if axis is null, this uses the first axis.
687 *
688 * @param { Number } y The data y-coordinate.
689 * @param { Number } [axis] The axis number on which the data coordinate lives.
690 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
691 */
692Dygraph.prototype.toPercentYCoord = function(y, axis) {
693 if (y === null) {
694 return null;
695 }
696 if (typeof(axis) == "undefined") axis = 0;
697
698 var yRange = this.yAxisRange(axis);
699
700 var pct;
701 if (!this.axes_[axis].logscale) {
702 // yRange[1] - y is unit distance from the bottom.
703 // yRange[1] - yRange[0] is the scale of the range.
704 // (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom.
705 pct = (yRange[1] - y) / (yRange[1] - yRange[0]);
706 } else {
707 var logr1 = Dygraph.log10(yRange[1]);
708 pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
709 }
710 return pct;
711};
712
713/**
714 * Converts an x value to a percentage from the left to the right of
715 * the drawing area.
716 *
717 * If the coordinate represents a value visible on the canvas, then
718 * the value will be between 0 and 1, where 0 is the left of the canvas.
719 * However, this method will return values outside the range, as
720 * values can fall outside the canvas.
721 *
722 * If x is null, this returns null.
723 * @param { Number } x The data x-coordinate.
724 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
725 */
726Dygraph.prototype.toPercentXCoord = function(x) {
727 if (x === null) {
728 return null;
729 }
730
731 var xRange = this.xAxisRange();
732 return (x - xRange[0]) / (xRange[1] - xRange[0]);
733};
734
735/**
736 * Returns the number of columns (including the independent variable).
737 * @return { Integer } The number of columns.
738 */
739Dygraph.prototype.numColumns = function() {
740 return this.rawData_[0] ? this.rawData_[0].length : this.attr_("labels").length;
741};
742
743/**
744 * Returns the number of rows (excluding any header/label row).
745 * @return { Integer } The number of rows, less any header.
746 */
747Dygraph.prototype.numRows = function() {
748 return this.rawData_.length;
749};
750
751/**
752 * Returns the full range of the x-axis, as determined by the most extreme
753 * values in the data set. Not affected by zooming, visibility, etc.
754 * TODO(danvk): merge w/ xAxisExtremes
755 * @return { Array<Number> } A [low, high] pair
756 * @private
757 */
758Dygraph.prototype.fullXRange_ = function() {
759 if (this.numRows() > 0) {
760 return [this.rawData_[0][0], this.rawData_[this.numRows() - 1][0]];
761 } else {
762 return [0, 1];
763 }
764};
765
766/**
767 * Returns the value in the given row and column. If the row and column exceed
768 * the bounds on the data, returns null. Also returns null if the value is
769 * missing.
770 * @param { Number} row The row number of the data (0-based). Row 0 is the
771 * first row of data, not a header row.
772 * @param { Number} col The column number of the data (0-based)
773 * @return { Number } The value in the specified cell or null if the row/col
774 * were out of range.
775 */
776Dygraph.prototype.getValue = function(row, col) {
777 if (row < 0 || row > this.rawData_.length) return null;
778 if (col < 0 || col > this.rawData_[row].length) return null;
779
780 return this.rawData_[row][col];
781};
782
783/**
784 * Generates interface elements for the Dygraph: a containing div, a div to
785 * display the current point, and a textbox to adjust the rolling average
786 * period. Also creates the Renderer/Layout elements.
787 * @private
788 */
789Dygraph.prototype.createInterface_ = function() {
790 // Create the all-enclosing graph div
791 var enclosing = this.maindiv_;
792
793 this.graphDiv = document.createElement("div");
794 this.graphDiv.style.width = this.width_ + "px";
795 this.graphDiv.style.height = this.height_ + "px";
796 enclosing.appendChild(this.graphDiv);
797
798 // Create the canvas for interactive parts of the chart.
799 this.canvas_ = Dygraph.createCanvas();
800 this.canvas_.style.position = "absolute";
801 this.canvas_.width = this.width_;
802 this.canvas_.height = this.height_;
803 this.canvas_.style.width = this.width_ + "px"; // for IE
804 this.canvas_.style.height = this.height_ + "px"; // for IE
805
806 this.canvas_ctx_ = Dygraph.getContext(this.canvas_);
807
808 // ... and for static parts of the chart.
809 this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
810 this.hidden_ctx_ = Dygraph.getContext(this.hidden_);
811
812 if (this.attr_('showRangeSelector')) {
813 // The range selector must be created here so that its canvases and contexts get created here.
814 // For some reason, if the canvases and contexts don't get created here, things don't work in IE.
815 // The range selector also sets xAxisHeight in order to reserve space.
816 this.rangeSelector_ = new DygraphRangeSelector(this);
817 }
818
819 // The interactive parts of the graph are drawn on top of the chart.
820 this.graphDiv.appendChild(this.hidden_);
821 this.graphDiv.appendChild(this.canvas_);
822 this.mouseEventElement_ = this.createMouseEventElement_();
823
824 // Create the grapher
825 this.layout_ = new DygraphLayout(this);
826
827 if (this.rangeSelector_) {
828 // This needs to happen after the graph canvases are added to the div and the layout object is created.
829 this.rangeSelector_.addToGraph(this.graphDiv, this.layout_);
830 }
831
832 var dygraph = this;
833 Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) {
834 dygraph.mouseMove_(e);
835 });
836 Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) {
837 dygraph.mouseOut_(e);
838 });
839
840 this.createStatusMessage_();
841 this.createDragInterface_();
842
843 // Update when the window is resized.
844 // TODO(danvk): drop frames depending on complexity of the chart.
845 Dygraph.addEvent(window, 'resize', function(e) {
846 dygraph.resize();
847 });
848};
849
850/**
851 * Detach DOM elements in the dygraph and null out all data references.
852 * Calling this when you're done with a dygraph can dramatically reduce memory
853 * usage. See, e.g., the tests/perf.html example.
854 */
855Dygraph.prototype.destroy = function() {
856 var removeRecursive = function(node) {
857 while (node.hasChildNodes()) {
858 removeRecursive(node.firstChild);
859 node.removeChild(node.firstChild);
860 }
861 };
862 removeRecursive(this.maindiv_);
863
864 var nullOut = function(obj) {
865 for (var n in obj) {
866 if (typeof(obj[n]) === 'object') {
867 obj[n] = null;
868 }
869 }
870 };
871
872 // These may not all be necessary, but it can't hurt...
873 nullOut(this.layout_);
874 nullOut(this.plotter_);
875 nullOut(this);
876};
877
878/**
879 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
880 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
881 * or the zoom rectangles) is done on this.canvas_.
882 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
883 * @return {Object} The newly-created canvas
884 * @private
885 */
886Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
887 var h = Dygraph.createCanvas();
888 h.style.position = "absolute";
889 // TODO(danvk): h should be offset from canvas. canvas needs to include
890 // some extra area to make it easier to zoom in on the far left and far
891 // right. h needs to be precisely the plot area, so that clipping occurs.
892 h.style.top = canvas.style.top;
893 h.style.left = canvas.style.left;
894 h.width = this.width_;
895 h.height = this.height_;
896 h.style.width = this.width_ + "px"; // for IE
897 h.style.height = this.height_ + "px"; // for IE
898 return h;
899};
900
901/**
902 * Creates an overlay element used to handle mouse events.
903 * @return {Object} The mouse event element.
904 * @private
905 */
906Dygraph.prototype.createMouseEventElement_ = function() {
907 if (this.isUsingExcanvas_) {
908 var elem = document.createElement("div");
909 elem.style.position = 'absolute';
910 elem.style.backgroundColor = 'white';
911 elem.style.filter = 'alpha(opacity=0)';
912 elem.style.width = this.width_ + "px";
913 elem.style.height = this.height_ + "px";
914 this.graphDiv.appendChild(elem);
915 return elem;
916 } else {
917 return this.canvas_;
918 }
919};
920
921/**
922 * Generate a set of distinct colors for the data series. This is done with a
923 * color wheel. Saturation/Value are customizable, and the hue is
924 * equally-spaced around the color wheel. If a custom set of colors is
925 * specified, that is used instead.
926 * @private
927 */
928Dygraph.prototype.setColors_ = function() {
929 var num = this.attr_("labels").length - 1;
930 this.colors_ = [];
931 var colors = this.attr_('colors');
932 var i;
933 if (!colors) {
934 var sat = this.attr_('colorSaturation') || 1.0;
935 var val = this.attr_('colorValue') || 0.5;
936 var half = Math.ceil(num / 2);
937 for (i = 1; i <= num; i++) {
938 if (!this.visibility()[i-1]) continue;
939 // alternate colors for high contrast.
940 var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2);
941 var hue = (1.0 * idx/ (1 + num));
942 this.colors_.push(Dygraph.hsvToRGB(hue, sat, val));
943 }
944 } else {
945 for (i = 0; i < num; i++) {
946 if (!this.visibility()[i]) continue;
947 var colorStr = colors[i % colors.length];
948 this.colors_.push(colorStr);
949 }
950 }
951
952 this.plotter_.setColors(this.colors_);
953};
954
955/**
956 * Return the list of colors. This is either the list of colors passed in the
957 * attributes or the autogenerated list of rgb(r,g,b) strings.
958 * @return {Array<string>} The list of colors.
959 */
960Dygraph.prototype.getColors = function() {
961 return this.colors_;
962};
963
964/**
965 * Create the div that contains information on the selected point(s)
966 * This goes in the top right of the canvas, unless an external div has already
967 * been specified.
968 * @private
969 */
970Dygraph.prototype.createStatusMessage_ = function() {
971 var userLabelsDiv = this.user_attrs_.labelsDiv;
972 if (userLabelsDiv && null !== userLabelsDiv &&
973 (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String)) {
974 this.user_attrs_.labelsDiv = document.getElementById(userLabelsDiv);
975 }
976 if (!this.attr_("labelsDiv")) {
977 var divWidth = this.attr_('labelsDivWidth');
978 var messagestyle = {
979 "position": "absolute",
980 "fontSize": "14px",
981 "zIndex": 10,
982 "width": divWidth + "px",
983 "top": "0px",
984 "left": (this.width_ - divWidth - 2) + "px",
985 "background": "white",
986 "textAlign": "left",
987 "overflow": "hidden"};
988 Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
989 var div = document.createElement("div");
990 div.className = "dygraph-legend";
991 for (var name in messagestyle) {
992 if (messagestyle.hasOwnProperty(name)) {
993 div.style[name] = messagestyle[name];
994 }
995 }
996 this.graphDiv.appendChild(div);
997 this.attrs_.labelsDiv = div;
998 }
999};
1000
1001/**
1002 * Position the labels div so that:
1003 * - its right edge is flush with the right edge of the charting area
1004 * - its top edge is flush with the top edge of the charting area
1005 * @private
1006 */
1007Dygraph.prototype.positionLabelsDiv_ = function() {
1008 // Don't touch a user-specified labelsDiv.
1009 if (this.user_attrs_.hasOwnProperty("labelsDiv")) return;
1010
1011 var area = this.plotter_.area;
1012 var div = this.attr_("labelsDiv");
1013 div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px";
1014 div.style.top = area.y + "px";
1015};
1016
1017/**
1018 * Create the text box to adjust the averaging period
1019 * @private
1020 */
1021Dygraph.prototype.createRollInterface_ = function() {
1022 // Create a roller if one doesn't exist already.
1023 if (!this.roller_) {
1024 this.roller_ = document.createElement("input");
1025 this.roller_.type = "text";
1026 this.roller_.style.display = "none";
1027 this.graphDiv.appendChild(this.roller_);
1028 }
1029
1030 var display = this.attr_('showRoller') ? 'block' : 'none';
1031
1032 var area = this.plotter_.area;
1033 var textAttr = { "position": "absolute",
1034 "zIndex": 10,
1035 "top": (area.y + area.h - 25) + "px",
1036 "left": (area.x + 1) + "px",
1037 "display": display
1038 };
1039 this.roller_.size = "2";
1040 this.roller_.value = this.rollPeriod_;
1041 for (var name in textAttr) {
1042 if (textAttr.hasOwnProperty(name)) {
1043 this.roller_.style[name] = textAttr[name];
1044 }
1045 }
1046
1047 var dygraph = this;
1048 this.roller_.onchange = function() { dygraph.adjustRoll(dygraph.roller_.value); };
1049};
1050
1051/**
1052 * @private
1053 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1054 * canvas (i.e. DOM Coords).
1055 */
1056Dygraph.prototype.dragGetX_ = function(e, context) {
1057 return Dygraph.pageX(e) - context.px;
1058};
1059
1060/**
1061 * @private
1062 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1063 * canvas (i.e. DOM Coords).
1064 */
1065Dygraph.prototype.dragGetY_ = function(e, context) {
1066 return Dygraph.pageY(e) - context.py;
1067};
1068
1069/**
1070 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1071 * events.
1072 * @private
1073 */
1074Dygraph.prototype.createDragInterface_ = function() {
1075 var context = {
1076 // Tracks whether the mouse is down right now
1077 isZooming: false,
1078 isPanning: false, // is this drag part of a pan?
1079 is2DPan: false, // if so, is that pan 1- or 2-dimensional?
1080 dragStartX: null, // pixel coordinates
1081 dragStartY: null, // pixel coordinates
1082 dragEndX: null, // pixel coordinates
1083 dragEndY: null, // pixel coordinates
1084 dragDirection: null,
1085 prevEndX: null, // pixel coordinates
1086 prevEndY: null, // pixel coordinates
1087 prevDragDirection: null,
1088
1089 // The value on the left side of the graph when a pan operation starts.
1090 initialLeftmostDate: null,
1091
1092 // The number of units each pixel spans. (This won't be valid for log
1093 // scales)
1094 xUnitsPerPixel: null,
1095
1096 // TODO(danvk): update this comment
1097 // The range in second/value units that the viewport encompasses during a
1098 // panning operation.
1099 dateRange: null,
1100
1101 // Top-left corner of the canvas, in DOM coords
1102 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1103 px: 0,
1104 py: 0,
1105
1106 // Values for use with panEdgeFraction, which limit how far outside the
1107 // graph's data boundaries it can be panned.
1108 boundedDates: null, // [minDate, maxDate]
1109 boundedValues: null, // [[minValue, maxValue] ...]
1110
1111 initializeMouseDown: function(event, g, context) {
1112 // prevents mouse drags from selecting page text.
1113 if (event.preventDefault) {
1114 event.preventDefault(); // Firefox, Chrome, etc.
1115 } else {
1116 event.returnValue = false; // IE
1117 event.cancelBubble = true;
1118 }
1119
1120 context.px = Dygraph.findPosX(g.canvas_);
1121 context.py = Dygraph.findPosY(g.canvas_);
1122 context.dragStartX = g.dragGetX_(event, context);
1123 context.dragStartY = g.dragGetY_(event, context);
1124 }
1125 };
1126
1127 var interactionModel = this.attr_("interactionModel");
1128
1129 // Self is the graph.
1130 var self = this;
1131
1132 // Function that binds the graph and context to the handler.
1133 var bindHandler = function(handler) {
1134 return function(event) {
1135 handler(event, self, context);
1136 };
1137 };
1138
1139 for (var eventName in interactionModel) {
1140 if (!interactionModel.hasOwnProperty(eventName)) continue;
1141 Dygraph.addEvent(this.mouseEventElement_, eventName,
1142 bindHandler(interactionModel[eventName]));
1143 }
1144
1145 // If the user releases the mouse button during a drag, but not over the
1146 // canvas, then it doesn't count as a zooming action.
1147 Dygraph.addEvent(document, 'mouseup', function(event) {
1148 if (context.isZooming || context.isPanning) {
1149 context.isZooming = false;
1150 context.dragStartX = null;
1151 context.dragStartY = null;
1152 }
1153
1154 if (context.isPanning) {
1155 context.isPanning = false;
1156 context.draggingDate = null;
1157 context.dateRange = null;
1158 for (var i = 0; i < self.axes_.length; i++) {
1159 delete self.axes_[i].draggingValue;
1160 delete self.axes_[i].dragValueRange;
1161 }
1162 }
1163 });
1164};
1165
1166/**
1167 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1168 * up any previous zoom rectangles that were drawn. This could be optimized to
1169 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1170 * dots.
1171 *
1172 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1173 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1174 * @param {Number} startX The X position where the drag started, in canvas
1175 * coordinates.
1176 * @param {Number} endX The current X position of the drag, in canvas coords.
1177 * @param {Number} startY The Y position where the drag started, in canvas
1178 * coordinates.
1179 * @param {Number} endY The current Y position of the drag, in canvas coords.
1180 * @param {Number} prevDirection the value of direction on the previous call to
1181 * this function. Used to avoid excess redrawing
1182 * @param {Number} prevEndX The value of endX on the previous call to this
1183 * function. Used to avoid excess redrawing
1184 * @param {Number} prevEndY The value of endY on the previous call to this
1185 * function. Used to avoid excess redrawing
1186 * @private
1187 */
1188Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY,
1189 endY, prevDirection, prevEndX,
1190 prevEndY) {
1191 var ctx = this.canvas_ctx_;
1192
1193 // Clean up from the previous rect if necessary
1194 if (prevDirection == Dygraph.HORIZONTAL) {
1195 ctx.clearRect(Math.min(startX, prevEndX), this.layout_.getPlotArea().y,
1196 Math.abs(startX - prevEndX), this.layout_.getPlotArea().h);
1197 } else if (prevDirection == Dygraph.VERTICAL){
1198 ctx.clearRect(this.layout_.getPlotArea().x, Math.min(startY, prevEndY),
1199 this.layout_.getPlotArea().w, Math.abs(startY - prevEndY));
1200 }
1201
1202 // Draw a light-grey rectangle to show the new viewing area
1203 if (direction == Dygraph.HORIZONTAL) {
1204 if (endX && startX) {
1205 ctx.fillStyle = "rgba(128,128,128,0.33)";
1206 ctx.fillRect(Math.min(startX, endX), this.layout_.getPlotArea().y,
1207 Math.abs(endX - startX), this.layout_.getPlotArea().h);
1208 }
1209 } else if (direction == Dygraph.VERTICAL) {
1210 if (endY && startY) {
1211 ctx.fillStyle = "rgba(128,128,128,0.33)";
1212 ctx.fillRect(this.layout_.getPlotArea().x, Math.min(startY, endY),
1213 this.layout_.getPlotArea().w, Math.abs(endY - startY));
1214 }
1215 }
1216
1217 if (this.isUsingExcanvas_) {
1218 this.currentZoomRectArgs_ = [direction, startX, endX, startY, endY, 0, 0, 0];
1219 }
1220};
1221
1222/**
1223 * Clear the zoom rectangle (and perform no zoom).
1224 * @private
1225 */
1226Dygraph.prototype.clearZoomRect_ = function() {
1227 this.currentZoomRectArgs_ = null;
1228 this.canvas_ctx_.clearRect(0, 0, this.canvas_.width, this.canvas_.height);
1229};
1230
1231/**
1232 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1233 * the canvas. The exact zoom window may be slightly larger if there are no data
1234 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1235 * which accepts dates that match the raw data. This function redraws the graph.
1236 *
1237 * @param {Number} lowX The leftmost pixel value that should be visible.
1238 * @param {Number} highX The rightmost pixel value that should be visible.
1239 * @private
1240 */
1241Dygraph.prototype.doZoomX_ = function(lowX, highX) {
1242 this.currentZoomRectArgs_ = null;
1243 // Find the earliest and latest dates contained in this canvasx range.
1244 // Convert the call to date ranges of the raw data.
1245 var minDate = this.toDataXCoord(lowX);
1246 var maxDate = this.toDataXCoord(highX);
1247 this.doZoomXDates_(minDate, maxDate);
1248};
1249
1250/**
1251 * Transition function to use in animations. Returns values between 0.0
1252 * (totally old values) and 1.0 (totally new values) for each frame.
1253 * @private
1254 */
1255Dygraph.zoomAnimationFunction = function(frame, numFrames) {
1256 var k = 1.5;
1257 return (1.0 - Math.pow(k, -frame)) / (1.0 - Math.pow(k, -numFrames));
1258};
1259
1260/**
1261 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1262 * method with doZoomX which accepts pixel coordinates. This function redraws
1263 * the graph.
1264 *
1265 * @param {Number} minDate The minimum date that should be visible.
1266 * @param {Number} maxDate The maximum date that should be visible.
1267 * @private
1268 */
1269Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
1270 // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation
1271 // can produce strange effects. Rather than the y-axis transitioning slowly
1272 // between values, it can jerk around.)
1273 var old_window = this.xAxisRange();
1274 var new_window = [minDate, maxDate];
1275 this.zoomed_x_ = true;
1276 var that = this;
1277 this.doAnimatedZoom(old_window, new_window, null, null, function() {
1278 if (that.attr_("zoomCallback")) {
1279 that.attr_("zoomCallback")(minDate, maxDate, that.yAxisRanges());
1280 }
1281 });
1282};
1283
1284/**
1285 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1286 * the canvas. This function redraws the graph.
1287 *
1288 * @param {Number} lowY The topmost pixel value that should be visible.
1289 * @param {Number} highY The lowest pixel value that should be visible.
1290 * @private
1291 */
1292Dygraph.prototype.doZoomY_ = function(lowY, highY) {
1293 this.currentZoomRectArgs_ = null;
1294 // Find the highest and lowest values in pixel range for each axis.
1295 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1296 // This is because pixels increase as you go down on the screen, whereas data
1297 // coordinates increase as you go up the screen.
1298 var oldValueRanges = this.yAxisRanges();
1299 var newValueRanges = [];
1300 for (var i = 0; i < this.axes_.length; i++) {
1301 var hi = this.toDataYCoord(lowY, i);
1302 var low = this.toDataYCoord(highY, i);
1303 newValueRanges.push([low, hi]);
1304 }
1305
1306 this.zoomed_y_ = true;
1307 var that = this;
1308 this.doAnimatedZoom(null, null, oldValueRanges, newValueRanges, function() {
1309 if (that.attr_("zoomCallback")) {
1310 var xRange = that.xAxisRange();
1311 that.attr_("zoomCallback")(xRange[0], xRange[1], that.yAxisRanges());
1312 }
1313 });
1314};
1315
1316/**
1317 * Reset the zoom to the original view coordinates. This is the same as
1318 * double-clicking on the graph.
1319 *
1320 * @private
1321 */
1322Dygraph.prototype.doUnzoom_ = function() {
1323 var dirty = false, dirtyX = false, dirtyY = false;
1324 if (this.dateWindow_ !== null) {
1325 dirty = true;
1326 dirtyX = true;
1327 }
1328
1329 for (var i = 0; i < this.axes_.length; i++) {
1330 if (this.axes_[i].valueWindow !== null) {
1331 dirty = true;
1332 dirtyY = true;
1333 }
1334 }
1335
1336 // Clear any selection, since it's likely to be drawn in the wrong place.
1337 this.clearSelection();
1338
1339 if (dirty) {
1340 this.zoomed_x_ = false;
1341 this.zoomed_y_ = false;
1342
1343 var minDate = this.rawData_[0][0];
1344 var maxDate = this.rawData_[this.rawData_.length - 1][0];
1345
1346 // With only one frame, don't bother calculating extreme ranges.
1347 // TODO(danvk): merge this block w/ the code below.
1348 if (!this.attr_("animatedZooms")) {
1349 this.dateWindow_ = null;
1350 for (i = 0; i < this.axes_.length; i++) {
1351 if (this.axes_[i].valueWindow !== null) {
1352 delete this.axes_[i].valueWindow;
1353 }
1354 }
1355 this.drawGraph_();
1356 if (this.attr_("zoomCallback")) {
1357 this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
1358 }
1359 return;
1360 }
1361
1362 var oldWindow=null, newWindow=null, oldValueRanges=null, newValueRanges=null;
1363 if (dirtyX) {
1364 oldWindow = this.xAxisRange();
1365 newWindow = [minDate, maxDate];
1366 }
1367
1368 if (dirtyY) {
1369 oldValueRanges = this.yAxisRanges();
1370 // TODO(danvk): this is pretty inefficient
1371 var packed = this.gatherDatasets_(this.rolledSeries_, null);
1372 var extremes = packed[1];
1373
1374 // this has the side-effect of modifying this.axes_.
1375 // this doesn't make much sense in this context, but it's convenient (we
1376 // need this.axes_[*].extremeValues) and not harmful since we'll be
1377 // calling drawGraph_ shortly, which clobbers these values.
1378 this.computeYAxisRanges_(extremes);
1379
1380 newValueRanges = [];
1381 for (i = 0; i < this.axes_.length; i++) {
1382 newValueRanges.push(this.axes_[i].extremeRange);
1383 }
1384 }
1385
1386 var that = this;
1387 this.doAnimatedZoom(oldWindow, newWindow, oldValueRanges, newValueRanges,
1388 function() {
1389 that.dateWindow_ = null;
1390 for (var i = 0; i < that.axes_.length; i++) {
1391 if (that.axes_[i].valueWindow !== null) {
1392 delete that.axes_[i].valueWindow;
1393 }
1394 }
1395 if (that.attr_("zoomCallback")) {
1396 that.attr_("zoomCallback")(minDate, maxDate, that.yAxisRanges());
1397 }
1398 });
1399 }
1400};
1401
1402/**
1403 * Combined animation logic for all zoom functions.
1404 * either the x parameters or y parameters may be null.
1405 * @private
1406 */
1407Dygraph.prototype.doAnimatedZoom = function(oldXRange, newXRange, oldYRanges, newYRanges, callback) {
1408 var steps = this.attr_("animatedZooms") ? Dygraph.ANIMATION_STEPS : 1;
1409
1410 var windows = [];
1411 var valueRanges = [];
1412 var step, frac;
1413
1414 if (oldXRange !== null && newXRange !== null) {
1415 for (step = 1; step <= steps; step++) {
1416 frac = Dygraph.zoomAnimationFunction(step, steps);
1417 windows[step-1] = [oldXRange[0]*(1-frac) + frac*newXRange[0],
1418 oldXRange[1]*(1-frac) + frac*newXRange[1]];
1419 }
1420 }
1421
1422 if (oldYRanges !== null && newYRanges !== null) {
1423 for (step = 1; step <= steps; step++) {
1424 frac = Dygraph.zoomAnimationFunction(step, steps);
1425 var thisRange = [];
1426 for (var j = 0; j < this.axes_.length; j++) {
1427 thisRange.push([oldYRanges[j][0]*(1-frac) + frac*newYRanges[j][0],
1428 oldYRanges[j][1]*(1-frac) + frac*newYRanges[j][1]]);
1429 }
1430 valueRanges[step-1] = thisRange;
1431 }
1432 }
1433
1434 var that = this;
1435 Dygraph.repeatAndCleanup(function(step) {
1436 if (valueRanges.length) {
1437 for (var i = 0; i < that.axes_.length; i++) {
1438 var w = valueRanges[step][i];
1439 that.axes_[i].valueWindow = [w[0], w[1]];
1440 }
1441 }
1442 if (windows.length) {
1443 that.dateWindow_ = windows[step];
1444 }
1445 that.drawGraph_();
1446 }, steps, Dygraph.ANIMATION_DURATION / steps, callback);
1447};
1448
1449/**
1450 * When the mouse moves in the canvas, display information about a nearby data
1451 * point and draw dots over those points in the data series. This function
1452 * takes care of cleanup of previously-drawn dots.
1453 * @param {Object} event The mousemove event from the browser.
1454 * @private
1455 */
1456Dygraph.prototype.mouseMove_ = function(event) {
1457 // This prevents JS errors when mousing over the canvas before data loads.
1458 var points = this.layout_.points;
1459 if (points === undefined) return;
1460
1461 var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_);
1462
1463 var lastx = -1;
1464 var i;
1465
1466 // Loop through all the points and find the date nearest to our current
1467 // location.
1468 var minDist = 1e+100;
1469 var idx = -1;
1470 for (i = 0; i < points.length; i++) {
1471 var point = points[i];
1472 if (point === null) continue;
1473 var dist = Math.abs(point.canvasx - canvasx);
1474 if (dist > minDist) continue;
1475 minDist = dist;
1476 idx = i;
1477 }
1478 if (idx >= 0) lastx = points[idx].xval;
1479
1480 // Extract the points we've selected
1481 this.selPoints_ = [];
1482 var l = points.length;
1483 if (!this.attr_("stackedGraph")) {
1484 for (i = 0; i < l; i++) {
1485 if (points[i].xval == lastx) {
1486 this.selPoints_.push(points[i]);
1487 }
1488 }
1489 } else {
1490 // Need to 'unstack' points starting from the bottom
1491 var cumulative_sum = 0;
1492 for (i = l - 1; i >= 0; i--) {
1493 if (points[i].xval == lastx) {
1494 var p = {}; // Clone the point since we modify it
1495 for (var k in points[i]) {
1496 p[k] = points[i][k];
1497 }
1498 p.yval -= cumulative_sum;
1499 cumulative_sum += p.yval;
1500 this.selPoints_.push(p);
1501 }
1502 }
1503 this.selPoints_.reverse();
1504 }
1505
1506 if (this.attr_("highlightCallback")) {
1507 var px = this.lastx_;
1508 if (px !== null && lastx != px) {
1509 // only fire if the selected point has changed.
1510 this.attr_("highlightCallback")(event, lastx, this.selPoints_, this.idxToRow_(idx));
1511 }
1512 }
1513
1514 // Save last x position for callbacks.
1515 this.lastx_ = lastx;
1516
1517 this.updateSelection_();
1518};
1519
1520/**
1521 * Transforms layout_.points index into data row number.
1522 * @param int layout_.points index
1523 * @return int row number, or -1 if none could be found.
1524 * @private
1525 */
1526Dygraph.prototype.idxToRow_ = function(idx) {
1527 if (idx < 0) return -1;
1528
1529 for (var i in this.layout_.datasets) {
1530 if (idx < this.layout_.datasets[i].length) {
1531 return this.boundaryIds_[0][0]+idx;
1532 }
1533 idx -= this.layout_.datasets[i].length;
1534 }
1535 return -1;
1536};
1537
1538/**
1539 * @private
1540 * Generates HTML for the legend which is displayed when hovering over the
1541 * chart. If no selected points are specified, a default legend is returned
1542 * (this may just be the empty string).
1543 * @param { Number } [x] The x-value of the selected points.
1544 * @param { [Object] } [sel_points] List of selected points for the given
1545 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1546 */
1547Dygraph.prototype.generateLegendHTML_ = function(x, sel_points) {
1548 // If no points are selected, we display a default legend. Traditionally,
1549 // this has been blank. But a better default would be a conventional legend,
1550 // which provides essential information for a non-interactive chart.
1551 var html, sepLines, i, c;
1552 if (typeof(x) === 'undefined') {
1553 if (this.attr_('legend') != 'always') return '';
1554
1555 sepLines = this.attr_('labelsSeparateLines');
1556 var labels = this.attr_('labels');
1557 html = '';
1558 for (i = 1; i < labels.length; i++) {
1559 if (!this.visibility()[i - 1]) continue;
1560 c = this.plotter_.colors[labels[i]];
1561 if (html !== '') html += (sepLines ? '<br/>' : ' ');
1562 html += "<b><span style='color: " + c + ";'>&mdash;" + labels[i] +
1563 "</span></b>";
1564 }
1565 return html;
1566 }
1567
1568 var xOptView = this.optionsViewForAxis_('x');
1569 var xvf = xOptView('valueFormatter');
1570 html = xvf(x, xOptView, this.attr_('labels')[0], this) + ":";
1571
1572 var yOptViews = [];
1573 var num_axes = this.numAxes();
1574 for (i = 0; i < num_axes; i++) {
1575 yOptViews[i] = this.optionsViewForAxis_('y' + (i ? 1 + i : ''));
1576 }
1577 var showZeros = this.attr_("labelsShowZeroValues");
1578 sepLines = this.attr_("labelsSeparateLines");
1579 for (i = 0; i < this.selPoints_.length; i++) {
1580 var pt = this.selPoints_[i];
1581 if (pt.yval === 0 && !showZeros) continue;
1582 if (!Dygraph.isOK(pt.canvasy)) continue;
1583 if (sepLines) html += "<br/>";
1584
1585 var yOptView = yOptViews[this.seriesToAxisMap_[pt.name]];
1586 var fmtFunc = yOptView('valueFormatter');
1587 c = this.plotter_.colors[pt.name];
1588 var yval = fmtFunc(pt.yval, yOptView, pt.name, this);
1589
1590 // TODO(danvk): use a template string here and make it an attribute.
1591 html += " <b><span style='color: " + c + ";'>" + pt.name +
1592 "</span></b>:" + yval;
1593 }
1594 return html;
1595};
1596
1597/**
1598 * @private
1599 * Displays information about the selected points in the legend. If there is no
1600 * selection, the legend will be cleared.
1601 * @param { Number } [x] The x-value of the selected points.
1602 * @param { [Object] } [sel_points] List of selected points for the given
1603 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1604 */
1605Dygraph.prototype.setLegendHTML_ = function(x, sel_points) {
1606 var html = this.generateLegendHTML_(x, sel_points);
1607 var labelsDiv = this.attr_("labelsDiv");
1608 if (labelsDiv !== null) {
1609 labelsDiv.innerHTML = html;
1610 } else {
1611 if (typeof(this.shown_legend_error_) == 'undefined') {
1612 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1613 this.shown_legend_error_ = true;
1614 }
1615 }
1616};
1617
1618/**
1619 * Draw dots over the selectied points in the data series. This function
1620 * takes care of cleanup of previously-drawn dots.
1621 * @private
1622 */
1623Dygraph.prototype.updateSelection_ = function() {
1624 // Clear the previously drawn vertical, if there is one
1625 var i;
1626 var ctx = this.canvas_ctx_;
1627 if (this.previousVerticalX_ >= 0) {
1628 // Determine the maximum highlight circle size.
1629 var maxCircleSize = 0;
1630 var labels = this.attr_('labels');
1631 for (i = 1; i < labels.length; i++) {
1632 var r = this.attr_('highlightCircleSize', labels[i]);
1633 if (r > maxCircleSize) maxCircleSize = r;
1634 }
1635 var px = this.previousVerticalX_;
1636 ctx.clearRect(px - maxCircleSize - 1, 0,
1637 2 * maxCircleSize + 2, this.height_);
1638 }
1639
1640 if (this.isUsingExcanvas_ && this.currentZoomRectArgs_) {
1641 Dygraph.prototype.drawZoomRect_.apply(this, this.currentZoomRectArgs_);
1642 }
1643
1644 if (this.selPoints_.length > 0) {
1645 // Set the status message to indicate the selected point(s)
1646 if (this.attr_('showLabelsOnHighlight')) {
1647 this.setLegendHTML_(this.lastx_, this.selPoints_);
1648 }
1649
1650 // Draw colored circles over the center of each selected point
1651 var canvasx = this.selPoints_[0].canvasx;
1652 ctx.save();
1653 for (i = 0; i < this.selPoints_.length; i++) {
1654 var pt = this.selPoints_[i];
1655 if (!Dygraph.isOK(pt.canvasy)) continue;
1656
1657 var circleSize = this.attr_('highlightCircleSize', pt.name);
1658 ctx.beginPath();
1659 ctx.fillStyle = this.plotter_.colors[pt.name];
1660 ctx.arc(canvasx, pt.canvasy, circleSize, 0, 2 * Math.PI, false);
1661 ctx.fill();
1662 }
1663 ctx.restore();
1664
1665 this.previousVerticalX_ = canvasx;
1666 }
1667};
1668
1669/**
1670 * Manually set the selected points and display information about them in the
1671 * legend. The selection can be cleared using clearSelection() and queried
1672 * using getSelection().
1673 * @param { Integer } row number that should be highlighted (i.e. appear with
1674 * hover dots on the chart). Set to false to clear any selection.
1675 */
1676Dygraph.prototype.setSelection = function(row) {
1677 // Extract the points we've selected
1678 this.selPoints_ = [];
1679 var pos = 0;
1680
1681 if (row !== false) {
1682 row = row - this.boundaryIds_[0][0];
1683 }
1684
1685 if (row !== false && row >= 0) {
1686 for (var i in this.layout_.datasets) {
1687 if (row < this.layout_.datasets[i].length) {
1688 var point = this.layout_.points[pos+row];
1689
1690 if (this.attr_("stackedGraph")) {
1691 point = this.layout_.unstackPointAtIndex(pos+row);
1692 }
1693
1694 this.selPoints_.push(point);
1695 }
1696 pos += this.layout_.datasets[i].length;
1697 }
1698 }
1699
1700 if (this.selPoints_.length) {
1701 this.lastx_ = this.selPoints_[0].xval;
1702 this.updateSelection_();
1703 } else {
1704 this.clearSelection();
1705 }
1706
1707};
1708
1709/**
1710 * The mouse has left the canvas. Clear out whatever artifacts remain
1711 * @param {Object} event the mouseout event from the browser.
1712 * @private
1713 */
1714Dygraph.prototype.mouseOut_ = function(event) {
1715 if (this.attr_("unhighlightCallback")) {
1716 this.attr_("unhighlightCallback")(event);
1717 }
1718
1719 if (this.attr_("hideOverlayOnMouseOut")) {
1720 this.clearSelection();
1721 }
1722};
1723
1724/**
1725 * Clears the current selection (i.e. points that were highlighted by moving
1726 * the mouse over the chart).
1727 */
1728Dygraph.prototype.clearSelection = function() {
1729 // Get rid of the overlay data
1730 this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_);
1731 this.setLegendHTML_();
1732 this.selPoints_ = [];
1733 this.lastx_ = -1;
1734};
1735
1736/**
1737 * Returns the number of the currently selected row. To get data for this row,
1738 * you can use the getValue method.
1739 * @return { Integer } row number, or -1 if nothing is selected
1740 */
1741Dygraph.prototype.getSelection = function() {
1742 if (!this.selPoints_ || this.selPoints_.length < 1) {
1743 return -1;
1744 }
1745
1746 for (var row=0; row<this.layout_.points.length; row++ ) {
1747 if (this.layout_.points[row].x == this.selPoints_[0].x) {
1748 return row + this.boundaryIds_[0][0];
1749 }
1750 }
1751 return -1;
1752};
1753
1754/**
1755 * Fires when there's data available to be graphed.
1756 * @param {String} data Raw CSV data to be plotted
1757 * @private
1758 */
1759Dygraph.prototype.loadedEvent_ = function(data) {
1760 this.rawData_ = this.parseCSV_(data);
1761 this.predraw_();
1762};
1763
1764/**
1765 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1766 * @private
1767 */
1768Dygraph.prototype.addXTicks_ = function() {
1769 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1770 var range;
1771 if (this.dateWindow_) {
1772 range = [this.dateWindow_[0], this.dateWindow_[1]];
1773 } else {
1774 range = this.fullXRange_();
1775 }
1776
1777 var xAxisOptionsView = this.optionsViewForAxis_('x');
1778 var xTicks = xAxisOptionsView('ticker')(
1779 range[0],
1780 range[1],
1781 this.width_, // TODO(danvk): should be area.width
1782 xAxisOptionsView,
1783 this);
1784 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
1785 // console.log(msg);
1786 this.layout_.setXTicks(xTicks);
1787};
1788
1789/**
1790 * @private
1791 * Computes the range of the data series (including confidence intervals).
1792 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
1793 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1794 * @return [low, high]
1795 */
1796Dygraph.prototype.extremeValues_ = function(series) {
1797 var minY = null, maxY = null, j, y;
1798
1799 var bars = this.attr_("errorBars") || this.attr_("customBars");
1800 if (bars) {
1801 // With custom bars, maxY is the max of the high values.
1802 for (j = 0; j < series.length; j++) {
1803 y = series[j][1][0];
1804 if (!y) continue;
1805 var low = y - series[j][1][1];
1806 var high = y + series[j][1][2];
1807 if (low > y) low = y; // this can happen with custom bars,
1808 if (high < y) high = y; // e.g. in tests/custom-bars.html
1809 if (maxY === null || high > maxY) {
1810 maxY = high;
1811 }
1812 if (minY === null || low < minY) {
1813 minY = low;
1814 }
1815 }
1816 } else {
1817 for (j = 0; j < series.length; j++) {
1818 y = series[j][1];
1819 if (y === null || isNaN(y)) continue;
1820 if (maxY === null || y > maxY) {
1821 maxY = y;
1822 }
1823 if (minY === null || y < minY) {
1824 minY = y;
1825 }
1826 }
1827 }
1828
1829 return [minY, maxY];
1830};
1831
1832/**
1833 * @private
1834 * This function is called once when the chart's data is changed or the options
1835 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1836 * idea is that values derived from the chart's data can be computed here,
1837 * rather than every time the chart is drawn. This includes things like the
1838 * number of axes, rolling averages, etc.
1839 */
1840Dygraph.prototype.predraw_ = function() {
1841 var start = new Date();
1842
1843 // TODO(danvk): move more computations out of drawGraph_ and into here.
1844 this.computeYAxes_();
1845
1846 // Create a new plotter.
1847 if (this.plotter_) this.plotter_.clear();
1848 this.plotter_ = new DygraphCanvasRenderer(this,
1849 this.hidden_,
1850 this.hidden_ctx_,
1851 this.layout_);
1852
1853 // The roller sits in the bottom left corner of the chart. We don't know where
1854 // this will be until the options are available, so it's positioned here.
1855 this.createRollInterface_();
1856
1857 // Same thing applies for the labelsDiv. It's right edge should be flush with
1858 // the right edge of the charting area (which may not be the same as the right
1859 // edge of the div, if we have two y-axes.
1860 this.positionLabelsDiv_();
1861
1862 if (this.rangeSelector_) {
1863 this.rangeSelector_.renderStaticLayer();
1864 }
1865
1866 // Convert the raw data (a 2D array) into the internal format and compute
1867 // rolling averages.
1868 this.rolledSeries_ = [null]; // x-axis is the first series and it's special
1869 for (var i = 1; i < this.numColumns(); i++) {
1870 var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
1871 var logScale = this.attr_('logscale', i);
1872 var series = this.extractSeries_(this.rawData_, i, logScale, connectSeparatedPoints);
1873 series = this.rollingAverage(series, this.rollPeriod_);
1874 this.rolledSeries_.push(series);
1875 }
1876
1877 // If the data or options have changed, then we'd better redraw.
1878 this.drawGraph_();
1879
1880 // This is used to determine whether to do various animations.
1881 var end = new Date();
1882 this.drawingTimeMs_ = (end - start);
1883};
1884
1885/**
1886 * Loop over all fields and create datasets, calculating extreme y-values for
1887 * each series and extreme x-indices as we go.
1888 *
1889 * dateWindow is passed in as an explicit parameter so that we can compute
1890 * extreme values "speculatively", i.e. without actually setting state on the
1891 * dygraph.
1892 *
1893 * TODO(danvk): make this more of a true function
1894 * @return [ datasets, seriesExtremes, boundaryIds ]
1895 * @private
1896 */
1897Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
1898 var boundaryIds = [];
1899 var cumulative_y = []; // For stacked series.
1900 var datasets = [];
1901 var extremes = {}; // series name -> [low, high]
1902 var i, j, k;
1903
1904 // Loop over the fields (series). Go from the last to the first,
1905 // because if they're stacked that's how we accumulate the values.
1906 var num_series = rolledSeries.length - 1;
1907 for (i = num_series; i >= 1; i--) {
1908 if (!this.visibility()[i - 1]) continue;
1909
1910 // TODO(danvk): is this copy really necessary?
1911 var series = [];
1912 for (j = 0; j < rolledSeries[i].length; j++) {
1913 series.push(rolledSeries[i][j]);
1914 }
1915
1916 // Prune down to the desired range, if necessary (for zooming)
1917 // Because there can be lines going to points outside of the visible area,
1918 // we actually prune to visible points, plus one on either side.
1919 var bars = this.attr_("errorBars") || this.attr_("customBars");
1920 if (dateWindow) {
1921 var low = dateWindow[0];
1922 var high = dateWindow[1];
1923 var pruned = [];
1924 // TODO(danvk): do binary search instead of linear search.
1925 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1926 var firstIdx = null, lastIdx = null;
1927 for (k = 0; k < series.length; k++) {
1928 if (series[k][0] >= low && firstIdx === null) {
1929 firstIdx = k;
1930 }
1931 if (series[k][0] <= high) {
1932 lastIdx = k;
1933 }
1934 }
1935 if (firstIdx === null) firstIdx = 0;
1936 if (firstIdx > 0) firstIdx--;
1937 if (lastIdx === null) lastIdx = series.length - 1;
1938 if (lastIdx < series.length - 1) lastIdx++;
1939 boundaryIds[i-1] = [firstIdx, lastIdx];
1940 for (k = firstIdx; k <= lastIdx; k++) {
1941 pruned.push(series[k]);
1942 }
1943 series = pruned;
1944 } else {
1945 boundaryIds[i-1] = [0, series.length-1];
1946 }
1947
1948 var seriesExtremes = this.extremeValues_(series);
1949
1950 if (bars) {
1951 for (j=0; j<series.length; j++) {
1952 series[j] = [series[j][0],
1953 series[j][1][0],
1954 series[j][1][1],
1955 series[j][1][2]];
1956 }
1957 } else if (this.attr_("stackedGraph")) {
1958 var l = series.length;
1959 var actual_y;
1960 for (j = 0; j < l; j++) {
1961 // If one data set has a NaN, let all subsequent stacked
1962 // sets inherit the NaN -- only start at 0 for the first set.
1963 var x = series[j][0];
1964 if (cumulative_y[x] === undefined) {
1965 cumulative_y[x] = 0;
1966 }
1967
1968 actual_y = series[j][1];
1969 cumulative_y[x] += actual_y;
1970
1971 series[j] = [x, cumulative_y[x]];
1972
1973 if (cumulative_y[x] > seriesExtremes[1]) {
1974 seriesExtremes[1] = cumulative_y[x];
1975 }
1976 if (cumulative_y[x] < seriesExtremes[0]) {
1977 seriesExtremes[0] = cumulative_y[x];
1978 }
1979 }
1980 }
1981
1982 var seriesName = this.attr_("labels")[i];
1983 extremes[seriesName] = seriesExtremes;
1984 datasets[i] = series;
1985 }
1986
1987 return [ datasets, extremes, boundaryIds ];
1988};
1989
1990/**
1991 * Update the graph with new data. This method is called when the viewing area
1992 * has changed. If the underlying data or options have changed, predraw_ will
1993 * be called before drawGraph_ is called.
1994 *
1995 * clearSelection, when undefined or true, causes this.clearSelection to be
1996 * called at the end of the draw operation. This should rarely be defined,
1997 * and never true (that is it should be undefined most of the time, and
1998 * rarely false.)
1999 *
2000 * @private
2001 */
2002Dygraph.prototype.drawGraph_ = function(clearSelection) {
2003 var start = new Date();
2004
2005 if (typeof(clearSelection) === 'undefined') {
2006 clearSelection = true;
2007 }
2008
2009 // This is used to set the second parameter to drawCallback, below.
2010 var is_initial_draw = this.is_initial_draw_;
2011 this.is_initial_draw_ = false;
2012
2013 this.layout_.removeAllDatasets();
2014 this.setColors_();
2015 this.attrs_.pointSize = 0.5 * this.attr_('highlightCircleSize');
2016
2017 var packed = this.gatherDatasets_(this.rolledSeries_, this.dateWindow_);
2018 var datasets = packed[0];
2019 var extremes = packed[1];
2020 this.boundaryIds_ = packed[2];
2021
2022 for (var i = 1; i < datasets.length; i++) {
2023 if (!this.visibility()[i - 1]) continue;
2024 this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
2025 }
2026
2027 this.computeYAxisRanges_(extremes);
2028 this.layout_.setYAxes(this.axes_);
2029
2030 this.addXTicks_();
2031
2032 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2033 var tmp_zoomed_x = this.zoomed_x_;
2034 // Tell PlotKit to use this new data and render itself
2035 this.layout_.setDateWindow(this.dateWindow_);
2036 this.zoomed_x_ = tmp_zoomed_x;
2037 this.layout_.evaluateWithError();
2038 this.renderGraph_(is_initial_draw, false);
2039
2040 if (this.attr_("timingName")) {
2041 var end = new Date();
2042 if (console) {
2043 console.log(this.attr_("timingName") + " - drawGraph: " + (end - start) + "ms");
2044 }
2045 }
2046};
2047
2048Dygraph.prototype.renderGraph_ = function(is_initial_draw, clearSelection) {
2049 this.plotter_.clear();
2050 this.plotter_.render();
2051 this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
2052 this.canvas_.height);
2053
2054 // Generate a static legend before any particular point is selected.
2055 this.setLegendHTML_();
2056
2057 if (!is_initial_draw) {
2058 if (clearSelection) {
2059 if (typeof(this.selPoints_) !== 'undefined' && this.selPoints_.length) {
2060 // We should select the point nearest the page x/y here, but it's easier
2061 // to just clear the selection. This prevents erroneous hover dots from
2062 // being displayed.
2063 this.clearSelection();
2064 } else {
2065 this.clearSelection();
2066 }
2067 }
2068 }
2069
2070 if (this.rangeSelector_) {
2071 this.rangeSelector_.renderInteractiveLayer();
2072 }
2073
2074 if (this.attr_("drawCallback") !== null) {
2075 this.attr_("drawCallback")(this, is_initial_draw);
2076 }
2077};
2078
2079/**
2080 * @private
2081 * Determine properties of the y-axes which are independent of the data
2082 * currently being displayed. This includes things like the number of axes and
2083 * the style of the axes. It does not include the range of each axis and its
2084 * tick marks.
2085 * This fills in this.axes_ and this.seriesToAxisMap_.
2086 * axes_ = [ { options } ]
2087 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2088 * indices are into the axes_ array.
2089 */
2090Dygraph.prototype.computeYAxes_ = function() {
2091 // Preserve valueWindow settings if they exist, and if the user hasn't
2092 // specified a new valueRange.
2093 var i, valueWindows, seriesName, axis, index;
2094 if (this.axes_ !== undefined && this.user_attrs_.hasOwnProperty("valueRange") === false) {
2095 valueWindows = [];
2096 for (index = 0; index < this.axes_.length; index++) {
2097 valueWindows.push(this.axes_[index].valueWindow);
2098 }
2099 }
2100
2101 this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis.
2102 this.seriesToAxisMap_ = {};
2103
2104 // Get a list of series names.
2105 var labels = this.attr_("labels");
2106 var series = {};
2107 for (i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
2108
2109 // all options which could be applied per-axis:
2110 var axisOptions = [
2111 'includeZero',
2112 'valueRange',
2113 'labelsKMB',
2114 'labelsKMG2',
2115 'pixelsPerYLabel',
2116 'yAxisLabelWidth',
2117 'axisLabelFontSize',
2118 'axisTickSize',
2119 'logscale'
2120 ];
2121
2122 // Copy global axis options over to the first axis.
2123 for (i = 0; i < axisOptions.length; i++) {
2124 var k = axisOptions[i];
2125 var v = this.attr_(k);
2126 if (v) this.axes_[0][k] = v;
2127 }
2128
2129 // Go through once and add all the axes.
2130 for (seriesName in series) {
2131 if (!series.hasOwnProperty(seriesName)) continue;
2132 axis = this.attr_("axis", seriesName);
2133 if (axis === null) {
2134 this.seriesToAxisMap_[seriesName] = 0;
2135 continue;
2136 }
2137 if (typeof(axis) == 'object') {
2138 // Add a new axis, making a copy of its per-axis options.
2139 var opts = {};
2140 Dygraph.update(opts, this.axes_[0]);
2141 Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this.
2142 var yAxisId = this.axes_.length;
2143 opts.yAxisId = yAxisId;
2144 opts.g = this;
2145 Dygraph.update(opts, axis);
2146 this.axes_.push(opts);
2147 this.seriesToAxisMap_[seriesName] = yAxisId;
2148 }
2149 }
2150
2151 // Go through one more time and assign series to an axis defined by another
2152 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2153 for (seriesName in series) {
2154 if (!series.hasOwnProperty(seriesName)) continue;
2155 axis = this.attr_("axis", seriesName);
2156 if (typeof(axis) == 'string') {
2157 if (!this.seriesToAxisMap_.hasOwnProperty(axis)) {
2158 this.error("Series " + seriesName + " wants to share a y-axis with " +
2159 "series " + axis + ", which does not define its own axis.");
2160 return null;
2161 }
2162 var idx = this.seriesToAxisMap_[axis];
2163 this.seriesToAxisMap_[seriesName] = idx;
2164 }
2165 }
2166
2167 if (valueWindows !== undefined) {
2168 // Restore valueWindow settings.
2169 for (index = 0; index < valueWindows.length; index++) {
2170 this.axes_[index].valueWindow = valueWindows[index];
2171 }
2172 }
2173};
2174
2175/**
2176 * Returns the number of y-axes on the chart.
2177 * @return {Number} the number of axes.
2178 */
2179Dygraph.prototype.numAxes = function() {
2180 var last_axis = 0;
2181 for (var series in this.seriesToAxisMap_) {
2182 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2183 var idx = this.seriesToAxisMap_[series];
2184 if (idx > last_axis) last_axis = idx;
2185 }
2186 return 1 + last_axis;
2187};
2188
2189/**
2190 * @private
2191 * Returns axis properties for the given series.
2192 * @param { String } setName The name of the series for which to get axis
2193 * properties, e.g. 'Y1'.
2194 * @return { Object } The axis properties.
2195 */
2196Dygraph.prototype.axisPropertiesForSeries = function(series) {
2197 // TODO(danvk): handle errors.
2198 return this.axes_[this.seriesToAxisMap_[series]];
2199};
2200
2201/**
2202 * @private
2203 * Determine the value range and tick marks for each axis.
2204 * @param {Object} extremes A mapping from seriesName -> [low, high]
2205 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2206 */
2207Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
2208 // Build a map from axis number -> [list of series names]
2209 var seriesForAxis = [], series;
2210 for (series in this.seriesToAxisMap_) {
2211 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2212 var idx = this.seriesToAxisMap_[series];
2213 while (seriesForAxis.length <= idx) seriesForAxis.push([]);
2214 seriesForAxis[idx].push(series);
2215 }
2216
2217 // Compute extreme values, a span and tick marks for each axis.
2218 for (var i = 0; i < this.axes_.length; i++) {
2219 var axis = this.axes_[i];
2220
2221 if (!seriesForAxis[i]) {
2222 // If no series are defined or visible then use a reasonable default
2223 axis.extremeRange = [0, 1];
2224 } else {
2225 // Calculate the extremes of extremes.
2226 series = seriesForAxis[i];
2227 var minY = Infinity; // extremes[series[0]][0];
2228 var maxY = -Infinity; // extremes[series[0]][1];
2229 var extremeMinY, extremeMaxY;
2230
2231 for (var j = 0; j < series.length; j++) {
2232 // this skips invisible series
2233 if (!extremes.hasOwnProperty(series[j])) continue;
2234
2235 // Only use valid extremes to stop null data series' from corrupting the scale.
2236 extremeMinY = extremes[series[j]][0];
2237 if (extremeMinY !== null) {
2238 minY = Math.min(extremeMinY, minY);
2239 }
2240 extremeMaxY = extremes[series[j]][1];
2241 if (extremeMaxY !== null) {
2242 maxY = Math.max(extremeMaxY, maxY);
2243 }
2244 }
2245 if (axis.includeZero && minY > 0) minY = 0;
2246
2247 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2248 if (minY == Infinity) minY = 0;
2249 if (maxY == -Infinity) maxY = 1;
2250
2251 // Add some padding and round up to an integer to be human-friendly.
2252 var span = maxY - minY;
2253 // special case: if we have no sense of scale, use +/-10% of the sole value.
2254 if (span === 0) { span = maxY; }
2255
2256 var maxAxisY, minAxisY;
2257 if (axis.logscale) {
2258 maxAxisY = maxY + 0.1 * span;
2259 minAxisY = minY;
2260 } else {
2261 maxAxisY = maxY + 0.1 * span;
2262 minAxisY = minY - 0.1 * span;
2263
2264 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2265 if (!this.attr_("avoidMinZero")) {
2266 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
2267 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
2268 }
2269
2270 if (this.attr_("includeZero")) {
2271 if (maxY < 0) maxAxisY = 0;
2272 if (minY > 0) minAxisY = 0;
2273 }
2274 }
2275 axis.extremeRange = [minAxisY, maxAxisY];
2276 }
2277 if (axis.valueWindow) {
2278 // This is only set if the user has zoomed on the y-axis. It is never set
2279 // by a user. It takes precedence over axis.valueRange because, if you set
2280 // valueRange, you'd still expect to be able to pan.
2281 axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
2282 } else if (axis.valueRange) {
2283 // This is a user-set value range for this axis.
2284 axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]];
2285 } else {
2286 axis.computedValueRange = axis.extremeRange;
2287 }
2288
2289 // Add ticks. By default, all axes inherit the tick positions of the
2290 // primary axis. However, if an axis is specifically marked as having
2291 // independent ticks, then that is permissible as well.
2292 var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
2293 var ticker = opts('ticker');
2294 if (i === 0 || axis.independentTicks) {
2295 axis.ticks = ticker(axis.computedValueRange[0],
2296 axis.computedValueRange[1],
2297 this.height_, // TODO(danvk): should be area.height
2298 opts,
2299 this);
2300 } else {
2301 var p_axis = this.axes_[0];
2302 var p_ticks = p_axis.ticks;
2303 var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
2304 var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
2305 var tick_values = [];
2306 for (var k = 0; k < p_ticks.length; k++) {
2307 var y_frac = (p_ticks[k].v - p_axis.computedValueRange[0]) / p_scale;
2308 var y_val = axis.computedValueRange[0] + y_frac * scale;
2309 tick_values.push(y_val);
2310 }
2311
2312 axis.ticks = ticker(axis.computedValueRange[0],
2313 axis.computedValueRange[1],
2314 this.height_, // TODO(danvk): should be area.height
2315 opts,
2316 this,
2317 tick_values);
2318 }
2319 }
2320};
2321
2322/**
2323 * Extracts one series from the raw data (a 2D array) into an array of (date,
2324 * value) tuples.
2325 *
2326 * This is where undesirable points (i.e. negative values on log scales and
2327 * missing values through which we wish to connect lines) are dropped.
2328 *
2329 * @private
2330 */
2331Dygraph.prototype.extractSeries_ = function(rawData, i, logScale, connectSeparatedPoints) {
2332 var series = [];
2333 for (var j = 0; j < rawData.length; j++) {
2334 var x = rawData[j][0];
2335 var point = rawData[j][i];
2336 if (logScale) {
2337 // On the log scale, points less than zero do not exist.
2338 // This will create a gap in the chart. Note that this ignores
2339 // connectSeparatedPoints.
2340 if (point <= 0) {
2341 point = null;
2342 }
2343 series.push([x, point]);
2344 } else {
2345 if (point !== null || !connectSeparatedPoints) {
2346 series.push([x, point]);
2347 }
2348 }
2349 }
2350 return series;
2351};
2352
2353/**
2354 * @private
2355 * Calculates the rolling average of a data set.
2356 * If originalData is [label, val], rolls the average of those.
2357 * If originalData is [label, [, it's interpreted as [value, stddev]
2358 * and the roll is returned in the same form, with appropriately reduced
2359 * stddev for each value.
2360 * Note that this is where fractional input (i.e. '5/10') is converted into
2361 * decimal values.
2362 * @param {Array} originalData The data in the appropriate format (see above)
2363 * @param {Number} rollPeriod The number of points over which to average the
2364 * data
2365 */
2366Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
2367 if (originalData.length < 2)
2368 return originalData;
2369 rollPeriod = Math.min(rollPeriod, originalData.length);
2370 var rollingData = [];
2371 var sigma = this.attr_("sigma");
2372
2373 var low, high, i, j, y, sum, num_ok, stddev;
2374 if (this.fractions_) {
2375 var num = 0;
2376 var den = 0; // numerator/denominator
2377 var mult = 100.0;
2378 for (i = 0; i < originalData.length; i++) {
2379 num += originalData[i][1][0];
2380 den += originalData[i][1][1];
2381 if (i - rollPeriod >= 0) {
2382 num -= originalData[i - rollPeriod][1][0];
2383 den -= originalData[i - rollPeriod][1][1];
2384 }
2385
2386 var date = originalData[i][0];
2387 var value = den ? num / den : 0.0;
2388 if (this.attr_("errorBars")) {
2389 if (this.attr_("wilsonInterval")) {
2390 // For more details on this confidence interval, see:
2391 // http://en.wikipedia.org/wiki/Binomial_confidence_interval
2392 if (den) {
2393 var p = value < 0 ? 0 : value, n = den;
2394 var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
2395 var denom = 1 + sigma * sigma / den;
2396 low = (p + sigma * sigma / (2 * den) - pm) / denom;
2397 high = (p + sigma * sigma / (2 * den) + pm) / denom;
2398 rollingData[i] = [date,
2399 [p * mult, (p - low) * mult, (high - p) * mult]];
2400 } else {
2401 rollingData[i] = [date, [0, 0, 0]];
2402 }
2403 } else {
2404 stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
2405 rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
2406 }
2407 } else {
2408 rollingData[i] = [date, mult * value];
2409 }
2410 }
2411 } else if (this.attr_("customBars")) {
2412 low = 0;
2413 var mid = 0;
2414 high = 0;
2415 var count = 0;
2416 for (i = 0; i < originalData.length; i++) {
2417 var data = originalData[i][1];
2418 y = data[1];
2419 rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
2420
2421 if (y !== null && !isNaN(y)) {
2422 low += data[0];
2423 mid += y;
2424 high += data[2];
2425 count += 1;
2426 }
2427 if (i - rollPeriod >= 0) {
2428 var prev = originalData[i - rollPeriod];
2429 if (prev[1][1] !== null && !isNaN(prev[1][1])) {
2430 low -= prev[1][0];
2431 mid -= prev[1][1];
2432 high -= prev[1][2];
2433 count -= 1;
2434 }
2435 }
2436 if (count) {
2437 rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
2438 1.0 * (mid - low) / count,
2439 1.0 * (high - mid) / count ]];
2440 } else {
2441 rollingData[i] = [originalData[i][0], [null, null, null]];
2442 }
2443 }
2444 } else {
2445 // Calculate the rolling average for the first rollPeriod - 1 points where
2446 // there is not enough data to roll over the full number of points
2447 if (!this.attr_("errorBars")){
2448 if (rollPeriod == 1) {
2449 return originalData;
2450 }
2451
2452 for (i = 0; i < originalData.length; i++) {
2453 sum = 0;
2454 num_ok = 0;
2455 for (j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
2456 y = originalData[j][1];
2457 if (y === null || isNaN(y)) continue;
2458 num_ok++;
2459 sum += originalData[j][1];
2460 }
2461 if (num_ok) {
2462 rollingData[i] = [originalData[i][0], sum / num_ok];
2463 } else {
2464 rollingData[i] = [originalData[i][0], null];
2465 }
2466 }
2467
2468 } else {
2469 for (i = 0; i < originalData.length; i++) {
2470 sum = 0;
2471 var variance = 0;
2472 num_ok = 0;
2473 for (j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
2474 y = originalData[j][1][0];
2475 if (y === null || isNaN(y)) continue;
2476 num_ok++;
2477 sum += originalData[j][1][0];
2478 variance += Math.pow(originalData[j][1][1], 2);
2479 }
2480 if (num_ok) {
2481 stddev = Math.sqrt(variance) / num_ok;
2482 rollingData[i] = [originalData[i][0],
2483 [sum / num_ok, sigma * stddev, sigma * stddev]];
2484 } else {
2485 rollingData[i] = [originalData[i][0], [null, null, null]];
2486 }
2487 }
2488 }
2489 }
2490
2491 return rollingData;
2492};
2493
2494/**
2495 * Detects the type of the str (date or numeric) and sets the various
2496 * formatting attributes in this.attrs_ based on this type.
2497 * @param {String} str An x value.
2498 * @private
2499 */
2500Dygraph.prototype.detectTypeFromString_ = function(str) {
2501 var isDate = false;
2502 var dashPos = str.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2503 if ((dashPos > 0 && (str[dashPos-1] != 'e' && str[dashPos-1] != 'E')) ||
2504 str.indexOf('/') >= 0 ||
2505 isNaN(parseFloat(str))) {
2506 isDate = true;
2507 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
2508 // TODO(danvk): remove support for this format.
2509 isDate = true;
2510 }
2511
2512 if (isDate) {
2513 this.attrs_.xValueParser = Dygraph.dateParser;
2514 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
2515 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
2516 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
2517 } else {
2518 /** @private (shut up, jsdoc!) */
2519 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
2520 // TODO(danvk): use Dygraph.numberValueFormatter here?
2521 /** @private (shut up, jsdoc!) */
2522 this.attrs_.axes.x.valueFormatter = function(x) { return x; };
2523 this.attrs_.axes.x.ticker = Dygraph.numericTicks;
2524 this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
2525 }
2526};
2527
2528/**
2529 * Parses the value as a floating point number. This is like the parseFloat()
2530 * built-in, but with a few differences:
2531 * - the empty string is parsed as null, rather than NaN.
2532 * - if the string cannot be parsed at all, an error is logged.
2533 * If the string can't be parsed, this method returns null.
2534 * @param {String} x The string to be parsed
2535 * @param {Number} opt_line_no The line number from which the string comes.
2536 * @param {String} opt_line The text of the line from which the string comes.
2537 * @private
2538 */
2539
2540// Parse the x as a float or return null if it's not a number.
2541Dygraph.prototype.parseFloat_ = function(x, opt_line_no, opt_line) {
2542 var val = parseFloat(x);
2543 if (!isNaN(val)) return val;
2544
2545 // Try to figure out what happeend.
2546 // If the value is the empty string, parse it as null.
2547 if (/^ *$/.test(x)) return null;
2548
2549 // If it was actually "NaN", return it as NaN.
2550 if (/^ *nan *$/i.test(x)) return NaN;
2551
2552 // Looks like a parsing error.
2553 var msg = "Unable to parse '" + x + "' as a number";
2554 if (opt_line !== null && opt_line_no !== null) {
2555 msg += " on line " + (1+opt_line_no) + " ('" + opt_line + "') of CSV.";
2556 }
2557 this.error(msg);
2558
2559 return null;
2560};
2561
2562/**
2563 * @private
2564 * Parses a string in a special csv format. We expect a csv file where each
2565 * line is a date point, and the first field in each line is the date string.
2566 * We also expect that all remaining fields represent series.
2567 * if the errorBars attribute is set, then interpret the fields as:
2568 * date, series1, stddev1, series2, stddev2, ...
2569 * @param {[Object]} data See above.
2570 *
2571 * @return [Object] An array with one entry for each row. These entries
2572 * are an array of cells in that row. The first entry is the parsed x-value for
2573 * the row. The second, third, etc. are the y-values. These can take on one of
2574 * three forms, depending on the CSV and constructor parameters:
2575 * 1. numeric value
2576 * 2. [ value, stddev ]
2577 * 3. [ low value, center value, high value ]
2578 */
2579Dygraph.prototype.parseCSV_ = function(data) {
2580 var ret = [];
2581 var lines = data.split("\n");
2582 var vals, j;
2583
2584 // Use the default delimiter or fall back to a tab if that makes sense.
2585 var delim = this.attr_('delimiter');
2586 if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
2587 delim = '\t';
2588 }
2589
2590 var start = 0;
2591 if (!('labels' in this.user_attrs_)) {
2592 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2593 start = 1;
2594 this.attrs_.labels = lines[0].split(delim); // NOTE: _not_ user_attrs_.
2595 }
2596 var line_no = 0;
2597
2598 var xParser;
2599 var defaultParserSet = false; // attempt to auto-detect x value type
2600 var expectedCols = this.attr_("labels").length;
2601 var outOfOrder = false;
2602 for (var i = start; i < lines.length; i++) {
2603 var line = lines[i];
2604 line_no = i;
2605 if (line.length === 0) continue; // skip blank lines
2606 if (line[0] == '#') continue; // skip comment lines
2607 var inFields = line.split(delim);
2608 if (inFields.length < 2) continue;
2609
2610 var fields = [];
2611 if (!defaultParserSet) {
2612 this.detectTypeFromString_(inFields[0]);
2613 xParser = this.attr_("xValueParser");
2614 defaultParserSet = true;
2615 }
2616 fields[0] = xParser(inFields[0], this);
2617
2618 // If fractions are expected, parse the numbers as "A/B"
2619 if (this.fractions_) {
2620 for (j = 1; j < inFields.length; j++) {
2621 // TODO(danvk): figure out an appropriate way to flag parse errors.
2622 vals = inFields[j].split("/");
2623 if (vals.length != 2) {
2624 this.error('Expected fractional "num/den" values in CSV data ' +
2625 "but found a value '" + inFields[j] + "' on line " +
2626 (1 + i) + " ('" + line + "') which is not of this form.");
2627 fields[j] = [0, 0];
2628 } else {
2629 fields[j] = [this.parseFloat_(vals[0], i, line),
2630 this.parseFloat_(vals[1], i, line)];
2631 }
2632 }
2633 } else if (this.attr_("errorBars")) {
2634 // If there are error bars, values are (value, stddev) pairs
2635 if (inFields.length % 2 != 1) {
2636 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
2637 'but line ' + (1 + i) + ' has an odd number of values (' +
2638 (inFields.length - 1) + "): '" + line + "'");
2639 }
2640 for (j = 1; j < inFields.length; j += 2) {
2641 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
2642 this.parseFloat_(inFields[j + 1], i, line)];
2643 }
2644 } else if (this.attr_("customBars")) {
2645 // Bars are a low;center;high tuple
2646 for (j = 1; j < inFields.length; j++) {
2647 var val = inFields[j];
2648 if (/^ *$/.test(val)) {
2649 fields[j] = [null, null, null];
2650 } else {
2651 vals = val.split(";");
2652 if (vals.length == 3) {
2653 fields[j] = [ this.parseFloat_(vals[0], i, line),
2654 this.parseFloat_(vals[1], i, line),
2655 this.parseFloat_(vals[2], i, line) ];
2656 } else {
2657 this.warn('When using customBars, values must be either blank ' +
2658 'or "low;center;high" tuples (got "' + val +
2659 '" on line ' + (1+i));
2660 }
2661 }
2662 }
2663 } else {
2664 // Values are just numbers
2665 for (j = 1; j < inFields.length; j++) {
2666 fields[j] = this.parseFloat_(inFields[j], i, line);
2667 }
2668 }
2669 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2670 outOfOrder = true;
2671 }
2672
2673 if (fields.length != expectedCols) {
2674 this.error("Number of columns in line " + i + " (" + fields.length +
2675 ") does not agree with number of labels (" + expectedCols +
2676 ") " + line);
2677 }
2678
2679 // If the user specified the 'labels' option and none of the cells of the
2680 // first row parsed correctly, then they probably double-specified the
2681 // labels. We go with the values set in the option, discard this row and
2682 // log a warning to the JS console.
2683 if (i === 0 && this.attr_('labels')) {
2684 var all_null = true;
2685 for (j = 0; all_null && j < fields.length; j++) {
2686 if (fields[j]) all_null = false;
2687 }
2688 if (all_null) {
2689 this.warn("The dygraphs 'labels' option is set, but the first row of " +
2690 "CSV data ('" + line + "') appears to also contain labels. " +
2691 "Will drop the CSV labels and use the option labels.");
2692 continue;
2693 }
2694 }
2695 ret.push(fields);
2696 }
2697
2698 if (outOfOrder) {
2699 this.warn("CSV is out of order; order it correctly to speed loading.");
2700 ret.sort(function(a,b) { return a[0] - b[0]; });
2701 }
2702
2703 return ret;
2704};
2705
2706/**
2707 * @private
2708 * The user has provided their data as a pre-packaged JS array. If the x values
2709 * are numeric, this is the same as dygraphs' internal format. If the x values
2710 * are dates, we need to convert them from Date objects to ms since epoch.
2711 * @param {[Object]} data
2712 * @return {[Object]} data with numeric x values.
2713 */
2714Dygraph.prototype.parseArray_ = function(data) {
2715 // Peek at the first x value to see if it's numeric.
2716 if (data.length === 0) {
2717 this.error("Can't plot empty data set");
2718 return null;
2719 }
2720 if (data[0].length === 0) {
2721 this.error("Data set cannot contain an empty row");
2722 return null;
2723 }
2724
2725 var i;
2726 if (this.attr_("labels") === null) {
2727 this.warn("Using default labels. Set labels explicitly via 'labels' " +
2728 "in the options parameter");
2729 this.attrs_.labels = [ "X" ];
2730 for (i = 1; i < data[0].length; i++) {
2731 this.attrs_.labels.push("Y" + i);
2732 }
2733 }
2734
2735 if (Dygraph.isDateLike(data[0][0])) {
2736 // Some intelligent defaults for a date x-axis.
2737 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
2738 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
2739 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
2740
2741 // Assume they're all dates.
2742 var parsedData = Dygraph.clone(data);
2743 for (i = 0; i < data.length; i++) {
2744 if (parsedData[i].length === 0) {
2745 this.error("Row " + (1 + i) + " of data is empty");
2746 return null;
2747 }
2748 if (parsedData[i][0] === null ||
2749 typeof(parsedData[i][0].getTime) != 'function' ||
2750 isNaN(parsedData[i][0].getTime())) {
2751 this.error("x value in row " + (1 + i) + " is not a Date");
2752 return null;
2753 }
2754 parsedData[i][0] = parsedData[i][0].getTime();
2755 }
2756 return parsedData;
2757 } else {
2758 // Some intelligent defaults for a numeric x-axis.
2759 /** @private (shut up, jsdoc!) */
2760 this.attrs_.axes.x.valueFormatter = function(x) { return x; };
2761 this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter;
2762 this.attrs_.axes.x.ticker = Dygraph.numericTicks;
2763 return data;
2764 }
2765};
2766
2767/**
2768 * Parses a DataTable object from gviz.
2769 * The data is expected to have a first column that is either a date or a
2770 * number. All subsequent columns must be numbers. If there is a clear mismatch
2771 * between this.xValueParser_ and the type of the first column, it will be
2772 * fixed. Fills out rawData_.
2773 * @param {[Object]} data See above.
2774 * @private
2775 */
2776Dygraph.prototype.parseDataTable_ = function(data) {
2777 var cols = data.getNumberOfColumns();
2778 var rows = data.getNumberOfRows();
2779
2780 var indepType = data.getColumnType(0);
2781 if (indepType == 'date' || indepType == 'datetime') {
2782 this.attrs_.xValueParser = Dygraph.dateParser;
2783 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
2784 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
2785 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
2786 } else if (indepType == 'number') {
2787 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
2788 this.attrs_.axes.x.valueFormatter = function(x) { return x; };
2789 this.attrs_.axes.x.ticker = Dygraph.numericTicks;
2790 this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
2791 } else {
2792 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2793 "column 1 of DataTable input (Got '" + indepType + "')");
2794 return null;
2795 }
2796
2797 // Array of the column indices which contain data (and not annotations).
2798 var colIdx = [];
2799 var annotationCols = {}; // data index -> [annotation cols]
2800 var hasAnnotations = false;
2801 var i, j;
2802 for (i = 1; i < cols; i++) {
2803 var type = data.getColumnType(i);
2804 if (type == 'number') {
2805 colIdx.push(i);
2806 } else if (type == 'string' && this.attr_('displayAnnotations')) {
2807 // This is OK -- it's an annotation column.
2808 var dataIdx = colIdx[colIdx.length - 1];
2809 if (!annotationCols.hasOwnProperty(dataIdx)) {
2810 annotationCols[dataIdx] = [i];
2811 } else {
2812 annotationCols[dataIdx].push(i);
2813 }
2814 hasAnnotations = true;
2815 } else {
2816 this.error("Only 'number' is supported as a dependent type with Gviz." +
2817 " 'string' is only supported if displayAnnotations is true");
2818 }
2819 }
2820
2821 // Read column labels
2822 // TODO(danvk): add support back for errorBars
2823 var labels = [data.getColumnLabel(0)];
2824 for (i = 0; i < colIdx.length; i++) {
2825 labels.push(data.getColumnLabel(colIdx[i]));
2826 if (this.attr_("errorBars")) i += 1;
2827 }
2828 this.attrs_.labels = labels;
2829 cols = labels.length;
2830
2831 var ret = [];
2832 var outOfOrder = false;
2833 var annotations = [];
2834 for (i = 0; i < rows; i++) {
2835 var row = [];
2836 if (typeof(data.getValue(i, 0)) === 'undefined' ||
2837 data.getValue(i, 0) === null) {
2838 this.warn("Ignoring row " + i +
2839 " of DataTable because of undefined or null first column.");
2840 continue;
2841 }
2842
2843 if (indepType == 'date' || indepType == 'datetime') {
2844 row.push(data.getValue(i, 0).getTime());
2845 } else {
2846 row.push(data.getValue(i, 0));
2847 }
2848 if (!this.attr_("errorBars")) {
2849 for (j = 0; j < colIdx.length; j++) {
2850 var col = colIdx[j];
2851 row.push(data.getValue(i, col));
2852 if (hasAnnotations &&
2853 annotationCols.hasOwnProperty(col) &&
2854 data.getValue(i, annotationCols[col][0]) !== null) {
2855 var ann = {};
2856 ann.series = data.getColumnLabel(col);
2857 ann.xval = row[0];
2858 ann.shortText = String.fromCharCode(65 /* A */ + annotations.length);
2859 ann.text = '';
2860 for (var k = 0; k < annotationCols[col].length; k++) {
2861 if (k) ann.text += "\n";
2862 ann.text += data.getValue(i, annotationCols[col][k]);
2863 }
2864 annotations.push(ann);
2865 }
2866 }
2867
2868 // Strip out infinities, which give dygraphs problems later on.
2869 for (j = 0; j < row.length; j++) {
2870 if (!isFinite(row[j])) row[j] = null;
2871 }
2872 } else {
2873 for (j = 0; j < cols - 1; j++) {
2874 row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
2875 }
2876 }
2877 if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
2878 outOfOrder = true;
2879 }
2880 ret.push(row);
2881 }
2882
2883 if (outOfOrder) {
2884 this.warn("DataTable is out of order; order it correctly to speed loading.");
2885 ret.sort(function(a,b) { return a[0] - b[0]; });
2886 }
2887 this.rawData_ = ret;
2888
2889 if (annotations.length > 0) {
2890 this.setAnnotations(annotations, true);
2891 }
2892};
2893
2894/**
2895 * Get the CSV data. If it's in a function, call that function. If it's in a
2896 * file, do an XMLHttpRequest to get it.
2897 * @private
2898 */
2899Dygraph.prototype.start_ = function() {
2900 var data = this.file_;
2901
2902 // Functions can return references of all other types.
2903 if (typeof data == 'function') {
2904 data = data();
2905 }
2906
2907 if (Dygraph.isArrayLike(data)) {
2908 this.rawData_ = this.parseArray_(data);
2909 this.predraw_();
2910 } else if (typeof data == 'object' &&
2911 typeof data.getColumnRange == 'function') {
2912 // must be a DataTable from gviz.
2913 this.parseDataTable_(data);
2914 this.predraw_();
2915 } else if (typeof data == 'string') {
2916 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2917 if (data.indexOf('\n') >= 0) {
2918 this.loadedEvent_(data);
2919 } else {
2920 var req = new XMLHttpRequest();
2921 var caller = this;
2922 req.onreadystatechange = function () {
2923 if (req.readyState == 4) {
2924 if (req.status === 200 || // Normal http
2925 req.status === 0) { // Chrome w/ --allow-file-access-from-files
2926 caller.loadedEvent_(req.responseText);
2927 }
2928 }
2929 };
2930
2931 req.open("GET", data, true);
2932 req.send(null);
2933 }
2934 } else {
2935 this.error("Unknown data format: " + (typeof data));
2936 }
2937};
2938
2939/**
2940 * Changes various properties of the graph. These can include:
2941 * <ul>
2942 * <li>file: changes the source data for the graph</li>
2943 * <li>errorBars: changes whether the data contains stddev</li>
2944 * </ul>
2945 *
2946 * There's a huge variety of options that can be passed to this method. For a
2947 * full list, see http://dygraphs.com/options.html.
2948 *
2949 * @param {Object} attrs The new properties and values
2950 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
2951 * call to updateOptions(). If you know better, you can pass true to explicitly
2952 * block the redraw. This can be useful for chaining updateOptions() calls,
2953 * avoiding the occasional infinite loop and preventing redraws when it's not
2954 * necessary (e.g. when updating a callback).
2955 */
2956Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) {
2957 if (typeof(block_redraw) == 'undefined') block_redraw = false;
2958
2959 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
2960 var file = input_attrs.file;
2961 var attrs = Dygraph.mapLegacyOptions_(input_attrs);
2962
2963 // TODO(danvk): this is a mess. Move these options into attr_.
2964 if ('rollPeriod' in attrs) {
2965 this.rollPeriod_ = attrs.rollPeriod;
2966 }
2967 if ('dateWindow' in attrs) {
2968 this.dateWindow_ = attrs.dateWindow;
2969 if (!('isZoomedIgnoreProgrammaticZoom' in attrs)) {
2970 this.zoomed_x_ = (attrs.dateWindow !== null);
2971 }
2972 }
2973 if ('valueRange' in attrs && !('isZoomedIgnoreProgrammaticZoom' in attrs)) {
2974 this.zoomed_y_ = (attrs.valueRange !== null);
2975 }
2976
2977 // TODO(danvk): validate per-series options.
2978 // Supported:
2979 // strokeWidth
2980 // pointSize
2981 // drawPoints
2982 // highlightCircleSize
2983
2984 // Check if this set options will require new points.
2985 var requiresNewPoints = Dygraph.isPixelChangingOptionList(this.attr_("labels"), attrs);
2986
2987 Dygraph.updateDeep(this.user_attrs_, attrs);
2988
2989 if (file) {
2990 this.file_ = file;
2991 if (!block_redraw) this.start_();
2992 } else {
2993 if (!block_redraw) {
2994 if (requiresNewPoints) {
2995 this.predraw_();
2996 } else {
2997 this.renderGraph_(false, false);
2998 }
2999 }
3000 }
3001};
3002
3003/**
3004 * Returns a copy of the options with deprecated names converted into current
3005 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3006 * interested in that, they should save a copy before calling this.
3007 * @private
3008 */
3009Dygraph.mapLegacyOptions_ = function(attrs) {
3010 var my_attrs = {};
3011 for (var k in attrs) {
3012 if (k == 'file') continue;
3013 if (attrs.hasOwnProperty(k)) my_attrs[k] = attrs[k];
3014 }
3015
3016 var set = function(axis, opt, value) {
3017 if (!my_attrs.axes) my_attrs.axes = {};
3018 if (!my_attrs.axes[axis]) my_attrs.axes[axis] = {};
3019 my_attrs.axes[axis][opt] = value;
3020 };
3021 var map = function(opt, axis, new_opt) {
3022 if (typeof(attrs[opt]) != 'undefined') {
3023 set(axis, new_opt, attrs[opt]);
3024 delete my_attrs[opt];
3025 }
3026 };
3027
3028 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3029 map('xValueFormatter', 'x', 'valueFormatter');
3030 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3031 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3032 map('xTicker', 'x', 'ticker');
3033 map('yValueFormatter', 'y', 'valueFormatter');
3034 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3035 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3036 map('yTicker', 'y', 'ticker');
3037 return my_attrs;
3038};
3039
3040/**
3041 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3042 * containing div (which has presumably changed size since the dygraph was
3043 * instantiated. If the width/height are specified, the div will be resized.
3044 *
3045 * This is far more efficient than destroying and re-instantiating a
3046 * Dygraph, since it doesn't have to reparse the underlying data.
3047 *
3048 * @param {Number} [width] Width (in pixels)
3049 * @param {Number} [height] Height (in pixels)
3050 */
3051Dygraph.prototype.resize = function(width, height) {
3052 if (this.resize_lock) {
3053 return;
3054 }
3055 this.resize_lock = true;
3056
3057 if ((width === null) != (height === null)) {
3058 this.warn("Dygraph.resize() should be called with zero parameters or " +
3059 "two non-NULL parameters. Pretending it was zero.");
3060 width = height = null;
3061 }
3062
3063 var old_width = this.width_;
3064 var old_height = this.height_;
3065
3066 if (width) {
3067 this.maindiv_.style.width = width + "px";
3068 this.maindiv_.style.height = height + "px";
3069 this.width_ = width;
3070 this.height_ = height;
3071 } else {
3072 this.width_ = this.maindiv_.clientWidth;
3073 this.height_ = this.maindiv_.clientHeight;
3074 }
3075
3076 if (old_width != this.width_ || old_height != this.height_) {
3077 // TODO(danvk): there should be a clear() method.
3078 this.maindiv_.innerHTML = "";
3079 this.roller_ = null;
3080 this.attrs_.labelsDiv = null;
3081 this.createInterface_();
3082 if (this.annotations_.length) {
3083 // createInterface_ reset the layout, so we need to do this.
3084 this.layout_.setAnnotations(this.annotations_);
3085 }
3086 this.predraw_();
3087 }
3088
3089 this.resize_lock = false;
3090};
3091
3092/**
3093 * Adjusts the number of points in the rolling average. Updates the graph to
3094 * reflect the new averaging period.
3095 * @param {Number} length Number of points over which to average the data.
3096 */
3097Dygraph.prototype.adjustRoll = function(length) {
3098 this.rollPeriod_ = length;
3099 this.predraw_();
3100};
3101
3102/**
3103 * Returns a boolean array of visibility statuses.
3104 */
3105Dygraph.prototype.visibility = function() {
3106 // Do lazy-initialization, so that this happens after we know the number of
3107 // data series.
3108 if (!this.attr_("visibility")) {
3109 this.attrs_.visibility = [];
3110 }
3111 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs.
3112 while (this.attr_("visibility").length < this.numColumns() - 1) {
3113 this.attrs_.visibility.push(true);
3114 }
3115 return this.attr_("visibility");
3116};
3117
3118/**
3119 * Changes the visiblity of a series.
3120 */
3121Dygraph.prototype.setVisibility = function(num, value) {
3122 var x = this.visibility();
3123 if (num < 0 || num >= x.length) {
3124 this.warn("invalid series number in setVisibility: " + num);
3125 } else {
3126 x[num] = value;
3127 this.predraw_();
3128 }
3129};
3130
3131/**
3132 * How large of an area will the dygraph render itself in?
3133 * This is used for testing.
3134 * @return A {width: w, height: h} object.
3135 * @private
3136 */
3137Dygraph.prototype.size = function() {
3138 return { width: this.width_, height: this.height_ };
3139};
3140
3141/**
3142 * Update the list of annotations and redraw the chart.
3143 * See dygraphs.com/annotations.html for more info on how to use annotations.
3144 * @param ann {Array} An array of annotation objects.
3145 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3146 */
3147Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
3148 // Only add the annotation CSS rule once we know it will be used.
3149 Dygraph.addAnnotationRule();
3150 this.annotations_ = ann;
3151 this.layout_.setAnnotations(this.annotations_);
3152 if (!suppressDraw) {
3153 this.predraw_();
3154 }
3155};
3156
3157/**
3158 * Return the list of annotations.
3159 */
3160Dygraph.prototype.annotations = function() {
3161 return this.annotations_;
3162};
3163
3164/**
3165 * Get the index of a series (column) given its name. The first column is the
3166 * x-axis, so the data series start with index 1.
3167 */
3168Dygraph.prototype.indexFromSetName = function(name) {
3169 var labels = this.attr_("labels");
3170 for (var i = 0; i < labels.length; i++) {
3171 if (labels[i] == name) return i;
3172 }
3173 return null;
3174};
3175
3176/**
3177 * @private
3178 * Adds a default style for the annotation CSS classes to the document. This is
3179 * only executed when annotations are actually used. It is designed to only be
3180 * called once -- all calls after the first will return immediately.
3181 */
3182Dygraph.addAnnotationRule = function() {
3183 if (Dygraph.addedAnnotationCSS) return;
3184
3185 var rule = "border: 1px solid black; " +
3186 "background-color: white; " +
3187 "text-align: center;";
3188
3189 var styleSheetElement = document.createElement("style");
3190 styleSheetElement.type = "text/css";
3191 document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
3192
3193 // Find the first style sheet that we can access.
3194 // We may not add a rule to a style sheet from another domain for security
3195 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3196 // adds its own style sheets from google.com.
3197 for (var i = 0; i < document.styleSheets.length; i++) {
3198 if (document.styleSheets[i].disabled) continue;
3199 var mysheet = document.styleSheets[i];
3200 try {
3201 if (mysheet.insertRule) { // Firefox
3202 var idx = mysheet.cssRules ? mysheet.cssRules.length : 0;
3203 mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx);
3204 } else if (mysheet.addRule) { // IE
3205 mysheet.addRule(".dygraphDefaultAnnotation", rule);
3206 }
3207 Dygraph.addedAnnotationCSS = true;
3208 return;
3209 } catch(err) {
3210 // Was likely a security exception.
3211 }
3212 }
3213
3214 this.warn("Unable to add default annotation CSS rule; display may be off.");
3215};
3216
3217// Older pages may still use this name.
3218var DateGraph = Dygraph;