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