0f297fe119c4abe6cd32c55bb5f075984b981511
[dygraphs.git] / dygraph.js
1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
3
4 /**
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
10
11 Usage:
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
16 { }); // options
17 </script>
18
19 The CSV file is of the form
20
21 Date,SeriesA,SeriesB,SeriesC
22 YYYYMMDD,A1,B1,C1
23 YYYYMMDD,A2,B2,C2
24
25 If the 'errorBars' option is set in the constructor, the input should be of
26 the form
27 Date,SeriesA,SeriesB,...
28 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
29 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
30
31 If the 'fractions' option is set, the input should be of the form:
32
33 Date,SeriesA,SeriesB,...
34 YYYYMMDD,A1/B1,A2/B2,...
35 YYYYMMDD,A1/B1,A2/B2,...
36
37 And error bars will be calculated automatically using a binomial distribution.
38
39 For further documentation and examples, see http://dygraphs.com/
40
41 */
42
43 /**
44 * Creates an interactive, zoomable chart.
45 *
46 * @constructor
47 * @param {div | String} div A div or the id of a div into which to construct
48 * the chart.
49 * @param {String | Function} file A file containing CSV data or a function
50 * that returns this data. The most basic expected format for each line is
51 * "YYYY/MM/DD,val1,val2,...". For more information, see
52 * http://dygraphs.com/data.html.
53 * @param {Object} attrs Various other attributes, e.g. errorBars determines
54 * whether the input data contains error ranges. For a complete list of
55 * options, see http://dygraphs.com/options.html.
56 */
57 Dygraph = function(div, data, opts) {
58 if (arguments.length > 0) {
59 if (arguments.length == 4) {
60 // Old versions of dygraphs took in the series labels as a constructor
61 // parameter. This doesn't make sense anymore, but it's easy to continue
62 // to support this usage.
63 this.warn("Using deprecated four-argument dygraph constructor");
64 this.__old_init__(div, data, arguments[2], arguments[3]);
65 } else {
66 this.__init__(div, data, opts);
67 }
68 }
69 };
70
71 Dygraph.NAME = "Dygraph";
72 Dygraph.VERSION = "1.2";
73 Dygraph.__repr__ = function() {
74 return "[" + this.NAME + " " + this.VERSION + "]";
75 };
76
77 /**
78 * Returns information about the Dygraph class.
79 */
80 Dygraph.toString = function() {
81 return this.__repr__();
82 };
83
84 // Various default values
85 Dygraph.DEFAULT_ROLL_PERIOD = 1;
86 Dygraph.DEFAULT_WIDTH = 480;
87 Dygraph.DEFAULT_HEIGHT = 320;
88 Dygraph.AXIS_LINE_WIDTH = 0.3;
89
90 Dygraph.LOG_SCALE = 10;
91 Dygraph.LN_TEN = Math.log(Dygraph.LOG_SCALE);
92 /** @private */
93 Dygraph.log10 = function(x) {
94 return Math.log(x) / Dygraph.LN_TEN;
95 }
96
97 // Default attribute values.
98 Dygraph.DEFAULT_ATTRS = {
99 highlightCircleSize: 3,
100 pixelsPerXLabel: 60,
101 pixelsPerYLabel: 30,
102
103 labelsDivWidth: 250,
104 labelsDivStyles: {
105 // TODO(danvk): move defaults from createStatusMessage_ here.
106 },
107 labelsSeparateLines: false,
108 labelsShowZeroValues: true,
109 labelsKMB: false,
110 labelsKMG2: false,
111 showLabelsOnHighlight: true,
112
113 yValueFormatter: function(a,b) { return Dygraph.numberFormatter(a,b); },
114 digitsAfterDecimal: 2,
115 maxNumberWidth: 6,
116 sigFigs: null,
117
118 strokeWidth: 1.0,
119
120 axisTickSize: 3,
121 axisLabelFontSize: 14,
122 xAxisLabelWidth: 50,
123 yAxisLabelWidth: 50,
124 xAxisLabelFormatter: Dygraph.dateAxisFormatter,
125 rightGap: 5,
126
127 showRoller: false,
128 xValueFormatter: Dygraph.dateString_,
129 xValueParser: Dygraph.dateParser,
130 xTicker: Dygraph.dateTicker,
131
132 delimiter: ',',
133
134 sigma: 2.0,
135 errorBars: false,
136 fractions: false,
137 wilsonInterval: true, // only relevant if fractions is true
138 customBars: false,
139 fillGraph: false,
140 fillAlpha: 0.15,
141 connectSeparatedPoints: false,
142
143 stackedGraph: false,
144 hideOverlayOnMouseOut: true,
145
146 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
147 legend: 'onmouseover', // the only relevant value at the moment is 'always'.
148
149 stepPlot: false,
150 avoidMinZero: false,
151
152 // Sizes of the various chart labels.
153 titleHeight: 28,
154 xLabelHeight: 18,
155 yLabelWidth: 18,
156
157 interactionModel: null // will be set to Dygraph.defaultInteractionModel.
158 };
159
160 // Various logging levels.
161 Dygraph.DEBUG = 1;
162 Dygraph.INFO = 2;
163 Dygraph.WARNING = 3;
164 Dygraph.ERROR = 3;
165
166 // Directions for panning and zooming. Use bit operations when combined
167 // values are possible.
168 Dygraph.HORIZONTAL = 1;
169 Dygraph.VERTICAL = 2;
170
171 // Used for initializing annotation CSS rules only once.
172 Dygraph.addedAnnotationCSS = false;
173
174 /**
175 * @private
176 * Return the 2d context for a dygraph canvas.
177 *
178 * This method is only exposed for the sake of replacing the function in
179 * automated tests, e.g.
180 *
181 * var oldFunc = Dygraph.getContext();
182 * Dygraph.getContext = function(canvas) {
183 * var realContext = oldFunc(canvas);
184 * return new Proxy(realContext);
185 * };
186 */
187 Dygraph.getContext = function(canvas) {
188 return canvas.getContext("2d");
189 };
190
191 Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
192 // Labels is no longer a constructor parameter, since it's typically set
193 // directly from the data source. It also conains a name for the x-axis,
194 // which the previous constructor form did not.
195 if (labels != null) {
196 var new_labels = ["Date"];
197 for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
198 Dygraph.update(attrs, { 'labels': new_labels });
199 }
200 this.__init__(div, file, attrs);
201 };
202
203 /**
204 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
205 * and context &lt;canvas&gt; inside of it. See the constructor for details.
206 * on the parameters.
207 * @param {Element} div the Element to render the graph into.
208 * @param {String | Function} file Source data
209 * @param {Object} attrs Miscellaneous other options
210 * @private
211 */
212 Dygraph.prototype.__init__ = function(div, file, attrs) {
213 // Hack for IE: if we're using excanvas and the document hasn't finished
214 // loading yet (and hence may not have initialized whatever it needs to
215 // initialize), then keep calling this routine periodically until it has.
216 if (/MSIE/.test(navigator.userAgent) && !window.opera &&
217 typeof(G_vmlCanvasManager) != 'undefined' &&
218 document.readyState != 'complete') {
219 var self = this;
220 setTimeout(function() { self.__init__(div, file, attrs) }, 100);
221 }
222
223 // Support two-argument constructor
224 if (attrs == null) { attrs = {}; }
225
226 // Copy the important bits into the object
227 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
228 this.maindiv_ = div;
229 this.file_ = file;
230 this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD;
231 this.previousVerticalX_ = -1;
232 this.fractions_ = attrs.fractions || false;
233 this.dateWindow_ = attrs.dateWindow || null;
234
235 this.wilsonInterval_ = attrs.wilsonInterval || true;
236 this.is_initial_draw_ = true;
237 this.annotations_ = [];
238
239 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
240 this.zoomed_x_ = false;
241 this.zoomed_y_ = false;
242
243 // Clear the div. This ensure that, if multiple dygraphs are passed the same
244 // div, then only one will be drawn.
245 div.innerHTML = "";
246
247 // If the div isn't already sized then inherit from our attrs or
248 // give it a default size.
249 if (div.style.width == '') {
250 div.style.width = (attrs.width || Dygraph.DEFAULT_WIDTH) + "px";
251 }
252 if (div.style.height == '') {
253 div.style.height = (attrs.height || Dygraph.DEFAULT_HEIGHT) + "px";
254 }
255 this.width_ = parseInt(div.style.width, 10);
256 this.height_ = parseInt(div.style.height, 10);
257 // The div might have been specified as percent of the current window size,
258 // convert that to an appropriate number of pixels.
259 if (div.style.width.indexOf("%") == div.style.width.length - 1) {
260 this.width_ = div.offsetWidth;
261 }
262 if (div.style.height.indexOf("%") == div.style.height.length - 1) {
263 this.height_ = div.offsetHeight;
264 }
265
266 if (this.width_ == 0) {
267 this.error("dygraph has zero width. Please specify a width in pixels.");
268 }
269 if (this.height_ == 0) {
270 this.error("dygraph has zero height. Please specify a height in pixels.");
271 }
272
273 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
274 if (attrs['stackedGraph']) {
275 attrs['fillGraph'] = true;
276 // TODO(nikhilk): Add any other stackedGraph checks here.
277 }
278
279 // Dygraphs has many options, some of which interact with one another.
280 // To keep track of everything, we maintain two sets of options:
281 //
282 // this.user_attrs_ only options explicitly set by the user.
283 // this.attrs_ defaults, options derived from user_attrs_, data.
284 //
285 // Options are then accessed this.attr_('attr'), which first looks at
286 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
287 // defaults without overriding behavior that the user specifically asks for.
288 this.user_attrs_ = {};
289 Dygraph.update(this.user_attrs_, attrs);
290
291 this.attrs_ = {};
292 Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
293
294 this.boundaryIds_ = [];
295
296 // Make a note of whether labels will be pulled from the CSV file.
297 this.labelsFromCSV_ = (this.attr_("labels") == null);
298
299 // Create the containing DIV and other interactive elements
300 this.createInterface_();
301
302 this.start_();
303 };
304
305 /**
306 * Returns the zoomed status of the chart for one or both axes.
307 *
308 * Axis is an optional parameter. Can be set to 'x' or 'y'.
309 *
310 * The zoomed status for an axis is set whenever a user zooms using the mouse
311 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
312 * option is also specified).
313 */
314 Dygraph.prototype.isZoomed = function(axis) {
315 if (axis == null) return this.zoomed_x_ || this.zoomed_y_;
316 if (axis == 'x') return this.zoomed_x_;
317 if (axis == 'y') return this.zoomed_y_;
318 throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
319 };
320
321 /**
322 * Returns information about the Dygraph object, including its containing ID.
323 */
324 Dygraph.prototype.toString = function() {
325 var maindiv = this.maindiv_;
326 var id = (maindiv && maindiv.id) ? maindiv.id : maindiv
327 return "[Dygraph " + id + "]";
328 }
329
330 /**
331 * @private
332 * Returns the value of an option. This may be set by the user (either in the
333 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
334 * per-series value.
335 * @param { String } name The name of the option, e.g. 'rollPeriod'.
336 * @param { String } [seriesName] The name of the series to which the option
337 * will be applied. If no per-series value of this option is available, then
338 * the global value is returned. This is optional.
339 * @return { ... } The value of the option.
340 */
341 Dygraph.prototype.attr_ = function(name, seriesName) {
342 // <REMOVE_FOR_COMBINED>
343 if (typeof(Dygraph.OPTIONS_REFERENCE) === 'undefined') {
344 this.error('Must include options reference JS for testing');
345 } else if (!Dygraph.OPTIONS_REFERENCE.hasOwnProperty(name)) {
346 this.error('Dygraphs is using property ' + name + ', which has no entry ' +
347 'in the Dygraphs.OPTIONS_REFERENCE listing.');
348 // Only log this error once.
349 Dygraph.OPTIONS_REFERENCE[name] = true;
350 }
351 // </REMOVE_FOR_COMBINED>
352 if (seriesName &&
353 typeof(this.user_attrs_[seriesName]) != 'undefined' &&
354 this.user_attrs_[seriesName] != null &&
355 typeof(this.user_attrs_[seriesName][name]) != 'undefined') {
356 return this.user_attrs_[seriesName][name];
357 } else if (typeof(this.user_attrs_[name]) != 'undefined') {
358 return this.user_attrs_[name];
359 } else if (typeof(this.attrs_[name]) != 'undefined') {
360 return this.attrs_[name];
361 } else {
362 return null;
363 }
364 };
365
366 // TODO(danvk): any way I can get the line numbers to be this.warn call?
367 /**
368 * @private
369 * Log an error on the JS console at the given severity.
370 * @param { Integer } severity One of Dygraph.{DEBUG,INFO,WARNING,ERROR}
371 * @param { String } The message to log.
372 */
373 Dygraph.prototype.log = function(severity, message) {
374 if (typeof(console) != 'undefined') {
375 switch (severity) {
376 case Dygraph.DEBUG:
377 console.debug('dygraphs: ' + message);
378 break;
379 case Dygraph.INFO:
380 console.info('dygraphs: ' + message);
381 break;
382 case Dygraph.WARNING:
383 console.warn('dygraphs: ' + message);
384 break;
385 case Dygraph.ERROR:
386 console.error('dygraphs: ' + message);
387 break;
388 }
389 }
390 };
391
392 /** @private */
393 Dygraph.prototype.info = function(message) {
394 this.log(Dygraph.INFO, message);
395 };
396
397 /** @private */
398 Dygraph.prototype.warn = function(message) {
399 this.log(Dygraph.WARNING, message);
400 };
401
402 /** @private */
403 Dygraph.prototype.error = function(message) {
404 this.log(Dygraph.ERROR, message);
405 };
406
407 /**
408 * Returns the current rolling period, as set by the user or an option.
409 * @return {Number} The number of points in the rolling window
410 */
411 Dygraph.prototype.rollPeriod = function() {
412 return this.rollPeriod_;
413 };
414
415 /**
416 * Returns the currently-visible x-range. This can be affected by zooming,
417 * panning or a call to updateOptions.
418 * Returns a two-element array: [left, right].
419 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
420 */
421 Dygraph.prototype.xAxisRange = function() {
422 return this.dateWindow_ ? this.dateWindow_ : this.xAxisExtremes();
423 };
424
425 /**
426 * Returns the lower- and upper-bound x-axis values of the
427 * data set.
428 */
429 Dygraph.prototype.xAxisExtremes = function() {
430 var left = this.rawData_[0][0];
431 var right = this.rawData_[this.rawData_.length - 1][0];
432 return [left, right];
433 };
434
435 /**
436 * Returns the currently-visible y-range for an axis. This can be affected by
437 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
438 * called with no arguments, returns the range of the first axis.
439 * Returns a two-element array: [bottom, top].
440 */
441 Dygraph.prototype.yAxisRange = function(idx) {
442 if (typeof(idx) == "undefined") idx = 0;
443 if (idx < 0 || idx >= this.axes_.length) return null;
444 return [ this.axes_[idx].computedValueRange[0],
445 this.axes_[idx].computedValueRange[1] ];
446 };
447
448 /**
449 * Returns the currently-visible y-ranges for each axis. This can be affected by
450 * zooming, panning, calls to updateOptions, etc.
451 * Returns an array of [bottom, top] pairs, one for each y-axis.
452 */
453 Dygraph.prototype.yAxisRanges = function() {
454 var ret = [];
455 for (var i = 0; i < this.axes_.length; i++) {
456 ret.push(this.yAxisRange(i));
457 }
458 return ret;
459 };
460
461 // TODO(danvk): use these functions throughout dygraphs.
462 /**
463 * Convert from data coordinates to canvas/div X/Y coordinates.
464 * If specified, do this conversion for the coordinate system of a particular
465 * axis. Uses the first axis by default.
466 * Returns a two-element array: [X, Y]
467 *
468 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
469 * instead of toDomCoords(null, y, axis).
470 */
471 Dygraph.prototype.toDomCoords = function(x, y, axis) {
472 return [ this.toDomXCoord(x), this.toDomYCoord(y, axis) ];
473 };
474
475 /**
476 * Convert from data x coordinates to canvas/div X coordinate.
477 * If specified, do this conversion for the coordinate system of a particular
478 * axis.
479 * Returns a single value or null if x is null.
480 */
481 Dygraph.prototype.toDomXCoord = function(x) {
482 if (x == null) {
483 return null;
484 };
485
486 var area = this.plotter_.area;
487 var xRange = this.xAxisRange();
488 return area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
489 }
490
491 /**
492 * Convert from data x coordinates to canvas/div Y coordinate and optional
493 * axis. Uses the first axis by default.
494 *
495 * returns a single value or null if y is null.
496 */
497 Dygraph.prototype.toDomYCoord = function(y, axis) {
498 var pct = this.toPercentYCoord(y, axis);
499
500 if (pct == null) {
501 return null;
502 }
503 var area = this.plotter_.area;
504 return area.y + pct * area.h;
505 }
506
507 /**
508 * Convert from canvas/div coords to data coordinates.
509 * If specified, do this conversion for the coordinate system of a particular
510 * axis. Uses the first axis by default.
511 * Returns a two-element array: [X, Y].
512 *
513 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
514 * instead of toDataCoords(null, y, axis).
515 */
516 Dygraph.prototype.toDataCoords = function(x, y, axis) {
517 return [ this.toDataXCoord(x), this.toDataYCoord(y, axis) ];
518 };
519
520 /**
521 * Convert from canvas/div x coordinate to data coordinate.
522 *
523 * If x is null, this returns null.
524 */
525 Dygraph.prototype.toDataXCoord = function(x) {
526 if (x == null) {
527 return null;
528 }
529
530 var area = this.plotter_.area;
531 var xRange = this.xAxisRange();
532 return xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
533 };
534
535 /**
536 * Convert from canvas/div y coord to value.
537 *
538 * If y is null, this returns null.
539 * if axis is null, this uses the first axis.
540 */
541 Dygraph.prototype.toDataYCoord = function(y, axis) {
542 if (y == null) {
543 return null;
544 }
545
546 var area = this.plotter_.area;
547 var yRange = this.yAxisRange(axis);
548
549 if (typeof(axis) == "undefined") axis = 0;
550 if (!this.axes_[axis].logscale) {
551 return yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]);
552 } else {
553 // Computing the inverse of toDomCoord.
554 var pct = (y - area.y) / area.h
555
556 // Computing the inverse of toPercentYCoord. The function was arrived at with
557 // the following steps:
558 //
559 // Original calcuation:
560 // pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
561 //
562 // Move denominator to both sides:
563 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
564 //
565 // subtract logr1, and take the negative value.
566 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
567 //
568 // Swap both sides of the equation, and we can compute the log of the
569 // return value. Which means we just need to use that as the exponent in
570 // e^exponent.
571 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
572
573 var logr1 = Dygraph.log10(yRange[1]);
574 var exponent = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
575 var value = Math.pow(Dygraph.LOG_SCALE, exponent);
576 return value;
577 }
578 };
579
580 /**
581 * Converts a y for an axis to a percentage from the top to the
582 * bottom of the drawing area.
583 *
584 * If the coordinate represents a value visible on the canvas, then
585 * the value will be between 0 and 1, where 0 is the top of the canvas.
586 * However, this method will return values outside the range, as
587 * values can fall outside the canvas.
588 *
589 * If y is null, this returns null.
590 * if axis is null, this uses the first axis.
591 *
592 * @param { Number } y The data y-coordinate.
593 * @param { Number } [axis] The axis number on which the data coordinate lives.
594 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
595 */
596 Dygraph.prototype.toPercentYCoord = function(y, axis) {
597 if (y == null) {
598 return null;
599 }
600 if (typeof(axis) == "undefined") axis = 0;
601
602 var area = this.plotter_.area;
603 var yRange = this.yAxisRange(axis);
604
605 var pct;
606 if (!this.axes_[axis].logscale) {
607 // yRange[1] - y is unit distance from the bottom.
608 // yRange[1] - yRange[0] is the scale of the range.
609 // (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom.
610 pct = (yRange[1] - y) / (yRange[1] - yRange[0]);
611 } else {
612 var logr1 = Dygraph.log10(yRange[1]);
613 pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
614 }
615 return pct;
616 }
617
618 /**
619 * Converts an x value to a percentage from the left to the right of
620 * the drawing area.
621 *
622 * If the coordinate represents a value visible on the canvas, then
623 * the value will be between 0 and 1, where 0 is the left of the canvas.
624 * However, this method will return values outside the range, as
625 * values can fall outside the canvas.
626 *
627 * If x is null, this returns null.
628 * @param { Number } x The data x-coordinate.
629 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
630 */
631 Dygraph.prototype.toPercentXCoord = function(x) {
632 if (x == null) {
633 return null;
634 }
635
636 var xRange = this.xAxisRange();
637 return (x - xRange[0]) / (xRange[1] - xRange[0]);
638 };
639
640 /**
641 * Returns the number of columns (including the independent variable).
642 * @return { Integer } The number of columns.
643 */
644 Dygraph.prototype.numColumns = function() {
645 return this.rawData_[0].length;
646 };
647
648 /**
649 * Returns the number of rows (excluding any header/label row).
650 * @return { Integer } The number of rows, less any header.
651 */
652 Dygraph.prototype.numRows = function() {
653 return this.rawData_.length;
654 };
655
656 /**
657 * Returns the value in the given row and column. If the row and column exceed
658 * the bounds on the data, returns null. Also returns null if the value is
659 * missing.
660 * @param { Number} row The row number of the data (0-based). Row 0 is the
661 * first row of data, not a header row.
662 * @param { Number} col The column number of the data (0-based)
663 * @return { Number } The value in the specified cell or null if the row/col
664 * were out of range.
665 */
666 Dygraph.prototype.getValue = function(row, col) {
667 if (row < 0 || row > this.rawData_.length) return null;
668 if (col < 0 || col > this.rawData_[row].length) return null;
669
670 return this.rawData_[row][col];
671 };
672
673 /**
674 * @private
675 * Add an event handler. This smooths a difference between IE and the rest of
676 * the world.
677 * @param { DOM element } el The element to add the event to.
678 * @param { String } evt The name of the event, e.g. 'click' or 'mousemove'.
679 * @param { Function } fn The function to call on the event. The function takes
680 * one parameter: the event object.
681 */
682 Dygraph.addEvent = function(el, evt, fn) {
683 var normed_fn = function(e) {
684 if (!e) var e = window.event;
685 fn(e);
686 };
687 if (window.addEventListener) { // Mozilla, Netscape, Firefox
688 el.addEventListener(evt, normed_fn, false);
689 } else { // IE
690 el.attachEvent('on' + evt, normed_fn);
691 }
692 };
693
694
695 /**
696 * @private
697 * Cancels further processing of an event. This is useful to prevent default
698 * browser actions, e.g. highlighting text on a double-click.
699 * Based on the article at
700 * http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
701 * @param { Event } e The event whose normal behavior should be canceled.
702 */
703 Dygraph.cancelEvent = function(e) {
704 e = e ? e : window.event;
705 if (e.stopPropagation) {
706 e.stopPropagation();
707 }
708 if (e.preventDefault) {
709 e.preventDefault();
710 }
711 e.cancelBubble = true;
712 e.cancel = true;
713 e.returnValue = false;
714 return false;
715 };
716
717
718 /**
719 * Generates interface elements for the Dygraph: a containing div, a div to
720 * display the current point, and a textbox to adjust the rolling average
721 * period. Also creates the Renderer/Layout elements.
722 * @private
723 */
724 Dygraph.prototype.createInterface_ = function() {
725 // Create the all-enclosing graph div
726 var enclosing = this.maindiv_;
727
728 this.graphDiv = document.createElement("div");
729 this.graphDiv.style.width = this.width_ + "px";
730 this.graphDiv.style.height = this.height_ + "px";
731 enclosing.appendChild(this.graphDiv);
732
733 // Create the canvas for interactive parts of the chart.
734 this.canvas_ = Dygraph.createCanvas();
735 this.canvas_.style.position = "absolute";
736 this.canvas_.width = this.width_;
737 this.canvas_.height = this.height_;
738 this.canvas_.style.width = this.width_ + "px"; // for IE
739 this.canvas_.style.height = this.height_ + "px"; // for IE
740
741 this.canvas_ctx_ = Dygraph.getContext(this.canvas_);
742
743 // ... and for static parts of the chart.
744 this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
745 this.hidden_ctx_ = Dygraph.getContext(this.hidden_);
746
747 // The interactive parts of the graph are drawn on top of the chart.
748 this.graphDiv.appendChild(this.hidden_);
749 this.graphDiv.appendChild(this.canvas_);
750 this.mouseEventElement_ = this.canvas_;
751
752 var dygraph = this;
753 Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) {
754 dygraph.mouseMove_(e);
755 });
756 Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) {
757 dygraph.mouseOut_(e);
758 });
759
760 // Create the grapher
761 this.layout_ = new DygraphLayout(this);
762
763 // TODO(danvk): why does the Renderer need its own set of options?
764 this.renderOptions_ = { colorScheme: this.colors_,
765 strokeColor: null,
766 axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
767 Dygraph.update(this.renderOptions_, this.attrs_);
768 Dygraph.update(this.renderOptions_, this.user_attrs_);
769
770 this.createStatusMessage_();
771 this.createDragInterface_();
772 };
773
774 /**
775 * Detach DOM elements in the dygraph and null out all data references.
776 * Calling this when you're done with a dygraph can dramatically reduce memory
777 * usage. See, e.g., the tests/perf.html example.
778 */
779 Dygraph.prototype.destroy = function() {
780 var removeRecursive = function(node) {
781 while (node.hasChildNodes()) {
782 removeRecursive(node.firstChild);
783 node.removeChild(node.firstChild);
784 }
785 };
786 removeRecursive(this.maindiv_);
787
788 var nullOut = function(obj) {
789 for (var n in obj) {
790 if (typeof(obj[n]) === 'object') {
791 obj[n] = null;
792 }
793 }
794 };
795
796 // These may not all be necessary, but it can't hurt...
797 nullOut(this.layout_);
798 nullOut(this.plotter_);
799 nullOut(this);
800 };
801
802 /**
803 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
804 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
805 * or the zoom rectangles) is done on this.canvas_.
806 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
807 * @return {Object} The newly-created canvas
808 * @private
809 */
810 Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
811 var h = Dygraph.createCanvas();
812 h.style.position = "absolute";
813 // TODO(danvk): h should be offset from canvas. canvas needs to include
814 // some extra area to make it easier to zoom in on the far left and far
815 // right. h needs to be precisely the plot area, so that clipping occurs.
816 h.style.top = canvas.style.top;
817 h.style.left = canvas.style.left;
818 h.width = this.width_;
819 h.height = this.height_;
820 h.style.width = this.width_ + "px"; // for IE
821 h.style.height = this.height_ + "px"; // for IE
822 return h;
823 };
824
825 /**
826 * Convert hsv values to an rgb(r,g,b) string. Taken from MochiKit.Color. This
827 * is used to generate default series colors which are evenly spaced on the
828 * color wheel.
829 * @param { Number } hue Range is 0.0-1.0.
830 * @param { Number } saturation Range is 0.0-1.0.
831 * @param { Number } value Range is 0.0-1.0.
832 * @return { String } "rgb(r,g,b)" where r, g and b range from 0-255.
833 * @private
834 */
835 Dygraph.hsvToRGB = function (hue, saturation, value) {
836 var red;
837 var green;
838 var blue;
839 if (saturation === 0) {
840 red = value;
841 green = value;
842 blue = value;
843 } else {
844 var i = Math.floor(hue * 6);
845 var f = (hue * 6) - i;
846 var p = value * (1 - saturation);
847 var q = value * (1 - (saturation * f));
848 var t = value * (1 - (saturation * (1 - f)));
849 switch (i) {
850 case 1: red = q; green = value; blue = p; break;
851 case 2: red = p; green = value; blue = t; break;
852 case 3: red = p; green = q; blue = value; break;
853 case 4: red = t; green = p; blue = value; break;
854 case 5: red = value; green = p; blue = q; break;
855 case 6: // fall through
856 case 0: red = value; green = t; blue = p; break;
857 }
858 }
859 red = Math.floor(255 * red + 0.5);
860 green = Math.floor(255 * green + 0.5);
861 blue = Math.floor(255 * blue + 0.5);
862 return 'rgb(' + red + ',' + green + ',' + blue + ')';
863 };
864
865
866 /**
867 * Generate a set of distinct colors for the data series. This is done with a
868 * color wheel. Saturation/Value are customizable, and the hue is
869 * equally-spaced around the color wheel. If a custom set of colors is
870 * specified, that is used instead.
871 * @private
872 */
873 Dygraph.prototype.setColors_ = function() {
874 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
875 // away with this.renderOptions_.
876 var num = this.attr_("labels").length - 1;
877 this.colors_ = [];
878 var colors = this.attr_('colors');
879 if (!colors) {
880 var sat = this.attr_('colorSaturation') || 1.0;
881 var val = this.attr_('colorValue') || 0.5;
882 var half = Math.ceil(num / 2);
883 for (var i = 1; i <= num; i++) {
884 if (!this.visibility()[i-1]) continue;
885 // alternate colors for high contrast.
886 var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2);
887 var hue = (1.0 * idx/ (1 + num));
888 this.colors_.push(Dygraph.hsvToRGB(hue, sat, val));
889 }
890 } else {
891 for (var i = 0; i < num; i++) {
892 if (!this.visibility()[i]) continue;
893 var colorStr = colors[i % colors.length];
894 this.colors_.push(colorStr);
895 }
896 }
897
898 // TODO(danvk): update this w/r/t/ the new options system.
899 this.renderOptions_.colorScheme = this.colors_;
900 Dygraph.update(this.plotter_.options, this.renderOptions_);
901 };
902
903 /**
904 * Return the list of colors. This is either the list of colors passed in the
905 * attributes or the autogenerated list of rgb(r,g,b) strings.
906 * @return {Array<string>} The list of colors.
907 */
908 Dygraph.prototype.getColors = function() {
909 return this.colors_;
910 };
911
912 // The following functions are from quirksmode.org with a modification for Safari from
913 // http://blog.firetree.net/2005/07/04/javascript-find-position/
914 // http://www.quirksmode.org/js/findpos.html
915
916 /** @private */
917 Dygraph.findPosX = function(obj) {
918 var curleft = 0;
919 if(obj.offsetParent)
920 while(1)
921 {
922 curleft += obj.offsetLeft;
923 if(!obj.offsetParent)
924 break;
925 obj = obj.offsetParent;
926 }
927 else if(obj.x)
928 curleft += obj.x;
929 return curleft;
930 };
931
932
933 /** @private */
934 Dygraph.findPosY = function(obj) {
935 var curtop = 0;
936 if(obj.offsetParent)
937 while(1)
938 {
939 curtop += obj.offsetTop;
940 if(!obj.offsetParent)
941 break;
942 obj = obj.offsetParent;
943 }
944 else if(obj.y)
945 curtop += obj.y;
946 return curtop;
947 };
948
949
950 /**
951 * Create the div that contains information on the selected point(s)
952 * This goes in the top right of the canvas, unless an external div has already
953 * been specified.
954 * @private
955 */
956 Dygraph.prototype.createStatusMessage_ = function() {
957 var userLabelsDiv = this.user_attrs_["labelsDiv"];
958 if (userLabelsDiv && null != userLabelsDiv
959 && (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String)) {
960 this.user_attrs_["labelsDiv"] = document.getElementById(userLabelsDiv);
961 }
962 if (!this.attr_("labelsDiv")) {
963 var divWidth = this.attr_('labelsDivWidth');
964 var messagestyle = {
965 "position": "absolute",
966 "fontSize": "14px",
967 "zIndex": 10,
968 "width": divWidth + "px",
969 "top": "0px",
970 "left": (this.width_ - divWidth - 2) + "px",
971 "background": "white",
972 "textAlign": "left",
973 "overflow": "hidden"};
974 Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
975 var div = document.createElement("div");
976 for (var name in messagestyle) {
977 if (messagestyle.hasOwnProperty(name)) {
978 div.style[name] = messagestyle[name];
979 }
980 }
981 this.graphDiv.appendChild(div);
982 this.attrs_.labelsDiv = div;
983 }
984 };
985
986 /**
987 * Position the labels div so that:
988 * - its right edge is flush with the right edge of the charting area
989 * - its top edge is flush with the top edge of the charting area
990 * @private
991 */
992 Dygraph.prototype.positionLabelsDiv_ = function() {
993 // Don't touch a user-specified labelsDiv.
994 if (this.user_attrs_.hasOwnProperty("labelsDiv")) return;
995
996 var area = this.plotter_.area;
997 var div = this.attr_("labelsDiv");
998 div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px";
999 div.style.top = area.y + "px";
1000 };
1001
1002 /**
1003 * Create the text box to adjust the averaging period
1004 * @private
1005 */
1006 Dygraph.prototype.createRollInterface_ = function() {
1007 // Create a roller if one doesn't exist already.
1008 if (!this.roller_) {
1009 this.roller_ = document.createElement("input");
1010 this.roller_.type = "text";
1011 this.roller_.style.display = "none";
1012 this.graphDiv.appendChild(this.roller_);
1013 }
1014
1015 var display = this.attr_('showRoller') ? 'block' : 'none';
1016
1017 var area = this.plotter_.area;
1018 var textAttr = { "position": "absolute",
1019 "zIndex": 10,
1020 "top": (area.y + area.h - 25) + "px",
1021 "left": (area.x + 1) + "px",
1022 "display": display
1023 };
1024 this.roller_.size = "2";
1025 this.roller_.value = this.rollPeriod_;
1026 for (var name in textAttr) {
1027 if (textAttr.hasOwnProperty(name)) {
1028 this.roller_.style[name] = textAttr[name];
1029 }
1030 }
1031
1032 var dygraph = this;
1033 this.roller_.onchange = function() { dygraph.adjustRoll(dygraph.roller_.value); };
1034 };
1035
1036 /**
1037 * @private
1038 * Returns the x-coordinate of the event in a coordinate system where the
1039 * top-left corner of the page (not the window) is (0,0).
1040 * Taken from MochiKit.Signal
1041 */
1042 Dygraph.pageX = function(e) {
1043 if (e.pageX) {
1044 return (!e.pageX || e.pageX < 0) ? 0 : e.pageX;
1045 } else {
1046 var de = document;
1047 var b = document.body;
1048 return e.clientX +
1049 (de.scrollLeft || b.scrollLeft) -
1050 (de.clientLeft || 0);
1051 }
1052 };
1053
1054 /**
1055 * @private
1056 * Returns the y-coordinate of the event in a coordinate system where the
1057 * top-left corner of the page (not the window) is (0,0).
1058 * Taken from MochiKit.Signal
1059 */
1060 Dygraph.pageY = function(e) {
1061 if (e.pageY) {
1062 return (!e.pageY || e.pageY < 0) ? 0 : e.pageY;
1063 } else {
1064 var de = document;
1065 var b = document.body;
1066 return e.clientY +
1067 (de.scrollTop || b.scrollTop) -
1068 (de.clientTop || 0);
1069 }
1070 };
1071
1072 /**
1073 * @private
1074 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1075 * canvas (i.e. DOM Coords).
1076 */
1077 Dygraph.prototype.dragGetX_ = function(e, context) {
1078 return Dygraph.pageX(e) - context.px
1079 };
1080
1081 /**
1082 * @private
1083 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1084 * canvas (i.e. DOM Coords).
1085 */
1086 Dygraph.prototype.dragGetY_ = function(e, context) {
1087 return Dygraph.pageY(e) - context.py
1088 };
1089
1090 /**
1091 * A collection of functions to facilitate build custom interaction models.
1092 * @class
1093 */
1094 Dygraph.Interaction = {};
1095
1096 /**
1097 * Called in response to an interaction model operation that
1098 * should start the default panning behavior.
1099 *
1100 * It's used in the default callback for "mousedown" operations.
1101 * Custom interaction model builders can use it to provide the default
1102 * panning behavior.
1103 *
1104 * @param { Event } event the event object which led to the startPan call.
1105 * @param { Dygraph} g The dygraph on which to act.
1106 * @param { Object} context The dragging context object (with
1107 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1108 */
1109 Dygraph.Interaction.startPan = function(event, g, context) {
1110 context.isPanning = true;
1111 var xRange = g.xAxisRange();
1112 context.dateRange = xRange[1] - xRange[0];
1113 context.initialLeftmostDate = xRange[0];
1114 context.xUnitsPerPixel = context.dateRange / (g.plotter_.area.w - 1);
1115
1116 if (g.attr_("panEdgeFraction")) {
1117 var maxXPixelsToDraw = g.width_ * g.attr_("panEdgeFraction");
1118 var xExtremes = g.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
1119
1120 var boundedLeftX = g.toDomXCoord(xExtremes[0]) - maxXPixelsToDraw;
1121 var boundedRightX = g.toDomXCoord(xExtremes[1]) + maxXPixelsToDraw;
1122
1123 var boundedLeftDate = g.toDataXCoord(boundedLeftX);
1124 var boundedRightDate = g.toDataXCoord(boundedRightX);
1125 context.boundedDates = [boundedLeftDate, boundedRightDate];
1126
1127 var boundedValues = [];
1128 var maxYPixelsToDraw = g.height_ * g.attr_("panEdgeFraction");
1129
1130 for (var i = 0; i < g.axes_.length; i++) {
1131 var axis = g.axes_[i];
1132 var yExtremes = axis.extremeRange;
1133
1134 var boundedTopY = g.toDomYCoord(yExtremes[0], i) + maxYPixelsToDraw;
1135 var boundedBottomY = g.toDomYCoord(yExtremes[1], i) - maxYPixelsToDraw;
1136
1137 var boundedTopValue = g.toDataYCoord(boundedTopY);
1138 var boundedBottomValue = g.toDataYCoord(boundedBottomY);
1139
1140 boundedValues[i] = [boundedTopValue, boundedBottomValue];
1141 }
1142 context.boundedValues = boundedValues;
1143 }
1144
1145 // Record the range of each y-axis at the start of the drag.
1146 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1147 context.is2DPan = false;
1148 for (var i = 0; i < g.axes_.length; i++) {
1149 var axis = g.axes_[i];
1150 var yRange = g.yAxisRange(i);
1151 // TODO(konigsberg): These values should be in |context|.
1152 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1153 if (axis.logscale) {
1154 axis.initialTopValue = Dygraph.log10(yRange[1]);
1155 axis.dragValueRange = Dygraph.log10(yRange[1]) - Dygraph.log10(yRange[0]);
1156 } else {
1157 axis.initialTopValue = yRange[1];
1158 axis.dragValueRange = yRange[1] - yRange[0];
1159 }
1160 axis.unitsPerPixel = axis.dragValueRange / (g.plotter_.area.h - 1);
1161
1162 // While calculating axes, set 2dpan.
1163 if (axis.valueWindow || axis.valueRange) context.is2DPan = true;
1164 }
1165 };
1166
1167 /**
1168 * Called in response to an interaction model operation that
1169 * responds to an event that pans the view.
1170 *
1171 * It's used in the default callback for "mousemove" operations.
1172 * Custom interaction model builders can use it to provide the default
1173 * panning behavior.
1174 *
1175 * @param { Event } event the event object which led to the movePan call.
1176 * @param { Dygraph} g The dygraph on which to act.
1177 * @param { Object} context The dragging context object (with
1178 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1179 */
1180 Dygraph.Interaction.movePan = function(event, g, context) {
1181 context.dragEndX = g.dragGetX_(event, context);
1182 context.dragEndY = g.dragGetY_(event, context);
1183
1184 var minDate = context.initialLeftmostDate -
1185 (context.dragEndX - context.dragStartX) * context.xUnitsPerPixel;
1186 if (context.boundedDates) {
1187 minDate = Math.max(minDate, context.boundedDates[0]);
1188 }
1189 var maxDate = minDate + context.dateRange;
1190 if (context.boundedDates) {
1191 if (maxDate > context.boundedDates[1]) {
1192 // Adjust minDate, and recompute maxDate.
1193 minDate = minDate - (maxDate - context.boundedDates[1]);
1194 maxDate = minDate + context.dateRange;
1195 }
1196 }
1197
1198 g.dateWindow_ = [minDate, maxDate];
1199
1200 // y-axis scaling is automatic unless this is a full 2D pan.
1201 if (context.is2DPan) {
1202 // Adjust each axis appropriately.
1203 for (var i = 0; i < g.axes_.length; i++) {
1204 var axis = g.axes_[i];
1205
1206 var pixelsDragged = context.dragEndY - context.dragStartY;
1207 var unitsDragged = pixelsDragged * axis.unitsPerPixel;
1208
1209 var boundedValue = context.boundedValues ? context.boundedValues[i] : null;
1210
1211 // In log scale, maxValue and minValue are the logs of those values.
1212 var maxValue = axis.initialTopValue + unitsDragged;
1213 if (boundedValue) {
1214 maxValue = Math.min(maxValue, boundedValue[1]);
1215 }
1216 var minValue = maxValue - axis.dragValueRange;
1217 if (boundedValue) {
1218 if (minValue < boundedValue[0]) {
1219 // Adjust maxValue, and recompute minValue.
1220 maxValue = maxValue - (minValue - boundedValue[0]);
1221 minValue = maxValue - axis.dragValueRange;
1222 }
1223 }
1224 if (axis.logscale) {
1225 axis.valueWindow = [ Math.pow(Dygraph.LOG_SCALE, minValue),
1226 Math.pow(Dygraph.LOG_SCALE, maxValue) ];
1227 } else {
1228 axis.valueWindow = [ minValue, maxValue ];
1229 }
1230 }
1231 }
1232
1233 g.drawGraph_();
1234 };
1235
1236 /**
1237 * Called in response to an interaction model operation that
1238 * responds to an event that ends panning.
1239 *
1240 * It's used in the default callback for "mouseup" operations.
1241 * Custom interaction model builders can use it to provide the default
1242 * panning behavior.
1243 *
1244 * @param { Event } event the event object which led to the startZoom call.
1245 * @param { Dygraph} g The dygraph on which to act.
1246 * @param { Object} context The dragging context object (with
1247 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1248 */
1249 Dygraph.Interaction.endPan = function(event, g, context) {
1250 // TODO(konigsberg): Clear the context data from the axis.
1251 // TODO(konigsberg): mouseup should just delete the
1252 // context object, and mousedown should create a new one.
1253 context.isPanning = false;
1254 context.is2DPan = false;
1255 context.initialLeftmostDate = null;
1256 context.dateRange = null;
1257 context.valueRange = null;
1258 context.boundedDates = null;
1259 context.boundedValues = null;
1260 };
1261
1262 /**
1263 * Called in response to an interaction model operation that
1264 * responds to an event that starts zooming.
1265 *
1266 * It's used in the default callback for "mousedown" operations.
1267 * Custom interaction model builders can use it to provide the default
1268 * zooming behavior.
1269 *
1270 * @param { Event } event the event object which led to the startZoom call.
1271 * @param { Dygraph} g The dygraph on which to act.
1272 * @param { Object} context The dragging context object (with
1273 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1274 */
1275 Dygraph.Interaction.startZoom = function(event, g, context) {
1276 context.isZooming = true;
1277 };
1278
1279 /**
1280 * Called in response to an interaction model operation that
1281 * responds to an event that defines zoom boundaries.
1282 *
1283 * It's used in the default callback for "mousemove" operations.
1284 * Custom interaction model builders can use it to provide the default
1285 * zooming behavior.
1286 *
1287 * @param { Event } event the event object which led to the moveZoom call.
1288 * @param { Dygraph} g The dygraph on which to act.
1289 * @param { Object} context The dragging context object (with
1290 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1291 */
1292 Dygraph.Interaction.moveZoom = function(event, g, context) {
1293 context.dragEndX = g.dragGetX_(event, context);
1294 context.dragEndY = g.dragGetY_(event, context);
1295
1296 var xDelta = Math.abs(context.dragStartX - context.dragEndX);
1297 var yDelta = Math.abs(context.dragStartY - context.dragEndY);
1298
1299 // drag direction threshold for y axis is twice as large as x axis
1300 context.dragDirection = (xDelta < yDelta / 2) ? Dygraph.VERTICAL : Dygraph.HORIZONTAL;
1301
1302 g.drawZoomRect_(
1303 context.dragDirection,
1304 context.dragStartX,
1305 context.dragEndX,
1306 context.dragStartY,
1307 context.dragEndY,
1308 context.prevDragDirection,
1309 context.prevEndX,
1310 context.prevEndY);
1311
1312 context.prevEndX = context.dragEndX;
1313 context.prevEndY = context.dragEndY;
1314 context.prevDragDirection = context.dragDirection;
1315 };
1316
1317 /**
1318 * Called in response to an interaction model operation that
1319 * responds to an event that performs a zoom based on previously defined
1320 * bounds..
1321 *
1322 * It's used in the default callback for "mouseup" operations.
1323 * Custom interaction model builders can use it to provide the default
1324 * zooming behavior.
1325 *
1326 * @param { Event } event the event object which led to the endZoom call.
1327 * @param { Dygraph} g The dygraph on which to end the zoom.
1328 * @param { Object} context The dragging context object (with
1329 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1330 */
1331 Dygraph.Interaction.endZoom = function(event, g, context) {
1332 // TODO(konigsberg): Refactor or rename this fn -- it deals with clicks, too.
1333 context.isZooming = false;
1334 context.dragEndX = g.dragGetX_(event, context);
1335 context.dragEndY = g.dragGetY_(event, context);
1336 var regionWidth = Math.abs(context.dragEndX - context.dragStartX);
1337 var regionHeight = Math.abs(context.dragEndY - context.dragStartY);
1338
1339 if (regionWidth < 2 && regionHeight < 2 &&
1340 g.lastx_ != undefined && g.lastx_ != -1) {
1341 // TODO(danvk): pass along more info about the points, e.g. 'x'
1342 if (g.attr_('clickCallback') != null) {
1343 g.attr_('clickCallback')(event, g.lastx_, g.selPoints_);
1344 }
1345 if (g.attr_('pointClickCallback')) {
1346 // check if the click was on a particular point.
1347 var closestIdx = -1;
1348 var closestDistance = 0;
1349 for (var i = 0; i < g.selPoints_.length; i++) {
1350 var p = g.selPoints_[i];
1351 var distance = Math.pow(p.canvasx - context.dragEndX, 2) +
1352 Math.pow(p.canvasy - context.dragEndY, 2);
1353 if (closestIdx == -1 || distance < closestDistance) {
1354 closestDistance = distance;
1355 closestIdx = i;
1356 }
1357 }
1358
1359 // Allow any click within two pixels of the dot.
1360 var radius = g.attr_('highlightCircleSize') + 2;
1361 if (closestDistance <= 5 * 5) {
1362 g.attr_('pointClickCallback')(event, g.selPoints_[closestIdx]);
1363 }
1364 }
1365 }
1366
1367 if (regionWidth >= 10 && context.dragDirection == Dygraph.HORIZONTAL) {
1368 g.doZoomX_(Math.min(context.dragStartX, context.dragEndX),
1369 Math.max(context.dragStartX, context.dragEndX));
1370 } else if (regionHeight >= 10 && context.dragDirection == Dygraph.VERTICAL) {
1371 g.doZoomY_(Math.min(context.dragStartY, context.dragEndY),
1372 Math.max(context.dragStartY, context.dragEndY));
1373 } else {
1374 g.canvas_ctx_.clearRect(0, 0, g.canvas_.width, g.canvas_.height);
1375 }
1376 context.dragStartX = null;
1377 context.dragStartY = null;
1378 };
1379
1380 /**
1381 * Default interation model for dygraphs. You can refer to specific elements of
1382 * this when constructing your own interaction model, e.g.:
1383 * g.updateOptions( {
1384 * interactionModel: {
1385 * mousedown: Dygraph.defaultInteractionModel.mousedown
1386 * }
1387 * } );
1388 */
1389 Dygraph.Interaction.defaultModel = {
1390 // Track the beginning of drag events
1391 mousedown: function(event, g, context) {
1392 context.initializeMouseDown(event, g, context);
1393
1394 if (event.altKey || event.shiftKey) {
1395 Dygraph.startPan(event, g, context);
1396 } else {
1397 Dygraph.startZoom(event, g, context);
1398 }
1399 },
1400
1401 // Draw zoom rectangles when the mouse is down and the user moves around
1402 mousemove: function(event, g, context) {
1403 if (context.isZooming) {
1404 Dygraph.moveZoom(event, g, context);
1405 } else if (context.isPanning) {
1406 Dygraph.movePan(event, g, context);
1407 }
1408 },
1409
1410 mouseup: function(event, g, context) {
1411 if (context.isZooming) {
1412 Dygraph.endZoom(event, g, context);
1413 } else if (context.isPanning) {
1414 Dygraph.endPan(event, g, context);
1415 }
1416 },
1417
1418 // Temporarily cancel the dragging event when the mouse leaves the graph
1419 mouseout: function(event, g, context) {
1420 if (context.isZooming) {
1421 context.dragEndX = null;
1422 context.dragEndY = null;
1423 }
1424 },
1425
1426 // Disable zooming out if panning.
1427 dblclick: function(event, g, context) {
1428 if (event.altKey || event.shiftKey) {
1429 return;
1430 }
1431 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1432 // friendlier to public use.
1433 g.doUnzoom_();
1434 }
1435 };
1436
1437 Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.Interaction.defaultModel;
1438
1439 // old ways of accessing these methods/properties
1440 Dygraph.defaultInteractionModel = Dygraph.Interaction.defaultModel;
1441 Dygraph.endZoom = Dygraph.Interaction.endZoom;
1442 Dygraph.moveZoom = Dygraph.Interaction.moveZoom;
1443 Dygraph.startZoom = Dygraph.Interaction.startZoom;
1444 Dygraph.endPan = Dygraph.Interaction.endPan;
1445 Dygraph.movePan = Dygraph.Interaction.movePan;
1446 Dygraph.startPan = Dygraph.Interaction.startPan;
1447
1448 /**
1449 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1450 * events.
1451 * @private
1452 */
1453 Dygraph.prototype.createDragInterface_ = function() {
1454 var context = {
1455 // Tracks whether the mouse is down right now
1456 isZooming: false,
1457 isPanning: false, // is this drag part of a pan?
1458 is2DPan: false, // if so, is that pan 1- or 2-dimensional?
1459 dragStartX: null,
1460 dragStartY: null,
1461 dragEndX: null,
1462 dragEndY: null,
1463 dragDirection: null,
1464 prevEndX: null,
1465 prevEndY: null,
1466 prevDragDirection: null,
1467
1468 // The value on the left side of the graph when a pan operation starts.
1469 initialLeftmostDate: null,
1470
1471 // The number of units each pixel spans. (This won't be valid for log
1472 // scales)
1473 xUnitsPerPixel: null,
1474
1475 // TODO(danvk): update this comment
1476 // The range in second/value units that the viewport encompasses during a
1477 // panning operation.
1478 dateRange: null,
1479
1480 // Utility function to convert page-wide coordinates to canvas coords
1481 px: 0,
1482 py: 0,
1483
1484 // Values for use with panEdgeFraction, which limit how far outside the
1485 // graph's data boundaries it can be panned.
1486 boundedDates: null, // [minDate, maxDate]
1487 boundedValues: null, // [[minValue, maxValue] ...]
1488
1489 initializeMouseDown: function(event, g, context) {
1490 // prevents mouse drags from selecting page text.
1491 if (event.preventDefault) {
1492 event.preventDefault(); // Firefox, Chrome, etc.
1493 } else {
1494 event.returnValue = false; // IE
1495 event.cancelBubble = true;
1496 }
1497
1498 context.px = Dygraph.findPosX(g.canvas_);
1499 context.py = Dygraph.findPosY(g.canvas_);
1500 context.dragStartX = g.dragGetX_(event, context);
1501 context.dragStartY = g.dragGetY_(event, context);
1502 }
1503 };
1504
1505 var interactionModel = this.attr_("interactionModel");
1506
1507 // Self is the graph.
1508 var self = this;
1509
1510 // Function that binds the graph and context to the handler.
1511 var bindHandler = function(handler) {
1512 return function(event) {
1513 handler(event, self, context);
1514 };
1515 };
1516
1517 for (var eventName in interactionModel) {
1518 if (!interactionModel.hasOwnProperty(eventName)) continue;
1519 Dygraph.addEvent(this.mouseEventElement_, eventName,
1520 bindHandler(interactionModel[eventName]));
1521 }
1522
1523 // If the user releases the mouse button during a drag, but not over the
1524 // canvas, then it doesn't count as a zooming action.
1525 Dygraph.addEvent(document, 'mouseup', function(event) {
1526 if (context.isZooming || context.isPanning) {
1527 context.isZooming = false;
1528 context.dragStartX = null;
1529 context.dragStartY = null;
1530 }
1531
1532 if (context.isPanning) {
1533 context.isPanning = false;
1534 context.draggingDate = null;
1535 context.dateRange = null;
1536 for (var i = 0; i < self.axes_.length; i++) {
1537 delete self.axes_[i].draggingValue;
1538 delete self.axes_[i].dragValueRange;
1539 }
1540 }
1541 });
1542 };
1543
1544
1545 /**
1546 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1547 * up any previous zoom rectangles that were drawn. This could be optimized to
1548 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1549 * dots.
1550 *
1551 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1552 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1553 * @param {Number} startX The X position where the drag started, in canvas
1554 * coordinates.
1555 * @param {Number} endX The current X position of the drag, in canvas coords.
1556 * @param {Number} startY The Y position where the drag started, in canvas
1557 * coordinates.
1558 * @param {Number} endY The current Y position of the drag, in canvas coords.
1559 * @param {Number} prevDirection the value of direction on the previous call to
1560 * this function. Used to avoid excess redrawing
1561 * @param {Number} prevEndX The value of endX on the previous call to this
1562 * function. Used to avoid excess redrawing
1563 * @param {Number} prevEndY The value of endY on the previous call to this
1564 * function. Used to avoid excess redrawing
1565 * @private
1566 */
1567 Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY,
1568 endY, prevDirection, prevEndX,
1569 prevEndY) {
1570 var ctx = this.canvas_ctx_;
1571
1572 // Clean up from the previous rect if necessary
1573 if (prevDirection == Dygraph.HORIZONTAL) {
1574 ctx.clearRect(Math.min(startX, prevEndX), 0,
1575 Math.abs(startX - prevEndX), this.height_);
1576 } else if (prevDirection == Dygraph.VERTICAL){
1577 ctx.clearRect(0, Math.min(startY, prevEndY),
1578 this.width_, Math.abs(startY - prevEndY));
1579 }
1580
1581 // Draw a light-grey rectangle to show the new viewing area
1582 if (direction == Dygraph.HORIZONTAL) {
1583 if (endX && startX) {
1584 ctx.fillStyle = "rgba(128,128,128,0.33)";
1585 ctx.fillRect(Math.min(startX, endX), 0,
1586 Math.abs(endX - startX), this.height_);
1587 }
1588 }
1589 if (direction == Dygraph.VERTICAL) {
1590 if (endY && startY) {
1591 ctx.fillStyle = "rgba(128,128,128,0.33)";
1592 ctx.fillRect(0, Math.min(startY, endY),
1593 this.width_, Math.abs(endY - startY));
1594 }
1595 }
1596 };
1597
1598 /**
1599 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1600 * the canvas. The exact zoom window may be slightly larger if there are no data
1601 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1602 * which accepts dates that match the raw data. This function redraws the graph.
1603 *
1604 * @param {Number} lowX The leftmost pixel value that should be visible.
1605 * @param {Number} highX The rightmost pixel value that should be visible.
1606 * @private
1607 */
1608 Dygraph.prototype.doZoomX_ = function(lowX, highX) {
1609 // Find the earliest and latest dates contained in this canvasx range.
1610 // Convert the call to date ranges of the raw data.
1611 var minDate = this.toDataXCoord(lowX);
1612 var maxDate = this.toDataXCoord(highX);
1613 this.doZoomXDates_(minDate, maxDate);
1614 };
1615
1616 /**
1617 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1618 * method with doZoomX which accepts pixel coordinates. This function redraws
1619 * the graph.
1620 *
1621 * @param {Number} minDate The minimum date that should be visible.
1622 * @param {Number} maxDate The maximum date that should be visible.
1623 * @private
1624 */
1625 Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
1626 this.dateWindow_ = [minDate, maxDate];
1627 this.zoomed_x_ = true;
1628 this.drawGraph_();
1629 if (this.attr_("zoomCallback")) {
1630 this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
1631 }
1632 };
1633
1634 /**
1635 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1636 * the canvas. This function redraws the graph.
1637 *
1638 * @param {Number} lowY The topmost pixel value that should be visible.
1639 * @param {Number} highY The lowest pixel value that should be visible.
1640 * @private
1641 */
1642 Dygraph.prototype.doZoomY_ = function(lowY, highY) {
1643 // Find the highest and lowest values in pixel range for each axis.
1644 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1645 // This is because pixels increase as you go down on the screen, whereas data
1646 // coordinates increase as you go up the screen.
1647 var valueRanges = [];
1648 for (var i = 0; i < this.axes_.length; i++) {
1649 var hi = this.toDataYCoord(lowY, i);
1650 var low = this.toDataYCoord(highY, i);
1651 this.axes_[i].valueWindow = [low, hi];
1652 valueRanges.push([low, hi]);
1653 }
1654
1655 this.zoomed_y_ = true;
1656 this.drawGraph_();
1657 if (this.attr_("zoomCallback")) {
1658 var xRange = this.xAxisRange();
1659 var yRange = this.yAxisRange();
1660 this.attr_("zoomCallback")(xRange[0], xRange[1], this.yAxisRanges());
1661 }
1662 };
1663
1664 /**
1665 * Reset the zoom to the original view coordinates. This is the same as
1666 * double-clicking on the graph.
1667 *
1668 * @private
1669 */
1670 Dygraph.prototype.doUnzoom_ = function() {
1671 var dirty = false;
1672 if (this.dateWindow_ != null) {
1673 dirty = true;
1674 this.dateWindow_ = null;
1675 }
1676
1677 for (var i = 0; i < this.axes_.length; i++) {
1678 if (this.axes_[i].valueWindow != null) {
1679 dirty = true;
1680 delete this.axes_[i].valueWindow;
1681 }
1682 }
1683
1684 if (dirty) {
1685 // Putting the drawing operation before the callback because it resets
1686 // yAxisRange.
1687 this.zoomed_x_ = false;
1688 this.zoomed_y_ = false;
1689 this.drawGraph_();
1690 if (this.attr_("zoomCallback")) {
1691 var minDate = this.rawData_[0][0];
1692 var maxDate = this.rawData_[this.rawData_.length - 1][0];
1693 this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
1694 }
1695 }
1696 };
1697
1698 /**
1699 * When the mouse moves in the canvas, display information about a nearby data
1700 * point and draw dots over those points in the data series. This function
1701 * takes care of cleanup of previously-drawn dots.
1702 * @param {Object} event The mousemove event from the browser.
1703 * @private
1704 */
1705 Dygraph.prototype.mouseMove_ = function(event) {
1706 // This prevents JS errors when mousing over the canvas before data loads.
1707 var points = this.layout_.points;
1708 if (points === undefined) return;
1709
1710 var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_);
1711
1712 var lastx = -1;
1713 var lasty = -1;
1714
1715 // Loop through all the points and find the date nearest to our current
1716 // location.
1717 var minDist = 1e+100;
1718 var idx = -1;
1719 for (var i = 0; i < points.length; i++) {
1720 var point = points[i];
1721 if (point == null) continue;
1722 var dist = Math.abs(point.canvasx - canvasx);
1723 if (dist > minDist) continue;
1724 minDist = dist;
1725 idx = i;
1726 }
1727 if (idx >= 0) lastx = points[idx].xval;
1728
1729 // Extract the points we've selected
1730 this.selPoints_ = [];
1731 var l = points.length;
1732 if (!this.attr_("stackedGraph")) {
1733 for (var i = 0; i < l; i++) {
1734 if (points[i].xval == lastx) {
1735 this.selPoints_.push(points[i]);
1736 }
1737 }
1738 } else {
1739 // Need to 'unstack' points starting from the bottom
1740 var cumulative_sum = 0;
1741 for (var i = l - 1; i >= 0; i--) {
1742 if (points[i].xval == lastx) {
1743 var p = {}; // Clone the point since we modify it
1744 for (var k in points[i]) {
1745 p[k] = points[i][k];
1746 }
1747 p.yval -= cumulative_sum;
1748 cumulative_sum += p.yval;
1749 this.selPoints_.push(p);
1750 }
1751 }
1752 this.selPoints_.reverse();
1753 }
1754
1755 if (this.attr_("highlightCallback")) {
1756 var px = this.lastx_;
1757 if (px !== null && lastx != px) {
1758 // only fire if the selected point has changed.
1759 this.attr_("highlightCallback")(event, lastx, this.selPoints_, this.idxToRow_(idx));
1760 }
1761 }
1762
1763 // Save last x position for callbacks.
1764 this.lastx_ = lastx;
1765
1766 this.updateSelection_();
1767 };
1768
1769 /**
1770 * Transforms layout_.points index into data row number.
1771 * @param int layout_.points index
1772 * @return int row number, or -1 if none could be found.
1773 * @private
1774 */
1775 Dygraph.prototype.idxToRow_ = function(idx) {
1776 if (idx < 0) return -1;
1777
1778 for (var i in this.layout_.datasets) {
1779 if (idx < this.layout_.datasets[i].length) {
1780 return this.boundaryIds_[0][0]+idx;
1781 }
1782 idx -= this.layout_.datasets[i].length;
1783 }
1784 return -1;
1785 };
1786
1787 /**
1788 * @private
1789 * @param { Number } x The number to consider.
1790 * @return { Boolean } Whether the number is zero or NaN.
1791 */
1792 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1793 Dygraph.isOK = function(x) {
1794 return x && !isNaN(x);
1795 };
1796
1797 /**
1798 * @private
1799 * Generates HTML for the legend which is displayed when hovering over the
1800 * chart. If no selected points are specified, a default legend is returned
1801 * (this may just be the empty string).
1802 * @param { Number } [x] The x-value of the selected points.
1803 * @param { [Object] } [sel_points] List of selected points for the given
1804 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1805 */
1806 Dygraph.prototype.generateLegendHTML_ = function(x, sel_points) {
1807 // If no points are selected, we display a default legend. Traditionally,
1808 // this has been blank. But a better default would be a conventional legend,
1809 // which provides essential information for a non-interactive chart.
1810 if (typeof(x) === 'undefined') {
1811 if (this.attr_('legend') != 'always') return '';
1812
1813 var sepLines = this.attr_('labelsSeparateLines');
1814 var labels = this.attr_('labels');
1815 var html = '';
1816 for (var i = 1; i < labels.length; i++) {
1817 if (!this.visibility()[i - 1]) continue;
1818 var c = this.plotter_.colors[labels[i]];
1819 if (html != '') html += (sepLines ? '<br/>' : ' ');
1820 html += "<b><span style='color: " + c + ";'>&mdash;" + labels[i] +
1821 "</span></b>";
1822 }
1823 return html;
1824 }
1825
1826 var html = this.attr_('xValueFormatter')(x) + ":";
1827
1828 var fmtFunc = this.attr_('yValueFormatter');
1829 var showZeros = this.attr_("labelsShowZeroValues");
1830 var sepLines = this.attr_("labelsSeparateLines");
1831 for (var i = 0; i < this.selPoints_.length; i++) {
1832 var pt = this.selPoints_[i];
1833 if (pt.yval == 0 && !showZeros) continue;
1834 if (!Dygraph.isOK(pt.canvasy)) continue;
1835 if (sepLines) html += "<br/>";
1836
1837 var c = this.plotter_.colors[pt.name];
1838 var yval = fmtFunc(pt.yval, this);
1839 // TODO(danvk): use a template string here and make it an attribute.
1840 html += " <b><span style='color: " + c + ";'>"
1841 + pt.name + "</span></b>:"
1842 + yval;
1843 }
1844 return html;
1845 };
1846
1847 /**
1848 * @private
1849 * Displays information about the selected points in the legend. If there is no
1850 * selection, the legend will be cleared.
1851 * @param { Number } [x] The x-value of the selected points.
1852 * @param { [Object] } [sel_points] List of selected points for the given
1853 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1854 */
1855 Dygraph.prototype.setLegendHTML_ = function(x, sel_points) {
1856 var html = this.generateLegendHTML_(x, sel_points);
1857 var labelsDiv = this.attr_("labelsDiv");
1858 if (labelsDiv !== null) {
1859 labelsDiv.innerHTML = html;
1860 } else {
1861 if (typeof(this.shown_legend_error_) == 'undefined') {
1862 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1863 this.shown_legend_error_ = true;
1864 }
1865 }
1866 };
1867
1868 /**
1869 * Draw dots over the selectied points in the data series. This function
1870 * takes care of cleanup of previously-drawn dots.
1871 * @private
1872 */
1873 Dygraph.prototype.updateSelection_ = function() {
1874 // Clear the previously drawn vertical, if there is one
1875 var ctx = this.canvas_ctx_;
1876 if (this.previousVerticalX_ >= 0) {
1877 // Determine the maximum highlight circle size.
1878 var maxCircleSize = 0;
1879 var labels = this.attr_('labels');
1880 for (var i = 1; i < labels.length; i++) {
1881 var r = this.attr_('highlightCircleSize', labels[i]);
1882 if (r > maxCircleSize) maxCircleSize = r;
1883 }
1884 var px = this.previousVerticalX_;
1885 ctx.clearRect(px - maxCircleSize - 1, 0,
1886 2 * maxCircleSize + 2, this.height_);
1887 }
1888
1889 if (this.selPoints_.length > 0) {
1890 // Set the status message to indicate the selected point(s)
1891 if (this.attr_('showLabelsOnHighlight')) {
1892 this.setLegendHTML_(this.lastx_, this.selPoints_);
1893 }
1894
1895 // Draw colored circles over the center of each selected point
1896 var canvasx = this.selPoints_[0].canvasx;
1897 ctx.save();
1898 for (var i = 0; i < this.selPoints_.length; i++) {
1899 var pt = this.selPoints_[i];
1900 if (!Dygraph.isOK(pt.canvasy)) continue;
1901
1902 var circleSize = this.attr_('highlightCircleSize', pt.name);
1903 ctx.beginPath();
1904 ctx.fillStyle = this.plotter_.colors[pt.name];
1905 ctx.arc(canvasx, pt.canvasy, circleSize, 0, 2 * Math.PI, false);
1906 ctx.fill();
1907 }
1908 ctx.restore();
1909
1910 this.previousVerticalX_ = canvasx;
1911 }
1912 };
1913
1914 /**
1915 * Manually set the selected points and display information about them in the
1916 * legend. The selection can be cleared using clearSelection() and queried
1917 * using getSelection().
1918 * @param { Integer } row number that should be highlighted (i.e. appear with
1919 * hover dots on the chart). Set to false to clear any selection.
1920 */
1921 Dygraph.prototype.setSelection = function(row) {
1922 // Extract the points we've selected
1923 this.selPoints_ = [];
1924 var pos = 0;
1925
1926 if (row !== false) {
1927 row = row-this.boundaryIds_[0][0];
1928 }
1929
1930 if (row !== false && row >= 0) {
1931 for (var i in this.layout_.datasets) {
1932 if (row < this.layout_.datasets[i].length) {
1933 var point = this.layout_.points[pos+row];
1934
1935 if (this.attr_("stackedGraph")) {
1936 point = this.layout_.unstackPointAtIndex(pos+row);
1937 }
1938
1939 this.selPoints_.push(point);
1940 }
1941 pos += this.layout_.datasets[i].length;
1942 }
1943 }
1944
1945 if (this.selPoints_.length) {
1946 this.lastx_ = this.selPoints_[0].xval;
1947 this.updateSelection_();
1948 } else {
1949 this.clearSelection();
1950 }
1951
1952 };
1953
1954 /**
1955 * The mouse has left the canvas. Clear out whatever artifacts remain
1956 * @param {Object} event the mouseout event from the browser.
1957 * @private
1958 */
1959 Dygraph.prototype.mouseOut_ = function(event) {
1960 if (this.attr_("unhighlightCallback")) {
1961 this.attr_("unhighlightCallback")(event);
1962 }
1963
1964 if (this.attr_("hideOverlayOnMouseOut")) {
1965 this.clearSelection();
1966 }
1967 };
1968
1969 /**
1970 * Clears the current selection (i.e. points that were highlighted by moving
1971 * the mouse over the chart).
1972 */
1973 Dygraph.prototype.clearSelection = function() {
1974 // Get rid of the overlay data
1975 this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_);
1976 this.setLegendHTML_();
1977 this.selPoints_ = [];
1978 this.lastx_ = -1;
1979 }
1980
1981 /**
1982 * Returns the number of the currently selected row. To get data for this row,
1983 * you can use the getValue method.
1984 * @return { Integer } row number, or -1 if nothing is selected
1985 */
1986 Dygraph.prototype.getSelection = function() {
1987 if (!this.selPoints_ || this.selPoints_.length < 1) {
1988 return -1;
1989 }
1990
1991 for (var row=0; row<this.layout_.points.length; row++ ) {
1992 if (this.layout_.points[row].x == this.selPoints_[0].x) {
1993 return row + this.boundaryIds_[0][0];
1994 }
1995 }
1996 return -1;
1997 };
1998
1999 /**
2000 * Number formatting function which mimicks the behavior of %g in printf, i.e.
2001 * either exponential or fixed format (without trailing 0s) is used depending on
2002 * the length of the generated string. The advantage of this format is that
2003 * there is a predictable upper bound on the resulting string length,
2004 * significant figures are not dropped, and normal numbers are not displayed in
2005 * exponential notation.
2006 *
2007 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
2008 * It creates strings which are too long for absolute values between 10^-4 and
2009 * 10^-6, e.g. '0.00001' instead of '1e-5'. See tests/number-format.html for
2010 * output examples.
2011 *
2012 * @param {Number} x The number to format
2013 * @param {Number} opt_precision The precision to use, default 2.
2014 * @return {String} A string formatted like %g in printf. The max generated
2015 * string length should be precision + 6 (e.g 1.123e+300).
2016 */
2017 Dygraph.floatFormat = function(x, opt_precision) {
2018 // Avoid invalid precision values; [1, 21] is the valid range.
2019 var p = Math.min(Math.max(1, opt_precision || 2), 21);
2020
2021 // This is deceptively simple. The actual algorithm comes from:
2022 //
2023 // Max allowed length = p + 4
2024 // where 4 comes from 'e+n' and '.'.
2025 //
2026 // Length of fixed format = 2 + y + p
2027 // where 2 comes from '0.' and y = # of leading zeroes.
2028 //
2029 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
2030 // 1.0e-3.
2031 //
2032 // Since the behavior of toPrecision() is identical for larger numbers, we
2033 // don't have to worry about the other bound.
2034 //
2035 // Finally, the argument for toExponential() is the number of trailing digits,
2036 // so we take off 1 for the value before the '.'.
2037 return (Math.abs(x) < 1.0e-3 && x != 0.0) ?
2038 x.toExponential(p - 1) : x.toPrecision(p);
2039 };
2040
2041 /**
2042 * @private
2043 * Return a string version of a number. This respects the digitsAfterDecimal
2044 * and maxNumberWidth options.
2045 * @param {Number} x The number to be formatted
2046 * @param {Dygraph} g The dygraph object
2047 */
2048 Dygraph.numberFormatter = function(x, g) {
2049 var sigFigs = g.attr_('sigFigs');
2050
2051 if (sigFigs !== null) {
2052 // User has opted for a fixed number of significant figures.
2053 return Dygraph.floatFormat(x, sigFigs);
2054 }
2055
2056 var digits = g.attr_('digitsAfterDecimal');
2057 var maxNumberWidth = g.attr_('maxNumberWidth');
2058
2059 // switch to scientific notation if we underflow or overflow fixed display.
2060 if (x !== 0.0 &&
2061 (Math.abs(x) >= Math.pow(10, maxNumberWidth) ||
2062 Math.abs(x) < Math.pow(10, -digits))) {
2063 return x.toExponential(digits);
2064 } else {
2065 return '' + Dygraph.round_(x, digits);
2066 }
2067 };
2068
2069 /**
2070 * @private
2071 * Converts '9' to '09' (useful for dates)
2072 */
2073 Dygraph.zeropad = function(x) {
2074 if (x < 10) return "0" + x; else return "" + x;
2075 };
2076
2077 /**
2078 * Return a string version of the hours, minutes and seconds portion of a date.
2079 * @param {Number} date The JavaScript date (ms since epoch)
2080 * @return {String} A time of the form "HH:MM:SS"
2081 * @private
2082 */
2083 Dygraph.hmsString_ = function(date) {
2084 var zeropad = Dygraph.zeropad;
2085 var d = new Date(date);
2086 if (d.getSeconds()) {
2087 return zeropad(d.getHours()) + ":" +
2088 zeropad(d.getMinutes()) + ":" +
2089 zeropad(d.getSeconds());
2090 } else {
2091 return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
2092 }
2093 };
2094
2095 /**
2096 * Convert a JS date to a string appropriate to display on an axis that
2097 * is displaying values at the stated granularity.
2098 * @param {Date} date The date to format
2099 * @param {Number} granularity One of the Dygraph granularity constants
2100 * @return {String} The formatted date
2101 * @private
2102 */
2103 Dygraph.dateAxisFormatter = function(date, granularity) {
2104 if (granularity >= Dygraph.DECADAL) {
2105 return date.strftime('%Y');
2106 } else if (granularity >= Dygraph.MONTHLY) {
2107 return date.strftime('%b %y');
2108 } else {
2109 var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
2110 if (frac == 0 || granularity >= Dygraph.DAILY) {
2111 return new Date(date.getTime() + 3600*1000).strftime('%d%b');
2112 } else {
2113 return Dygraph.hmsString_(date.getTime());
2114 }
2115 }
2116 };
2117
2118 /**
2119 * Convert a JS date (millis since epoch) to YYYY/MM/DD
2120 * @param {Number} date The JavaScript date (ms since epoch)
2121 * @return {String} A date of the form "YYYY/MM/DD"
2122 * @private
2123 */
2124 Dygraph.dateString_ = function(date) {
2125 var zeropad = Dygraph.zeropad;
2126 var d = new Date(date);
2127
2128 // Get the year:
2129 var year = "" + d.getFullYear();
2130 // Get a 0 padded month string
2131 var month = zeropad(d.getMonth() + 1); //months are 0-offset, sigh
2132 // Get a 0 padded day string
2133 var day = zeropad(d.getDate());
2134
2135 var ret = "";
2136 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
2137 if (frac) ret = " " + Dygraph.hmsString_(date);
2138
2139 return year + "/" + month + "/" + day + ret;
2140 };
2141
2142 /**
2143 * Round a number to the specified number of digits past the decimal point.
2144 * @param {Number} num The number to round
2145 * @param {Number} places The number of decimals to which to round
2146 * @return {Number} The rounded number
2147 * @private
2148 */
2149 Dygraph.round_ = function(num, places) {
2150 var shift = Math.pow(10, places);
2151 return Math.round(num * shift)/shift;
2152 };
2153
2154 /**
2155 * Fires when there's data available to be graphed.
2156 * @param {String} data Raw CSV data to be plotted
2157 * @private
2158 */
2159 Dygraph.prototype.loadedEvent_ = function(data) {
2160 this.rawData_ = this.parseCSV_(data);
2161 this.predraw_();
2162 };
2163
2164 Dygraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
2165 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
2166 Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
2167
2168 /**
2169 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2170 * @private
2171 */
2172 Dygraph.prototype.addXTicks_ = function() {
2173 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2174 var range;
2175 if (this.dateWindow_) {
2176 range = [this.dateWindow_[0], this.dateWindow_[1]];
2177 } else {
2178 range = [this.rawData_[0][0], this.rawData_[this.rawData_.length - 1][0]];
2179 }
2180
2181 var xTicks = this.attr_('xTicker')(range[0], range[1], this);
2182 this.layout_.setXTicks(xTicks);
2183 };
2184
2185 // Time granularity enumeration
2186 Dygraph.SECONDLY = 0;
2187 Dygraph.TWO_SECONDLY = 1;
2188 Dygraph.FIVE_SECONDLY = 2;
2189 Dygraph.TEN_SECONDLY = 3;
2190 Dygraph.THIRTY_SECONDLY = 4;
2191 Dygraph.MINUTELY = 5;
2192 Dygraph.TWO_MINUTELY = 6;
2193 Dygraph.FIVE_MINUTELY = 7;
2194 Dygraph.TEN_MINUTELY = 8;
2195 Dygraph.THIRTY_MINUTELY = 9;
2196 Dygraph.HOURLY = 10;
2197 Dygraph.TWO_HOURLY = 11;
2198 Dygraph.SIX_HOURLY = 12;
2199 Dygraph.DAILY = 13;
2200 Dygraph.WEEKLY = 14;
2201 Dygraph.MONTHLY = 15;
2202 Dygraph.QUARTERLY = 16;
2203 Dygraph.BIANNUAL = 17;
2204 Dygraph.ANNUAL = 18;
2205 Dygraph.DECADAL = 19;
2206 Dygraph.CENTENNIAL = 20;
2207 Dygraph.NUM_GRANULARITIES = 21;
2208
2209 Dygraph.SHORT_SPACINGS = [];
2210 Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
2211 Dygraph.SHORT_SPACINGS[Dygraph.TWO_SECONDLY] = 1000 * 2;
2212 Dygraph.SHORT_SPACINGS[Dygraph.FIVE_SECONDLY] = 1000 * 5;
2213 Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10;
2214 Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30;
2215 Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60;
2216 Dygraph.SHORT_SPACINGS[Dygraph.TWO_MINUTELY] = 1000 * 60 * 2;
2217 Dygraph.SHORT_SPACINGS[Dygraph.FIVE_MINUTELY] = 1000 * 60 * 5;
2218 Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10;
2219 Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
2220 Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600;
2221 Dygraph.SHORT_SPACINGS[Dygraph.TWO_HOURLY] = 1000 * 3600 * 2;
2222 Dygraph.SHORT_SPACINGS[Dygraph.SIX_HOURLY] = 1000 * 3600 * 6;
2223 Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
2224 Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
2225
2226 /**
2227 * @private
2228 * If we used this time granularity, how many ticks would there be?
2229 * This is only an approximation, but it's generally good enough.
2230 */
2231 Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
2232 if (granularity < Dygraph.MONTHLY) {
2233 // Generate one tick mark for every fixed interval of time.
2234 var spacing = Dygraph.SHORT_SPACINGS[granularity];
2235 return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing);
2236 } else {
2237 var year_mod = 1; // e.g. to only print one point every 10 years.
2238 var num_months = 12;
2239 if (granularity == Dygraph.QUARTERLY) num_months = 3;
2240 if (granularity == Dygraph.BIANNUAL) num_months = 2;
2241 if (granularity == Dygraph.ANNUAL) num_months = 1;
2242 if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
2243 if (granularity == Dygraph.CENTENNIAL) { num_months = 1; year_mod = 100; }
2244
2245 var msInYear = 365.2524 * 24 * 3600 * 1000;
2246 var num_years = 1.0 * (end_time - start_time) / msInYear;
2247 return Math.floor(0.5 + 1.0 * num_years * num_months / year_mod);
2248 }
2249 };
2250
2251 /**
2252 * @private
2253 *
2254 * Construct an x-axis of nicely-formatted times on meaningful boundaries
2255 * (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2256 *
2257 * Returns an array containing {v: millis, label: label} dictionaries.
2258 */
2259 Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
2260 var formatter = this.attr_("xAxisLabelFormatter");
2261 var ticks = [];
2262 if (granularity < Dygraph.MONTHLY) {
2263 // Generate one tick mark for every fixed interval of time.
2264 var spacing = Dygraph.SHORT_SPACINGS[granularity];
2265 var format = '%d%b'; // e.g. "1Jan"
2266
2267 // Find a time less than start_time which occurs on a "nice" time boundary
2268 // for this granularity.
2269 var g = spacing / 1000;
2270 var d = new Date(start_time);
2271 if (g <= 60) { // seconds
2272 var x = d.getSeconds(); d.setSeconds(x - x % g);
2273 } else {
2274 d.setSeconds(0);
2275 g /= 60;
2276 if (g <= 60) { // minutes
2277 var x = d.getMinutes(); d.setMinutes(x - x % g);
2278 } else {
2279 d.setMinutes(0);
2280 g /= 60;
2281
2282 if (g <= 24) { // days
2283 var x = d.getHours(); d.setHours(x - x % g);
2284 } else {
2285 d.setHours(0);
2286 g /= 24;
2287
2288 if (g == 7) { // one week
2289 d.setDate(d.getDate() - d.getDay());
2290 }
2291 }
2292 }
2293 }
2294 start_time = d.getTime();
2295
2296 for (var t = start_time; t <= end_time; t += spacing) {
2297 ticks.push({ v:t, label: formatter(new Date(t), granularity) });
2298 }
2299 } else {
2300 // Display a tick mark on the first of a set of months of each year.
2301 // Years get a tick mark iff y % year_mod == 0. This is useful for
2302 // displaying a tick mark once every 10 years, say, on long time scales.
2303 var months;
2304 var year_mod = 1; // e.g. to only print one point every 10 years.
2305
2306 if (granularity == Dygraph.MONTHLY) {
2307 months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2308 } else if (granularity == Dygraph.QUARTERLY) {
2309 months = [ 0, 3, 6, 9 ];
2310 } else if (granularity == Dygraph.BIANNUAL) {
2311 months = [ 0, 6 ];
2312 } else if (granularity == Dygraph.ANNUAL) {
2313 months = [ 0 ];
2314 } else if (granularity == Dygraph.DECADAL) {
2315 months = [ 0 ];
2316 year_mod = 10;
2317 } else if (granularity == Dygraph.CENTENNIAL) {
2318 months = [ 0 ];
2319 year_mod = 100;
2320 } else {
2321 this.warn("Span of dates is too long");
2322 }
2323
2324 var start_year = new Date(start_time).getFullYear();
2325 var end_year = new Date(end_time).getFullYear();
2326 var zeropad = Dygraph.zeropad;
2327 for (var i = start_year; i <= end_year; i++) {
2328 if (i % year_mod != 0) continue;
2329 for (var j = 0; j < months.length; j++) {
2330 var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
2331 var t = Dygraph.dateStrToMillis(date_str);
2332 if (t < start_time || t > end_time) continue;
2333 ticks.push({ v:t, label: formatter(new Date(t), granularity) });
2334 }
2335 }
2336 }
2337
2338 return ticks;
2339 };
2340
2341
2342 /**
2343 * Add ticks to the x-axis based on a date range.
2344 * @param {Number} startDate Start of the date window (millis since epoch)
2345 * @param {Number} endDate End of the date window (millis since epoch)
2346 * @param {Dygraph} self The dygraph object
2347 * @return { [Object] } Array of {label, value} tuples.
2348 * @public
2349 */
2350 Dygraph.dateTicker = function(startDate, endDate, self) {
2351 // TODO(danvk): why does this take 'self' as a param?
2352 var chosen = -1;
2353 for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) {
2354 var num_ticks = self.NumXTicks(startDate, endDate, i);
2355 if (self.width_ / num_ticks >= self.attr_('pixelsPerXLabel')) {
2356 chosen = i;
2357 break;
2358 }
2359 }
2360
2361 if (chosen >= 0) {
2362 return self.GetXAxis(startDate, endDate, chosen);
2363 } else {
2364 // TODO(danvk): signal error.
2365 }
2366 };
2367
2368 /**
2369 * @private
2370 * This is a list of human-friendly values at which to show tick marks on a log
2371 * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2372 * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2373 * NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2374 */
2375 Dygraph.PREFERRED_LOG_TICK_VALUES = function() {
2376 var vals = [];
2377 for (var power = -39; power <= 39; power++) {
2378 var range = Math.pow(10, power);
2379 for (var mult = 1; mult <= 9; mult++) {
2380 var val = range * mult;
2381 vals.push(val);
2382 }
2383 }
2384 return vals;
2385 }();
2386
2387 /**
2388 * @private
2389 * Implementation of binary search over an array.
2390 * Currently does not work when val is outside the range of arry's values.
2391 * @param { Integer } val the value to search for
2392 * @param { Integer[] } arry is the value over which to search
2393 * @param { Integer } abs If abs > 0, find the lowest entry greater than val
2394 * If abs < 0, find the highest entry less than val.
2395 * if abs == 0, find the entry that equals val.
2396 * @param { Integer } [low] The first index in arry to consider (optional)
2397 * @param { Integer } [high] The last index in arry to consider (optional)
2398 */
2399 Dygraph.binarySearch = function(val, arry, abs, low, high) {
2400 if (low == null || high == null) {
2401 low = 0;
2402 high = arry.length - 1;
2403 }
2404 if (low > high) {
2405 return -1;
2406 }
2407 if (abs == null) {
2408 abs = 0;
2409 }
2410 var validIndex = function(idx) {
2411 return idx >= 0 && idx < arry.length;
2412 }
2413 var mid = parseInt((low + high) / 2);
2414 var element = arry[mid];
2415 if (element == val) {
2416 return mid;
2417 }
2418 if (element > val) {
2419 if (abs > 0) {
2420 // Accept if element > val, but also if prior element < val.
2421 var idx = mid - 1;
2422 if (validIndex(idx) && arry[idx] < val) {
2423 return mid;
2424 }
2425 }
2426 return Dygraph.binarySearch(val, arry, abs, low, mid - 1);
2427 }
2428 if (element < val) {
2429 if (abs < 0) {
2430 // Accept if element < val, but also if prior element > val.
2431 var idx = mid + 1;
2432 if (validIndex(idx) && arry[idx] > val) {
2433 return mid;
2434 }
2435 }
2436 return Dygraph.binarySearch(val, arry, abs, mid + 1, high);
2437 }
2438 };
2439
2440 // TODO(konigsberg): Update comment.
2441 /**
2442 * Add ticks when the x axis has numbers on it (instead of dates)
2443 *
2444 * @param {Number} minV minimum value
2445 * @param {Number} maxV maximum value
2446 * @param self
2447 * @param {function} attribute accessor function.
2448 * @return {[Object]} Array of {label, value} tuples.
2449 */
2450 Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) {
2451 var attr = function(k) {
2452 if (axis_props && axis_props.hasOwnProperty(k)) return axis_props[k];
2453 return self.attr_(k);
2454 };
2455
2456 var ticks = [];
2457 if (vals) {
2458 for (var i = 0; i < vals.length; i++) {
2459 ticks.push({v: vals[i]});
2460 }
2461 } else {
2462 if (axis_props && attr("logscale")) {
2463 var pixelsPerTick = attr('pixelsPerYLabel');
2464 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2465 var nTicks = Math.floor(self.height_ / pixelsPerTick);
2466 var minIdx = Dygraph.binarySearch(minV, Dygraph.PREFERRED_LOG_TICK_VALUES, 1);
2467 var maxIdx = Dygraph.binarySearch(maxV, Dygraph.PREFERRED_LOG_TICK_VALUES, -1);
2468 if (minIdx == -1) {
2469 minIdx = 0;
2470 }
2471 if (maxIdx == -1) {
2472 maxIdx = Dygraph.PREFERRED_LOG_TICK_VALUES.length - 1;
2473 }
2474 // Count the number of tick values would appear, if we can get at least
2475 // nTicks / 4 accept them.
2476 var lastDisplayed = null;
2477 if (maxIdx - minIdx >= nTicks / 4) {
2478 var axisId = axis_props.yAxisId;
2479 for (var idx = maxIdx; idx >= minIdx; idx--) {
2480 var tickValue = Dygraph.PREFERRED_LOG_TICK_VALUES[idx];
2481 var domCoord = axis_props.g.toDomYCoord(tickValue, axisId);
2482 var tick = { v: tickValue };
2483 if (lastDisplayed == null) {
2484 lastDisplayed = {
2485 tickValue : tickValue,
2486 domCoord : domCoord
2487 };
2488 } else {
2489 if (domCoord - lastDisplayed.domCoord >= pixelsPerTick) {
2490 lastDisplayed = {
2491 tickValue : tickValue,
2492 domCoord : domCoord
2493 };
2494 } else {
2495 tick.label = "";
2496 }
2497 }
2498 ticks.push(tick);
2499 }
2500 // Since we went in backwards order.
2501 ticks.reverse();
2502 }
2503 }
2504
2505 // ticks.length won't be 0 if the log scale function finds values to insert.
2506 if (ticks.length == 0) {
2507 // Basic idea:
2508 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2509 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
2510 // The first spacing greater than pixelsPerYLabel is what we use.
2511 // TODO(danvk): version that works on a log scale.
2512 if (attr("labelsKMG2")) {
2513 var mults = [1, 2, 4, 8];
2514 } else {
2515 var mults = [1, 2, 5];
2516 }
2517 var scale, low_val, high_val, nTicks;
2518 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2519 var pixelsPerTick = attr('pixelsPerYLabel');
2520 for (var i = -10; i < 50; i++) {
2521 if (attr("labelsKMG2")) {
2522 var base_scale = Math.pow(16, i);
2523 } else {
2524 var base_scale = Math.pow(10, i);
2525 }
2526 for (var j = 0; j < mults.length; j++) {
2527 scale = base_scale * mults[j];
2528 low_val = Math.floor(minV / scale) * scale;
2529 high_val = Math.ceil(maxV / scale) * scale;
2530 nTicks = Math.abs(high_val - low_val) / scale;
2531 var spacing = self.height_ / nTicks;
2532 // wish I could break out of both loops at once...
2533 if (spacing > pixelsPerTick) break;
2534 }
2535 if (spacing > pixelsPerTick) break;
2536 }
2537
2538 // Construct the set of ticks.
2539 // Allow reverse y-axis if it's explicitly requested.
2540 if (low_val > high_val) scale *= -1;
2541 for (var i = 0; i < nTicks; i++) {
2542 var tickV = low_val + i * scale;
2543 ticks.push( {v: tickV} );
2544 }
2545 }
2546 }
2547
2548 // Add formatted labels to the ticks.
2549 var k;
2550 var k_labels = [];
2551 if (attr("labelsKMB")) {
2552 k = 1000;
2553 k_labels = [ "K", "M", "B", "T" ];
2554 }
2555 if (attr("labelsKMG2")) {
2556 if (k) self.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2557 k = 1024;
2558 k_labels = [ "k", "M", "G", "T" ];
2559 }
2560 var formatter = attr('yAxisLabelFormatter') ?
2561 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2562
2563 // Add labels to the ticks.
2564 for (var i = 0; i < ticks.length; i++) {
2565 if (ticks[i].label !== undefined) continue; // Use current label.
2566 var tickV = ticks[i].v;
2567 var absTickV = Math.abs(tickV);
2568 var label = formatter(tickV, self);
2569 if (k_labels.length > 0) {
2570 // Round up to an appropriate unit.
2571 var n = k*k*k*k;
2572 for (var j = 3; j >= 0; j--, n /= k) {
2573 if (absTickV >= n) {
2574 label = Dygraph.round_(tickV / n, attr('digitsAfterDecimal')) + k_labels[j];
2575 break;
2576 }
2577 }
2578 }
2579 ticks[i].label = label;
2580 }
2581
2582 return ticks;
2583 };
2584
2585 /**
2586 * @private
2587 * Computes the range of the data series (including confidence intervals).
2588 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2589 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2590 * @return [low, high]
2591 */
2592 Dygraph.prototype.extremeValues_ = function(series) {
2593 var minY = null, maxY = null;
2594
2595 var bars = this.attr_("errorBars") || this.attr_("customBars");
2596 if (bars) {
2597 // With custom bars, maxY is the max of the high values.
2598 for (var j = 0; j < series.length; j++) {
2599 var y = series[j][1][0];
2600 if (!y) continue;
2601 var low = y - series[j][1][1];
2602 var high = y + series[j][1][2];
2603 if (low > y) low = y; // this can happen with custom bars,
2604 if (high < y) high = y; // e.g. in tests/custom-bars.html
2605 if (maxY == null || high > maxY) {
2606 maxY = high;
2607 }
2608 if (minY == null || low < minY) {
2609 minY = low;
2610 }
2611 }
2612 } else {
2613 for (var j = 0; j < series.length; j++) {
2614 var y = series[j][1];
2615 if (y === null || isNaN(y)) continue;
2616 if (maxY == null || y > maxY) {
2617 maxY = y;
2618 }
2619 if (minY == null || y < minY) {
2620 minY = y;
2621 }
2622 }
2623 }
2624
2625 return [minY, maxY];
2626 };
2627
2628 /**
2629 * @private
2630 * This function is called once when the chart's data is changed or the options
2631 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2632 * idea is that values derived from the chart's data can be computed here,
2633 * rather than every time the chart is drawn. This includes things like the
2634 * number of axes, rolling averages, etc.
2635 */
2636 Dygraph.prototype.predraw_ = function() {
2637 // TODO(danvk): move more computations out of drawGraph_ and into here.
2638 this.computeYAxes_();
2639
2640 // Create a new plotter.
2641 if (this.plotter_) this.plotter_.clear();
2642 this.plotter_ = new DygraphCanvasRenderer(this,
2643 this.hidden_,
2644 this.hidden_ctx_,
2645 this.layout_,
2646 this.renderOptions_);
2647
2648 // The roller sits in the bottom left corner of the chart. We don't know where
2649 // this will be until the options are available, so it's positioned here.
2650 this.createRollInterface_();
2651
2652 // Same thing applies for the labelsDiv. It's right edge should be flush with
2653 // the right edge of the charting area (which may not be the same as the right
2654 // edge of the div, if we have two y-axes.
2655 this.positionLabelsDiv_();
2656
2657 // If the data or options have changed, then we'd better redraw.
2658 this.drawGraph_();
2659 };
2660
2661 /**
2662 * Update the graph with new data. This method is called when the viewing area
2663 * has changed. If the underlying data or options have changed, predraw_ will
2664 * be called before drawGraph_ is called.
2665 * @private
2666 */
2667 Dygraph.prototype.drawGraph_ = function() {
2668 var data = this.rawData_;
2669
2670 // This is used to set the second parameter to drawCallback, below.
2671 var is_initial_draw = this.is_initial_draw_;
2672 this.is_initial_draw_ = false;
2673
2674 var minY = null, maxY = null;
2675 this.layout_.removeAllDatasets();
2676 this.setColors_();
2677 this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2678
2679 // Loop over the fields (series). Go from the last to the first,
2680 // because if they're stacked that's how we accumulate the values.
2681
2682 var cumulative_y = []; // For stacked series.
2683 var datasets = [];
2684
2685 var extremes = {}; // series name -> [low, high]
2686
2687 // Loop over all fields and create datasets
2688 for (var i = data[0].length - 1; i >= 1; i--) {
2689 if (!this.visibility()[i - 1]) continue;
2690
2691 var seriesName = this.attr_("labels")[i];
2692 var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
2693 var logScale = this.attr_('logscale', i);
2694
2695 var series = [];
2696 for (var j = 0; j < data.length; j++) {
2697 var date = data[j][0];
2698 var point = data[j][i];
2699 if (logScale) {
2700 // On the log scale, points less than zero do not exist.
2701 // This will create a gap in the chart. Note that this ignores
2702 // connectSeparatedPoints.
2703 if (point <= 0) {
2704 point = null;
2705 }
2706 series.push([date, point]);
2707 } else {
2708 if (point != null || !connectSeparatedPoints) {
2709 series.push([date, point]);
2710 }
2711 }
2712 }
2713
2714 // TODO(danvk): move this into predraw_. It's insane to do it here.
2715 series = this.rollingAverage(series, this.rollPeriod_);
2716
2717 // Prune down to the desired range, if necessary (for zooming)
2718 // Because there can be lines going to points outside of the visible area,
2719 // we actually prune to visible points, plus one on either side.
2720 var bars = this.attr_("errorBars") || this.attr_("customBars");
2721 if (this.dateWindow_) {
2722 var low = this.dateWindow_[0];
2723 var high= this.dateWindow_[1];
2724 var pruned = [];
2725 // TODO(danvk): do binary search instead of linear search.
2726 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2727 var firstIdx = null, lastIdx = null;
2728 for (var k = 0; k < series.length; k++) {
2729 if (series[k][0] >= low && firstIdx === null) {
2730 firstIdx = k;
2731 }
2732 if (series[k][0] <= high) {
2733 lastIdx = k;
2734 }
2735 }
2736 if (firstIdx === null) firstIdx = 0;
2737 if (firstIdx > 0) firstIdx--;
2738 if (lastIdx === null) lastIdx = series.length - 1;
2739 if (lastIdx < series.length - 1) lastIdx++;
2740 this.boundaryIds_[i-1] = [firstIdx, lastIdx];
2741 for (var k = firstIdx; k <= lastIdx; k++) {
2742 pruned.push(series[k]);
2743 }
2744 series = pruned;
2745 } else {
2746 this.boundaryIds_[i-1] = [0, series.length-1];
2747 }
2748
2749 var seriesExtremes = this.extremeValues_(series);
2750
2751 if (bars) {
2752 for (var j=0; j<series.length; j++) {
2753 val = [series[j][0], series[j][1][0], series[j][1][1], series[j][1][2]];
2754 series[j] = val;
2755 }
2756 } else if (this.attr_("stackedGraph")) {
2757 var l = series.length;
2758 var actual_y;
2759 for (var j = 0; j < l; j++) {
2760 // If one data set has a NaN, let all subsequent stacked
2761 // sets inherit the NaN -- only start at 0 for the first set.
2762 var x = series[j][0];
2763 if (cumulative_y[x] === undefined) {
2764 cumulative_y[x] = 0;
2765 }
2766
2767 actual_y = series[j][1];
2768 cumulative_y[x] += actual_y;
2769
2770 series[j] = [x, cumulative_y[x]]
2771
2772 if (cumulative_y[x] > seriesExtremes[1]) {
2773 seriesExtremes[1] = cumulative_y[x];
2774 }
2775 if (cumulative_y[x] < seriesExtremes[0]) {
2776 seriesExtremes[0] = cumulative_y[x];
2777 }
2778 }
2779 }
2780 extremes[seriesName] = seriesExtremes;
2781
2782 datasets[i] = series;
2783 }
2784
2785 for (var i = 1; i < datasets.length; i++) {
2786 if (!this.visibility()[i - 1]) continue;
2787 this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
2788 }
2789
2790 this.computeYAxisRanges_(extremes);
2791 this.layout_.setYAxes(this.axes_);
2792
2793 this.addXTicks_();
2794
2795 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2796 var tmp_zoomed_x = this.zoomed_x_;
2797 // Tell PlotKit to use this new data and render itself
2798 this.layout_.setDateWindow(this.dateWindow_);
2799 this.zoomed_x_ = tmp_zoomed_x;
2800 this.layout_.evaluateWithError();
2801 this.plotter_.clear();
2802 this.plotter_.render();
2803 this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
2804 this.canvas_.height);
2805
2806 if (is_initial_draw) {
2807 // Generate a static legend before any particular point is selected.
2808 this.setLegendHTML_();
2809 } else {
2810 if (typeof(this.selPoints_) !== 'undefined' && this.selPoints_.length) {
2811 this.lastx_ = this.selPoints_[0].xval;
2812 this.updateSelection_();
2813 } else {
2814 this.clearSelection();
2815 }
2816 }
2817
2818 if (this.attr_("drawCallback") !== null) {
2819 this.attr_("drawCallback")(this, is_initial_draw);
2820 }
2821 };
2822
2823 /**
2824 * @private
2825 * Determine properties of the y-axes which are independent of the data
2826 * currently being displayed. This includes things like the number of axes and
2827 * the style of the axes. It does not include the range of each axis and its
2828 * tick marks.
2829 * This fills in this.axes_ and this.seriesToAxisMap_.
2830 * axes_ = [ { options } ]
2831 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2832 * indices are into the axes_ array.
2833 */
2834 Dygraph.prototype.computeYAxes_ = function() {
2835 this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis.
2836 this.seriesToAxisMap_ = {};
2837
2838 // Get a list of series names.
2839 var labels = this.attr_("labels");
2840 var series = {};
2841 for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
2842
2843 // all options which could be applied per-axis:
2844 var axisOptions = [
2845 'includeZero',
2846 'valueRange',
2847 'labelsKMB',
2848 'labelsKMG2',
2849 'pixelsPerYLabel',
2850 'yAxisLabelWidth',
2851 'axisLabelFontSize',
2852 'axisTickSize',
2853 'logscale'
2854 ];
2855
2856 // Copy global axis options over to the first axis.
2857 for (var i = 0; i < axisOptions.length; i++) {
2858 var k = axisOptions[i];
2859 var v = this.attr_(k);
2860 if (v) this.axes_[0][k] = v;
2861 }
2862
2863 // Go through once and add all the axes.
2864 for (var seriesName in series) {
2865 if (!series.hasOwnProperty(seriesName)) continue;
2866 var axis = this.attr_("axis", seriesName);
2867 if (axis == null) {
2868 this.seriesToAxisMap_[seriesName] = 0;
2869 continue;
2870 }
2871 if (typeof(axis) == 'object') {
2872 // Add a new axis, making a copy of its per-axis options.
2873 var opts = {};
2874 Dygraph.update(opts, this.axes_[0]);
2875 Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this.
2876 var yAxisId = this.axes_.length;
2877 opts.yAxisId = yAxisId;
2878 opts.g = this;
2879 Dygraph.update(opts, axis);
2880 this.axes_.push(opts);
2881 this.seriesToAxisMap_[seriesName] = yAxisId;
2882 }
2883 }
2884
2885 // Go through one more time and assign series to an axis defined by another
2886 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2887 for (var seriesName in series) {
2888 if (!series.hasOwnProperty(seriesName)) continue;
2889 var axis = this.attr_("axis", seriesName);
2890 if (typeof(axis) == 'string') {
2891 if (!this.seriesToAxisMap_.hasOwnProperty(axis)) {
2892 this.error("Series " + seriesName + " wants to share a y-axis with " +
2893 "series " + axis + ", which does not define its own axis.");
2894 return null;
2895 }
2896 var idx = this.seriesToAxisMap_[axis];
2897 this.seriesToAxisMap_[seriesName] = idx;
2898 }
2899 }
2900
2901 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2902 // this last so that hiding the first series doesn't destroy the axis
2903 // properties of the primary axis.
2904 var seriesToAxisFiltered = {};
2905 var vis = this.visibility();
2906 for (var i = 1; i < labels.length; i++) {
2907 var s = labels[i];
2908 if (vis[i - 1]) seriesToAxisFiltered[s] = this.seriesToAxisMap_[s];
2909 }
2910 this.seriesToAxisMap_ = seriesToAxisFiltered;
2911 };
2912
2913 /**
2914 * Returns the number of y-axes on the chart.
2915 * @return {Number} the number of axes.
2916 */
2917 Dygraph.prototype.numAxes = function() {
2918 var last_axis = 0;
2919 for (var series in this.seriesToAxisMap_) {
2920 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2921 var idx = this.seriesToAxisMap_[series];
2922 if (idx > last_axis) last_axis = idx;
2923 }
2924 return 1 + last_axis;
2925 };
2926
2927 /**
2928 * @private
2929 * Returns axis properties for the given series.
2930 * @param { String } setName The name of the series for which to get axis
2931 * properties, e.g. 'Y1'.
2932 * @return { Object } The axis properties.
2933 */
2934 Dygraph.prototype.axisPropertiesForSeries = function(series) {
2935 // TODO(danvk): handle errors.
2936 return this.axes_[this.seriesToAxisMap_[series]];
2937 };
2938
2939 /**
2940 * @private
2941 * Determine the value range and tick marks for each axis.
2942 * @param {Object} extremes A mapping from seriesName -> [low, high]
2943 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2944 */
2945 Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
2946 // Build a map from axis number -> [list of series names]
2947 var seriesForAxis = [];
2948 for (var series in this.seriesToAxisMap_) {
2949 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2950 var idx = this.seriesToAxisMap_[series];
2951 while (seriesForAxis.length <= idx) seriesForAxis.push([]);
2952 seriesForAxis[idx].push(series);
2953 }
2954
2955 // Compute extreme values, a span and tick marks for each axis.
2956 for (var i = 0; i < this.axes_.length; i++) {
2957 var axis = this.axes_[i];
2958
2959 if (!seriesForAxis[i]) {
2960 // If no series are defined or visible then use a reasonable default
2961 axis.extremeRange = [0, 1];
2962 } else {
2963 // Calculate the extremes of extremes.
2964 var series = seriesForAxis[i];
2965 var minY = Infinity; // extremes[series[0]][0];
2966 var maxY = -Infinity; // extremes[series[0]][1];
2967 var extremeMinY, extremeMaxY;
2968 for (var j = 0; j < series.length; j++) {
2969 // Only use valid extremes to stop null data series' from corrupting the scale.
2970 extremeMinY = extremes[series[j]][0];
2971 if (extremeMinY != null) {
2972 minY = Math.min(extremeMinY, minY);
2973 }
2974 extremeMaxY = extremes[series[j]][1];
2975 if (extremeMaxY != null) {
2976 maxY = Math.max(extremeMaxY, maxY);
2977 }
2978 }
2979 if (axis.includeZero && minY > 0) minY = 0;
2980
2981 // Ensure we have a valid scale, otherwise defualt to zero for safety.
2982 if (minY == Infinity) minY = 0;
2983 if (maxY == -Infinity) maxY = 0;
2984
2985 // Add some padding and round up to an integer to be human-friendly.
2986 var span = maxY - minY;
2987 // special case: if we have no sense of scale, use +/-10% of the sole value.
2988 if (span == 0) { span = maxY; }
2989
2990 var maxAxisY;
2991 var minAxisY;
2992 if (axis.logscale) {
2993 var maxAxisY = maxY + 0.1 * span;
2994 var minAxisY = minY;
2995 } else {
2996 var maxAxisY = maxY + 0.1 * span;
2997 var minAxisY = minY - 0.1 * span;
2998
2999 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
3000 if (!this.attr_("avoidMinZero")) {
3001 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
3002 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
3003 }
3004
3005 if (this.attr_("includeZero")) {
3006 if (maxY < 0) maxAxisY = 0;
3007 if (minY > 0) minAxisY = 0;
3008 }
3009 }
3010 axis.extremeRange = [minAxisY, maxAxisY];
3011 }
3012 if (axis.valueWindow) {
3013 // This is only set if the user has zoomed on the y-axis. It is never set
3014 // by a user. It takes precedence over axis.valueRange because, if you set
3015 // valueRange, you'd still expect to be able to pan.
3016 axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
3017 } else if (axis.valueRange) {
3018 // This is a user-set value range for this axis.
3019 axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]];
3020 } else {
3021 axis.computedValueRange = axis.extremeRange;
3022 }
3023
3024 // Add ticks. By default, all axes inherit the tick positions of the
3025 // primary axis. However, if an axis is specifically marked as having
3026 // independent ticks, then that is permissible as well.
3027 if (i == 0 || axis.independentTicks) {
3028 axis.ticks =
3029 Dygraph.numericTicks(axis.computedValueRange[0],
3030 axis.computedValueRange[1],
3031 this,
3032 axis);
3033 } else {
3034 var p_axis = this.axes_[0];
3035 var p_ticks = p_axis.ticks;
3036 var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
3037 var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
3038 var tick_values = [];
3039 for (var i = 0; i < p_ticks.length; i++) {
3040 var y_frac = (p_ticks[i].v - p_axis.computedValueRange[0]) / p_scale;
3041 var y_val = axis.computedValueRange[0] + y_frac * scale;
3042 tick_values.push(y_val);
3043 }
3044
3045 axis.ticks =
3046 Dygraph.numericTicks(axis.computedValueRange[0],
3047 axis.computedValueRange[1],
3048 this, axis, tick_values);
3049 }
3050 }
3051 };
3052
3053 /**
3054 * @private
3055 * Calculates the rolling average of a data set.
3056 * If originalData is [label, val], rolls the average of those.
3057 * If originalData is [label, [, it's interpreted as [value, stddev]
3058 * and the roll is returned in the same form, with appropriately reduced
3059 * stddev for each value.
3060 * Note that this is where fractional input (i.e. '5/10') is converted into
3061 * decimal values.
3062 * @param {Array} originalData The data in the appropriate format (see above)
3063 * @param {Number} rollPeriod The number of points over which to average the
3064 * data
3065 */
3066 Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
3067 if (originalData.length < 2)
3068 return originalData;
3069 var rollPeriod = Math.min(rollPeriod, originalData.length - 1);
3070 var rollingData = [];
3071 var sigma = this.attr_("sigma");
3072
3073 if (this.fractions_) {
3074 var num = 0;
3075 var den = 0; // numerator/denominator
3076 var mult = 100.0;
3077 for (var i = 0; i < originalData.length; i++) {
3078 num += originalData[i][1][0];
3079 den += originalData[i][1][1];
3080 if (i - rollPeriod >= 0) {
3081 num -= originalData[i - rollPeriod][1][0];
3082 den -= originalData[i - rollPeriod][1][1];
3083 }
3084
3085 var date = originalData[i][0];
3086 var value = den ? num / den : 0.0;
3087 if (this.attr_("errorBars")) {
3088 if (this.wilsonInterval_) {
3089 // For more details on this confidence interval, see:
3090 // http://en.wikipedia.org/wiki/Binomial_confidence_interval
3091 if (den) {
3092 var p = value < 0 ? 0 : value, n = den;
3093 var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
3094 var denom = 1 + sigma * sigma / den;
3095 var low = (p + sigma * sigma / (2 * den) - pm) / denom;
3096 var high = (p + sigma * sigma / (2 * den) + pm) / denom;
3097 rollingData[i] = [date,
3098 [p * mult, (p - low) * mult, (high - p) * mult]];
3099 } else {
3100 rollingData[i] = [date, [0, 0, 0]];
3101 }
3102 } else {
3103 var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
3104 rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
3105 }
3106 } else {
3107 rollingData[i] = [date, mult * value];
3108 }
3109 }
3110 } else if (this.attr_("customBars")) {
3111 var low = 0;
3112 var mid = 0;
3113 var high = 0;
3114 var count = 0;
3115 for (var i = 0; i < originalData.length; i++) {
3116 var data = originalData[i][1];
3117 var y = data[1];
3118 rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
3119
3120 if (y != null && !isNaN(y)) {
3121 low += data[0];
3122 mid += y;
3123 high += data[2];
3124 count += 1;
3125 }
3126 if (i - rollPeriod >= 0) {
3127 var prev = originalData[i - rollPeriod];
3128 if (prev[1][1] != null && !isNaN(prev[1][1])) {
3129 low -= prev[1][0];
3130 mid -= prev[1][1];
3131 high -= prev[1][2];
3132 count -= 1;
3133 }
3134 }
3135 rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
3136 1.0 * (mid - low) / count,
3137 1.0 * (high - mid) / count ]];
3138 }
3139 } else {
3140 // Calculate the rolling average for the first rollPeriod - 1 points where
3141 // there is not enough data to roll over the full number of points
3142 var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
3143 if (!this.attr_("errorBars")){
3144 if (rollPeriod == 1) {
3145 return originalData;
3146 }
3147
3148 for (var i = 0; i < originalData.length; i++) {
3149 var sum = 0;
3150 var num_ok = 0;
3151 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
3152 var y = originalData[j][1];
3153 if (y == null || isNaN(y)) continue;
3154 num_ok++;
3155 sum += originalData[j][1];
3156 }
3157 if (num_ok) {
3158 rollingData[i] = [originalData[i][0], sum / num_ok];
3159 } else {
3160 rollingData[i] = [originalData[i][0], null];
3161 }
3162 }
3163
3164 } else {
3165 for (var i = 0; i < originalData.length; i++) {
3166 var sum = 0;
3167 var variance = 0;
3168 var num_ok = 0;
3169 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
3170 var y = originalData[j][1][0];
3171 if (y == null || isNaN(y)) continue;
3172 num_ok++;
3173 sum += originalData[j][1][0];
3174 variance += Math.pow(originalData[j][1][1], 2);
3175 }
3176 if (num_ok) {
3177 var stddev = Math.sqrt(variance) / num_ok;
3178 rollingData[i] = [originalData[i][0],
3179 [sum / num_ok, sigma * stddev, sigma * stddev]];
3180 } else {
3181 rollingData[i] = [originalData[i][0], [null, null, null]];
3182 }
3183 }
3184 }
3185 }
3186
3187 return rollingData;
3188 };
3189
3190 /**
3191 * @private
3192 * Parses a date, returning the number of milliseconds since epoch. This can be
3193 * passed in as an xValueParser in the Dygraph constructor.
3194 * TODO(danvk): enumerate formats that this understands.
3195 * @param {String} A date in YYYYMMDD format.
3196 * @return {Number} Milliseconds since epoch.
3197 */
3198 Dygraph.dateParser = function(dateStr, self) {
3199 var dateStrSlashed;
3200 var d;
3201 if (dateStr.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
3202 dateStrSlashed = dateStr.replace("-", "/", "g");
3203 while (dateStrSlashed.search("-") != -1) {
3204 dateStrSlashed = dateStrSlashed.replace("-", "/");
3205 }
3206 d = Dygraph.dateStrToMillis(dateStrSlashed);
3207 } else if (dateStr.length == 8) { // e.g. '20090712'
3208 // TODO(danvk): remove support for this format. It's confusing.
3209 dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
3210 + "/" + dateStr.substr(6,2);
3211 d = Dygraph.dateStrToMillis(dateStrSlashed);
3212 } else {
3213 // Any format that Date.parse will accept, e.g. "2009/07/12" or
3214 // "2009/07/12 12:34:56"
3215 d = Dygraph.dateStrToMillis(dateStr);
3216 }
3217
3218 if (!d || isNaN(d)) {
3219 self.error("Couldn't parse " + dateStr + " as a date");
3220 }
3221 return d;
3222 };
3223
3224 /**
3225 * Detects the type of the str (date or numeric) and sets the various
3226 * formatting attributes in this.attrs_ based on this type.
3227 * @param {String} str An x value.
3228 * @private
3229 */
3230 Dygraph.prototype.detectTypeFromString_ = function(str) {
3231 var isDate = false;
3232 if (str.indexOf('-') > 0 ||
3233 str.indexOf('/') >= 0 ||
3234 isNaN(parseFloat(str))) {
3235 isDate = true;
3236 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
3237 // TODO(danvk): remove support for this format.
3238 isDate = true;
3239 }
3240
3241 if (isDate) {
3242 this.attrs_.xValueFormatter = Dygraph.dateString_;
3243 this.attrs_.xValueParser = Dygraph.dateParser;
3244 this.attrs_.xTicker = Dygraph.dateTicker;
3245 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3246 } else {
3247 // TODO(danvk): use Dygraph.numberFormatter here?
3248 /** @private (shut up, jsdoc!) */
3249 this.attrs_.xValueFormatter = function(x) { return x; };
3250 /** @private (shut up, jsdoc!) */
3251 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
3252 this.attrs_.xTicker = Dygraph.numericTicks;
3253 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
3254 }
3255 };
3256
3257 /**
3258 * Parses the value as a floating point number. This is like the parseFloat()
3259 * built-in, but with a few differences:
3260 * - the empty string is parsed as null, rather than NaN.
3261 * - if the string cannot be parsed at all, an error is logged.
3262 * If the string can't be parsed, this method returns null.
3263 * @param {String} x The string to be parsed
3264 * @param {Number} opt_line_no The line number from which the string comes.
3265 * @param {String} opt_line The text of the line from which the string comes.
3266 * @private
3267 */
3268
3269 // Parse the x as a float or return null if it's not a number.
3270 Dygraph.prototype.parseFloat_ = function(x, opt_line_no, opt_line) {
3271 var val = parseFloat(x);
3272 if (!isNaN(val)) return val;
3273
3274 // Try to figure out what happeend.
3275 // If the value is the empty string, parse it as null.
3276 if (/^ *$/.test(x)) return null;
3277
3278 // If it was actually "NaN", return it as NaN.
3279 if (/^ *nan *$/i.test(x)) return NaN;
3280
3281 // Looks like a parsing error.
3282 var msg = "Unable to parse '" + x + "' as a number";
3283 if (opt_line !== null && opt_line_no !== null) {
3284 msg += " on line " + (1+opt_line_no) + " ('" + opt_line + "') of CSV.";
3285 }
3286 this.error(msg);
3287
3288 return null;
3289 };
3290
3291 /**
3292 * @private
3293 * Parses a string in a special csv format. We expect a csv file where each
3294 * line is a date point, and the first field in each line is the date string.
3295 * We also expect that all remaining fields represent series.
3296 * if the errorBars attribute is set, then interpret the fields as:
3297 * date, series1, stddev1, series2, stddev2, ...
3298 * @param {[Object]} data See above.
3299 *
3300 * @return [Object] An array with one entry for each row. These entries
3301 * are an array of cells in that row. The first entry is the parsed x-value for
3302 * the row. The second, third, etc. are the y-values. These can take on one of
3303 * three forms, depending on the CSV and constructor parameters:
3304 * 1. numeric value
3305 * 2. [ value, stddev ]
3306 * 3. [ low value, center value, high value ]
3307 */
3308 Dygraph.prototype.parseCSV_ = function(data) {
3309 var ret = [];
3310 var lines = data.split("\n");
3311
3312 // Use the default delimiter or fall back to a tab if that makes sense.
3313 var delim = this.attr_('delimiter');
3314 if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
3315 delim = '\t';
3316 }
3317
3318 var start = 0;
3319 if (this.labelsFromCSV_) {
3320 start = 1;
3321 this.attrs_.labels = lines[0].split(delim);
3322 }
3323 var line_no = 0;
3324
3325 var xParser;
3326 var defaultParserSet = false; // attempt to auto-detect x value type
3327 var expectedCols = this.attr_("labels").length;
3328 var outOfOrder = false;
3329 for (var i = start; i < lines.length; i++) {
3330 var line = lines[i];
3331 line_no = i;
3332 if (line.length == 0) continue; // skip blank lines
3333 if (line[0] == '#') continue; // skip comment lines
3334 var inFields = line.split(delim);
3335 if (inFields.length < 2) continue;
3336
3337 var fields = [];
3338 if (!defaultParserSet) {
3339 this.detectTypeFromString_(inFields[0]);
3340 xParser = this.attr_("xValueParser");
3341 defaultParserSet = true;
3342 }
3343 fields[0] = xParser(inFields[0], this);
3344
3345 // If fractions are expected, parse the numbers as "A/B"
3346 if (this.fractions_) {
3347 for (var j = 1; j < inFields.length; j++) {
3348 // TODO(danvk): figure out an appropriate way to flag parse errors.
3349 var vals = inFields[j].split("/");
3350 if (vals.length != 2) {
3351 this.error('Expected fractional "num/den" values in CSV data ' +
3352 "but found a value '" + inFields[j] + "' on line " +
3353 (1 + i) + " ('" + line + "') which is not of this form.");
3354 fields[j] = [0, 0];
3355 } else {
3356 fields[j] = [this.parseFloat_(vals[0], i, line),
3357 this.parseFloat_(vals[1], i, line)];
3358 }
3359 }
3360 } else if (this.attr_("errorBars")) {
3361 // If there are error bars, values are (value, stddev) pairs
3362 if (inFields.length % 2 != 1) {
3363 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3364 'but line ' + (1 + i) + ' has an odd number of values (' +
3365 (inFields.length - 1) + "): '" + line + "'");
3366 }
3367 for (var j = 1; j < inFields.length; j += 2) {
3368 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3369 this.parseFloat_(inFields[j + 1], i, line)];
3370 }
3371 } else if (this.attr_("customBars")) {
3372 // Bars are a low;center;high tuple
3373 for (var j = 1; j < inFields.length; j++) {
3374 var val = inFields[j];
3375 if (/^ *$/.test(val)) {
3376 fields[j] = [null, null, null];
3377 } else {
3378 var vals = val.split(";");
3379 if (vals.length == 3) {
3380 fields[j] = [ this.parseFloat_(vals[0], i, line),
3381 this.parseFloat_(vals[1], i, line),
3382 this.parseFloat_(vals[2], i, line) ];
3383 } else {
3384 this.warning('When using customBars, values must be either blank ' +
3385 'or "low;center;high" tuples (got "' + val +
3386 '" on line ' + (1+i));
3387 }
3388 }
3389 }
3390 } else {
3391 // Values are just numbers
3392 for (var j = 1; j < inFields.length; j++) {
3393 fields[j] = this.parseFloat_(inFields[j], i, line);
3394 }
3395 }
3396 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3397 outOfOrder = true;
3398 }
3399
3400 if (fields.length != expectedCols) {
3401 this.error("Number of columns in line " + i + " (" + fields.length +
3402 ") does not agree with number of labels (" + expectedCols +
3403 ") " + line);
3404 }
3405
3406 // If the user specified the 'labels' option and none of the cells of the
3407 // first row parsed correctly, then they probably double-specified the
3408 // labels. We go with the values set in the option, discard this row and
3409 // log a warning to the JS console.
3410 if (i == 0 && this.attr_('labels')) {
3411 var all_null = true;
3412 for (var j = 0; all_null && j < fields.length; j++) {
3413 if (fields[j]) all_null = false;
3414 }
3415 if (all_null) {
3416 this.warn("The dygraphs 'labels' option is set, but the first row of " +
3417 "CSV data ('" + line + "') appears to also contain labels. " +
3418 "Will drop the CSV labels and use the option labels.");
3419 continue;
3420 }
3421 }
3422 ret.push(fields);
3423 }
3424
3425 if (outOfOrder) {
3426 this.warn("CSV is out of order; order it correctly to speed loading.");
3427 ret.sort(function(a,b) { return a[0] - b[0] });
3428 }
3429
3430 return ret;
3431 };
3432
3433 /**
3434 * @private
3435 * The user has provided their data as a pre-packaged JS array. If the x values
3436 * are numeric, this is the same as dygraphs' internal format. If the x values
3437 * are dates, we need to convert them from Date objects to ms since epoch.
3438 * @param {[Object]} data
3439 * @return {[Object]} data with numeric x values.
3440 */
3441 Dygraph.prototype.parseArray_ = function(data) {
3442 // Peek at the first x value to see if it's numeric.
3443 if (data.length == 0) {
3444 this.error("Can't plot empty data set");
3445 return null;
3446 }
3447 if (data[0].length == 0) {
3448 this.error("Data set cannot contain an empty row");
3449 return null;
3450 }
3451
3452 if (this.attr_("labels") == null) {
3453 this.warn("Using default labels. Set labels explicitly via 'labels' " +
3454 "in the options parameter");
3455 this.attrs_.labels = [ "X" ];
3456 for (var i = 1; i < data[0].length; i++) {
3457 this.attrs_.labels.push("Y" + i);
3458 }
3459 }
3460
3461 if (Dygraph.isDateLike(data[0][0])) {
3462 // Some intelligent defaults for a date x-axis.
3463 this.attrs_.xValueFormatter = Dygraph.dateString_;
3464 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3465 this.attrs_.xTicker = Dygraph.dateTicker;
3466
3467 // Assume they're all dates.
3468 var parsedData = Dygraph.clone(data);
3469 for (var i = 0; i < data.length; i++) {
3470 if (parsedData[i].length == 0) {
3471 this.error("Row " + (1 + i) + " of data is empty");
3472 return null;
3473 }
3474 if (parsedData[i][0] == null
3475 || typeof(parsedData[i][0].getTime) != 'function'
3476 || isNaN(parsedData[i][0].getTime())) {
3477 this.error("x value in row " + (1 + i) + " is not a Date");
3478 return null;
3479 }
3480 parsedData[i][0] = parsedData[i][0].getTime();
3481 }
3482 return parsedData;
3483 } else {
3484 // Some intelligent defaults for a numeric x-axis.
3485 /** @private (shut up, jsdoc!) */
3486 this.attrs_.xValueFormatter = function(x) { return x; };
3487 this.attrs_.xTicker = Dygraph.numericTicks;
3488 return data;
3489 }
3490 };
3491
3492 /**
3493 * Parses a DataTable object from gviz.
3494 * The data is expected to have a first column that is either a date or a
3495 * number. All subsequent columns must be numbers. If there is a clear mismatch
3496 * between this.xValueParser_ and the type of the first column, it will be
3497 * fixed. Fills out rawData_.
3498 * @param {[Object]} data See above.
3499 * @private
3500 */
3501 Dygraph.prototype.parseDataTable_ = function(data) {
3502 var cols = data.getNumberOfColumns();
3503 var rows = data.getNumberOfRows();
3504
3505 var indepType = data.getColumnType(0);
3506 if (indepType == 'date' || indepType == 'datetime') {
3507 this.attrs_.xValueFormatter = Dygraph.dateString_;
3508 this.attrs_.xValueParser = Dygraph.dateParser;
3509 this.attrs_.xTicker = Dygraph.dateTicker;
3510 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3511 } else if (indepType == 'number') {
3512 this.attrs_.xValueFormatter = function(x) { return x; };
3513 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
3514 this.attrs_.xTicker = Dygraph.numericTicks;
3515 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
3516 } else {
3517 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3518 "column 1 of DataTable input (Got '" + indepType + "')");
3519 return null;
3520 }
3521
3522 // Array of the column indices which contain data (and not annotations).
3523 var colIdx = [];
3524 var annotationCols = {}; // data index -> [annotation cols]
3525 var hasAnnotations = false;
3526 for (var i = 1; i < cols; i++) {
3527 var type = data.getColumnType(i);
3528 if (type == 'number') {
3529 colIdx.push(i);
3530 } else if (type == 'string' && this.attr_('displayAnnotations')) {
3531 // This is OK -- it's an annotation column.
3532 var dataIdx = colIdx[colIdx.length - 1];
3533 if (!annotationCols.hasOwnProperty(dataIdx)) {
3534 annotationCols[dataIdx] = [i];
3535 } else {
3536 annotationCols[dataIdx].push(i);
3537 }
3538 hasAnnotations = true;
3539 } else {
3540 this.error("Only 'number' is supported as a dependent type with Gviz." +
3541 " 'string' is only supported if displayAnnotations is true");
3542 }
3543 }
3544
3545 // Read column labels
3546 // TODO(danvk): add support back for errorBars
3547 var labels = [data.getColumnLabel(0)];
3548 for (var i = 0; i < colIdx.length; i++) {
3549 labels.push(data.getColumnLabel(colIdx[i]));
3550 if (this.attr_("errorBars")) i += 1;
3551 }
3552 this.attrs_.labels = labels;
3553 cols = labels.length;
3554
3555 var ret = [];
3556 var outOfOrder = false;
3557 var annotations = [];
3558 for (var i = 0; i < rows; i++) {
3559 var row = [];
3560 if (typeof(data.getValue(i, 0)) === 'undefined' ||
3561 data.getValue(i, 0) === null) {
3562 this.warn("Ignoring row " + i +
3563 " of DataTable because of undefined or null first column.");
3564 continue;
3565 }
3566
3567 if (indepType == 'date' || indepType == 'datetime') {
3568 row.push(data.getValue(i, 0).getTime());
3569 } else {
3570 row.push(data.getValue(i, 0));
3571 }
3572 if (!this.attr_("errorBars")) {
3573 for (var j = 0; j < colIdx.length; j++) {
3574 var col = colIdx[j];
3575 row.push(data.getValue(i, col));
3576 if (hasAnnotations &&
3577 annotationCols.hasOwnProperty(col) &&
3578 data.getValue(i, annotationCols[col][0]) != null) {
3579 var ann = {};
3580 ann.series = data.getColumnLabel(col);
3581 ann.xval = row[0];
3582 ann.shortText = String.fromCharCode(65 /* A */ + annotations.length)
3583 ann.text = '';
3584 for (var k = 0; k < annotationCols[col].length; k++) {
3585 if (k) ann.text += "\n";
3586 ann.text += data.getValue(i, annotationCols[col][k]);
3587 }
3588 annotations.push(ann);
3589 }
3590 }
3591
3592 // Strip out infinities, which give dygraphs problems later on.
3593 for (var j = 0; j < row.length; j++) {
3594 if (!isFinite(row[j])) row[j] = null;
3595 }
3596 } else {
3597 for (var j = 0; j < cols - 1; j++) {
3598 row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
3599 }
3600 }
3601 if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
3602 outOfOrder = true;
3603 }
3604 ret.push(row);
3605 }
3606
3607 if (outOfOrder) {
3608 this.warn("DataTable is out of order; order it correctly to speed loading.");
3609 ret.sort(function(a,b) { return a[0] - b[0] });
3610 }
3611 this.rawData_ = ret;
3612
3613 if (annotations.length > 0) {
3614 this.setAnnotations(annotations, true);
3615 }
3616 }
3617
3618 /**
3619 * @private
3620 * This is identical to JavaScript's built-in Date.parse() method, except that
3621 * it doesn't get replaced with an incompatible method by aggressive JS
3622 * libraries like MooTools or Joomla.
3623 * @param { String } str The date string, e.g. "2011/05/06"
3624 * @return { Integer } millis since epoch
3625 */
3626 Dygraph.dateStrToMillis = function(str) {
3627 return new Date(str).getTime();
3628 };
3629
3630 // These functions are all based on MochiKit.
3631 /**
3632 * @private
3633 */
3634 Dygraph.update = function (self, o) {
3635 if (typeof(o) != 'undefined' && o !== null) {
3636 for (var k in o) {
3637 if (o.hasOwnProperty(k)) {
3638 self[k] = o[k];
3639 }
3640 }
3641 }
3642 return self;
3643 };
3644
3645 /**
3646 * @private
3647 */
3648 Dygraph.isArrayLike = function (o) {
3649 var typ = typeof(o);
3650 if (
3651 (typ != 'object' && !(typ == 'function' &&
3652 typeof(o.item) == 'function')) ||
3653 o === null ||
3654 typeof(o.length) != 'number' ||
3655 o.nodeType === 3
3656 ) {
3657 return false;
3658 }
3659 return true;
3660 };
3661
3662 /**
3663 * @private
3664 */
3665 Dygraph.isDateLike = function (o) {
3666 if (typeof(o) != "object" || o === null ||
3667 typeof(o.getTime) != 'function') {
3668 return false;
3669 }
3670 return true;
3671 };
3672
3673 /**
3674 * @private
3675 */
3676 Dygraph.clone = function(o) {
3677 // TODO(danvk): figure out how MochiKit's version works
3678 var r = [];
3679 for (var i = 0; i < o.length; i++) {
3680 if (Dygraph.isArrayLike(o[i])) {
3681 r.push(Dygraph.clone(o[i]));
3682 } else {
3683 r.push(o[i]);
3684 }
3685 }
3686 return r;
3687 };
3688
3689
3690 /**
3691 * Get the CSV data. If it's in a function, call that function. If it's in a
3692 * file, do an XMLHttpRequest to get it.
3693 * @private
3694 */
3695 Dygraph.prototype.start_ = function() {
3696 if (typeof this.file_ == 'function') {
3697 // CSV string. Pretend we got it via XHR.
3698 this.loadedEvent_(this.file_());
3699 } else if (Dygraph.isArrayLike(this.file_)) {
3700 this.rawData_ = this.parseArray_(this.file_);
3701 this.predraw_();
3702 } else if (typeof this.file_ == 'object' &&
3703 typeof this.file_.getColumnRange == 'function') {
3704 // must be a DataTable from gviz.
3705 this.parseDataTable_(this.file_);
3706 this.predraw_();
3707 } else if (typeof this.file_ == 'string') {
3708 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3709 if (this.file_.indexOf('\n') >= 0) {
3710 this.loadedEvent_(this.file_);
3711 } else {
3712 var req = new XMLHttpRequest();
3713 var caller = this;
3714 req.onreadystatechange = function () {
3715 if (req.readyState == 4) {
3716 if (req.status == 200) {
3717 caller.loadedEvent_(req.responseText);
3718 }
3719 }
3720 };
3721
3722 req.open("GET", this.file_, true);
3723 req.send(null);
3724 }
3725 } else {
3726 this.error("Unknown data format: " + (typeof this.file_));
3727 }
3728 };
3729
3730 /**
3731 * Changes various properties of the graph. These can include:
3732 * <ul>
3733 * <li>file: changes the source data for the graph</li>
3734 * <li>errorBars: changes whether the data contains stddev</li>
3735 * </ul>
3736 *
3737 * @param {Object} attrs The new properties and values
3738 */
3739 Dygraph.prototype.updateOptions = function(attrs) {
3740 // TODO(danvk): this is a mess. Rethink this function.
3741 if ('rollPeriod' in attrs) {
3742 this.rollPeriod_ = attrs.rollPeriod;
3743 }
3744 if ('dateWindow' in attrs) {
3745 this.dateWindow_ = attrs.dateWindow;
3746 if (!('isZoomedIgnoreProgrammaticZoom' in attrs)) {
3747 this.zoomed_x_ = attrs.dateWindow != null;
3748 }
3749 }
3750 if ('valueRange' in attrs && !('isZoomedIgnoreProgrammaticZoom' in attrs)) {
3751 this.zoomed_y_ = attrs.valueRange != null;
3752 }
3753
3754 // TODO(danvk): validate per-series options.
3755 // Supported:
3756 // strokeWidth
3757 // pointSize
3758 // drawPoints
3759 // highlightCircleSize
3760
3761 Dygraph.update(this.user_attrs_, attrs);
3762 Dygraph.update(this.renderOptions_, attrs);
3763
3764 this.labelsFromCSV_ = (this.attr_("labels") == null);
3765
3766 if (attrs['file']) {
3767 this.file_ = attrs['file'];
3768 this.start_();
3769 } else {
3770 this.predraw_();
3771 }
3772 };
3773
3774 /**
3775 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3776 * containing div (which has presumably changed size since the dygraph was
3777 * instantiated. If the width/height are specified, the div will be resized.
3778 *
3779 * This is far more efficient than destroying and re-instantiating a
3780 * Dygraph, since it doesn't have to reparse the underlying data.
3781 *
3782 * @param {Number} [width] Width (in pixels)
3783 * @param {Number} [height] Height (in pixels)
3784 */
3785 Dygraph.prototype.resize = function(width, height) {
3786 if (this.resize_lock) {
3787 return;
3788 }
3789 this.resize_lock = true;
3790
3791 if ((width === null) != (height === null)) {
3792 this.warn("Dygraph.resize() should be called with zero parameters or " +
3793 "two non-NULL parameters. Pretending it was zero.");
3794 width = height = null;
3795 }
3796
3797 // TODO(danvk): there should be a clear() method.
3798 this.maindiv_.innerHTML = "";
3799 this.attrs_.labelsDiv = null;
3800
3801 if (width) {
3802 this.maindiv_.style.width = width + "px";
3803 this.maindiv_.style.height = height + "px";
3804 this.width_ = width;
3805 this.height_ = height;
3806 } else {
3807 this.width_ = this.maindiv_.offsetWidth;
3808 this.height_ = this.maindiv_.offsetHeight;
3809 }
3810
3811 this.createInterface_();
3812 this.predraw_();
3813
3814 this.resize_lock = false;
3815 };
3816
3817 /**
3818 * Adjusts the number of points in the rolling average. Updates the graph to
3819 * reflect the new averaging period.
3820 * @param {Number} length Number of points over which to average the data.
3821 */
3822 Dygraph.prototype.adjustRoll = function(length) {
3823 this.rollPeriod_ = length;
3824 this.predraw_();
3825 };
3826
3827 /**
3828 * Returns a boolean array of visibility statuses.
3829 */
3830 Dygraph.prototype.visibility = function() {
3831 // Do lazy-initialization, so that this happens after we know the number of
3832 // data series.
3833 if (!this.attr_("visibility")) {
3834 this.attrs_["visibility"] = [];
3835 }
3836 while (this.attr_("visibility").length < this.rawData_[0].length - 1) {
3837 this.attr_("visibility").push(true);
3838 }
3839 return this.attr_("visibility");
3840 };
3841
3842 /**
3843 * Changes the visiblity of a series.
3844 */
3845 Dygraph.prototype.setVisibility = function(num, value) {
3846 var x = this.visibility();
3847 if (num < 0 || num >= x.length) {
3848 this.warn("invalid series number in setVisibility: " + num);
3849 } else {
3850 x[num] = value;
3851 this.predraw_();
3852 }
3853 };
3854
3855 /**
3856 * Update the list of annotations and redraw the chart.
3857 */
3858 Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
3859 // Only add the annotation CSS rule once we know it will be used.
3860 Dygraph.addAnnotationRule();
3861 this.annotations_ = ann;
3862 this.layout_.setAnnotations(this.annotations_);
3863 if (!suppressDraw) {
3864 this.predraw_();
3865 }
3866 };
3867
3868 /**
3869 * Return the list of annotations.
3870 */
3871 Dygraph.prototype.annotations = function() {
3872 return this.annotations_;
3873 };
3874
3875 /**
3876 * Get the index of a series (column) given its name. The first column is the
3877 * x-axis, so the data series start with index 1.
3878 */
3879 Dygraph.prototype.indexFromSetName = function(name) {
3880 var labels = this.attr_("labels");
3881 for (var i = 0; i < labels.length; i++) {
3882 if (labels[i] == name) return i;
3883 }
3884 return null;
3885 };
3886
3887 /**
3888 * @private
3889 * Adds a default style for the annotation CSS classes to the document. This is
3890 * only executed when annotations are actually used. It is designed to only be
3891 * called once -- all calls after the first will return immediately.
3892 */
3893 Dygraph.addAnnotationRule = function() {
3894 if (Dygraph.addedAnnotationCSS) return;
3895
3896 var rule = "border: 1px solid black; " +
3897 "background-color: white; " +
3898 "text-align: center;";
3899
3900 var styleSheetElement = document.createElement("style");
3901 styleSheetElement.type = "text/css";
3902 document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
3903
3904 // Find the first style sheet that we can access.
3905 // We may not add a rule to a style sheet from another domain for security
3906 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3907 // adds its own style sheets from google.com.
3908 for (var i = 0; i < document.styleSheets.length; i++) {
3909 if (document.styleSheets[i].disabled) continue;
3910 var mysheet = document.styleSheets[i];
3911 try {
3912 if (mysheet.insertRule) { // Firefox
3913 var idx = mysheet.cssRules ? mysheet.cssRules.length : 0;
3914 mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx);
3915 } else if (mysheet.addRule) { // IE
3916 mysheet.addRule(".dygraphDefaultAnnotation", rule);
3917 }
3918 Dygraph.addedAnnotationCSS = true;
3919 return;
3920 } catch(err) {
3921 // Was likely a security exception.
3922 }
3923 }
3924
3925 this.warn("Unable to add default annotation CSS rule; display may be off.");
3926 }
3927
3928 /**
3929 * @private
3930 * Create a new canvas element. This is more complex than a simple
3931 * document.createElement("canvas") because of IE and excanvas.
3932 */
3933 Dygraph.createCanvas = function() {
3934 var canvas = document.createElement("canvas");
3935
3936 isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
3937 if (isIE && (typeof(G_vmlCanvasManager) != 'undefined')) {
3938 canvas = G_vmlCanvasManager.initElement(canvas);
3939 }
3940
3941 return canvas;
3942 };
3943
3944
3945 /**
3946 * A wrapper around Dygraph that implements the gviz API.
3947 * @param {Object} container The DOM object the visualization should live in.
3948 */
3949 Dygraph.GVizChart = function(container) {
3950 this.container = container;
3951 }
3952
3953 Dygraph.GVizChart.prototype.draw = function(data, options) {
3954 // Clear out any existing dygraph.
3955 // TODO(danvk): would it make more sense to simply redraw using the current
3956 // date_graph object?
3957 this.container.innerHTML = '';
3958 if (typeof(this.date_graph) != 'undefined') {
3959 this.date_graph.destroy();
3960 }
3961
3962 this.date_graph = new Dygraph(this.container, data, options);
3963 }
3964
3965 /**
3966 * Google charts compatible setSelection
3967 * Only row selection is supported, all points in the row will be highlighted
3968 * @param {Array} array of the selected cells
3969 * @public
3970 */
3971 Dygraph.GVizChart.prototype.setSelection = function(selection_array) {
3972 var row = false;
3973 if (selection_array.length) {
3974 row = selection_array[0].row;
3975 }
3976 this.date_graph.setSelection(row);
3977 }
3978
3979 /**
3980 * Google charts compatible getSelection implementation
3981 * @return {Array} array of the selected cells
3982 * @public
3983 */
3984 Dygraph.GVizChart.prototype.getSelection = function() {
3985 var selection = [];
3986
3987 var row = this.date_graph.getSelection();
3988
3989 if (row < 0) return selection;
3990
3991 col = 1;
3992 for (var i in this.date_graph.layout_.datasets) {
3993 selection.push({row: row, column: col});
3994 col++;
3995 }
3996
3997 return selection;
3998 }
3999
4000 // Older pages may still use this name.
4001 DateGraph = Dygraph;
4002
4003 // <REMOVE_FOR_COMBINED>
4004 Dygraph.OPTIONS_REFERENCE = // <JSON>
4005 {
4006 "xValueParser": {
4007 "default": "parseFloat() or Date.parse()*",
4008 "labels": ["CSV parsing"],
4009 "type": "function(str) -> number",
4010 "description": "A function which parses x-values (i.e. the dependent series). Must return a number, even when the values are dates. In this case, millis since epoch are used. This is used primarily for parsing CSV data. *=Dygraphs is slightly more accepting in the dates which it will parse. See code for details."
4011 },
4012 "stackedGraph": {
4013 "default": "false",
4014 "labels": ["Data Line display"],
4015 "type": "boolean",
4016 "description": "If set, stack series on top of one another rather than drawing them independently."
4017 },
4018 "pointSize": {
4019 "default": "1",
4020 "labels": ["Data Line display"],
4021 "type": "integer",
4022 "description": "The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is \"isolated\", i.e. there is a missing point on either side of it. This also controls the size of those dots."
4023 },
4024 "labelsDivStyles": {
4025 "default": "null",
4026 "labels": ["Legend"],
4027 "type": "{}",
4028 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
4029 },
4030 "drawPoints": {
4031 "default": "false",
4032 "labels": ["Data Line display"],
4033 "type": "boolean",
4034 "description": "Draw a small dot at each point, in addition to a line going through the point. This makes the individual data points easier to see, but can increase visual clutter in the chart."
4035 },
4036 "height": {
4037 "default": "320",
4038 "labels": ["Overall display"],
4039 "type": "integer",
4040 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4041 },
4042 "zoomCallback": {
4043 "default": "null",
4044 "labels": ["Callbacks"],
4045 "type": "function(minDate, maxDate, yRanges)",
4046 "description": "A function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch. yRanges is an array of [bottom, top] pairs, one for each y-axis."
4047 },
4048 "pointClickCallback": {
4049 "default": "",
4050 "labels": ["Callbacks", "Interactive Elements"],
4051 "type": "",
4052 "description": ""
4053 },
4054 "colors": {
4055 "default": "(see description)",
4056 "labels": ["Data Series Colors"],
4057 "type": "array<string>",
4058 "example": "['red', '#00FF00']",
4059 "description": "List of colors for the data series. These can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\", etc. If not specified, equally-spaced points around a color wheel are used."
4060 },
4061 "connectSeparatedPoints": {
4062 "default": "false",
4063 "labels": ["Data Line display"],
4064 "type": "boolean",
4065 "description": "Usually, when Dygraphs encounters a missing value in a data series, it interprets this as a gap and draws it as such. If, instead, the missing values represents an x-value for which only a different series has data, then you'll want to connect the dots by setting this to true. To explicitly include a gap with this option set, use a value of NaN."
4066 },
4067 "highlightCallback": {
4068 "default": "null",
4069 "labels": ["Callbacks"],
4070 "type": "function(event, x, points,row)",
4071 "description": "When set, this callback gets called every time a new point is highlighted. The parameters are the JavaScript mousemove event, the x-coordinate of the highlighted points and an array of highlighted points: <code>[ {name: 'series', yval: y-value}, &hellip; ]</code>"
4072 },
4073 "includeZero": {
4074 "default": "false",
4075 "labels": ["Axis display"],
4076 "type": "boolean",
4077 "description": "Usually, dygraphs will use the range of the data plus some padding to set the range of the y-axis. If this option is set, the y-axis will always include zero, typically as the lowest value. This can be used to avoid exaggerating the variance in the data"
4078 },
4079 "rollPeriod": {
4080 "default": "1",
4081 "labels": ["Error Bars", "Rolling Averages"],
4082 "type": "integer &gt;= 1",
4083 "description": "Number of days over which to average data. Discussed extensively above."
4084 },
4085 "unhighlightCallback": {
4086 "default": "null",
4087 "labels": ["Callbacks"],
4088 "type": "function(event)",
4089 "description": "When set, this callback gets called every time the user stops highlighting any point by mousing out of the graph. The parameter is the mouseout event."
4090 },
4091 "axisTickSize": {
4092 "default": "3.0",
4093 "labels": ["Axis display"],
4094 "type": "number",
4095 "description": "The size of the line to display next to each tick mark on x- or y-axes."
4096 },
4097 "labelsSeparateLines": {
4098 "default": "false",
4099 "labels": ["Legend"],
4100 "type": "boolean",
4101 "description": "Put <code>&lt;br/&gt;</code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
4102 },
4103 "xValueFormatter": {
4104 "default": "(Round to 2 decimal places)",
4105 "labels": ["Axis display"],
4106 "type": "function(x)",
4107 "description": "Function to provide a custom display format for the X value for mouseover."
4108 },
4109 "pixelsPerYLabel": {
4110 "default": "30",
4111 "labels": ["Axis display", "Grid"],
4112 "type": "integer",
4113 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4114 },
4115 "annotationMouseOverHandler": {
4116 "default": "null",
4117 "labels": ["Annotations"],
4118 "type": "function(annotation, point, dygraph, event)",
4119 "description": "If provided, this function is called whenever the user mouses over an annotation."
4120 },
4121 "annotationMouseOutHandler": {
4122 "default": "null",
4123 "labels": ["Annotations"],
4124 "type": "function(annotation, point, dygraph, event)",
4125 "description": "If provided, this function is called whenever the user mouses out of an annotation."
4126 },
4127 "annotationClickHandler": {
4128 "default": "null",
4129 "labels": ["Annotations"],
4130 "type": "function(annotation, point, dygraph, event)",
4131 "description": "If provided, this function is called whenever the user clicks on an annotation."
4132 },
4133 "annotationDblClickHandler": {
4134 "default": "null",
4135 "labels": ["Annotations"],
4136 "type": "function(annotation, point, dygraph, event)",
4137 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
4138 },
4139 "drawCallback": {
4140 "default": "null",
4141 "labels": ["Callbacks"],
4142 "type": "function(dygraph, is_initial)",
4143 "description": "When set, this callback gets called every time the dygraph is drawn. This includes the initial draw, after zooming and repeatedly while panning. The first parameter is the dygraph being drawn. The second is a boolean value indicating whether this is the initial draw."
4144 },
4145 "labelsKMG2": {
4146 "default": "false",
4147 "labels": ["Value display/formatting"],
4148 "type": "boolean",
4149 "description": "Show k/M/G for kilo/Mega/Giga on y-axis. This is different than <code>labelsKMB</code> in that it uses base 2, not 10."
4150 },
4151 "delimiter": {
4152 "default": ",",
4153 "labels": ["CSV parsing"],
4154 "type": "string",
4155 "description": "The delimiter to look for when separating fields of a CSV file. Setting this to a tab is not usually necessary, since tab-delimited data is auto-detected."
4156 },
4157 "axisLabelFontSize": {
4158 "default": "14",
4159 "labels": ["Axis display"],
4160 "type": "integer",
4161 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
4162 },
4163 "underlayCallback": {
4164 "default": "null",
4165 "labels": ["Callbacks"],
4166 "type": "function(canvas, area, dygraph)",
4167 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
4168 },
4169 "width": {
4170 "default": "480",
4171 "labels": ["Overall display"],
4172 "type": "integer",
4173 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4174 },
4175 "interactionModel": {
4176 "default": "...",
4177 "labels": ["Interactive Elements"],
4178 "type": "Object",
4179 "description": "TODO(konigsberg): document this"
4180 },
4181 "xTicker": {
4182 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
4183 "labels": ["Axis display"],
4184 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
4185 "description": "This lets you specify an arbitrary function to generate tick marks on an axis. The tick marks are an array of (value, label) pairs. The built-in functions go to great lengths to choose good tick marks so, if you set this option, you'll most likely want to call one of them and modify the result."
4186 },
4187 "xAxisLabelWidth": {
4188 "default": "50",
4189 "labels": ["Axis display"],
4190 "type": "integer",
4191 "description": "Width, in pixels, of the x-axis labels."
4192 },
4193 "showLabelsOnHighlight": {
4194 "default": "true",
4195 "labels": ["Interactive Elements", "Legend"],
4196 "type": "boolean",
4197 "description": "Whether to show the legend upon mouseover."
4198 },
4199 "axis": {
4200 "default": "(none)",
4201 "labels": ["Axis display"],
4202 "type": "string or object",
4203 "description": "Set to either an object ({}) filled with options for this axis or to the name of an existing data series with its own axis to re-use that axis. See tests for usage."
4204 },
4205 "pixelsPerXLabel": {
4206 "default": "60",
4207 "labels": ["Axis display", "Grid"],
4208 "type": "integer",
4209 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4210 },
4211 "labelsDiv": {
4212 "default": "null",
4213 "labels": ["Legend"],
4214 "type": "DOM element or string",
4215 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
4216 "description": "Show data labels in an external div, rather than on the graph. This value can either be a div element or a div id."
4217 },
4218 "fractions": {
4219 "default": "false",
4220 "labels": ["CSV parsing", "Error Bars"],
4221 "type": "boolean",
4222 "description": "When set, attempt to parse each cell in the CSV file as \"a/b\", where a and b are integers. The ratio will be plotted. This allows computation of Wilson confidence intervals (see below)."
4223 },
4224 "logscale": {
4225 "default": "false",
4226 "labels": ["Axis display"],
4227 "type": "boolean",
4228 "description": "When set for a y-axis, the graph shows that axis in log scale. Any values less than or equal to zero are not displayed.\n\nNot compatible with showZero, and ignores connectSeparatedPoints. Also, showing log scale with valueRanges that are less than zero will result in an unviewable graph."
4229 },
4230 "strokeWidth": {
4231 "default": "1.0",
4232 "labels": ["Data Line display"],
4233 "type": "integer",
4234 "example": "0.5, 2.0",
4235 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
4236 },
4237 "wilsonInterval": {
4238 "default": "true",
4239 "labels": ["Error Bars"],
4240 "type": "boolean",
4241 "description": "Use in conjunction with the \"fractions\" option. Instead of plotting +/- N standard deviations, dygraphs will compute a Wilson confidence interval and plot that. This has more reasonable behavior for ratios close to 0 or 1."
4242 },
4243 "fillGraph": {
4244 "default": "false",
4245 "labels": ["Data Line display"],
4246 "type": "boolean",
4247 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
4248 },
4249 "highlightCircleSize": {
4250 "default": "3",
4251 "labels": ["Interactive Elements"],
4252 "type": "integer",
4253 "description": "The size in pixels of the dot drawn over highlighted points."
4254 },
4255 "gridLineColor": {
4256 "default": "rgb(128,128,128)",
4257 "labels": ["Grid"],
4258 "type": "red, blue",
4259 "description": "The color of the gridlines."
4260 },
4261 "visibility": {
4262 "default": "[true, true, ...]",
4263 "labels": ["Data Line display"],
4264 "type": "Array of booleans",
4265 "description": "Which series should initially be visible? Once the Dygraph has been constructed, you can access and modify the visibility of each series using the <code>visibility</code> and <code>setVisibility</code> methods."
4266 },
4267 "valueRange": {
4268 "default": "Full range of the input is shown",
4269 "labels": ["Axis display"],
4270 "type": "Array of two numbers",
4271 "example": "[10, 110]",
4272 "description": "Explicitly set the vertical range of the graph to [low, high]."
4273 },
4274 "labelsDivWidth": {
4275 "default": "250",
4276 "labels": ["Legend"],
4277 "type": "integer",
4278 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
4279 },
4280 "colorSaturation": {
4281 "default": "1.0",
4282 "labels": ["Data Series Colors"],
4283 "type": "0.0 - 1.0",
4284 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4285 },
4286 "yAxisLabelWidth": {
4287 "default": "50",
4288 "labels": ["Axis display"],
4289 "type": "integer",
4290 "description": "Width, in pixels, of the y-axis labels."
4291 },
4292 "hideOverlayOnMouseOut": {
4293 "default": "true",
4294 "labels": ["Interactive Elements", "Legend"],
4295 "type": "boolean",
4296 "description": "Whether to hide the legend when the mouse leaves the chart area."
4297 },
4298 "yValueFormatter": {
4299 "default": "(Round to 2 decimal places)",
4300 "labels": ["Axis display"],
4301 "type": "function(x)",
4302 "description": "Function to provide a custom display format for the Y value for mouseover."
4303 },
4304 "legend": {
4305 "default": "onmouseover",
4306 "labels": ["Legend"],
4307 "type": "string",
4308 "description": "When to display the legend. By default, it only appears when a user mouses over the chart. Set it to \"always\" to always display a legend of some sort."
4309 },
4310 "labelsShowZeroValues": {
4311 "default": "true",
4312 "labels": ["Legend"],
4313 "type": "boolean",
4314 "description": "Show zero value labels in the labelsDiv."
4315 },
4316 "stepPlot": {
4317 "default": "false",
4318 "labels": ["Data Line display"],
4319 "type": "boolean",
4320 "description": "When set, display the graph as a step plot instead of a line plot."
4321 },
4322 "labelsKMB": {
4323 "default": "false",
4324 "labels": ["Value display/formatting"],
4325 "type": "boolean",
4326 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4327 },
4328 "rightGap": {
4329 "default": "5",
4330 "labels": ["Overall display"],
4331 "type": "integer",
4332 "description": "Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to highlight the right-most data point."
4333 },
4334 "avoidMinZero": {
4335 "default": "false",
4336 "labels": ["Axis display"],
4337 "type": "boolean",
4338 "description": "When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value of zero is disabled. \nThis is particularly useful for data sets that contain many zero values, especially for step plots which may otherwise have lines not visible running along the bottom axis."
4339 },
4340 "xAxisLabelFormatter": {
4341 "default": "Dygraph.dateAxisFormatter",
4342 "labels": ["Axis display", "Value display/formatting"],
4343 "type": "function(date, granularity)",
4344 "description": "Function to call to format values along the x axis."
4345 },
4346 "clickCallback": {
4347 "snippet": "function(e, date){<br>&nbsp;&nbsp;alert(date);<br>}",
4348 "default": "null",
4349 "labels": ["Callbacks"],
4350 "type": "function(e, date)",
4351 "description": "A function to call when a data point is clicked. The function should take two arguments, the event object for the click and the date that was clicked."
4352 },
4353 "yAxisLabelFormatter": {
4354 "default": "yValueFormatter",
4355 "labels": ["Axis display", "Value display/formatting"],
4356 "type": "function(x)",
4357 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4358 },
4359 "labels": {
4360 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4361 "labels": ["Legend"],
4362 "type": "array<string>",
4363 "description": "A name for each data series, including the independent (X) series. For CSV files and DataTable objections, this is determined by context. For raw data, this must be specified. If it is not, default values are supplied and a warning is logged."
4364 },
4365 "dateWindow": {
4366 "default": "Full range of the input is shown",
4367 "labels": ["Axis display"],
4368 "type": "Array of two Dates or numbers",
4369 "example": "[<br>&nbsp;&nbsp;Date.parse('2006-01-01'),<br>&nbsp;&nbsp;(new Date()).valueOf()<br>]",
4370 "description": "Initially zoom in on a section of the graph. Is of the form [earliest, latest], where earliest/latest are milliseconds since epoch. If the data for the x-axis is numeric, the values in dateWindow must also be numbers."
4371 },
4372 "showRoller": {
4373 "default": "false",
4374 "labels": ["Interactive Elements", "Rolling Averages"],
4375 "type": "boolean",
4376 "description": "If the rolling average period text box should be shown."
4377 },
4378 "sigma": {
4379 "default": "2.0",
4380 "labels": ["Error Bars"],
4381 "type": "float",
4382 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4383 },
4384 "customBars": {
4385 "default": "false",
4386 "labels": ["CSV parsing", "Error Bars"],
4387 "type": "boolean",
4388 "description": "When set, parse each CSV cell as \"low;middle;high\". Error bars will be drawn for each point between low and high, with the series itself going through middle."
4389 },
4390 "colorValue": {
4391 "default": "1.0",
4392 "labels": ["Data Series Colors"],
4393 "type": "float (0.0 - 1.0)",
4394 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4395 },
4396 "errorBars": {
4397 "default": "false",
4398 "labels": ["CSV parsing", "Error Bars"],
4399 "type": "boolean",
4400 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4401 },
4402 "displayAnnotations": {
4403 "default": "false",
4404 "labels": ["Annotations"],
4405 "type": "boolean",
4406 "description": "Only applies when Dygraphs is used as a GViz chart. Causes string columns following a data series to be interpreted as annotations on points in that series. This is the same format used by Google's AnnotatedTimeLine chart."
4407 },
4408 "panEdgeFraction": {
4409 "default": "null",
4410 "labels": ["Axis Display", "Interactive Elements"],
4411 "type": "float",
4412 "default": "null",
4413 "description": "A value representing the farthest a graph may be panned, in percent of the display. For example, a value of 0.1 means that the graph can only be panned 10% pased the edges of the displayed values. null means no bounds."
4414 },
4415 "title": {
4416 "labels": ["Chart labels"],
4417 "type": "string",
4418 "default": "null",
4419 "description": "Text to display above the chart. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes."
4420 },
4421 "titleHeight": {
4422 "default": "18",
4423 "labels": ["Chart labels"],
4424 "type": "integer",
4425 "description": "Height of the chart title, in pixels. This also controls the default font size of the title. If you style the title on your own, this controls how much space is set aside above the chart for the title's div."
4426 },
4427 "xlabel": {
4428 "labels": ["Chart labels"],
4429 "type": "string",
4430 "default": "null",
4431 "description": "Text to display below the chart's x-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel' classes."
4432 },
4433 "xLabelHeight": {
4434 "labels": ["Chart labels"],
4435 "type": "integer",
4436 "default": "18",
4437 "description": "Height of the x-axis label, in pixels. This also controls the default font size of the x-axis label. If you style the label on your own, this controls how much space is set aside below the chart for the x-axis label's div."
4438 },
4439 "ylabel": {
4440 "labels": ["Chart labels"],
4441 "type": "string",
4442 "default": "null",
4443 "description": "Text to display to the left of the chart's y-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-ylabel' classes. The text will be rotated 90 degrees by default, so CSS rules may behave in unintuitive ways. No additional space is set aside for a y-axis label. If you need more space, increase the width of the y-axis tick labels using the yAxisLabelWidth option. If you need a wider div for the y-axis label, either style it that way with CSS (but remember that it's rotated, so width is controlled by the 'height' property) or set the yLabelWidth option."
4444 },
4445 "yLabelWidth": {
4446 "labels": ["Chart labels"],
4447 "type": "integer",
4448 "default": "18",
4449 "description": "Width of the div which contains the y-axis label. Since the y-axis label appears rotated 90 degrees, this actually affects the height of its div."
4450 },
4451 "isZoomedIgnoreProgrammaticZoom" : {
4452 "default": "false",
4453 "labels": ["Zooming"],
4454 "type": "boolean",
4455 "description" : "When this option is passed to updateOptions() along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
4456 },
4457 "sigFigs" : {
4458 "default": "null",
4459 "labels": ["Value display/formatting"],
4460 "type": "integer",
4461 "description": "By default, dygraphs displays numbers with a fixed number of digits after the decimal point. If you'd prefer to have a fixed number of significant figures, set this option to that number of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0 and 1234 to be displayed as 1.23e+3."
4462 },
4463 "digitsAfterDecimal" : {
4464 "default": "2",
4465 "labels": ["Value display/formatting"],
4466 "type": "integer",
4467 "description": "Unless it's run in scientific mode (see the <code>sigFigs</code> option), dygraphs displays numbers with <code>digitsAfterDecimal</code> digits after the decimal point. Trailing zeros are not displayed, so with a value of 2 you'll get '0', '0.1', '0.12', '123.45' but not '123.456' (it will be rounded to '123.46'). Numbers with absolute value less than 0.1^digitsAfterDecimal (i.e. those which would show up as '0.00') will be displayed in scientific notation."
4468 },
4469 "maxNumberWidth" : {
4470 "default": "6",
4471 "labels": ["Value display/formatting"],
4472 "type": "integer",
4473 "description": "When displaying numbers in normal (not scientific) mode, large numbers will be displayed with many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis labels. If there are more than <code>maxNumberWidth</code> digits to the left of the decimal in a number, dygraphs will switch to scientific notation, even when not operating in scientific mode. If you'd like to see all those digits, set this to something large, like 20 or 30."
4474 }
4475 }
4476 ; // </JSON>
4477 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4478 // JSON. This assumption cannot be checked in JS, but it will be checked when
4479 // documentation is generated by the generate-documentation.py script. For the
4480 // most part, this just means that you should always use double quotes.
4481
4482 // Do a quick sanity check on the options reference.
4483 (function() {
4484 var warn = function(msg) { if (console) console.warn(msg); };
4485 var flds = ['type', 'default', 'description'];
4486 var valid_cats = [
4487 'Annotations',
4488 'Axis display',
4489 'Chart labels',
4490 'CSV parsing',
4491 'Callbacks',
4492 'Data Line display',
4493 'Data Series Colors',
4494 'Error Bars',
4495 'Grid',
4496 'Interactive Elements',
4497 'Legend',
4498 'Overall display',
4499 'Rolling Averages',
4500 'Value display/formatting',
4501 'Zooming'
4502 ];
4503 var cats = {};
4504 for (var i = 0; i < valid_cats.length; i++) cats[valid_cats[i]] = true;
4505
4506 for (var k in Dygraph.OPTIONS_REFERENCE) {
4507 if (!Dygraph.OPTIONS_REFERENCE.hasOwnProperty(k)) continue;
4508 var op = Dygraph.OPTIONS_REFERENCE[k];
4509 for (var i = 0; i < flds.length; i++) {
4510 if (!op.hasOwnProperty(flds[i])) {
4511 warn('Option ' + k + ' missing "' + flds[i] + '" property');
4512 } else if (typeof(op[flds[i]]) != 'string') {
4513 warn(k + '.' + flds[i] + ' must be of type string');
4514 }
4515 }
4516 var labels = op['labels'];
4517 if (typeof(labels) !== 'object') {
4518 warn('Option "' + k + '" is missing a "labels": [...] option');
4519 for (var i = 0; i < labels.length; i++) {
4520 if (!cats.hasOwnProperty(labels[i])) {
4521 warn('Option "' + k + '" has label "' + labels[i] +
4522 '", which is invalid.');
4523 }
4524 }
4525 }
4526 }
4527 })();
4528 // </REMOVE_FOR_COMBINED>