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