7dad6b2bd9e4f77c37572a0ed63a26e98600d552
[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
89 Dygraph.LOG_SCALE = 10;
90 Dygraph.LN_TEN = Math.log(Dygraph.LOG_SCALE);
91 /** @private */
92 Dygraph.log10 = function(x) {
93 return Math.log(x) / Dygraph.LN_TEN;
94 }
95
96 // Default attribute values.
97 Dygraph.DEFAULT_ATTRS = {
98 highlightCircleSize: 3,
99 pixelsPerXLabel: 60,
100 pixelsPerYLabel: 30,
101
102 labelsDivWidth: 250,
103 labelsDivStyles: {
104 // TODO(danvk): move defaults from createStatusMessage_ here.
105 },
106 labelsSeparateLines: false,
107 labelsShowZeroValues: true,
108 labelsKMB: false,
109 labelsKMG2: false,
110 showLabelsOnHighlight: true,
111
112 yValueFormatter: function(a,b) { return Dygraph.numberFormatter(a,b); },
113 digitsAfterDecimal: 2,
114 maxNumberWidth: 6,
115 sigFigs: null,
116
117 strokeWidth: 1.0,
118
119 axisTickSize: 3,
120 axisLabelFontSize: 14,
121 xAxisLabelWidth: 50,
122 yAxisLabelWidth: 50,
123 xAxisLabelFormatter: Dygraph.dateAxisFormatter,
124 rightGap: 5,
125
126 showRoller: false,
127 xValueFormatter: Dygraph.dateString_,
128 xValueParser: Dygraph.dateParser,
129 xTicker: Dygraph.dateTicker,
130
131 delimiter: ',',
132
133 sigma: 2.0,
134 errorBars: false,
135 fractions: false,
136 wilsonInterval: true, // only relevant if fractions is true
137 customBars: false,
138 fillGraph: false,
139 fillAlpha: 0.15,
140 connectSeparatedPoints: false,
141
142 stackedGraph: false,
143 hideOverlayOnMouseOut: true,
144
145 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
146 legend: 'onmouseover', // the only relevant value at the moment is 'always'.
147
148 stepPlot: false,
149 avoidMinZero: false,
150
151 // Sizes of the various chart labels.
152 titleHeight: 28,
153 xLabelHeight: 18,
154 yLabelWidth: 18,
155
156 drawXAxis: true,
157 drawYAxis: true,
158 axisLineColor: "black",
159 axisLineWidth: 0.3,
160 gridLineWidth: 0.3,
161 axisLabelColor: "black",
162 axisLabelFont: "Arial", // TODO(danvk): is this implemented?
163 axisLabelWidth: 50,
164 drawYGrid: true,
165 drawXGrid: true,
166 gridLineColor: "rgb(128,128,128)",
167
168 interactionModel: null // will be set to Dygraph.defaultInteractionModel.
169 };
170
171 // Various logging levels.
172 Dygraph.DEBUG = 1;
173 Dygraph.INFO = 2;
174 Dygraph.WARNING = 3;
175 Dygraph.ERROR = 3;
176
177 // Directions for panning and zooming. Use bit operations when combined
178 // values are possible.
179 Dygraph.HORIZONTAL = 1;
180 Dygraph.VERTICAL = 2;
181
182 // Used for initializing annotation CSS rules only once.
183 Dygraph.addedAnnotationCSS = false;
184
185 /**
186 * @private
187 * Return the 2d context for a dygraph canvas.
188 *
189 * This method is only exposed for the sake of replacing the function in
190 * automated tests, e.g.
191 *
192 * var oldFunc = Dygraph.getContext();
193 * Dygraph.getContext = function(canvas) {
194 * var realContext = oldFunc(canvas);
195 * return new Proxy(realContext);
196 * };
197 */
198 Dygraph.getContext = function(canvas) {
199 return canvas.getContext("2d");
200 };
201
202 Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
203 // Labels is no longer a constructor parameter, since it's typically set
204 // directly from the data source. It also conains a name for the x-axis,
205 // which the previous constructor form did not.
206 if (labels != null) {
207 var new_labels = ["Date"];
208 for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
209 Dygraph.update(attrs, { 'labels': new_labels });
210 }
211 this.__init__(div, file, attrs);
212 };
213
214 /**
215 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
216 * and context &lt;canvas&gt; inside of it. See the constructor for details.
217 * on the parameters.
218 * @param {Element} div the Element to render the graph into.
219 * @param {String | Function} file Source data
220 * @param {Object} attrs Miscellaneous other options
221 * @private
222 */
223 Dygraph.prototype.__init__ = function(div, file, attrs) {
224 // Hack for IE: if we're using excanvas and the document hasn't finished
225 // loading yet (and hence may not have initialized whatever it needs to
226 // initialize), then keep calling this routine periodically until it has.
227 if (/MSIE/.test(navigator.userAgent) && !window.opera &&
228 typeof(G_vmlCanvasManager) != 'undefined' &&
229 document.readyState != 'complete') {
230 var self = this;
231 setTimeout(function() { self.__init__(div, file, attrs) }, 100);
232 }
233
234 // Support two-argument constructor
235 if (attrs == null) { attrs = {}; }
236
237 // Copy the important bits into the object
238 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
239 this.maindiv_ = div;
240 this.file_ = file;
241 this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD;
242 this.previousVerticalX_ = -1;
243 this.fractions_ = attrs.fractions || false;
244 this.dateWindow_ = attrs.dateWindow || null;
245
246 this.wilsonInterval_ = attrs.wilsonInterval || true;
247 this.is_initial_draw_ = true;
248 this.annotations_ = [];
249
250 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
251 this.zoomed_x_ = false;
252 this.zoomed_y_ = false;
253
254 // Clear the div. This ensure that, if multiple dygraphs are passed the same
255 // div, then only one will be drawn.
256 div.innerHTML = "";
257
258 // If the div isn't already sized then inherit from our attrs or
259 // give it a default size.
260 if (div.style.width == '') {
261 div.style.width = (attrs.width || Dygraph.DEFAULT_WIDTH) + "px";
262 }
263 if (div.style.height == '') {
264 div.style.height = (attrs.height || Dygraph.DEFAULT_HEIGHT) + "px";
265 }
266 this.width_ = parseInt(div.style.width, 10);
267 this.height_ = parseInt(div.style.height, 10);
268 // The div might have been specified as percent of the current window size,
269 // convert that to an appropriate number of pixels.
270 if (div.style.width.indexOf("%") == div.style.width.length - 1) {
271 this.width_ = div.offsetWidth;
272 }
273 if (div.style.height.indexOf("%") == div.style.height.length - 1) {
274 this.height_ = div.offsetHeight;
275 }
276
277 if (this.width_ == 0) {
278 this.error("dygraph has zero width. Please specify a width in pixels.");
279 }
280 if (this.height_ == 0) {
281 this.error("dygraph has zero height. Please specify a height in pixels.");
282 }
283
284 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
285 if (attrs['stackedGraph']) {
286 attrs['fillGraph'] = true;
287 // TODO(nikhilk): Add any other stackedGraph checks here.
288 }
289
290 // Dygraphs has many options, some of which interact with one another.
291 // To keep track of everything, we maintain two sets of options:
292 //
293 // this.user_attrs_ only options explicitly set by the user.
294 // this.attrs_ defaults, options derived from user_attrs_, data.
295 //
296 // Options are then accessed this.attr_('attr'), which first looks at
297 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
298 // defaults without overriding behavior that the user specifically asks for.
299 this.user_attrs_ = {};
300 Dygraph.update(this.user_attrs_, attrs);
301
302 this.attrs_ = {};
303 Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
304
305 this.boundaryIds_ = [];
306
307 // Make a note of whether labels will be pulled from the CSV file.
308 this.labelsFromCSV_ = (this.attr_("labels") == null);
309
310 // Create the containing DIV and other interactive elements
311 this.createInterface_();
312
313 this.start_();
314 };
315
316 /**
317 * Returns the zoomed status of the chart for one or both axes.
318 *
319 * Axis is an optional parameter. Can be set to 'x' or 'y'.
320 *
321 * The zoomed status for an axis is set whenever a user zooms using the mouse
322 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
323 * option is also specified).
324 */
325 Dygraph.prototype.isZoomed = function(axis) {
326 if (axis == null) return this.zoomed_x_ || this.zoomed_y_;
327 if (axis == 'x') return this.zoomed_x_;
328 if (axis == 'y') return this.zoomed_y_;
329 throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
330 };
331
332 /**
333 * Returns information about the Dygraph object, including its containing ID.
334 */
335 Dygraph.prototype.toString = function() {
336 var maindiv = this.maindiv_;
337 var id = (maindiv && maindiv.id) ? maindiv.id : maindiv
338 return "[Dygraph " + id + "]";
339 }
340
341 /**
342 * @private
343 * Returns the value of an option. This may be set by the user (either in the
344 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
345 * per-series value.
346 * @param { String } name The name of the option, e.g. 'rollPeriod'.
347 * @param { String } [seriesName] The name of the series to which the option
348 * will be applied. If no per-series value of this option is available, then
349 * the global value is returned. This is optional.
350 * @return { ... } The value of the option.
351 */
352 Dygraph.prototype.attr_ = function(name, seriesName) {
353 // <REMOVE_FOR_COMBINED>
354 if (typeof(Dygraph.OPTIONS_REFERENCE) === 'undefined') {
355 this.error('Must include options reference JS for testing');
356 } else if (!Dygraph.OPTIONS_REFERENCE.hasOwnProperty(name)) {
357 this.error('Dygraphs is using property ' + name + ', which has no entry ' +
358 'in the Dygraphs.OPTIONS_REFERENCE listing.');
359 // Only log this error once.
360 Dygraph.OPTIONS_REFERENCE[name] = true;
361 }
362 // </REMOVE_FOR_COMBINED>
363 if (seriesName &&
364 typeof(this.user_attrs_[seriesName]) != 'undefined' &&
365 this.user_attrs_[seriesName] != null &&
366 typeof(this.user_attrs_[seriesName][name]) != 'undefined') {
367 return this.user_attrs_[seriesName][name];
368 } else if (typeof(this.user_attrs_[name]) != 'undefined') {
369 return this.user_attrs_[name];
370 } else if (typeof(this.attrs_[name]) != 'undefined') {
371 return this.attrs_[name];
372 } else {
373 return null;
374 }
375 };
376
377 // TODO(danvk): any way I can get the line numbers to be this.warn call?
378 /**
379 * @private
380 * Log an error on the JS console at the given severity.
381 * @param { Integer } severity One of Dygraph.{DEBUG,INFO,WARNING,ERROR}
382 * @param { String } The message to log.
383 */
384 Dygraph.prototype.log = function(severity, message) {
385 if (typeof(console) != 'undefined') {
386 switch (severity) {
387 case Dygraph.DEBUG:
388 console.debug('dygraphs: ' + message);
389 break;
390 case Dygraph.INFO:
391 console.info('dygraphs: ' + message);
392 break;
393 case Dygraph.WARNING:
394 console.warn('dygraphs: ' + message);
395 break;
396 case Dygraph.ERROR:
397 console.error('dygraphs: ' + message);
398 break;
399 }
400 }
401 };
402
403 /** @private */
404 Dygraph.prototype.info = function(message) {
405 this.log(Dygraph.INFO, message);
406 };
407
408 /** @private */
409 Dygraph.prototype.warn = function(message) {
410 this.log(Dygraph.WARNING, message);
411 };
412
413 /** @private */
414 Dygraph.prototype.error = function(message) {
415 this.log(Dygraph.ERROR, message);
416 };
417
418 /**
419 * Returns the current rolling period, as set by the user or an option.
420 * @return {Number} The number of points in the rolling window
421 */
422 Dygraph.prototype.rollPeriod = function() {
423 return this.rollPeriod_;
424 };
425
426 /**
427 * Returns the currently-visible x-range. This can be affected by zooming,
428 * panning or a call to updateOptions.
429 * Returns a two-element array: [left, right].
430 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
431 */
432 Dygraph.prototype.xAxisRange = function() {
433 return this.dateWindow_ ? this.dateWindow_ : this.xAxisExtremes();
434 };
435
436 /**
437 * Returns the lower- and upper-bound x-axis values of the
438 * data set.
439 */
440 Dygraph.prototype.xAxisExtremes = function() {
441 var left = this.rawData_[0][0];
442 var right = this.rawData_[this.rawData_.length - 1][0];
443 return [left, right];
444 };
445
446 /**
447 * Returns the currently-visible y-range for an axis. This can be affected by
448 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
449 * called with no arguments, returns the range of the first axis.
450 * Returns a two-element array: [bottom, top].
451 */
452 Dygraph.prototype.yAxisRange = function(idx) {
453 if (typeof(idx) == "undefined") idx = 0;
454 if (idx < 0 || idx >= this.axes_.length) return null;
455 return [ this.axes_[idx].computedValueRange[0],
456 this.axes_[idx].computedValueRange[1] ];
457 };
458
459 /**
460 * Returns the currently-visible y-ranges for each axis. This can be affected by
461 * zooming, panning, calls to updateOptions, etc.
462 * Returns an array of [bottom, top] pairs, one for each y-axis.
463 */
464 Dygraph.prototype.yAxisRanges = function() {
465 var ret = [];
466 for (var i = 0; i < this.axes_.length; i++) {
467 ret.push(this.yAxisRange(i));
468 }
469 return ret;
470 };
471
472 // TODO(danvk): use these functions throughout dygraphs.
473 /**
474 * Convert from data coordinates to canvas/div X/Y coordinates.
475 * If specified, do this conversion for the coordinate system of a particular
476 * axis. Uses the first axis by default.
477 * Returns a two-element array: [X, Y]
478 *
479 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
480 * instead of toDomCoords(null, y, axis).
481 */
482 Dygraph.prototype.toDomCoords = function(x, y, axis) {
483 return [ this.toDomXCoord(x), this.toDomYCoord(y, axis) ];
484 };
485
486 /**
487 * Convert from data x coordinates to canvas/div X coordinate.
488 * If specified, do this conversion for the coordinate system of a particular
489 * axis.
490 * Returns a single value or null if x is null.
491 */
492 Dygraph.prototype.toDomXCoord = function(x) {
493 if (x == null) {
494 return null;
495 };
496
497 var area = this.plotter_.area;
498 var xRange = this.xAxisRange();
499 return area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
500 }
501
502 /**
503 * Convert from data x coordinates to canvas/div Y coordinate and optional
504 * axis. Uses the first axis by default.
505 *
506 * returns a single value or null if y is null.
507 */
508 Dygraph.prototype.toDomYCoord = function(y, axis) {
509 var pct = this.toPercentYCoord(y, axis);
510
511 if (pct == null) {
512 return null;
513 }
514 var area = this.plotter_.area;
515 return area.y + pct * area.h;
516 }
517
518 /**
519 * Convert from canvas/div coords to data coordinates.
520 * If specified, do this conversion for the coordinate system of a particular
521 * axis. Uses the first axis by default.
522 * Returns a two-element array: [X, Y].
523 *
524 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
525 * instead of toDataCoords(null, y, axis).
526 */
527 Dygraph.prototype.toDataCoords = function(x, y, axis) {
528 return [ this.toDataXCoord(x), this.toDataYCoord(y, axis) ];
529 };
530
531 /**
532 * Convert from canvas/div x coordinate to data coordinate.
533 *
534 * If x is null, this returns null.
535 */
536 Dygraph.prototype.toDataXCoord = function(x) {
537 if (x == null) {
538 return null;
539 }
540
541 var area = this.plotter_.area;
542 var xRange = this.xAxisRange();
543 return xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
544 };
545
546 /**
547 * Convert from canvas/div y coord to value.
548 *
549 * If y is null, this returns null.
550 * if axis is null, this uses the first axis.
551 */
552 Dygraph.prototype.toDataYCoord = function(y, axis) {
553 if (y == null) {
554 return null;
555 }
556
557 var area = this.plotter_.area;
558 var yRange = this.yAxisRange(axis);
559
560 if (typeof(axis) == "undefined") axis = 0;
561 if (!this.axes_[axis].logscale) {
562 return yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]);
563 } else {
564 // Computing the inverse of toDomCoord.
565 var pct = (y - area.y) / area.h
566
567 // Computing the inverse of toPercentYCoord. The function was arrived at with
568 // the following steps:
569 //
570 // Original calcuation:
571 // pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
572 //
573 // Move denominator to both sides:
574 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
575 //
576 // subtract logr1, and take the negative value.
577 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
578 //
579 // Swap both sides of the equation, and we can compute the log of the
580 // return value. Which means we just need to use that as the exponent in
581 // e^exponent.
582 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
583
584 var logr1 = Dygraph.log10(yRange[1]);
585 var exponent = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
586 var value = Math.pow(Dygraph.LOG_SCALE, exponent);
587 return value;
588 }
589 };
590
591 /**
592 * Converts a y for an axis to a percentage from the top to the
593 * bottom of the drawing area.
594 *
595 * If the coordinate represents a value visible on the canvas, then
596 * the value will be between 0 and 1, where 0 is the top of the canvas.
597 * However, this method will return values outside the range, as
598 * values can fall outside the canvas.
599 *
600 * If y is null, this returns null.
601 * if axis is null, this uses the first axis.
602 *
603 * @param { Number } y The data y-coordinate.
604 * @param { Number } [axis] The axis number on which the data coordinate lives.
605 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
606 */
607 Dygraph.prototype.toPercentYCoord = function(y, axis) {
608 if (y == null) {
609 return null;
610 }
611 if (typeof(axis) == "undefined") axis = 0;
612
613 var area = this.plotter_.area;
614 var yRange = this.yAxisRange(axis);
615
616 var pct;
617 if (!this.axes_[axis].logscale) {
618 // yRange[1] - y is unit distance from the bottom.
619 // yRange[1] - yRange[0] is the scale of the range.
620 // (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom.
621 pct = (yRange[1] - y) / (yRange[1] - yRange[0]);
622 } else {
623 var logr1 = Dygraph.log10(yRange[1]);
624 pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
625 }
626 return pct;
627 }
628
629 /**
630 * Converts an x value to a percentage from the left to the right of
631 * the drawing area.
632 *
633 * If the coordinate represents a value visible on the canvas, then
634 * the value will be between 0 and 1, where 0 is the left of the canvas.
635 * However, this method will return values outside the range, as
636 * values can fall outside the canvas.
637 *
638 * If x is null, this returns null.
639 * @param { Number } x The data x-coordinate.
640 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
641 */
642 Dygraph.prototype.toPercentXCoord = function(x) {
643 if (x == null) {
644 return null;
645 }
646
647 var xRange = this.xAxisRange();
648 return (x - xRange[0]) / (xRange[1] - xRange[0]);
649 };
650
651 /**
652 * Returns the number of columns (including the independent variable).
653 * @return { Integer } The number of columns.
654 */
655 Dygraph.prototype.numColumns = function() {
656 return this.rawData_[0].length;
657 };
658
659 /**
660 * Returns the number of rows (excluding any header/label row).
661 * @return { Integer } The number of rows, less any header.
662 */
663 Dygraph.prototype.numRows = function() {
664 return this.rawData_.length;
665 };
666
667 /**
668 * Returns the value in the given row and column. If the row and column exceed
669 * the bounds on the data, returns null. Also returns null if the value is
670 * missing.
671 * @param { Number} row The row number of the data (0-based). Row 0 is the
672 * first row of data, not a header row.
673 * @param { Number} col The column number of the data (0-based)
674 * @return { Number } The value in the specified cell or null if the row/col
675 * were out of range.
676 */
677 Dygraph.prototype.getValue = function(row, col) {
678 if (row < 0 || row > this.rawData_.length) return null;
679 if (col < 0 || col > this.rawData_[row].length) return null;
680
681 return this.rawData_[row][col];
682 };
683
684 /**
685 * @private
686 * Add an event handler. This smooths a difference between IE and the rest of
687 * the world.
688 * @param { DOM element } el The element to add the event to.
689 * @param { String } evt The name of the event, e.g. 'click' or 'mousemove'.
690 * @param { Function } fn The function to call on the event. The function takes
691 * one parameter: the event object.
692 */
693 Dygraph.addEvent = function(el, evt, fn) {
694 var normed_fn = function(e) {
695 if (!e) var e = window.event;
696 fn(e);
697 };
698 if (window.addEventListener) { // Mozilla, Netscape, Firefox
699 el.addEventListener(evt, normed_fn, false);
700 } else { // IE
701 el.attachEvent('on' + evt, normed_fn);
702 }
703 };
704
705
706 /**
707 * @private
708 * Cancels further processing of an event. This is useful to prevent default
709 * browser actions, e.g. highlighting text on a double-click.
710 * Based on the article at
711 * http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
712 * @param { Event } e The event whose normal behavior should be canceled.
713 */
714 Dygraph.cancelEvent = function(e) {
715 e = e ? e : window.event;
716 if (e.stopPropagation) {
717 e.stopPropagation();
718 }
719 if (e.preventDefault) {
720 e.preventDefault();
721 }
722 e.cancelBubble = true;
723 e.cancel = true;
724 e.returnValue = false;
725 return false;
726 };
727
728
729 /**
730 * Generates interface elements for the Dygraph: a containing div, a div to
731 * display the current point, and a textbox to adjust the rolling average
732 * period. Also creates the Renderer/Layout elements.
733 * @private
734 */
735 Dygraph.prototype.createInterface_ = function() {
736 // Create the all-enclosing graph div
737 var enclosing = this.maindiv_;
738
739 this.graphDiv = document.createElement("div");
740 this.graphDiv.style.width = this.width_ + "px";
741 this.graphDiv.style.height = this.height_ + "px";
742 enclosing.appendChild(this.graphDiv);
743
744 // Create the canvas for interactive parts of the chart.
745 this.canvas_ = Dygraph.createCanvas();
746 this.canvas_.style.position = "absolute";
747 this.canvas_.width = this.width_;
748 this.canvas_.height = this.height_;
749 this.canvas_.style.width = this.width_ + "px"; // for IE
750 this.canvas_.style.height = this.height_ + "px"; // for IE
751
752 this.canvas_ctx_ = Dygraph.getContext(this.canvas_);
753
754 // ... and for static parts of the chart.
755 this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
756 this.hidden_ctx_ = Dygraph.getContext(this.hidden_);
757
758 // The interactive parts of the graph are drawn on top of the chart.
759 this.graphDiv.appendChild(this.hidden_);
760 this.graphDiv.appendChild(this.canvas_);
761 this.mouseEventElement_ = this.canvas_;
762
763 var dygraph = this;
764 Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) {
765 dygraph.mouseMove_(e);
766 });
767 Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) {
768 dygraph.mouseOut_(e);
769 });
770
771 // Create the grapher
772 this.layout_ = new DygraphLayout(this);
773
774 this.createStatusMessage_();
775 this.createDragInterface_();
776 };
777
778 /**
779 * Detach DOM elements in the dygraph and null out all data references.
780 * Calling this when you're done with a dygraph can dramatically reduce memory
781 * usage. See, e.g., the tests/perf.html example.
782 */
783 Dygraph.prototype.destroy = function() {
784 var removeRecursive = function(node) {
785 while (node.hasChildNodes()) {
786 removeRecursive(node.firstChild);
787 node.removeChild(node.firstChild);
788 }
789 };
790 removeRecursive(this.maindiv_);
791
792 var nullOut = function(obj) {
793 for (var n in obj) {
794 if (typeof(obj[n]) === 'object') {
795 obj[n] = null;
796 }
797 }
798 };
799
800 // These may not all be necessary, but it can't hurt...
801 nullOut(this.layout_);
802 nullOut(this.plotter_);
803 nullOut(this);
804 };
805
806 /**
807 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
808 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
809 * or the zoom rectangles) is done on this.canvas_.
810 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
811 * @return {Object} The newly-created canvas
812 * @private
813 */
814 Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
815 var h = Dygraph.createCanvas();
816 h.style.position = "absolute";
817 // TODO(danvk): h should be offset from canvas. canvas needs to include
818 // some extra area to make it easier to zoom in on the far left and far
819 // right. h needs to be precisely the plot area, so that clipping occurs.
820 h.style.top = canvas.style.top;
821 h.style.left = canvas.style.left;
822 h.width = this.width_;
823 h.height = this.height_;
824 h.style.width = this.width_ + "px"; // for IE
825 h.style.height = this.height_ + "px"; // for IE
826 return h;
827 };
828
829 /**
830 * Convert hsv values to an rgb(r,g,b) string. Taken from MochiKit.Color. This
831 * is used to generate default series colors which are evenly spaced on the
832 * color wheel.
833 * @param { Number } hue Range is 0.0-1.0.
834 * @param { Number } saturation Range is 0.0-1.0.
835 * @param { Number } value Range is 0.0-1.0.
836 * @return { String } "rgb(r,g,b)" where r, g and b range from 0-255.
837 * @private
838 */
839 Dygraph.hsvToRGB = function (hue, saturation, value) {
840 var red;
841 var green;
842 var blue;
843 if (saturation === 0) {
844 red = value;
845 green = value;
846 blue = value;
847 } else {
848 var i = Math.floor(hue * 6);
849 var f = (hue * 6) - i;
850 var p = value * (1 - saturation);
851 var q = value * (1 - (saturation * f));
852 var t = value * (1 - (saturation * (1 - f)));
853 switch (i) {
854 case 1: red = q; green = value; blue = p; break;
855 case 2: red = p; green = value; blue = t; break;
856 case 3: red = p; green = q; blue = value; break;
857 case 4: red = t; green = p; blue = value; break;
858 case 5: red = value; green = p; blue = q; break;
859 case 6: // fall through
860 case 0: red = value; green = t; blue = p; break;
861 }
862 }
863 red = Math.floor(255 * red + 0.5);
864 green = Math.floor(255 * green + 0.5);
865 blue = Math.floor(255 * blue + 0.5);
866 return 'rgb(' + red + ',' + green + ',' + blue + ')';
867 };
868
869
870 /**
871 * Generate a set of distinct colors for the data series. This is done with a
872 * color wheel. Saturation/Value are customizable, and the hue is
873 * equally-spaced around the color wheel. If a custom set of colors is
874 * specified, that is used instead.
875 * @private
876 */
877 Dygraph.prototype.setColors_ = function() {
878 var num = this.attr_("labels").length - 1;
879 this.colors_ = [];
880 var colors = this.attr_('colors');
881 if (!colors) {
882 var sat = this.attr_('colorSaturation') || 1.0;
883 var val = this.attr_('colorValue') || 0.5;
884 var half = Math.ceil(num / 2);
885 for (var i = 1; i <= num; i++) {
886 if (!this.visibility()[i-1]) continue;
887 // alternate colors for high contrast.
888 var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2);
889 var hue = (1.0 * idx/ (1 + num));
890 this.colors_.push(Dygraph.hsvToRGB(hue, sat, val));
891 }
892 } else {
893 for (var i = 0; i < num; i++) {
894 if (!this.visibility()[i]) continue;
895 var colorStr = colors[i % colors.length];
896 this.colors_.push(colorStr);
897 }
898 }
899
900 this.plotter_.setColors(this.colors_);
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
2647 // The roller sits in the bottom left corner of the chart. We don't know where
2648 // this will be until the options are available, so it's positioned here.
2649 this.createRollInterface_();
2650
2651 // Same thing applies for the labelsDiv. It's right edge should be flush with
2652 // the right edge of the charting area (which may not be the same as the right
2653 // edge of the div, if we have two y-axes.
2654 this.positionLabelsDiv_();
2655
2656 // If the data or options have changed, then we'd better redraw.
2657 this.drawGraph_();
2658 };
2659
2660 /**
2661 * Update the graph with new data. This method is called when the viewing area
2662 * has changed. If the underlying data or options have changed, predraw_ will
2663 * be called before drawGraph_ is called.
2664 * @private
2665 */
2666 Dygraph.prototype.drawGraph_ = function() {
2667 var data = this.rawData_;
2668
2669 // This is used to set the second parameter to drawCallback, below.
2670 var is_initial_draw = this.is_initial_draw_;
2671 this.is_initial_draw_ = false;
2672
2673 var minY = null, maxY = null;
2674 this.layout_.removeAllDatasets();
2675 this.setColors_();
2676 this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2677
2678 // Loop over the fields (series). Go from the last to the first,
2679 // because if they're stacked that's how we accumulate the values.
2680
2681 var cumulative_y = []; // For stacked series.
2682 var datasets = [];
2683
2684 var extremes = {}; // series name -> [low, high]
2685
2686 // Loop over all fields and create datasets
2687 for (var i = data[0].length - 1; i >= 1; i--) {
2688 if (!this.visibility()[i - 1]) continue;
2689
2690 var seriesName = this.attr_("labels")[i];
2691 var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
2692 var logScale = this.attr_('logscale', i);
2693
2694 var series = [];
2695 for (var j = 0; j < data.length; j++) {
2696 var date = data[j][0];
2697 var point = data[j][i];
2698 if (logScale) {
2699 // On the log scale, points less than zero do not exist.
2700 // This will create a gap in the chart. Note that this ignores
2701 // connectSeparatedPoints.
2702 if (point <= 0) {
2703 point = null;
2704 }
2705 series.push([date, point]);
2706 } else {
2707 if (point != null || !connectSeparatedPoints) {
2708 series.push([date, point]);
2709 }
2710 }
2711 }
2712
2713 // TODO(danvk): move this into predraw_. It's insane to do it here.
2714 series = this.rollingAverage(series, this.rollPeriod_);
2715
2716 // Prune down to the desired range, if necessary (for zooming)
2717 // Because there can be lines going to points outside of the visible area,
2718 // we actually prune to visible points, plus one on either side.
2719 var bars = this.attr_("errorBars") || this.attr_("customBars");
2720 if (this.dateWindow_) {
2721 var low = this.dateWindow_[0];
2722 var high= this.dateWindow_[1];
2723 var pruned = [];
2724 // TODO(danvk): do binary search instead of linear search.
2725 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2726 var firstIdx = null, lastIdx = null;
2727 for (var k = 0; k < series.length; k++) {
2728 if (series[k][0] >= low && firstIdx === null) {
2729 firstIdx = k;
2730 }
2731 if (series[k][0] <= high) {
2732 lastIdx = k;
2733 }
2734 }
2735 if (firstIdx === null) firstIdx = 0;
2736 if (firstIdx > 0) firstIdx--;
2737 if (lastIdx === null) lastIdx = series.length - 1;
2738 if (lastIdx < series.length - 1) lastIdx++;
2739 this.boundaryIds_[i-1] = [firstIdx, lastIdx];
2740 for (var k = firstIdx; k <= lastIdx; k++) {
2741 pruned.push(series[k]);
2742 }
2743 series = pruned;
2744 } else {
2745 this.boundaryIds_[i-1] = [0, series.length-1];
2746 }
2747
2748 var seriesExtremes = this.extremeValues_(series);
2749
2750 if (bars) {
2751 for (var j=0; j<series.length; j++) {
2752 val = [series[j][0], series[j][1][0], series[j][1][1], series[j][1][2]];
2753 series[j] = val;
2754 }
2755 } else if (this.attr_("stackedGraph")) {
2756 var l = series.length;
2757 var actual_y;
2758 for (var j = 0; j < l; j++) {
2759 // If one data set has a NaN, let all subsequent stacked
2760 // sets inherit the NaN -- only start at 0 for the first set.
2761 var x = series[j][0];
2762 if (cumulative_y[x] === undefined) {
2763 cumulative_y[x] = 0;
2764 }
2765
2766 actual_y = series[j][1];
2767 cumulative_y[x] += actual_y;
2768
2769 series[j] = [x, cumulative_y[x]]
2770
2771 if (cumulative_y[x] > seriesExtremes[1]) {
2772 seriesExtremes[1] = cumulative_y[x];
2773 }
2774 if (cumulative_y[x] < seriesExtremes[0]) {
2775 seriesExtremes[0] = cumulative_y[x];
2776 }
2777 }
2778 }
2779 extremes[seriesName] = seriesExtremes;
2780
2781 datasets[i] = series;
2782 }
2783
2784 for (var i = 1; i < datasets.length; i++) {
2785 if (!this.visibility()[i - 1]) continue;
2786 this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
2787 }
2788
2789 this.computeYAxisRanges_(extremes);
2790 this.layout_.setYAxes(this.axes_);
2791
2792 this.addXTicks_();
2793
2794 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2795 var tmp_zoomed_x = this.zoomed_x_;
2796 // Tell PlotKit to use this new data and render itself
2797 this.layout_.setDateWindow(this.dateWindow_);
2798 this.zoomed_x_ = tmp_zoomed_x;
2799 this.layout_.evaluateWithError();
2800 this.plotter_.clear();
2801 this.plotter_.render();
2802 this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
2803 this.canvas_.height);
2804
2805 if (is_initial_draw) {
2806 // Generate a static legend before any particular point is selected.
2807 this.setLegendHTML_();
2808 } else {
2809 if (typeof(this.selPoints_) !== 'undefined' && this.selPoints_.length) {
2810 this.lastx_ = this.selPoints_[0].xval;
2811 this.updateSelection_();
2812 } else {
2813 this.clearSelection();
2814 }
2815 }
2816
2817 if (this.attr_("drawCallback") !== null) {
2818 this.attr_("drawCallback")(this, is_initial_draw);
2819 }
2820 };
2821
2822 /**
2823 * @private
2824 * Determine properties of the y-axes which are independent of the data
2825 * currently being displayed. This includes things like the number of axes and
2826 * the style of the axes. It does not include the range of each axis and its
2827 * tick marks.
2828 * This fills in this.axes_ and this.seriesToAxisMap_.
2829 * axes_ = [ { options } ]
2830 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2831 * indices are into the axes_ array.
2832 */
2833 Dygraph.prototype.computeYAxes_ = function() {
2834 this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis.
2835 this.seriesToAxisMap_ = {};
2836
2837 // Get a list of series names.
2838 var labels = this.attr_("labels");
2839 var series = {};
2840 for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
2841
2842 // all options which could be applied per-axis:
2843 var axisOptions = [
2844 'includeZero',
2845 'valueRange',
2846 'labelsKMB',
2847 'labelsKMG2',
2848 'pixelsPerYLabel',
2849 'yAxisLabelWidth',
2850 'axisLabelFontSize',
2851 'axisTickSize',
2852 'logscale'
2853 ];
2854
2855 // Copy global axis options over to the first axis.
2856 for (var i = 0; i < axisOptions.length; i++) {
2857 var k = axisOptions[i];
2858 var v = this.attr_(k);
2859 if (v) this.axes_[0][k] = v;
2860 }
2861
2862 // Go through once and add all the axes.
2863 for (var seriesName in series) {
2864 if (!series.hasOwnProperty(seriesName)) continue;
2865 var axis = this.attr_("axis", seriesName);
2866 if (axis == null) {
2867 this.seriesToAxisMap_[seriesName] = 0;
2868 continue;
2869 }
2870 if (typeof(axis) == 'object') {
2871 // Add a new axis, making a copy of its per-axis options.
2872 var opts = {};
2873 Dygraph.update(opts, this.axes_[0]);
2874 Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this.
2875 var yAxisId = this.axes_.length;
2876 opts.yAxisId = yAxisId;
2877 opts.g = this;
2878 Dygraph.update(opts, axis);
2879 this.axes_.push(opts);
2880 this.seriesToAxisMap_[seriesName] = yAxisId;
2881 }
2882 }
2883
2884 // Go through one more time and assign series to an axis defined by another
2885 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2886 for (var seriesName in series) {
2887 if (!series.hasOwnProperty(seriesName)) continue;
2888 var axis = this.attr_("axis", seriesName);
2889 if (typeof(axis) == 'string') {
2890 if (!this.seriesToAxisMap_.hasOwnProperty(axis)) {
2891 this.error("Series " + seriesName + " wants to share a y-axis with " +
2892 "series " + axis + ", which does not define its own axis.");
2893 return null;
2894 }
2895 var idx = this.seriesToAxisMap_[axis];
2896 this.seriesToAxisMap_[seriesName] = idx;
2897 }
2898 }
2899
2900 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2901 // this last so that hiding the first series doesn't destroy the axis
2902 // properties of the primary axis.
2903 var seriesToAxisFiltered = {};
2904 var vis = this.visibility();
2905 for (var i = 1; i < labels.length; i++) {
2906 var s = labels[i];
2907 if (vis[i - 1]) seriesToAxisFiltered[s] = this.seriesToAxisMap_[s];
2908 }
2909 this.seriesToAxisMap_ = seriesToAxisFiltered;
2910 };
2911
2912 /**
2913 * Returns the number of y-axes on the chart.
2914 * @return {Number} the number of axes.
2915 */
2916 Dygraph.prototype.numAxes = function() {
2917 var last_axis = 0;
2918 for (var series in this.seriesToAxisMap_) {
2919 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2920 var idx = this.seriesToAxisMap_[series];
2921 if (idx > last_axis) last_axis = idx;
2922 }
2923 return 1 + last_axis;
2924 };
2925
2926 /**
2927 * @private
2928 * Returns axis properties for the given series.
2929 * @param { String } setName The name of the series for which to get axis
2930 * properties, e.g. 'Y1'.
2931 * @return { Object } The axis properties.
2932 */
2933 Dygraph.prototype.axisPropertiesForSeries = function(series) {
2934 // TODO(danvk): handle errors.
2935 return this.axes_[this.seriesToAxisMap_[series]];
2936 };
2937
2938 /**
2939 * @private
2940 * Determine the value range and tick marks for each axis.
2941 * @param {Object} extremes A mapping from seriesName -> [low, high]
2942 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2943 */
2944 Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
2945 // Build a map from axis number -> [list of series names]
2946 var seriesForAxis = [];
2947 for (var series in this.seriesToAxisMap_) {
2948 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2949 var idx = this.seriesToAxisMap_[series];
2950 while (seriesForAxis.length <= idx) seriesForAxis.push([]);
2951 seriesForAxis[idx].push(series);
2952 }
2953
2954 // Compute extreme values, a span and tick marks for each axis.
2955 for (var i = 0; i < this.axes_.length; i++) {
2956 var axis = this.axes_[i];
2957
2958 if (!seriesForAxis[i]) {
2959 // If no series are defined or visible then use a reasonable default
2960 axis.extremeRange = [0, 1];
2961 } else {
2962 // Calculate the extremes of extremes.
2963 var series = seriesForAxis[i];
2964 var minY = Infinity; // extremes[series[0]][0];
2965 var maxY = -Infinity; // extremes[series[0]][1];
2966 var extremeMinY, extremeMaxY;
2967 for (var j = 0; j < series.length; j++) {
2968 // Only use valid extremes to stop null data series' from corrupting the scale.
2969 extremeMinY = extremes[series[j]][0];
2970 if (extremeMinY != null) {
2971 minY = Math.min(extremeMinY, minY);
2972 }
2973 extremeMaxY = extremes[series[j]][1];
2974 if (extremeMaxY != null) {
2975 maxY = Math.max(extremeMaxY, maxY);
2976 }
2977 }
2978 if (axis.includeZero && minY > 0) minY = 0;
2979
2980 // Ensure we have a valid scale, otherwise defualt to zero for safety.
2981 if (minY == Infinity) minY = 0;
2982 if (maxY == -Infinity) maxY = 0;
2983
2984 // Add some padding and round up to an integer to be human-friendly.
2985 var span = maxY - minY;
2986 // special case: if we have no sense of scale, use +/-10% of the sole value.
2987 if (span == 0) { span = maxY; }
2988
2989 var maxAxisY;
2990 var minAxisY;
2991 if (axis.logscale) {
2992 var maxAxisY = maxY + 0.1 * span;
2993 var minAxisY = minY;
2994 } else {
2995 var maxAxisY = maxY + 0.1 * span;
2996 var minAxisY = minY - 0.1 * span;
2997
2998 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2999 if (!this.attr_("avoidMinZero")) {
3000 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
3001 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
3002 }
3003
3004 if (this.attr_("includeZero")) {
3005 if (maxY < 0) maxAxisY = 0;
3006 if (minY > 0) minAxisY = 0;
3007 }
3008 }
3009 axis.extremeRange = [minAxisY, maxAxisY];
3010 }
3011 if (axis.valueWindow) {
3012 // This is only set if the user has zoomed on the y-axis. It is never set
3013 // by a user. It takes precedence over axis.valueRange because, if you set
3014 // valueRange, you'd still expect to be able to pan.
3015 axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
3016 } else if (axis.valueRange) {
3017 // This is a user-set value range for this axis.
3018 axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]];
3019 } else {
3020 axis.computedValueRange = axis.extremeRange;
3021 }
3022
3023 // Add ticks. By default, all axes inherit the tick positions of the
3024 // primary axis. However, if an axis is specifically marked as having
3025 // independent ticks, then that is permissible as well.
3026 if (i == 0 || axis.independentTicks) {
3027 axis.ticks =
3028 Dygraph.numericTicks(axis.computedValueRange[0],
3029 axis.computedValueRange[1],
3030 this,
3031 axis);
3032 } else {
3033 var p_axis = this.axes_[0];
3034 var p_ticks = p_axis.ticks;
3035 var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
3036 var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
3037 var tick_values = [];
3038 for (var i = 0; i < p_ticks.length; i++) {
3039 var y_frac = (p_ticks[i].v - p_axis.computedValueRange[0]) / p_scale;
3040 var y_val = axis.computedValueRange[0] + y_frac * scale;
3041 tick_values.push(y_val);
3042 }
3043
3044 axis.ticks =
3045 Dygraph.numericTicks(axis.computedValueRange[0],
3046 axis.computedValueRange[1],
3047 this, axis, tick_values);
3048 }
3049 }
3050 };
3051
3052 /**
3053 * @private
3054 * Calculates the rolling average of a data set.
3055 * If originalData is [label, val], rolls the average of those.
3056 * If originalData is [label, [, it's interpreted as [value, stddev]
3057 * and the roll is returned in the same form, with appropriately reduced
3058 * stddev for each value.
3059 * Note that this is where fractional input (i.e. '5/10') is converted into
3060 * decimal values.
3061 * @param {Array} originalData The data in the appropriate format (see above)
3062 * @param {Number} rollPeriod The number of points over which to average the
3063 * data
3064 */
3065 Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
3066 if (originalData.length < 2)
3067 return originalData;
3068 var rollPeriod = Math.min(rollPeriod, originalData.length - 1);
3069 var rollingData = [];
3070 var sigma = this.attr_("sigma");
3071
3072 if (this.fractions_) {
3073 var num = 0;
3074 var den = 0; // numerator/denominator
3075 var mult = 100.0;
3076 for (var i = 0; i < originalData.length; i++) {
3077 num += originalData[i][1][0];
3078 den += originalData[i][1][1];
3079 if (i - rollPeriod >= 0) {
3080 num -= originalData[i - rollPeriod][1][0];
3081 den -= originalData[i - rollPeriod][1][1];
3082 }
3083
3084 var date = originalData[i][0];
3085 var value = den ? num / den : 0.0;
3086 if (this.attr_("errorBars")) {
3087 if (this.wilsonInterval_) {
3088 // For more details on this confidence interval, see:
3089 // http://en.wikipedia.org/wiki/Binomial_confidence_interval
3090 if (den) {
3091 var p = value < 0 ? 0 : value, n = den;
3092 var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
3093 var denom = 1 + sigma * sigma / den;
3094 var low = (p + sigma * sigma / (2 * den) - pm) / denom;
3095 var high = (p + sigma * sigma / (2 * den) + pm) / denom;
3096 rollingData[i] = [date,
3097 [p * mult, (p - low) * mult, (high - p) * mult]];
3098 } else {
3099 rollingData[i] = [date, [0, 0, 0]];
3100 }
3101 } else {
3102 var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
3103 rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
3104 }
3105 } else {
3106 rollingData[i] = [date, mult * value];
3107 }
3108 }
3109 } else if (this.attr_("customBars")) {
3110 var low = 0;
3111 var mid = 0;
3112 var high = 0;
3113 var count = 0;
3114 for (var i = 0; i < originalData.length; i++) {
3115 var data = originalData[i][1];
3116 var y = data[1];
3117 rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
3118
3119 if (y != null && !isNaN(y)) {
3120 low += data[0];
3121 mid += y;
3122 high += data[2];
3123 count += 1;
3124 }
3125 if (i - rollPeriod >= 0) {
3126 var prev = originalData[i - rollPeriod];
3127 if (prev[1][1] != null && !isNaN(prev[1][1])) {
3128 low -= prev[1][0];
3129 mid -= prev[1][1];
3130 high -= prev[1][2];
3131 count -= 1;
3132 }
3133 }
3134 rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
3135 1.0 * (mid - low) / count,
3136 1.0 * (high - mid) / count ]];
3137 }
3138 } else {
3139 // Calculate the rolling average for the first rollPeriod - 1 points where
3140 // there is not enough data to roll over the full number of points
3141 var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
3142 if (!this.attr_("errorBars")){
3143 if (rollPeriod == 1) {
3144 return originalData;
3145 }
3146
3147 for (var i = 0; i < originalData.length; i++) {
3148 var sum = 0;
3149 var num_ok = 0;
3150 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
3151 var y = originalData[j][1];
3152 if (y == null || isNaN(y)) continue;
3153 num_ok++;
3154 sum += originalData[j][1];
3155 }
3156 if (num_ok) {
3157 rollingData[i] = [originalData[i][0], sum / num_ok];
3158 } else {
3159 rollingData[i] = [originalData[i][0], null];
3160 }
3161 }
3162
3163 } else {
3164 for (var i = 0; i < originalData.length; i++) {
3165 var sum = 0;
3166 var variance = 0;
3167 var num_ok = 0;
3168 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
3169 var y = originalData[j][1][0];
3170 if (y == null || isNaN(y)) continue;
3171 num_ok++;
3172 sum += originalData[j][1][0];
3173 variance += Math.pow(originalData[j][1][1], 2);
3174 }
3175 if (num_ok) {
3176 var stddev = Math.sqrt(variance) / num_ok;
3177 rollingData[i] = [originalData[i][0],
3178 [sum / num_ok, sigma * stddev, sigma * stddev]];
3179 } else {
3180 rollingData[i] = [originalData[i][0], [null, null, null]];
3181 }
3182 }
3183 }
3184 }
3185
3186 return rollingData;
3187 };
3188
3189 /**
3190 * @private
3191 * Parses a date, returning the number of milliseconds since epoch. This can be
3192 * passed in as an xValueParser in the Dygraph constructor.
3193 * TODO(danvk): enumerate formats that this understands.
3194 * @param {String} A date in YYYYMMDD format.
3195 * @return {Number} Milliseconds since epoch.
3196 */
3197 Dygraph.dateParser = function(dateStr, self) {
3198 var dateStrSlashed;
3199 var d;
3200 if (dateStr.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
3201 dateStrSlashed = dateStr.replace("-", "/", "g");
3202 while (dateStrSlashed.search("-") != -1) {
3203 dateStrSlashed = dateStrSlashed.replace("-", "/");
3204 }
3205 d = Dygraph.dateStrToMillis(dateStrSlashed);
3206 } else if (dateStr.length == 8) { // e.g. '20090712'
3207 // TODO(danvk): remove support for this format. It's confusing.
3208 dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
3209 + "/" + dateStr.substr(6,2);
3210 d = Dygraph.dateStrToMillis(dateStrSlashed);
3211 } else {
3212 // Any format that Date.parse will accept, e.g. "2009/07/12" or
3213 // "2009/07/12 12:34:56"
3214 d = Dygraph.dateStrToMillis(dateStr);
3215 }
3216
3217 if (!d || isNaN(d)) {
3218 self.error("Couldn't parse " + dateStr + " as a date");
3219 }
3220 return d;
3221 };
3222
3223 /**
3224 * Detects the type of the str (date or numeric) and sets the various
3225 * formatting attributes in this.attrs_ based on this type.
3226 * @param {String} str An x value.
3227 * @private
3228 */
3229 Dygraph.prototype.detectTypeFromString_ = function(str) {
3230 var isDate = false;
3231 if (str.indexOf('-') > 0 ||
3232 str.indexOf('/') >= 0 ||
3233 isNaN(parseFloat(str))) {
3234 isDate = true;
3235 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
3236 // TODO(danvk): remove support for this format.
3237 isDate = true;
3238 }
3239
3240 if (isDate) {
3241 this.attrs_.xValueFormatter = Dygraph.dateString_;
3242 this.attrs_.xValueParser = Dygraph.dateParser;
3243 this.attrs_.xTicker = Dygraph.dateTicker;
3244 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3245 } else {
3246 // TODO(danvk): use Dygraph.numberFormatter here?
3247 /** @private (shut up, jsdoc!) */
3248 this.attrs_.xValueFormatter = function(x) { return x; };
3249 /** @private (shut up, jsdoc!) */
3250 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
3251 this.attrs_.xTicker = Dygraph.numericTicks;
3252 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
3253 }
3254 };
3255
3256 /**
3257 * Parses the value as a floating point number. This is like the parseFloat()
3258 * built-in, but with a few differences:
3259 * - the empty string is parsed as null, rather than NaN.
3260 * - if the string cannot be parsed at all, an error is logged.
3261 * If the string can't be parsed, this method returns null.
3262 * @param {String} x The string to be parsed
3263 * @param {Number} opt_line_no The line number from which the string comes.
3264 * @param {String} opt_line The text of the line from which the string comes.
3265 * @private
3266 */
3267
3268 // Parse the x as a float or return null if it's not a number.
3269 Dygraph.prototype.parseFloat_ = function(x, opt_line_no, opt_line) {
3270 var val = parseFloat(x);
3271 if (!isNaN(val)) return val;
3272
3273 // Try to figure out what happeend.
3274 // If the value is the empty string, parse it as null.
3275 if (/^ *$/.test(x)) return null;
3276
3277 // If it was actually "NaN", return it as NaN.
3278 if (/^ *nan *$/i.test(x)) return NaN;
3279
3280 // Looks like a parsing error.
3281 var msg = "Unable to parse '" + x + "' as a number";
3282 if (opt_line !== null && opt_line_no !== null) {
3283 msg += " on line " + (1+opt_line_no) + " ('" + opt_line + "') of CSV.";
3284 }
3285 this.error(msg);
3286
3287 return null;
3288 };
3289
3290 /**
3291 * @private
3292 * Parses a string in a special csv format. We expect a csv file where each
3293 * line is a date point, and the first field in each line is the date string.
3294 * We also expect that all remaining fields represent series.
3295 * if the errorBars attribute is set, then interpret the fields as:
3296 * date, series1, stddev1, series2, stddev2, ...
3297 * @param {[Object]} data See above.
3298 *
3299 * @return [Object] An array with one entry for each row. These entries
3300 * are an array of cells in that row. The first entry is the parsed x-value for
3301 * the row. The second, third, etc. are the y-values. These can take on one of
3302 * three forms, depending on the CSV and constructor parameters:
3303 * 1. numeric value
3304 * 2. [ value, stddev ]
3305 * 3. [ low value, center value, high value ]
3306 */
3307 Dygraph.prototype.parseCSV_ = function(data) {
3308 var ret = [];
3309 var lines = data.split("\n");
3310
3311 // Use the default delimiter or fall back to a tab if that makes sense.
3312 var delim = this.attr_('delimiter');
3313 if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
3314 delim = '\t';
3315 }
3316
3317 var start = 0;
3318 if (this.labelsFromCSV_) {
3319 start = 1;
3320 this.attrs_.labels = lines[0].split(delim);
3321 }
3322 var line_no = 0;
3323
3324 var xParser;
3325 var defaultParserSet = false; // attempt to auto-detect x value type
3326 var expectedCols = this.attr_("labels").length;
3327 var outOfOrder = false;
3328 for (var i = start; i < lines.length; i++) {
3329 var line = lines[i];
3330 line_no = i;
3331 if (line.length == 0) continue; // skip blank lines
3332 if (line[0] == '#') continue; // skip comment lines
3333 var inFields = line.split(delim);
3334 if (inFields.length < 2) continue;
3335
3336 var fields = [];
3337 if (!defaultParserSet) {
3338 this.detectTypeFromString_(inFields[0]);
3339 xParser = this.attr_("xValueParser");
3340 defaultParserSet = true;
3341 }
3342 fields[0] = xParser(inFields[0], this);
3343
3344 // If fractions are expected, parse the numbers as "A/B"
3345 if (this.fractions_) {
3346 for (var j = 1; j < inFields.length; j++) {
3347 // TODO(danvk): figure out an appropriate way to flag parse errors.
3348 var vals = inFields[j].split("/");
3349 if (vals.length != 2) {
3350 this.error('Expected fractional "num/den" values in CSV data ' +
3351 "but found a value '" + inFields[j] + "' on line " +
3352 (1 + i) + " ('" + line + "') which is not of this form.");
3353 fields[j] = [0, 0];
3354 } else {
3355 fields[j] = [this.parseFloat_(vals[0], i, line),
3356 this.parseFloat_(vals[1], i, line)];
3357 }
3358 }
3359 } else if (this.attr_("errorBars")) {
3360 // If there are error bars, values are (value, stddev) pairs
3361 if (inFields.length % 2 != 1) {
3362 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3363 'but line ' + (1 + i) + ' has an odd number of values (' +
3364 (inFields.length - 1) + "): '" + line + "'");
3365 }
3366 for (var j = 1; j < inFields.length; j += 2) {
3367 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3368 this.parseFloat_(inFields[j + 1], i, line)];
3369 }
3370 } else if (this.attr_("customBars")) {
3371 // Bars are a low;center;high tuple
3372 for (var j = 1; j < inFields.length; j++) {
3373 var val = inFields[j];
3374 if (/^ *$/.test(val)) {
3375 fields[j] = [null, null, null];
3376 } else {
3377 var vals = val.split(";");
3378 if (vals.length == 3) {
3379 fields[j] = [ this.parseFloat_(vals[0], i, line),
3380 this.parseFloat_(vals[1], i, line),
3381 this.parseFloat_(vals[2], i, line) ];
3382 } else {
3383 this.warning('When using customBars, values must be either blank ' +
3384 'or "low;center;high" tuples (got "' + val +
3385 '" on line ' + (1+i));
3386 }
3387 }
3388 }
3389 } else {
3390 // Values are just numbers
3391 for (var j = 1; j < inFields.length; j++) {
3392 fields[j] = this.parseFloat_(inFields[j], i, line);
3393 }
3394 }
3395 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3396 outOfOrder = true;
3397 }
3398
3399 if (fields.length != expectedCols) {
3400 this.error("Number of columns in line " + i + " (" + fields.length +
3401 ") does not agree with number of labels (" + expectedCols +
3402 ") " + line);
3403 }
3404
3405 // If the user specified the 'labels' option and none of the cells of the
3406 // first row parsed correctly, then they probably double-specified the
3407 // labels. We go with the values set in the option, discard this row and
3408 // log a warning to the JS console.
3409 if (i == 0 && this.attr_('labels')) {
3410 var all_null = true;
3411 for (var j = 0; all_null && j < fields.length; j++) {
3412 if (fields[j]) all_null = false;
3413 }
3414 if (all_null) {
3415 this.warn("The dygraphs 'labels' option is set, but the first row of " +
3416 "CSV data ('" + line + "') appears to also contain labels. " +
3417 "Will drop the CSV labels and use the option labels.");
3418 continue;
3419 }
3420 }
3421 ret.push(fields);
3422 }
3423
3424 if (outOfOrder) {
3425 this.warn("CSV is out of order; order it correctly to speed loading.");
3426 ret.sort(function(a,b) { return a[0] - b[0] });
3427 }
3428
3429 return ret;
3430 };
3431
3432 /**
3433 * @private
3434 * The user has provided their data as a pre-packaged JS array. If the x values
3435 * are numeric, this is the same as dygraphs' internal format. If the x values
3436 * are dates, we need to convert them from Date objects to ms since epoch.
3437 * @param {[Object]} data
3438 * @return {[Object]} data with numeric x values.
3439 */
3440 Dygraph.prototype.parseArray_ = function(data) {
3441 // Peek at the first x value to see if it's numeric.
3442 if (data.length == 0) {
3443 this.error("Can't plot empty data set");
3444 return null;
3445 }
3446 if (data[0].length == 0) {
3447 this.error("Data set cannot contain an empty row");
3448 return null;
3449 }
3450
3451 if (this.attr_("labels") == null) {
3452 this.warn("Using default labels. Set labels explicitly via 'labels' " +
3453 "in the options parameter");
3454 this.attrs_.labels = [ "X" ];
3455 for (var i = 1; i < data[0].length; i++) {
3456 this.attrs_.labels.push("Y" + i);
3457 }
3458 }
3459
3460 if (Dygraph.isDateLike(data[0][0])) {
3461 // Some intelligent defaults for a date x-axis.
3462 this.attrs_.xValueFormatter = Dygraph.dateString_;
3463 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3464 this.attrs_.xTicker = Dygraph.dateTicker;
3465
3466 // Assume they're all dates.
3467 var parsedData = Dygraph.clone(data);
3468 for (var i = 0; i < data.length; i++) {
3469 if (parsedData[i].length == 0) {
3470 this.error("Row " + (1 + i) + " of data is empty");
3471 return null;
3472 }
3473 if (parsedData[i][0] == null
3474 || typeof(parsedData[i][0].getTime) != 'function'
3475 || isNaN(parsedData[i][0].getTime())) {
3476 this.error("x value in row " + (1 + i) + " is not a Date");
3477 return null;
3478 }
3479 parsedData[i][0] = parsedData[i][0].getTime();
3480 }
3481 return parsedData;
3482 } else {
3483 // Some intelligent defaults for a numeric x-axis.
3484 /** @private (shut up, jsdoc!) */
3485 this.attrs_.xValueFormatter = function(x) { return x; };
3486 this.attrs_.xTicker = Dygraph.numericTicks;
3487 return data;
3488 }
3489 };
3490
3491 /**
3492 * Parses a DataTable object from gviz.
3493 * The data is expected to have a first column that is either a date or a
3494 * number. All subsequent columns must be numbers. If there is a clear mismatch
3495 * between this.xValueParser_ and the type of the first column, it will be
3496 * fixed. Fills out rawData_.
3497 * @param {[Object]} data See above.
3498 * @private
3499 */
3500 Dygraph.prototype.parseDataTable_ = function(data) {
3501 var cols = data.getNumberOfColumns();
3502 var rows = data.getNumberOfRows();
3503
3504 var indepType = data.getColumnType(0);
3505 if (indepType == 'date' || indepType == 'datetime') {
3506 this.attrs_.xValueFormatter = Dygraph.dateString_;
3507 this.attrs_.xValueParser = Dygraph.dateParser;
3508 this.attrs_.xTicker = Dygraph.dateTicker;
3509 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3510 } else if (indepType == 'number') {
3511 this.attrs_.xValueFormatter = function(x) { return x; };
3512 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
3513 this.attrs_.xTicker = Dygraph.numericTicks;
3514 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
3515 } else {
3516 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3517 "column 1 of DataTable input (Got '" + indepType + "')");
3518 return null;
3519 }
3520
3521 // Array of the column indices which contain data (and not annotations).
3522 var colIdx = [];
3523 var annotationCols = {}; // data index -> [annotation cols]
3524 var hasAnnotations = false;
3525 for (var i = 1; i < cols; i++) {
3526 var type = data.getColumnType(i);
3527 if (type == 'number') {
3528 colIdx.push(i);
3529 } else if (type == 'string' && this.attr_('displayAnnotations')) {
3530 // This is OK -- it's an annotation column.
3531 var dataIdx = colIdx[colIdx.length - 1];
3532 if (!annotationCols.hasOwnProperty(dataIdx)) {
3533 annotationCols[dataIdx] = [i];
3534 } else {
3535 annotationCols[dataIdx].push(i);
3536 }
3537 hasAnnotations = true;
3538 } else {
3539 this.error("Only 'number' is supported as a dependent type with Gviz." +
3540 " 'string' is only supported if displayAnnotations is true");
3541 }
3542 }
3543
3544 // Read column labels
3545 // TODO(danvk): add support back for errorBars
3546 var labels = [data.getColumnLabel(0)];
3547 for (var i = 0; i < colIdx.length; i++) {
3548 labels.push(data.getColumnLabel(colIdx[i]));
3549 if (this.attr_("errorBars")) i += 1;
3550 }
3551 this.attrs_.labels = labels;
3552 cols = labels.length;
3553
3554 var ret = [];
3555 var outOfOrder = false;
3556 var annotations = [];
3557 for (var i = 0; i < rows; i++) {
3558 var row = [];
3559 if (typeof(data.getValue(i, 0)) === 'undefined' ||
3560 data.getValue(i, 0) === null) {
3561 this.warn("Ignoring row " + i +
3562 " of DataTable because of undefined or null first column.");
3563 continue;
3564 }
3565
3566 if (indepType == 'date' || indepType == 'datetime') {
3567 row.push(data.getValue(i, 0).getTime());
3568 } else {
3569 row.push(data.getValue(i, 0));
3570 }
3571 if (!this.attr_("errorBars")) {
3572 for (var j = 0; j < colIdx.length; j++) {
3573 var col = colIdx[j];
3574 row.push(data.getValue(i, col));
3575 if (hasAnnotations &&
3576 annotationCols.hasOwnProperty(col) &&
3577 data.getValue(i, annotationCols[col][0]) != null) {
3578 var ann = {};
3579 ann.series = data.getColumnLabel(col);
3580 ann.xval = row[0];
3581 ann.shortText = String.fromCharCode(65 /* A */ + annotations.length)
3582 ann.text = '';
3583 for (var k = 0; k < annotationCols[col].length; k++) {
3584 if (k) ann.text += "\n";
3585 ann.text += data.getValue(i, annotationCols[col][k]);
3586 }
3587 annotations.push(ann);
3588 }
3589 }
3590
3591 // Strip out infinities, which give dygraphs problems later on.
3592 for (var j = 0; j < row.length; j++) {
3593 if (!isFinite(row[j])) row[j] = null;
3594 }
3595 } else {
3596 for (var j = 0; j < cols - 1; j++) {
3597 row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
3598 }
3599 }
3600 if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
3601 outOfOrder = true;
3602 }
3603 ret.push(row);
3604 }
3605
3606 if (outOfOrder) {
3607 this.warn("DataTable is out of order; order it correctly to speed loading.");
3608 ret.sort(function(a,b) { return a[0] - b[0] });
3609 }
3610 this.rawData_ = ret;
3611
3612 if (annotations.length > 0) {
3613 this.setAnnotations(annotations, true);
3614 }
3615 }
3616
3617 /**
3618 * @private
3619 * This is identical to JavaScript's built-in Date.parse() method, except that
3620 * it doesn't get replaced with an incompatible method by aggressive JS
3621 * libraries like MooTools or Joomla.
3622 * @param { String } str The date string, e.g. "2011/05/06"
3623 * @return { Integer } millis since epoch
3624 */
3625 Dygraph.dateStrToMillis = function(str) {
3626 return new Date(str).getTime();
3627 };
3628
3629 // These functions are all based on MochiKit.
3630 /**
3631 * @private
3632 */
3633 Dygraph.update = function (self, o) {
3634 if (typeof(o) != 'undefined' && o !== null) {
3635 for (var k in o) {
3636 if (o.hasOwnProperty(k)) {
3637 self[k] = o[k];
3638 }
3639 }
3640 }
3641 return self;
3642 };
3643
3644 /**
3645 * @private
3646 */
3647 Dygraph.isArrayLike = function (o) {
3648 var typ = typeof(o);
3649 if (
3650 (typ != 'object' && !(typ == 'function' &&
3651 typeof(o.item) == 'function')) ||
3652 o === null ||
3653 typeof(o.length) != 'number' ||
3654 o.nodeType === 3
3655 ) {
3656 return false;
3657 }
3658 return true;
3659 };
3660
3661 /**
3662 * @private
3663 */
3664 Dygraph.isDateLike = function (o) {
3665 if (typeof(o) != "object" || o === null ||
3666 typeof(o.getTime) != 'function') {
3667 return false;
3668 }
3669 return true;
3670 };
3671
3672 /**
3673 * @private
3674 */
3675 Dygraph.clone = function(o) {
3676 // TODO(danvk): figure out how MochiKit's version works
3677 var r = [];
3678 for (var i = 0; i < o.length; i++) {
3679 if (Dygraph.isArrayLike(o[i])) {
3680 r.push(Dygraph.clone(o[i]));
3681 } else {
3682 r.push(o[i]);
3683 }
3684 }
3685 return r;
3686 };
3687
3688
3689 /**
3690 * Get the CSV data. If it's in a function, call that function. If it's in a
3691 * file, do an XMLHttpRequest to get it.
3692 * @private
3693 */
3694 Dygraph.prototype.start_ = function() {
3695 if (typeof this.file_ == 'function') {
3696 // CSV string. Pretend we got it via XHR.
3697 this.loadedEvent_(this.file_());
3698 } else if (Dygraph.isArrayLike(this.file_)) {
3699 this.rawData_ = this.parseArray_(this.file_);
3700 this.predraw_();
3701 } else if (typeof this.file_ == 'object' &&
3702 typeof this.file_.getColumnRange == 'function') {
3703 // must be a DataTable from gviz.
3704 this.parseDataTable_(this.file_);
3705 this.predraw_();
3706 } else if (typeof this.file_ == 'string') {
3707 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3708 if (this.file_.indexOf('\n') >= 0) {
3709 this.loadedEvent_(this.file_);
3710 } else {
3711 var req = new XMLHttpRequest();
3712 var caller = this;
3713 req.onreadystatechange = function () {
3714 if (req.readyState == 4) {
3715 if (req.status == 200) {
3716 caller.loadedEvent_(req.responseText);
3717 }
3718 }
3719 };
3720
3721 req.open("GET", this.file_, true);
3722 req.send(null);
3723 }
3724 } else {
3725 this.error("Unknown data format: " + (typeof this.file_));
3726 }
3727 };
3728
3729 /**
3730 * Changes various properties of the graph. These can include:
3731 * <ul>
3732 * <li>file: changes the source data for the graph</li>
3733 * <li>errorBars: changes whether the data contains stddev</li>
3734 * </ul>
3735 *
3736 * @param {Object} attrs The new properties and values
3737 */
3738 Dygraph.prototype.updateOptions = function(attrs) {
3739 // TODO(danvk): this is a mess. Rethink this function.
3740 if ('rollPeriod' in attrs) {
3741 this.rollPeriod_ = attrs.rollPeriod;
3742 }
3743 if ('dateWindow' in attrs) {
3744 this.dateWindow_ = attrs.dateWindow;
3745 if (!('isZoomedIgnoreProgrammaticZoom' in attrs)) {
3746 this.zoomed_x_ = attrs.dateWindow != null;
3747 }
3748 }
3749 if ('valueRange' in attrs && !('isZoomedIgnoreProgrammaticZoom' in attrs)) {
3750 this.zoomed_y_ = attrs.valueRange != null;
3751 }
3752
3753 // TODO(danvk): validate per-series options.
3754 // Supported:
3755 // strokeWidth
3756 // pointSize
3757 // drawPoints
3758 // highlightCircleSize
3759
3760 Dygraph.update(this.user_attrs_, attrs);
3761
3762 this.labelsFromCSV_ = (this.attr_("labels") == null);
3763
3764 if (attrs['file']) {
3765 this.file_ = attrs['file'];
3766 this.start_();
3767 } else {
3768 this.predraw_();
3769 }
3770 };
3771
3772 /**
3773 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3774 * containing div (which has presumably changed size since the dygraph was
3775 * instantiated. If the width/height are specified, the div will be resized.
3776 *
3777 * This is far more efficient than destroying and re-instantiating a
3778 * Dygraph, since it doesn't have to reparse the underlying data.
3779 *
3780 * @param {Number} [width] Width (in pixels)
3781 * @param {Number} [height] Height (in pixels)
3782 */
3783 Dygraph.prototype.resize = function(width, height) {
3784 if (this.resize_lock) {
3785 return;
3786 }
3787 this.resize_lock = true;
3788
3789 if ((width === null) != (height === null)) {
3790 this.warn("Dygraph.resize() should be called with zero parameters or " +
3791 "two non-NULL parameters. Pretending it was zero.");
3792 width = height = null;
3793 }
3794
3795 // TODO(danvk): there should be a clear() method.
3796 this.maindiv_.innerHTML = "";
3797 this.attrs_.labelsDiv = null;
3798
3799 if (width) {
3800 this.maindiv_.style.width = width + "px";
3801 this.maindiv_.style.height = height + "px";
3802 this.width_ = width;
3803 this.height_ = height;
3804 } else {
3805 this.width_ = this.maindiv_.offsetWidth;
3806 this.height_ = this.maindiv_.offsetHeight;
3807 }
3808
3809 this.createInterface_();
3810 this.predraw_();
3811
3812 this.resize_lock = false;
3813 };
3814
3815 /**
3816 * Adjusts the number of points in the rolling average. Updates the graph to
3817 * reflect the new averaging period.
3818 * @param {Number} length Number of points over which to average the data.
3819 */
3820 Dygraph.prototype.adjustRoll = function(length) {
3821 this.rollPeriod_ = length;
3822 this.predraw_();
3823 };
3824
3825 /**
3826 * Returns a boolean array of visibility statuses.
3827 */
3828 Dygraph.prototype.visibility = function() {
3829 // Do lazy-initialization, so that this happens after we know the number of
3830 // data series.
3831 if (!this.attr_("visibility")) {
3832 this.attrs_["visibility"] = [];
3833 }
3834 while (this.attr_("visibility").length < this.rawData_[0].length - 1) {
3835 this.attr_("visibility").push(true);
3836 }
3837 return this.attr_("visibility");
3838 };
3839
3840 /**
3841 * Changes the visiblity of a series.
3842 */
3843 Dygraph.prototype.setVisibility = function(num, value) {
3844 var x = this.visibility();
3845 if (num < 0 || num >= x.length) {
3846 this.warn("invalid series number in setVisibility: " + num);
3847 } else {
3848 x[num] = value;
3849 this.predraw_();
3850 }
3851 };
3852
3853 /**
3854 * Update the list of annotations and redraw the chart.
3855 */
3856 Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
3857 // Only add the annotation CSS rule once we know it will be used.
3858 Dygraph.addAnnotationRule();
3859 this.annotations_ = ann;
3860 this.layout_.setAnnotations(this.annotations_);
3861 if (!suppressDraw) {
3862 this.predraw_();
3863 }
3864 };
3865
3866 /**
3867 * Return the list of annotations.
3868 */
3869 Dygraph.prototype.annotations = function() {
3870 return this.annotations_;
3871 };
3872
3873 /**
3874 * Get the index of a series (column) given its name. The first column is the
3875 * x-axis, so the data series start with index 1.
3876 */
3877 Dygraph.prototype.indexFromSetName = function(name) {
3878 var labels = this.attr_("labels");
3879 for (var i = 0; i < labels.length; i++) {
3880 if (labels[i] == name) return i;
3881 }
3882 return null;
3883 };
3884
3885 /**
3886 * @private
3887 * Adds a default style for the annotation CSS classes to the document. This is
3888 * only executed when annotations are actually used. It is designed to only be
3889 * called once -- all calls after the first will return immediately.
3890 */
3891 Dygraph.addAnnotationRule = function() {
3892 if (Dygraph.addedAnnotationCSS) return;
3893
3894 var rule = "border: 1px solid black; " +
3895 "background-color: white; " +
3896 "text-align: center;";
3897
3898 var styleSheetElement = document.createElement("style");
3899 styleSheetElement.type = "text/css";
3900 document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
3901
3902 // Find the first style sheet that we can access.
3903 // We may not add a rule to a style sheet from another domain for security
3904 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3905 // adds its own style sheets from google.com.
3906 for (var i = 0; i < document.styleSheets.length; i++) {
3907 if (document.styleSheets[i].disabled) continue;
3908 var mysheet = document.styleSheets[i];
3909 try {
3910 if (mysheet.insertRule) { // Firefox
3911 var idx = mysheet.cssRules ? mysheet.cssRules.length : 0;
3912 mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx);
3913 } else if (mysheet.addRule) { // IE
3914 mysheet.addRule(".dygraphDefaultAnnotation", rule);
3915 }
3916 Dygraph.addedAnnotationCSS = true;
3917 return;
3918 } catch(err) {
3919 // Was likely a security exception.
3920 }
3921 }
3922
3923 this.warn("Unable to add default annotation CSS rule; display may be off.");
3924 }
3925
3926 /**
3927 * @private
3928 * Create a new canvas element. This is more complex than a simple
3929 * document.createElement("canvas") because of IE and excanvas.
3930 */
3931 Dygraph.createCanvas = function() {
3932 var canvas = document.createElement("canvas");
3933
3934 isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
3935 if (isIE && (typeof(G_vmlCanvasManager) != 'undefined')) {
3936 canvas = G_vmlCanvasManager.initElement(canvas);
3937 }
3938
3939 return canvas;
3940 };
3941
3942
3943 /**
3944 * A wrapper around Dygraph that implements the gviz API.
3945 * @param {Object} container The DOM object the visualization should live in.
3946 */
3947 Dygraph.GVizChart = function(container) {
3948 this.container = container;
3949 }
3950
3951 Dygraph.GVizChart.prototype.draw = function(data, options) {
3952 // Clear out any existing dygraph.
3953 // TODO(danvk): would it make more sense to simply redraw using the current
3954 // date_graph object?
3955 this.container.innerHTML = '';
3956 if (typeof(this.date_graph) != 'undefined') {
3957 this.date_graph.destroy();
3958 }
3959
3960 this.date_graph = new Dygraph(this.container, data, options);
3961 }
3962
3963 /**
3964 * Google charts compatible setSelection
3965 * Only row selection is supported, all points in the row will be highlighted
3966 * @param {Array} array of the selected cells
3967 * @public
3968 */
3969 Dygraph.GVizChart.prototype.setSelection = function(selection_array) {
3970 var row = false;
3971 if (selection_array.length) {
3972 row = selection_array[0].row;
3973 }
3974 this.date_graph.setSelection(row);
3975 }
3976
3977 /**
3978 * Google charts compatible getSelection implementation
3979 * @return {Array} array of the selected cells
3980 * @public
3981 */
3982 Dygraph.GVizChart.prototype.getSelection = function() {
3983 var selection = [];
3984
3985 var row = this.date_graph.getSelection();
3986
3987 if (row < 0) return selection;
3988
3989 col = 1;
3990 for (var i in this.date_graph.layout_.datasets) {
3991 selection.push({row: row, column: col});
3992 col++;
3993 }
3994
3995 return selection;
3996 }
3997
3998 // Older pages may still use this name.
3999 DateGraph = Dygraph;
4000
4001 // <REMOVE_FOR_COMBINED>
4002 Dygraph.OPTIONS_REFERENCE = // <JSON>
4003 {
4004 "xValueParser": {
4005 "default": "parseFloat() or Date.parse()*",
4006 "labels": ["CSV parsing"],
4007 "type": "function(str) -> number",
4008 "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."
4009 },
4010 "stackedGraph": {
4011 "default": "false",
4012 "labels": ["Data Line display"],
4013 "type": "boolean",
4014 "description": "If set, stack series on top of one another rather than drawing them independently."
4015 },
4016 "pointSize": {
4017 "default": "1",
4018 "labels": ["Data Line display"],
4019 "type": "integer",
4020 "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."
4021 },
4022 "labelsDivStyles": {
4023 "default": "null",
4024 "labels": ["Legend"],
4025 "type": "{}",
4026 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
4027 },
4028 "drawPoints": {
4029 "default": "false",
4030 "labels": ["Data Line display"],
4031 "type": "boolean",
4032 "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."
4033 },
4034 "height": {
4035 "default": "320",
4036 "labels": ["Overall display"],
4037 "type": "integer",
4038 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4039 },
4040 "zoomCallback": {
4041 "default": "null",
4042 "labels": ["Callbacks"],
4043 "type": "function(minDate, maxDate, yRanges)",
4044 "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."
4045 },
4046 "pointClickCallback": {
4047 "default": "",
4048 "labels": ["Callbacks", "Interactive Elements"],
4049 "type": "",
4050 "description": ""
4051 },
4052 "colors": {
4053 "default": "(see description)",
4054 "labels": ["Data Series Colors"],
4055 "type": "array<string>",
4056 "example": "['red', '#00FF00']",
4057 "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."
4058 },
4059 "connectSeparatedPoints": {
4060 "default": "false",
4061 "labels": ["Data Line display"],
4062 "type": "boolean",
4063 "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."
4064 },
4065 "highlightCallback": {
4066 "default": "null",
4067 "labels": ["Callbacks"],
4068 "type": "function(event, x, points,row)",
4069 "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>"
4070 },
4071 "includeZero": {
4072 "default": "false",
4073 "labels": ["Axis display"],
4074 "type": "boolean",
4075 "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"
4076 },
4077 "rollPeriod": {
4078 "default": "1",
4079 "labels": ["Error Bars", "Rolling Averages"],
4080 "type": "integer &gt;= 1",
4081 "description": "Number of days over which to average data. Discussed extensively above."
4082 },
4083 "unhighlightCallback": {
4084 "default": "null",
4085 "labels": ["Callbacks"],
4086 "type": "function(event)",
4087 "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."
4088 },
4089 "axisTickSize": {
4090 "default": "3.0",
4091 "labels": ["Axis display"],
4092 "type": "number",
4093 "description": "The size of the line to display next to each tick mark on x- or y-axes."
4094 },
4095 "labelsSeparateLines": {
4096 "default": "false",
4097 "labels": ["Legend"],
4098 "type": "boolean",
4099 "description": "Put <code>&lt;br/&gt;</code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
4100 },
4101 "xValueFormatter": {
4102 "default": "(Round to 2 decimal places)",
4103 "labels": ["Axis display"],
4104 "type": "function(x)",
4105 "description": "Function to provide a custom display format for the X value for mouseover."
4106 },
4107 "pixelsPerYLabel": {
4108 "default": "30",
4109 "labels": ["Axis display", "Grid"],
4110 "type": "integer",
4111 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4112 },
4113 "annotationMouseOverHandler": {
4114 "default": "null",
4115 "labels": ["Annotations"],
4116 "type": "function(annotation, point, dygraph, event)",
4117 "description": "If provided, this function is called whenever the user mouses over an annotation."
4118 },
4119 "annotationMouseOutHandler": {
4120 "default": "null",
4121 "labels": ["Annotations"],
4122 "type": "function(annotation, point, dygraph, event)",
4123 "description": "If provided, this function is called whenever the user mouses out of an annotation."
4124 },
4125 "annotationClickHandler": {
4126 "default": "null",
4127 "labels": ["Annotations"],
4128 "type": "function(annotation, point, dygraph, event)",
4129 "description": "If provided, this function is called whenever the user clicks on an annotation."
4130 },
4131 "annotationDblClickHandler": {
4132 "default": "null",
4133 "labels": ["Annotations"],
4134 "type": "function(annotation, point, dygraph, event)",
4135 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
4136 },
4137 "drawCallback": {
4138 "default": "null",
4139 "labels": ["Callbacks"],
4140 "type": "function(dygraph, is_initial)",
4141 "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."
4142 },
4143 "labelsKMG2": {
4144 "default": "false",
4145 "labels": ["Value display/formatting"],
4146 "type": "boolean",
4147 "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."
4148 },
4149 "delimiter": {
4150 "default": ",",
4151 "labels": ["CSV parsing"],
4152 "type": "string",
4153 "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."
4154 },
4155 "axisLabelFontSize": {
4156 "default": "14",
4157 "labels": ["Axis display"],
4158 "type": "integer",
4159 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
4160 },
4161 "underlayCallback": {
4162 "default": "null",
4163 "labels": ["Callbacks"],
4164 "type": "function(canvas, area, dygraph)",
4165 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
4166 },
4167 "width": {
4168 "default": "480",
4169 "labels": ["Overall display"],
4170 "type": "integer",
4171 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4172 },
4173 "interactionModel": {
4174 "default": "...",
4175 "labels": ["Interactive Elements"],
4176 "type": "Object",
4177 "description": "TODO(konigsberg): document this"
4178 },
4179 "xTicker": {
4180 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
4181 "labels": ["Axis display"],
4182 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
4183 "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."
4184 },
4185 "xAxisLabelWidth": {
4186 "default": "50",
4187 "labels": ["Axis display"],
4188 "type": "integer",
4189 "description": "Width, in pixels, of the x-axis labels."
4190 },
4191 "showLabelsOnHighlight": {
4192 "default": "true",
4193 "labels": ["Interactive Elements", "Legend"],
4194 "type": "boolean",
4195 "description": "Whether to show the legend upon mouseover."
4196 },
4197 "axis": {
4198 "default": "(none)",
4199 "labels": ["Axis display"],
4200 "type": "string or object",
4201 "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."
4202 },
4203 "pixelsPerXLabel": {
4204 "default": "60",
4205 "labels": ["Axis display", "Grid"],
4206 "type": "integer",
4207 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4208 },
4209 "labelsDiv": {
4210 "default": "null",
4211 "labels": ["Legend"],
4212 "type": "DOM element or string",
4213 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
4214 "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."
4215 },
4216 "fractions": {
4217 "default": "false",
4218 "labels": ["CSV parsing", "Error Bars"],
4219 "type": "boolean",
4220 "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)."
4221 },
4222 "logscale": {
4223 "default": "false",
4224 "labels": ["Axis display"],
4225 "type": "boolean",
4226 "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."
4227 },
4228 "strokeWidth": {
4229 "default": "1.0",
4230 "labels": ["Data Line display"],
4231 "type": "integer",
4232 "example": "0.5, 2.0",
4233 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
4234 },
4235 "wilsonInterval": {
4236 "default": "true",
4237 "labels": ["Error Bars"],
4238 "type": "boolean",
4239 "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."
4240 },
4241 "fillGraph": {
4242 "default": "false",
4243 "labels": ["Data Line display"],
4244 "type": "boolean",
4245 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
4246 },
4247 "highlightCircleSize": {
4248 "default": "3",
4249 "labels": ["Interactive Elements"],
4250 "type": "integer",
4251 "description": "The size in pixels of the dot drawn over highlighted points."
4252 },
4253 "gridLineColor": {
4254 "default": "rgb(128,128,128)",
4255 "labels": ["Grid"],
4256 "type": "red, blue",
4257 "description": "The color of the gridlines."
4258 },
4259 "visibility": {
4260 "default": "[true, true, ...]",
4261 "labels": ["Data Line display"],
4262 "type": "Array of booleans",
4263 "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."
4264 },
4265 "valueRange": {
4266 "default": "Full range of the input is shown",
4267 "labels": ["Axis display"],
4268 "type": "Array of two numbers",
4269 "example": "[10, 110]",
4270 "description": "Explicitly set the vertical range of the graph to [low, high]."
4271 },
4272 "labelsDivWidth": {
4273 "default": "250",
4274 "labels": ["Legend"],
4275 "type": "integer",
4276 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
4277 },
4278 "colorSaturation": {
4279 "default": "1.0",
4280 "labels": ["Data Series Colors"],
4281 "type": "float (0.0 - 1.0)",
4282 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4283 },
4284 "yAxisLabelWidth": {
4285 "default": "50",
4286 "labels": ["Axis display"],
4287 "type": "integer",
4288 "description": "Width, in pixels, of the y-axis labels. This also affects the amount of space available for a y-axis chart label."
4289 },
4290 "hideOverlayOnMouseOut": {
4291 "default": "true",
4292 "labels": ["Interactive Elements", "Legend"],
4293 "type": "boolean",
4294 "description": "Whether to hide the legend when the mouse leaves the chart area."
4295 },
4296 "yValueFormatter": {
4297 "default": "(Round to 2 decimal places)",
4298 "labels": ["Axis display"],
4299 "type": "function(x)",
4300 "description": "Function to provide a custom display format for the Y value for mouseover."
4301 },
4302 "legend": {
4303 "default": "onmouseover",
4304 "labels": ["Legend"],
4305 "type": "string",
4306 "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."
4307 },
4308 "labelsShowZeroValues": {
4309 "default": "true",
4310 "labels": ["Legend"],
4311 "type": "boolean",
4312 "description": "Show zero value labels in the labelsDiv."
4313 },
4314 "stepPlot": {
4315 "default": "false",
4316 "labels": ["Data Line display"],
4317 "type": "boolean",
4318 "description": "When set, display the graph as a step plot instead of a line plot."
4319 },
4320 "labelsKMB": {
4321 "default": "false",
4322 "labels": ["Value display/formatting"],
4323 "type": "boolean",
4324 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4325 },
4326 "rightGap": {
4327 "default": "5",
4328 "labels": ["Overall display"],
4329 "type": "integer",
4330 "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."
4331 },
4332 "avoidMinZero": {
4333 "default": "false",
4334 "labels": ["Axis display"],
4335 "type": "boolean",
4336 "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."
4337 },
4338 "xAxisLabelFormatter": {
4339 "default": "Dygraph.dateAxisFormatter",
4340 "labels": ["Axis display", "Value display/formatting"],
4341 "type": "function(date, granularity)",
4342 "description": "Function to call to format values along the x axis."
4343 },
4344 "clickCallback": {
4345 "snippet": "function(e, date){<br>&nbsp;&nbsp;alert(date);<br>}",
4346 "default": "null",
4347 "labels": ["Callbacks"],
4348 "type": "function(e, date)",
4349 "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."
4350 },
4351 "yAxisLabelFormatter": {
4352 "default": "yValueFormatter",
4353 "labels": ["Axis display", "Value display/formatting"],
4354 "type": "function(x)",
4355 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4356 },
4357 "labels": {
4358 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4359 "labels": ["Legend"],
4360 "type": "array<string>",
4361 "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."
4362 },
4363 "dateWindow": {
4364 "default": "Full range of the input is shown",
4365 "labels": ["Axis display"],
4366 "type": "Array of two Dates or numbers",
4367 "example": "[<br>&nbsp;&nbsp;Date.parse('2006-01-01'),<br>&nbsp;&nbsp;(new Date()).valueOf()<br>]",
4368 "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."
4369 },
4370 "showRoller": {
4371 "default": "false",
4372 "labels": ["Interactive Elements", "Rolling Averages"],
4373 "type": "boolean",
4374 "description": "If the rolling average period text box should be shown."
4375 },
4376 "sigma": {
4377 "default": "2.0",
4378 "labels": ["Error Bars"],
4379 "type": "float",
4380 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4381 },
4382 "customBars": {
4383 "default": "false",
4384 "labels": ["CSV parsing", "Error Bars"],
4385 "type": "boolean",
4386 "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."
4387 },
4388 "colorValue": {
4389 "default": "1.0",
4390 "labels": ["Data Series Colors"],
4391 "type": "float (0.0 - 1.0)",
4392 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4393 },
4394 "errorBars": {
4395 "default": "false",
4396 "labels": ["CSV parsing", "Error Bars"],
4397 "type": "boolean",
4398 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4399 },
4400 "displayAnnotations": {
4401 "default": "false",
4402 "labels": ["Annotations"],
4403 "type": "boolean",
4404 "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."
4405 },
4406 "panEdgeFraction": {
4407 "default": "null",
4408 "labels": ["Axis Display", "Interactive Elements"],
4409 "type": "float",
4410 "default": "null",
4411 "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."
4412 },
4413 "title": {
4414 "labels": ["Chart labels"],
4415 "type": "string",
4416 "default": "null",
4417 "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."
4418 },
4419 "titleHeight": {
4420 "default": "18",
4421 "labels": ["Chart labels"],
4422 "type": "integer",
4423 "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."
4424 },
4425 "xlabel": {
4426 "labels": ["Chart labels"],
4427 "type": "string",
4428 "default": "null",
4429 "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."
4430 },
4431 "xLabelHeight": {
4432 "labels": ["Chart labels"],
4433 "type": "integer",
4434 "default": "18",
4435 "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."
4436 },
4437 "ylabel": {
4438 "labels": ["Chart labels"],
4439 "type": "string",
4440 "default": "null",
4441 "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."
4442 },
4443 "yLabelWidth": {
4444 "labels": ["Chart labels"],
4445 "type": "integer",
4446 "default": "18",
4447 "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."
4448 },
4449 "isZoomedIgnoreProgrammaticZoom" : {
4450 "default": "false",
4451 "labels": ["Zooming"],
4452 "type": "boolean",
4453 "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."
4454 },
4455 "drawXGrid": {
4456 "default": "true",
4457 "labels": ["Grid"],
4458 "type": "boolean",
4459 "description" : "Whether to display vertical gridlines under the chart."
4460 },
4461 "drawYGrid": {
4462 "default": "true",
4463 "labels": ["Grid"],
4464 "type": "boolean",
4465 "description" : "Whether to display horizontal gridlines under the chart."
4466 },
4467 "drawXAxis": {
4468 "default": "true",
4469 "labels": ["Axis display"],
4470 "type": "boolean",
4471 "description" : "Whether to draw the x-axis. Setting this to false also prevents x-axis ticks from being drawn and reclaims the space for the chart grid/lines."
4472 },
4473 "drawYAxis": {
4474 "default": "true",
4475 "labels": ["Axis display"],
4476 "type": "boolean",
4477 "description" : "Whether to draw the y-axis. Setting this to false also prevents y-axis ticks from being drawn and reclaims the space for the chart grid/lines."
4478 },
4479 "gridLineWidth": {
4480 "default": "0.3",
4481 "labels": ["Grid"],
4482 "type": "float",
4483 "description" : "Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal gridlines can be turned off entirely by using the drawXGrid and drawYGrid options."
4484 },
4485 "axisLineWidth": {
4486 "default": "0.3",
4487 "labels": ["Axis display"],
4488 "type": "float",
4489 "description" : "Thickness (in pixels) of the x- and y-axis lines."
4490 },
4491 "axisLineColor": {
4492 "default": "black",
4493 "labels": ["Axis display"],
4494 "type": "string",
4495 "description" : "Color of the x- and y-axis lines. Accepts any value which the HTML canvas strokeStyle attribute understands, e.g. 'black' or 'rgb(0, 100, 255)'."
4496 },
4497 "fillAlpha": {
4498 "default": "0.15",
4499 "labels": ["Error bars", "Data Series Colors"],
4500 "type": "float (0.0 - 1.0)",
4501 "description" : "Error bars (or custom bars) for each series are drawn in the same color as the series, but with partial transparency. This sets the transparency. A value of 0.0 means that the error bars will not be drawn, whereas a value of 1.0 means that the error bars will be as dark as the line for the series itself. This can be used to produce chart lines whose thickness varies at each point."
4502 },
4503 "axisLabelColor": {
4504 "default": "black",
4505 "labels": ["Axis display"],
4506 "type": "string",
4507 "description" : "Color for x- and y-axis labels. This is a CSS color string."
4508 },
4509 "axisLabelWidth": {
4510 "default": "50",
4511 "labels": ["Axis display", "Chart labels"],
4512 "type": "integer",
4513 "description" : "Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also controls "
4514 },
4515 "sigFigs" : {
4516 "default": "null",
4517 "labels": ["Value display/formatting"],
4518 "type": "integer",
4519 "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."
4520 },
4521 "digitsAfterDecimal" : {
4522 "default": "2",
4523 "labels": ["Value display/formatting"],
4524 "type": "integer",
4525 "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."
4526 },
4527 "maxNumberWidth" : {
4528 "default": "6",
4529 "labels": ["Value display/formatting"],
4530 "type": "integer",
4531 "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."
4532 },
4533 "file": {
4534 "default": "(set when constructed)",
4535 "labels": ["Data"],
4536 "type": "string (URL of CSV or CSV), GViz DataTable or 2D Array",
4537 "description": "Sets the data being displayed in the chart. This can only be set when calling updateOptions; it cannot be set from the constructor. For a full description of valid data formats, see the <a href='http://dygraphs.com/data.html'>Data Formats</a> page."
4538 }
4539 }
4540 ; // </JSON>
4541 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4542 // JSON. This assumption cannot be checked in JS, but it will be checked when
4543 // documentation is generated by the generate-documentation.py script. For the
4544 // most part, this just means that you should always use double quotes.
4545
4546 // Do a quick sanity check on the options reference.
4547 (function() {
4548 var warn = function(msg) { if (console) console.warn(msg); };
4549 var flds = ['type', 'default', 'description'];
4550 var valid_cats = [
4551 'Annotations',
4552 'Axis display',
4553 'Chart labels',
4554 'CSV parsing',
4555 'Callbacks',
4556 'Data',
4557 'Data Line display',
4558 'Data Series Colors',
4559 'Error Bars',
4560 'Grid',
4561 'Interactive Elements',
4562 'Legend',
4563 'Overall display',
4564 'Rolling Averages',
4565 'Value display/formatting',
4566 'Zooming'
4567 ];
4568 var cats = {};
4569 for (var i = 0; i < valid_cats.length; i++) cats[valid_cats[i]] = true;
4570
4571 for (var k in Dygraph.OPTIONS_REFERENCE) {
4572 if (!Dygraph.OPTIONS_REFERENCE.hasOwnProperty(k)) continue;
4573 var op = Dygraph.OPTIONS_REFERENCE[k];
4574 for (var i = 0; i < flds.length; i++) {
4575 if (!op.hasOwnProperty(flds[i])) {
4576 warn('Option ' + k + ' missing "' + flds[i] + '" property');
4577 } else if (typeof(op[flds[i]]) != 'string') {
4578 warn(k + '.' + flds[i] + ' must be of type string');
4579 }
4580 }
4581 var labels = op['labels'];
4582 if (typeof(labels) !== 'object') {
4583 warn('Option "' + k + '" is missing a "labels": [...] option');
4584 for (var i = 0; i < labels.length; i++) {
4585 if (!cats.hasOwnProperty(labels[i])) {
4586 warn('Option "' + k + '" has label "' + labels[i] +
4587 '", which is invalid.');
4588 }
4589 }
4590 }
4591 }
4592 })();
4593 // </REMOVE_FOR_COMBINED>