10 -> Dygraph.LOG_SCALE
[dygraphs.git] / dygraph.js
... / ...
CommitLineData
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 */
52Dygraph = 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
66Dygraph.NAME = "Dygraph";
67Dygraph.VERSION = "1.2";
68Dygraph.__repr__ = function() {
69 return "[" + this.NAME + " " + this.VERSION + "]";
70};
71Dygraph.toString = function() {
72 return this.__repr__();
73};
74
75// Various default values
76Dygraph.DEFAULT_ROLL_PERIOD = 1;
77Dygraph.DEFAULT_WIDTH = 480;
78Dygraph.DEFAULT_HEIGHT = 320;
79Dygraph.AXIS_LINE_WIDTH = 0.3;
80
81Dygraph.LOG_SCALE = 10;
82Dygraph.LN_TEN = Math.log(Dygraph.LOG_SCALE);
83Dygraph.log10 = function(x) {
84 return Math.log(x) / Dygraph.LN_TEN;
85}
86
87// Default attribute values.
88Dygraph.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.
140Dygraph.DEBUG = 1;
141Dygraph.INFO = 2;
142Dygraph.WARNING = 3;
143Dygraph.ERROR = 3;
144
145// Directions for panning and zooming. Use bit operations when combined
146// values are possible.
147Dygraph.HORIZONTAL = 1;
148Dygraph.VERTICAL = 2;
149
150// Used for initializing annotation CSS rules only once.
151Dygraph.addedAnnotationCSS = false;
152
153Dygraph.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 */
174Dygraph.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
263Dygraph.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?
279Dygraph.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}
297Dygraph.prototype.info = function(message) {
298 this.log(Dygraph.INFO, message);
299}
300Dygraph.prototype.warn = function(message) {
301 this.log(Dygraph.WARNING, message);
302}
303Dygraph.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 */
311Dygraph.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 */
321Dygraph.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 */
336Dygraph.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 */
348Dygraph.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 */
366Dygraph.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 */
376Dygraph.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 */
392Dygraph.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 */
411Dygraph.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 */
420Dygraph.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 */
436Dygraph.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 */
487Dygraph.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 */
512Dygraph.prototype.numColumns = function() {
513 return this.rawData_[0].length;
514};
515
516/**
517 * Returns the number of rows (excluding any header/label row).
518 */
519Dygraph.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 */
528Dygraph.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
535Dygraph.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
550Dygraph.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 */
570Dygraph.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 */
629Dygraph.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 */
659Dygraph.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
675Dygraph.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 */
713Dygraph.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 */
750Dygraph.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
757Dygraph.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
772Dygraph.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 */
795Dygraph.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 */
829Dygraph.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 */
842Dygraph.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
872Dygraph.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
884Dygraph.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
896Dygraph.prototype.dragGetX_ = function(e, context) {
897 return Dygraph.pageX(e) - context.px
898};
899
900Dygraph.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//
911Dygraph.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//
947Dygraph.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//
987Dygraph.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//
1005Dygraph.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//
1016Dygraph.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//
1049Dygraph.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
1099Dygraph.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
1147Dygraph.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 */
1154Dygraph.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 */
1262Dygraph.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 */
1302Dygraph.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 */
1319Dygraph.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 */
1335Dygraph.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 */
1361Dygraph.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 */
1394Dygraph.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 // Check that you can really highlight the last day's data
1415 var last = points[points.length-1];
1416 if (last != null && canvasx > last.canvasx)
1417 lastx = points[points.length-1].xval;
1418
1419 // Extract the points we've selected
1420 this.selPoints_ = [];
1421 var l = points.length;
1422 if (!this.attr_("stackedGraph")) {
1423 for (var i = 0; i < l; i++) {
1424 if (points[i].xval == lastx) {
1425 this.selPoints_.push(points[i]);
1426 }
1427 }
1428 } else {
1429 // Need to 'unstack' points starting from the bottom
1430 var cumulative_sum = 0;
1431 for (var i = l - 1; i >= 0; i--) {
1432 if (points[i].xval == lastx) {
1433 var p = {}; // Clone the point since we modify it
1434 for (var k in points[i]) {
1435 p[k] = points[i][k];
1436 }
1437 p.yval -= cumulative_sum;
1438 cumulative_sum += p.yval;
1439 this.selPoints_.push(p);
1440 }
1441 }
1442 this.selPoints_.reverse();
1443 }
1444
1445 if (this.attr_("highlightCallback")) {
1446 var px = this.lastx_;
1447 if (px !== null && lastx != px) {
1448 // only fire if the selected point has changed.
1449 this.attr_("highlightCallback")(event, lastx, this.selPoints_, this.idxToRow_(idx));
1450 }
1451 }
1452
1453 // Save last x position for callbacks.
1454 this.lastx_ = lastx;
1455
1456 this.updateSelection_();
1457};
1458
1459/**
1460 * Transforms layout_.points index into data row number.
1461 * @param int layout_.points index
1462 * @return int row number, or -1 if none could be found.
1463 * @private
1464 */
1465Dygraph.prototype.idxToRow_ = function(idx) {
1466 if (idx < 0) return -1;
1467
1468 for (var i in this.layout_.datasets) {
1469 if (idx < this.layout_.datasets[i].length) {
1470 return this.boundaryIds_[0][0]+idx;
1471 }
1472 idx -= this.layout_.datasets[i].length;
1473 }
1474 return -1;
1475};
1476
1477/**
1478 * Draw dots over the selectied points in the data series. This function
1479 * takes care of cleanup of previously-drawn dots.
1480 * @private
1481 */
1482Dygraph.prototype.updateSelection_ = function() {
1483 // Clear the previously drawn vertical, if there is one
1484 var ctx = this.canvas_.getContext("2d");
1485 if (this.previousVerticalX_ >= 0) {
1486 // Determine the maximum highlight circle size.
1487 var maxCircleSize = 0;
1488 var labels = this.attr_('labels');
1489 for (var i = 1; i < labels.length; i++) {
1490 var r = this.attr_('highlightCircleSize', labels[i]);
1491 if (r > maxCircleSize) maxCircleSize = r;
1492 }
1493 var px = this.previousVerticalX_;
1494 ctx.clearRect(px - maxCircleSize - 1, 0,
1495 2 * maxCircleSize + 2, this.height_);
1496 }
1497
1498 var isOK = function(x) { return x && !isNaN(x); };
1499
1500 if (this.selPoints_.length > 0) {
1501 var canvasx = this.selPoints_[0].canvasx;
1502
1503 // Set the status message to indicate the selected point(s)
1504 var replace = this.attr_('xValueFormatter')(this.lastx_, this) + ":";
1505 var fmtFunc = this.attr_('yValueFormatter');
1506 var clen = this.colors_.length;
1507
1508 if (this.attr_('showLabelsOnHighlight')) {
1509 // Set the status message to indicate the selected point(s)
1510 for (var i = 0; i < this.selPoints_.length; i++) {
1511 if (!this.attr_("labelsShowZeroValues") && this.selPoints_[i].yval == 0) continue;
1512 if (!isOK(this.selPoints_[i].canvasy)) continue;
1513 if (this.attr_("labelsSeparateLines")) {
1514 replace += "<br/>";
1515 }
1516 var point = this.selPoints_[i];
1517 var c = new RGBColor(this.plotter_.colors[point.name]);
1518 var yval = fmtFunc(point.yval);
1519 replace += " <b><font color='" + c.toHex() + "'>"
1520 + point.name + "</font></b>:"
1521 + yval;
1522 }
1523
1524 this.attr_("labelsDiv").innerHTML = replace;
1525 }
1526
1527 // Draw colored circles over the center of each selected point
1528 ctx.save();
1529 for (var i = 0; i < this.selPoints_.length; i++) {
1530 if (!isOK(this.selPoints_[i].canvasy)) continue;
1531 var circleSize =
1532 this.attr_('highlightCircleSize', this.selPoints_[i].name);
1533 ctx.beginPath();
1534 ctx.fillStyle = this.plotter_.colors[this.selPoints_[i].name];
1535 ctx.arc(canvasx, this.selPoints_[i].canvasy, circleSize,
1536 0, 2 * Math.PI, false);
1537 ctx.fill();
1538 }
1539 ctx.restore();
1540
1541 this.previousVerticalX_ = canvasx;
1542 }
1543};
1544
1545/**
1546 * Set manually set selected dots, and display information about them
1547 * @param int row number that should by highlighted
1548 * false value clears the selection
1549 * @public
1550 */
1551Dygraph.prototype.setSelection = function(row) {
1552 // Extract the points we've selected
1553 this.selPoints_ = [];
1554 var pos = 0;
1555
1556 if (row !== false) {
1557 row = row-this.boundaryIds_[0][0];
1558 }
1559
1560 if (row !== false && row >= 0) {
1561 for (var i in this.layout_.datasets) {
1562 if (row < this.layout_.datasets[i].length) {
1563 var point = this.layout_.points[pos+row];
1564
1565 if (this.attr_("stackedGraph")) {
1566 point = this.layout_.unstackPointAtIndex(pos+row);
1567 }
1568
1569 this.selPoints_.push(point);
1570 }
1571 pos += this.layout_.datasets[i].length;
1572 }
1573 }
1574
1575 if (this.selPoints_.length) {
1576 this.lastx_ = this.selPoints_[0].xval;
1577 this.updateSelection_();
1578 } else {
1579 this.lastx_ = -1;
1580 this.clearSelection();
1581 }
1582
1583};
1584
1585/**
1586 * The mouse has left the canvas. Clear out whatever artifacts remain
1587 * @param {Object} event the mouseout event from the browser.
1588 * @private
1589 */
1590Dygraph.prototype.mouseOut_ = function(event) {
1591 if (this.attr_("unhighlightCallback")) {
1592 this.attr_("unhighlightCallback")(event);
1593 }
1594
1595 if (this.attr_("hideOverlayOnMouseOut")) {
1596 this.clearSelection();
1597 }
1598};
1599
1600/**
1601 * Remove all selection from the canvas
1602 * @public
1603 */
1604Dygraph.prototype.clearSelection = function() {
1605 // Get rid of the overlay data
1606 var ctx = this.canvas_.getContext("2d");
1607 ctx.clearRect(0, 0, this.width_, this.height_);
1608 this.attr_("labelsDiv").innerHTML = "";
1609 this.selPoints_ = [];
1610 this.lastx_ = -1;
1611}
1612
1613/**
1614 * Returns the number of the currently selected row
1615 * @return int row number, of -1 if nothing is selected
1616 * @public
1617 */
1618Dygraph.prototype.getSelection = function() {
1619 if (!this.selPoints_ || this.selPoints_.length < 1) {
1620 return -1;
1621 }
1622
1623 for (var row=0; row<this.layout_.points.length; row++ ) {
1624 if (this.layout_.points[row].x == this.selPoints_[0].x) {
1625 return row + this.boundaryIds_[0][0];
1626 }
1627 }
1628 return -1;
1629}
1630
1631Dygraph.zeropad = function(x) {
1632 if (x < 10) return "0" + x; else return "" + x;
1633}
1634
1635/**
1636 * Return a string version of the hours, minutes and seconds portion of a date.
1637 * @param {Number} date The JavaScript date (ms since epoch)
1638 * @return {String} A time of the form "HH:MM:SS"
1639 * @private
1640 */
1641Dygraph.hmsString_ = function(date) {
1642 var zeropad = Dygraph.zeropad;
1643 var d = new Date(date);
1644 if (d.getSeconds()) {
1645 return zeropad(d.getHours()) + ":" +
1646 zeropad(d.getMinutes()) + ":" +
1647 zeropad(d.getSeconds());
1648 } else {
1649 return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
1650 }
1651}
1652
1653/**
1654 * Convert a JS date to a string appropriate to display on an axis that
1655 * is displaying values at the stated granularity.
1656 * @param {Date} date The date to format
1657 * @param {Number} granularity One of the Dygraph granularity constants
1658 * @return {String} The formatted date
1659 * @private
1660 */
1661Dygraph.dateAxisFormatter = function(date, granularity) {
1662 if (granularity >= Dygraph.DECADAL) {
1663 return date.strftime('%Y');
1664 } else if (granularity >= Dygraph.MONTHLY) {
1665 return date.strftime('%b %y');
1666 } else {
1667 var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
1668 if (frac == 0 || granularity >= Dygraph.DAILY) {
1669 return new Date(date.getTime() + 3600*1000).strftime('%d%b');
1670 } else {
1671 return Dygraph.hmsString_(date.getTime());
1672 }
1673 }
1674}
1675
1676/**
1677 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1678 * @param {Number} date The JavaScript date (ms since epoch)
1679 * @return {String} A date of the form "YYYY/MM/DD"
1680 * @private
1681 */
1682Dygraph.dateString_ = function(date, self) {
1683 var zeropad = Dygraph.zeropad;
1684 var d = new Date(date);
1685
1686 // Get the year:
1687 var year = "" + d.getFullYear();
1688 // Get a 0 padded month string
1689 var month = zeropad(d.getMonth() + 1); //months are 0-offset, sigh
1690 // Get a 0 padded day string
1691 var day = zeropad(d.getDate());
1692
1693 var ret = "";
1694 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
1695 if (frac) ret = " " + Dygraph.hmsString_(date);
1696
1697 return year + "/" + month + "/" + day + ret;
1698};
1699
1700/**
1701 * Round a number to the specified number of digits past the decimal point.
1702 * @param {Number} num The number to round
1703 * @param {Number} places The number of decimals to which to round
1704 * @return {Number} The rounded number
1705 * @private
1706 */
1707Dygraph.round_ = function(num, places) {
1708 var shift = Math.pow(10, places);
1709 return Math.round(num * shift)/shift;
1710};
1711
1712/**
1713 * Fires when there's data available to be graphed.
1714 * @param {String} data Raw CSV data to be plotted
1715 * @private
1716 */
1717Dygraph.prototype.loadedEvent_ = function(data) {
1718 this.rawData_ = this.parseCSV_(data);
1719 this.predraw_();
1720};
1721
1722Dygraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1723 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1724Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
1725
1726/**
1727 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1728 * @private
1729 */
1730Dygraph.prototype.addXTicks_ = function() {
1731 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1732 var startDate, endDate;
1733 if (this.dateWindow_) {
1734 startDate = this.dateWindow_[0];
1735 endDate = this.dateWindow_[1];
1736 } else {
1737 startDate = this.rawData_[0][0];
1738 endDate = this.rawData_[this.rawData_.length - 1][0];
1739 }
1740
1741 var xTicks = this.attr_('xTicker')(startDate, endDate, this);
1742 this.layout_.updateOptions({xTicks: xTicks});
1743};
1744
1745// Time granularity enumeration
1746Dygraph.SECONDLY = 0;
1747Dygraph.TWO_SECONDLY = 1;
1748Dygraph.FIVE_SECONDLY = 2;
1749Dygraph.TEN_SECONDLY = 3;
1750Dygraph.THIRTY_SECONDLY = 4;
1751Dygraph.MINUTELY = 5;
1752Dygraph.TWO_MINUTELY = 6;
1753Dygraph.FIVE_MINUTELY = 7;
1754Dygraph.TEN_MINUTELY = 8;
1755Dygraph.THIRTY_MINUTELY = 9;
1756Dygraph.HOURLY = 10;
1757Dygraph.TWO_HOURLY = 11;
1758Dygraph.SIX_HOURLY = 12;
1759Dygraph.DAILY = 13;
1760Dygraph.WEEKLY = 14;
1761Dygraph.MONTHLY = 15;
1762Dygraph.QUARTERLY = 16;
1763Dygraph.BIANNUAL = 17;
1764Dygraph.ANNUAL = 18;
1765Dygraph.DECADAL = 19;
1766Dygraph.CENTENNIAL = 20;
1767Dygraph.NUM_GRANULARITIES = 21;
1768
1769Dygraph.SHORT_SPACINGS = [];
1770Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
1771Dygraph.SHORT_SPACINGS[Dygraph.TWO_SECONDLY] = 1000 * 2;
1772Dygraph.SHORT_SPACINGS[Dygraph.FIVE_SECONDLY] = 1000 * 5;
1773Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10;
1774Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30;
1775Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60;
1776Dygraph.SHORT_SPACINGS[Dygraph.TWO_MINUTELY] = 1000 * 60 * 2;
1777Dygraph.SHORT_SPACINGS[Dygraph.FIVE_MINUTELY] = 1000 * 60 * 5;
1778Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10;
1779Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
1780Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600;
1781Dygraph.SHORT_SPACINGS[Dygraph.TWO_HOURLY] = 1000 * 3600 * 2;
1782Dygraph.SHORT_SPACINGS[Dygraph.SIX_HOURLY] = 1000 * 3600 * 6;
1783Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
1784Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
1785
1786// NumXTicks()
1787//
1788// If we used this time granularity, how many ticks would there be?
1789// This is only an approximation, but it's generally good enough.
1790//
1791Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
1792 if (granularity < Dygraph.MONTHLY) {
1793 // Generate one tick mark for every fixed interval of time.
1794 var spacing = Dygraph.SHORT_SPACINGS[granularity];
1795 return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing);
1796 } else {
1797 var year_mod = 1; // e.g. to only print one point every 10 years.
1798 var num_months = 12;
1799 if (granularity == Dygraph.QUARTERLY) num_months = 3;
1800 if (granularity == Dygraph.BIANNUAL) num_months = 2;
1801 if (granularity == Dygraph.ANNUAL) num_months = 1;
1802 if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
1803 if (granularity == Dygraph.CENTENNIAL) { num_months = 1; year_mod = 100; }
1804
1805 var msInYear = 365.2524 * 24 * 3600 * 1000;
1806 var num_years = 1.0 * (end_time - start_time) / msInYear;
1807 return Math.floor(0.5 + 1.0 * num_years * num_months / year_mod);
1808 }
1809};
1810
1811// GetXAxis()
1812//
1813// Construct an x-axis of nicely-formatted times on meaningful boundaries
1814// (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1815//
1816// Returns an array containing {v: millis, label: label} dictionaries.
1817//
1818Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
1819 var formatter = this.attr_("xAxisLabelFormatter");
1820 var ticks = [];
1821 if (granularity < Dygraph.MONTHLY) {
1822 // Generate one tick mark for every fixed interval of time.
1823 var spacing = Dygraph.SHORT_SPACINGS[granularity];
1824 var format = '%d%b'; // e.g. "1Jan"
1825
1826 // Find a time less than start_time which occurs on a "nice" time boundary
1827 // for this granularity.
1828 var g = spacing / 1000;
1829 var d = new Date(start_time);
1830 if (g <= 60) { // seconds
1831 var x = d.getSeconds(); d.setSeconds(x - x % g);
1832 } else {
1833 d.setSeconds(0);
1834 g /= 60;
1835 if (g <= 60) { // minutes
1836 var x = d.getMinutes(); d.setMinutes(x - x % g);
1837 } else {
1838 d.setMinutes(0);
1839 g /= 60;
1840
1841 if (g <= 24) { // days
1842 var x = d.getHours(); d.setHours(x - x % g);
1843 } else {
1844 d.setHours(0);
1845 g /= 24;
1846
1847 if (g == 7) { // one week
1848 d.setDate(d.getDate() - d.getDay());
1849 }
1850 }
1851 }
1852 }
1853 start_time = d.getTime();
1854
1855 for (var t = start_time; t <= end_time; t += spacing) {
1856 ticks.push({ v:t, label: formatter(new Date(t), granularity) });
1857 }
1858 } else {
1859 // Display a tick mark on the first of a set of months of each year.
1860 // Years get a tick mark iff y % year_mod == 0. This is useful for
1861 // displaying a tick mark once every 10 years, say, on long time scales.
1862 var months;
1863 var year_mod = 1; // e.g. to only print one point every 10 years.
1864
1865 if (granularity == Dygraph.MONTHLY) {
1866 months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1867 } else if (granularity == Dygraph.QUARTERLY) {
1868 months = [ 0, 3, 6, 9 ];
1869 } else if (granularity == Dygraph.BIANNUAL) {
1870 months = [ 0, 6 ];
1871 } else if (granularity == Dygraph.ANNUAL) {
1872 months = [ 0 ];
1873 } else if (granularity == Dygraph.DECADAL) {
1874 months = [ 0 ];
1875 year_mod = 10;
1876 } else if (granularity == Dygraph.CENTENNIAL) {
1877 months = [ 0 ];
1878 year_mod = 100;
1879 } else {
1880 this.warn("Span of dates is too long");
1881 }
1882
1883 var start_year = new Date(start_time).getFullYear();
1884 var end_year = new Date(end_time).getFullYear();
1885 var zeropad = Dygraph.zeropad;
1886 for (var i = start_year; i <= end_year; i++) {
1887 if (i % year_mod != 0) continue;
1888 for (var j = 0; j < months.length; j++) {
1889 var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
1890 var t = Date.parse(date_str);
1891 if (t < start_time || t > end_time) continue;
1892 ticks.push({ v:t, label: formatter(new Date(t), granularity) });
1893 }
1894 }
1895 }
1896
1897 return ticks;
1898};
1899
1900
1901/**
1902 * Add ticks to the x-axis based on a date range.
1903 * @param {Number} startDate Start of the date window (millis since epoch)
1904 * @param {Number} endDate End of the date window (millis since epoch)
1905 * @return {Array.<Object>} Array of {label, value} tuples.
1906 * @public
1907 */
1908Dygraph.dateTicker = function(startDate, endDate, self) {
1909 var chosen = -1;
1910 for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) {
1911 var num_ticks = self.NumXTicks(startDate, endDate, i);
1912 if (self.width_ / num_ticks >= self.attr_('pixelsPerXLabel')) {
1913 chosen = i;
1914 break;
1915 }
1916 }
1917
1918 if (chosen >= 0) {
1919 return self.GetXAxis(startDate, endDate, chosen);
1920 } else {
1921 // TODO(danvk): signal error.
1922 }
1923};
1924
1925// This is a list of human-friendly values at which to show tick marks on a log
1926// scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
1927// ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
1928// NOTE: this assumes that Dygraph.LOG_SCALE = 10.
1929Dygraph.PREFERRED_LOG_TICK_VALUES = function() {
1930 var vals = [];
1931 for (var power = -39; power <= 39; power++) {
1932 var range = Math.pow(10, power);
1933 for (var mult = 1; mult <= 9; mult++) {
1934 var val = range * mult;
1935 vals.push(val);
1936 }
1937 }
1938 return vals;
1939}();
1940
1941// val is the value to search for
1942// arry is the value over which to search
1943// if abs > 0, find the lowest entry greater than val
1944// if abs < 0, find the highest entry less than val
1945// if abs == 0, find the entry that equals val.
1946// Currently does not work when val is outside the range of arry's values.
1947Dygraph.binarySearch = function(val, arry, abs, low, high) {
1948 if (low == null || high == null) {
1949 low = 0;
1950 high = arry.length - 1;
1951 }
1952 if (low > high) {
1953 return -1;
1954 }
1955 if (abs == null) {
1956 abs = 0;
1957 }
1958 var validIndex = function(idx) {
1959 return idx >= 0 && idx < arry.length;
1960 }
1961 var mid = parseInt((low + high) / 2);
1962 var element = arry[mid];
1963 if (element == val) {
1964 return mid;
1965 }
1966 if (element > val) {
1967 if (abs > 0) {
1968 // Accept if element > val, but also if prior element < val.
1969 var idx = mid - 1;
1970 if (validIndex(idx) && arry[idx] < val) {
1971 return mid;
1972 }
1973 }
1974 return Dygraph.binarySearch(val, arry, abs, low, mid - 1);
1975 }
1976 if (element < val) {
1977 if (abs < 0) {
1978 // Accept if element < val, but also if prior element > val.
1979 var idx = mid + 1;
1980 if (validIndex(idx) && arry[idx] > val) {
1981 return mid;
1982 }
1983 }
1984 return Dygraph.binarySearch(val, arry, abs, mid + 1, high);
1985 }
1986}
1987
1988/**
1989 * Add ticks when the x axis has numbers on it (instead of dates)
1990 * TODO(konigsberg): Update comment.
1991 *
1992 * @param {Number} minV minimum value
1993 * @param {Number} maxV maximum value
1994 * @param self
1995 * @param {function} attribute accessor function.
1996 * @return {Array.<Object>} Array of {label, value} tuples.
1997 * @public
1998 */
1999Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) {
2000 var attr = function(k) {
2001 if (axis_props && axis_props.hasOwnProperty(k)) return axis_props[k];
2002 return self.attr_(k);
2003 };
2004
2005 var ticks = [];
2006 if (vals) {
2007 for (var i = 0; i < vals.length; i++) {
2008 ticks.push({v: vals[i]});
2009 }
2010 } else {
2011 if (axis_props && attr("logscale")) {
2012 var pixelsPerTick = attr('pixelsPerYLabel');
2013 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2014 var nTicks = Math.floor(self.height_ / pixelsPerTick);
2015 var minIdx = Dygraph.binarySearch(minV, Dygraph.PREFERRED_LOG_TICK_VALUES, 1);
2016 var maxIdx = Dygraph.binarySearch(maxV, Dygraph.PREFERRED_LOG_TICK_VALUES, -1);
2017 if (minIdx == -1) {
2018 minIdx = 0;
2019 }
2020 if (maxIdx == -1) {
2021 maxIdx = Dygraph.PREFERRED_LOG_TICK_VALUES.length - 1;
2022 }
2023 // Count the number of tick values would appear, if we can get at least
2024 // nTicks / 4 accept them.
2025 var lastDisplayed = null;
2026 if (maxIdx - minIdx >= nTicks / 4) {
2027 var axisId = axis_props.yAxisId;
2028 for (var idx = maxIdx; idx >= minIdx; idx--) {
2029 var tickValue = Dygraph.PREFERRED_LOG_TICK_VALUES[idx];
2030 var domCoord = axis_props.g.toDomYCoord(tickValue, axisId);
2031 var tick = { v: tickValue };
2032 if (lastDisplayed == null) {
2033 lastDisplayed = {
2034 tickValue : tickValue,
2035 domCoord : domCoord
2036 };
2037 } else {
2038 if (domCoord - lastDisplayed.domCoord >= pixelsPerTick) {
2039 lastDisplayed = {
2040 tickValue : tickValue,
2041 domCoord : domCoord
2042 };
2043 } else {
2044 tick.label = "";
2045 }
2046 }
2047 ticks.push(tick);
2048 }
2049 // Since we went in backwards order.
2050 ticks.reverse();
2051 }
2052 }
2053
2054 // ticks.length won't be 0 if the log scale function finds values to insert.
2055 if (ticks.length == 0) {
2056 // Basic idea:
2057 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2058 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
2059 // The first spacing greater than pixelsPerYLabel is what we use.
2060 // TODO(danvk): version that works on a log scale.
2061 if (attr("labelsKMG2")) {
2062 var mults = [1, 2, 4, 8];
2063 } else {
2064 var mults = [1, 2, 5];
2065 }
2066 var scale, low_val, high_val, nTicks;
2067 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2068 var pixelsPerTick = attr('pixelsPerYLabel');
2069 for (var i = -10; i < 50; i++) {
2070 if (attr("labelsKMG2")) {
2071 var base_scale = Math.pow(16, i);
2072 } else {
2073 var base_scale = Math.pow(10, i);
2074 }
2075 for (var j = 0; j < mults.length; j++) {
2076 scale = base_scale * mults[j];
2077 low_val = Math.floor(minV / scale) * scale;
2078 high_val = Math.ceil(maxV / scale) * scale;
2079 nTicks = Math.abs(high_val - low_val) / scale;
2080 var spacing = self.height_ / nTicks;
2081 // wish I could break out of both loops at once...
2082 if (spacing > pixelsPerTick) break;
2083 }
2084 if (spacing > pixelsPerTick) break;
2085 }
2086
2087 // Construct the set of ticks.
2088 // Allow reverse y-axis if it's explicitly requested.
2089 if (low_val > high_val) scale *= -1;
2090 for (var i = 0; i < nTicks; i++) {
2091 var tickV = low_val + i * scale;
2092 ticks.push( {v: tickV} );
2093 }
2094 }
2095 }
2096
2097 // Add formatted labels to the ticks.
2098 var k;
2099 var k_labels = [];
2100 if (attr("labelsKMB")) {
2101 k = 1000;
2102 k_labels = [ "K", "M", "B", "T" ];
2103 }
2104 if (attr("labelsKMG2")) {
2105 if (k) self.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2106 k = 1024;
2107 k_labels = [ "k", "M", "G", "T" ];
2108 }
2109 var formatter = attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
2110
2111 // Add labels to the ticks.
2112 for (var i = 0; i < ticks.length; i++) {
2113 if (ticks[i].label == null) {
2114 var tickV = ticks[i].v;
2115 var absTickV = Math.abs(tickV);
2116 var label;
2117 if (formatter != undefined) {
2118 label = formatter(tickV);
2119 } else {
2120 label = Dygraph.round_(tickV, 2);
2121 }
2122 if (k_labels.length) {
2123 // Round up to an appropriate unit.
2124 var n = k*k*k*k;
2125 for (var j = 3; j >= 0; j--, n /= k) {
2126 if (absTickV >= n) {
2127 label = Dygraph.round_(tickV / n, 1) + k_labels[j];
2128 break;
2129 }
2130 }
2131 }
2132 ticks[i].label = label;
2133 }
2134 }
2135 return ticks;
2136};
2137
2138// Computes the range of the data series (including confidence intervals).
2139// series is either [ [x1, y1], [x2, y2], ... ] or
2140// [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2141// Returns [low, high]
2142Dygraph.prototype.extremeValues_ = function(series) {
2143 var minY = null, maxY = null;
2144
2145 var bars = this.attr_("errorBars") || this.attr_("customBars");
2146 if (bars) {
2147 // With custom bars, maxY is the max of the high values.
2148 for (var j = 0; j < series.length; j++) {
2149 var y = series[j][1][0];
2150 if (!y) continue;
2151 var low = y - series[j][1][1];
2152 var high = y + series[j][1][2];
2153 if (low > y) low = y; // this can happen with custom bars,
2154 if (high < y) high = y; // e.g. in tests/custom-bars.html
2155 if (maxY == null || high > maxY) {
2156 maxY = high;
2157 }
2158 if (minY == null || low < minY) {
2159 minY = low;
2160 }
2161 }
2162 } else {
2163 for (var j = 0; j < series.length; j++) {
2164 var y = series[j][1];
2165 if (y === null || isNaN(y)) continue;
2166 if (maxY == null || y > maxY) {
2167 maxY = y;
2168 }
2169 if (minY == null || y < minY) {
2170 minY = y;
2171 }
2172 }
2173 }
2174
2175 return [minY, maxY];
2176};
2177
2178/**
2179 * This function is called once when the chart's data is changed or the options
2180 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2181 * idea is that values derived from the chart's data can be computed here,
2182 * rather than every time the chart is drawn. This includes things like the
2183 * number of axes, rolling averages, etc.
2184 */
2185Dygraph.prototype.predraw_ = function() {
2186 // TODO(danvk): movabilitye more computations out of drawGraph_ and into here.
2187 this.computeYAxes_();
2188
2189 // Create a new plotter.
2190 if (this.plotter_) this.plotter_.clear();
2191 this.plotter_ = new DygraphCanvasRenderer(this,
2192 this.hidden_, this.layout_,
2193 this.renderOptions_);
2194
2195 // The roller sits in the bottom left corner of the chart. We don't know where
2196 // this will be until the options are available, so it's positioned here.
2197 this.createRollInterface_();
2198
2199 // Same thing applies for the labelsDiv. It's right edge should be flush with
2200 // the right edge of the charting area (which may not be the same as the right
2201 // edge of the div, if we have two y-axes.
2202 this.positionLabelsDiv_();
2203
2204 // If the data or options have changed, then we'd better redraw.
2205 this.drawGraph_();
2206};
2207
2208/**
2209 * Update the graph with new data. This method is called when the viewing area
2210 * has changed. If the underlying data or options have changed, predraw_ will
2211 * be called before drawGraph_ is called.
2212 * @private
2213 */
2214Dygraph.prototype.drawGraph_ = function() {
2215 var data = this.rawData_;
2216
2217 // This is used to set the second parameter to drawCallback, below.
2218 var is_initial_draw = this.is_initial_draw_;
2219 this.is_initial_draw_ = false;
2220
2221 var minY = null, maxY = null;
2222 this.layout_.removeAllDatasets();
2223 this.setColors_();
2224 this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2225
2226 // Loop over the fields (series). Go from the last to the first,
2227 // because if they're stacked that's how we accumulate the values.
2228
2229 var cumulative_y = []; // For stacked series.
2230 var datasets = [];
2231
2232 var extremes = {}; // series name -> [low, high]
2233
2234 // Loop over all fields and create datasets
2235 for (var i = data[0].length - 1; i >= 1; i--) {
2236 if (!this.visibility()[i - 1]) continue;
2237
2238 var seriesName = this.attr_("labels")[i];
2239 var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
2240 var logScale = this.attr_('logscale', i);
2241
2242 var series = [];
2243 for (var j = 0; j < data.length; j++) {
2244 var date = data[j][0];
2245 var point = data[j][i];
2246 if (logScale) {
2247 // On the log scale, points less than zero do not exist.
2248 // This will create a gap in the chart. Note that this ignores
2249 // connectSeparatedPoints.
2250 if (point < 0) {
2251 point = null;
2252 }
2253 series.push([date, point]);
2254 } else {
2255 if (point != null || !connectSeparatedPoints) {
2256 series.push([date, point]);
2257 }
2258 }
2259 }
2260
2261 // TODO(danvk): move this into predraw_. It's insane to do it here.
2262 series = this.rollingAverage(series, this.rollPeriod_);
2263
2264 // Prune down to the desired range, if necessary (for zooming)
2265 // Because there can be lines going to points outside of the visible area,
2266 // we actually prune to visible points, plus one on either side.
2267 var bars = this.attr_("errorBars") || this.attr_("customBars");
2268 if (this.dateWindow_) {
2269 var low = this.dateWindow_[0];
2270 var high= this.dateWindow_[1];
2271 var pruned = [];
2272 // TODO(danvk): do binary search instead of linear search.
2273 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2274 var firstIdx = null, lastIdx = null;
2275 for (var k = 0; k < series.length; k++) {
2276 if (series[k][0] >= low && firstIdx === null) {
2277 firstIdx = k;
2278 }
2279 if (series[k][0] <= high) {
2280 lastIdx = k;
2281 }
2282 }
2283 if (firstIdx === null) firstIdx = 0;
2284 if (firstIdx > 0) firstIdx--;
2285 if (lastIdx === null) lastIdx = series.length - 1;
2286 if (lastIdx < series.length - 1) lastIdx++;
2287 this.boundaryIds_[i-1] = [firstIdx, lastIdx];
2288 for (var k = firstIdx; k <= lastIdx; k++) {
2289 pruned.push(series[k]);
2290 }
2291 series = pruned;
2292 } else {
2293 this.boundaryIds_[i-1] = [0, series.length-1];
2294 }
2295
2296 var seriesExtremes = this.extremeValues_(series);
2297
2298 if (bars) {
2299 for (var j=0; j<series.length; j++) {
2300 val = [series[j][0], series[j][1][0], series[j][1][1], series[j][1][2]];
2301 series[j] = val;
2302 }
2303 } else if (this.attr_("stackedGraph")) {
2304 var l = series.length;
2305 var actual_y;
2306 for (var j = 0; j < l; j++) {
2307 // If one data set has a NaN, let all subsequent stacked
2308 // sets inherit the NaN -- only start at 0 for the first set.
2309 var x = series[j][0];
2310 if (cumulative_y[x] === undefined) {
2311 cumulative_y[x] = 0;
2312 }
2313
2314 actual_y = series[j][1];
2315 cumulative_y[x] += actual_y;
2316
2317 series[j] = [x, cumulative_y[x]]
2318
2319 if (cumulative_y[x] > seriesExtremes[1]) {
2320 seriesExtremes[1] = cumulative_y[x];
2321 }
2322 if (cumulative_y[x] < seriesExtremes[0]) {
2323 seriesExtremes[0] = cumulative_y[x];
2324 }
2325 }
2326 }
2327 extremes[seriesName] = seriesExtremes;
2328
2329 datasets[i] = series;
2330 }
2331
2332 for (var i = 1; i < datasets.length; i++) {
2333 if (!this.visibility()[i - 1]) continue;
2334 this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
2335 }
2336
2337 // TODO(danvk): this method doesn't need to return anything.
2338 var out = this.computeYAxisRanges_(extremes);
2339 var axes = out[0];
2340 var seriesToAxisMap = out[1];
2341 this.layout_.updateOptions( { yAxes: axes,
2342 seriesToAxisMap: seriesToAxisMap
2343 } );
2344
2345 this.addXTicks_();
2346
2347 // Tell PlotKit to use this new data and render itself
2348 this.layout_.updateOptions({dateWindow: this.dateWindow_});
2349 this.layout_.evaluateWithError();
2350 this.plotter_.clear();
2351 this.plotter_.render();
2352 this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
2353 this.canvas_.height);
2354
2355 if (this.attr_("drawCallback") !== null) {
2356 this.attr_("drawCallback")(this, is_initial_draw);
2357 }
2358};
2359
2360/**
2361 * Determine properties of the y-axes which are independent of the data
2362 * currently being displayed. This includes things like the number of axes and
2363 * the style of the axes. It does not include the range of each axis and its
2364 * tick marks.
2365 * This fills in this.axes_ and this.seriesToAxisMap_.
2366 * axes_ = [ { options } ]
2367 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2368 * indices are into the axes_ array.
2369 */
2370Dygraph.prototype.computeYAxes_ = function() {
2371 this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis.
2372 this.seriesToAxisMap_ = {};
2373
2374 // Get a list of series names.
2375 var labels = this.attr_("labels");
2376 var series = {};
2377 for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
2378
2379 // all options which could be applied per-axis:
2380 var axisOptions = [
2381 'includeZero',
2382 'valueRange',
2383 'labelsKMB',
2384 'labelsKMG2',
2385 'pixelsPerYLabel',
2386 'yAxisLabelWidth',
2387 'axisLabelFontSize',
2388 'axisTickSize',
2389 'logscale'
2390 ];
2391
2392 // Copy global axis options over to the first axis.
2393 for (var i = 0; i < axisOptions.length; i++) {
2394 var k = axisOptions[i];
2395 var v = this.attr_(k);
2396 if (v) this.axes_[0][k] = v;
2397 }
2398
2399 // Go through once and add all the axes.
2400 for (var seriesName in series) {
2401 if (!series.hasOwnProperty(seriesName)) continue;
2402 var axis = this.attr_("axis", seriesName);
2403 if (axis == null) {
2404 this.seriesToAxisMap_[seriesName] = 0;
2405 continue;
2406 }
2407 if (typeof(axis) == 'object') {
2408 // Add a new axis, making a copy of its per-axis options.
2409 var opts = {};
2410 Dygraph.update(opts, this.axes_[0]);
2411 Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this.
2412 var yAxisId = this.axes_.length;
2413 opts.yAxisId = yAxisId;
2414 opts.g = this;
2415 Dygraph.update(opts, axis);
2416 this.axes_.push(opts);
2417 this.seriesToAxisMap_[seriesName] = yAxisId;
2418 }
2419 }
2420
2421 // Go through one more time and assign series to an axis defined by another
2422 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2423 for (var seriesName in series) {
2424 if (!series.hasOwnProperty(seriesName)) continue;
2425 var axis = this.attr_("axis", seriesName);
2426 if (typeof(axis) == 'string') {
2427 if (!this.seriesToAxisMap_.hasOwnProperty(axis)) {
2428 this.error("Series " + seriesName + " wants to share a y-axis with " +
2429 "series " + axis + ", which does not define its own axis.");
2430 return null;
2431 }
2432 var idx = this.seriesToAxisMap_[axis];
2433 this.seriesToAxisMap_[seriesName] = idx;
2434 }
2435 }
2436
2437 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2438 // this last so that hiding the first series doesn't destroy the axis
2439 // properties of the primary axis.
2440 var seriesToAxisFiltered = {};
2441 var vis = this.visibility();
2442 for (var i = 1; i < labels.length; i++) {
2443 var s = labels[i];
2444 if (vis[i - 1]) seriesToAxisFiltered[s] = this.seriesToAxisMap_[s];
2445 }
2446 this.seriesToAxisMap_ = seriesToAxisFiltered;
2447};
2448
2449/**
2450 * Returns the number of y-axes on the chart.
2451 * @return {Number} the number of axes.
2452 */
2453Dygraph.prototype.numAxes = function() {
2454 var last_axis = 0;
2455 for (var series in this.seriesToAxisMap_) {
2456 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2457 var idx = this.seriesToAxisMap_[series];
2458 if (idx > last_axis) last_axis = idx;
2459 }
2460 return 1 + last_axis;
2461};
2462
2463/**
2464 * Determine the value range and tick marks for each axis.
2465 * @param {Object} extremes A mapping from seriesName -> [low, high]
2466 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2467 */
2468Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
2469 // Build a map from axis number -> [list of series names]
2470 var seriesForAxis = [];
2471 for (var series in this.seriesToAxisMap_) {
2472 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2473 var idx = this.seriesToAxisMap_[series];
2474 while (seriesForAxis.length <= idx) seriesForAxis.push([]);
2475 seriesForAxis[idx].push(series);
2476 }
2477
2478 // Compute extreme values, a span and tick marks for each axis.
2479 for (var i = 0; i < this.axes_.length; i++) {
2480 var axis = this.axes_[i];
2481 if (axis.valueWindow) {
2482 // This is only set if the user has zoomed on the y-axis. It is never set
2483 // by a user. It takes precedence over axis.valueRange because, if you set
2484 // valueRange, you'd still expect to be able to pan.
2485 axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
2486 } else if (axis.valueRange) {
2487 // This is a user-set value range for this axis.
2488 axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]];
2489 } else {
2490 // Calculate the extremes of extremes.
2491 var series = seriesForAxis[i];
2492 var minY = Infinity; // extremes[series[0]][0];
2493 var maxY = -Infinity; // extremes[series[0]][1];
2494 for (var j = 0; j < series.length; j++) {
2495 minY = Math.min(extremes[series[j]][0], minY);
2496 maxY = Math.max(extremes[series[j]][1], maxY);
2497 }
2498 if (axis.includeZero && minY > 0) minY = 0;
2499
2500 // Add some padding and round up to an integer to be human-friendly.
2501 var span = maxY - minY;
2502 // special case: if we have no sense of scale, use +/-10% of the sole value.
2503 if (span == 0) { span = maxY; }
2504
2505 var maxAxisY;
2506 var minAxisY;
2507 if (axis.logscale) {
2508 var maxAxisY = maxY + 0.1 * span;
2509 var minAxisY = minY;
2510 } else {
2511 var maxAxisY = maxY + 0.1 * span;
2512 var minAxisY = minY - 0.1 * span;
2513
2514 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2515 if (!this.attr_("avoidMinZero")) {
2516 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
2517 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
2518 }
2519
2520 if (this.attr_("includeZero")) {
2521 if (maxY < 0) maxAxisY = 0;
2522 if (minY > 0) minAxisY = 0;
2523 }
2524 }
2525
2526 axis.computedValueRange = [minAxisY, maxAxisY];
2527 }
2528
2529 // Add ticks. By default, all axes inherit the tick positions of the
2530 // primary axis. However, if an axis is specifically marked as having
2531 // independent ticks, then that is permissible as well.
2532 if (i == 0 || axis.independentTicks) {
2533 axis.ticks =
2534 Dygraph.numericTicks(axis.computedValueRange[0],
2535 axis.computedValueRange[1],
2536 this,
2537 axis);
2538 } else {
2539 var p_axis = this.axes_[0];
2540 var p_ticks = p_axis.ticks;
2541 var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
2542 var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
2543 var tick_values = [];
2544 for (var i = 0; i < p_ticks.length; i++) {
2545 var y_frac = (p_ticks[i].v - p_axis.computedValueRange[0]) / p_scale;
2546 var y_val = axis.computedValueRange[0] + y_frac * scale;
2547 tick_values.push(y_val);
2548 }
2549
2550 axis.ticks =
2551 Dygraph.numericTicks(axis.computedValueRange[0],
2552 axis.computedValueRange[1],
2553 this, axis, tick_values);
2554 }
2555 }
2556
2557 return [this.axes_, this.seriesToAxisMap_];
2558};
2559
2560/**
2561 * Calculates the rolling average of a data set.
2562 * If originalData is [label, val], rolls the average of those.
2563 * If originalData is [label, [, it's interpreted as [value, stddev]
2564 * and the roll is returned in the same form, with appropriately reduced
2565 * stddev for each value.
2566 * Note that this is where fractional input (i.e. '5/10') is converted into
2567 * decimal values.
2568 * @param {Array} originalData The data in the appropriate format (see above)
2569 * @param {Number} rollPeriod The number of days over which to average the data
2570 */
2571Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
2572 if (originalData.length < 2)
2573 return originalData;
2574 var rollPeriod = Math.min(rollPeriod, originalData.length - 1);
2575 var rollingData = [];
2576 var sigma = this.attr_("sigma");
2577
2578 if (this.fractions_) {
2579 var num = 0;
2580 var den = 0; // numerator/denominator
2581 var mult = 100.0;
2582 for (var i = 0; i < originalData.length; i++) {
2583 num += originalData[i][1][0];
2584 den += originalData[i][1][1];
2585 if (i - rollPeriod >= 0) {
2586 num -= originalData[i - rollPeriod][1][0];
2587 den -= originalData[i - rollPeriod][1][1];
2588 }
2589
2590 var date = originalData[i][0];
2591 var value = den ? num / den : 0.0;
2592 if (this.attr_("errorBars")) {
2593 if (this.wilsonInterval_) {
2594 // For more details on this confidence interval, see:
2595 // http://en.wikipedia.org/wiki/Binomial_confidence_interval
2596 if (den) {
2597 var p = value < 0 ? 0 : value, n = den;
2598 var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
2599 var denom = 1 + sigma * sigma / den;
2600 var low = (p + sigma * sigma / (2 * den) - pm) / denom;
2601 var high = (p + sigma * sigma / (2 * den) + pm) / denom;
2602 rollingData[i] = [date,
2603 [p * mult, (p - low) * mult, (high - p) * mult]];
2604 } else {
2605 rollingData[i] = [date, [0, 0, 0]];
2606 }
2607 } else {
2608 var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
2609 rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
2610 }
2611 } else {
2612 rollingData[i] = [date, mult * value];
2613 }
2614 }
2615 } else if (this.attr_("customBars")) {
2616 var low = 0;
2617 var mid = 0;
2618 var high = 0;
2619 var count = 0;
2620 for (var i = 0; i < originalData.length; i++) {
2621 var data = originalData[i][1];
2622 var y = data[1];
2623 rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
2624
2625 if (y != null && !isNaN(y)) {
2626 low += data[0];
2627 mid += y;
2628 high += data[2];
2629 count += 1;
2630 }
2631 if (i - rollPeriod >= 0) {
2632 var prev = originalData[i - rollPeriod];
2633 if (prev[1][1] != null && !isNaN(prev[1][1])) {
2634 low -= prev[1][0];
2635 mid -= prev[1][1];
2636 high -= prev[1][2];
2637 count -= 1;
2638 }
2639 }
2640 rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
2641 1.0 * (mid - low) / count,
2642 1.0 * (high - mid) / count ]];
2643 }
2644 } else {
2645 // Calculate the rolling average for the first rollPeriod - 1 points where
2646 // there is not enough data to roll over the full number of days
2647 var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
2648 if (!this.attr_("errorBars")){
2649 if (rollPeriod == 1) {
2650 return originalData;
2651 }
2652
2653 for (var i = 0; i < originalData.length; i++) {
2654 var sum = 0;
2655 var num_ok = 0;
2656 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
2657 var y = originalData[j][1];
2658 if (y == null || isNaN(y)) continue;
2659 num_ok++;
2660 sum += originalData[j][1];
2661 }
2662 if (num_ok) {
2663 rollingData[i] = [originalData[i][0], sum / num_ok];
2664 } else {
2665 rollingData[i] = [originalData[i][0], null];
2666 }
2667 }
2668
2669 } else {
2670 for (var i = 0; i < originalData.length; i++) {
2671 var sum = 0;
2672 var variance = 0;
2673 var num_ok = 0;
2674 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
2675 var y = originalData[j][1][0];
2676 if (y == null || isNaN(y)) continue;
2677 num_ok++;
2678 sum += originalData[j][1][0];
2679 variance += Math.pow(originalData[j][1][1], 2);
2680 }
2681 if (num_ok) {
2682 var stddev = Math.sqrt(variance) / num_ok;
2683 rollingData[i] = [originalData[i][0],
2684 [sum / num_ok, sigma * stddev, sigma * stddev]];
2685 } else {
2686 rollingData[i] = [originalData[i][0], [null, null, null]];
2687 }
2688 }
2689 }
2690 }
2691
2692 return rollingData;
2693};
2694
2695/**
2696 * Parses a date, returning the number of milliseconds since epoch. This can be
2697 * passed in as an xValueParser in the Dygraph constructor.
2698 * TODO(danvk): enumerate formats that this understands.
2699 * @param {String} A date in YYYYMMDD format.
2700 * @return {Number} Milliseconds since epoch.
2701 * @public
2702 */
2703Dygraph.dateParser = function(dateStr, self) {
2704 var dateStrSlashed;
2705 var d;
2706 if (dateStr.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2707 dateStrSlashed = dateStr.replace("-", "/", "g");
2708 while (dateStrSlashed.search("-") != -1) {
2709 dateStrSlashed = dateStrSlashed.replace("-", "/");
2710 }
2711 d = Date.parse(dateStrSlashed);
2712 } else if (dateStr.length == 8) { // e.g. '20090712'
2713 // TODO(danvk): remove support for this format. It's confusing.
2714 dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
2715 + "/" + dateStr.substr(6,2);
2716 d = Date.parse(dateStrSlashed);
2717 } else {
2718 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2719 // "2009/07/12 12:34:56"
2720 d = Date.parse(dateStr);
2721 }
2722
2723 if (!d || isNaN(d)) {
2724 self.error("Couldn't parse " + dateStr + " as a date");
2725 }
2726 return d;
2727};
2728
2729/**
2730 * Detects the type of the str (date or numeric) and sets the various
2731 * formatting attributes in this.attrs_ based on this type.
2732 * @param {String} str An x value.
2733 * @private
2734 */
2735Dygraph.prototype.detectTypeFromString_ = function(str) {
2736 var isDate = false;
2737 if (str.indexOf('-') >= 0 ||
2738 str.indexOf('/') >= 0 ||
2739 isNaN(parseFloat(str))) {
2740 isDate = true;
2741 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
2742 // TODO(danvk): remove support for this format.
2743 isDate = true;
2744 }
2745
2746 if (isDate) {
2747 this.attrs_.xValueFormatter = Dygraph.dateString_;
2748 this.attrs_.xValueParser = Dygraph.dateParser;
2749 this.attrs_.xTicker = Dygraph.dateTicker;
2750 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2751 } else {
2752 this.attrs_.xValueFormatter = function(x) { return x; };
2753 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
2754 this.attrs_.xTicker = Dygraph.numericTicks;
2755 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
2756 }
2757};
2758
2759/**
2760 * Parses a string in a special csv format. We expect a csv file where each
2761 * line is a date point, and the first field in each line is the date string.
2762 * We also expect that all remaining fields represent series.
2763 * if the errorBars attribute is set, then interpret the fields as:
2764 * date, series1, stddev1, series2, stddev2, ...
2765 * @param {Array.<Object>} data See above.
2766 * @private
2767 *
2768 * @return Array.<Object> An array with one entry for each row. These entries
2769 * are an array of cells in that row. The first entry is the parsed x-value for
2770 * the row. The second, third, etc. are the y-values. These can take on one of
2771 * three forms, depending on the CSV and constructor parameters:
2772 * 1. numeric value
2773 * 2. [ value, stddev ]
2774 * 3. [ low value, center value, high value ]
2775 */
2776Dygraph.prototype.parseCSV_ = function(data) {
2777 var ret = [];
2778 var lines = data.split("\n");
2779
2780 // Use the default delimiter or fall back to a tab if that makes sense.
2781 var delim = this.attr_('delimiter');
2782 if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
2783 delim = '\t';
2784 }
2785
2786 var start = 0;
2787 if (this.labelsFromCSV_) {
2788 start = 1;
2789 this.attrs_.labels = lines[0].split(delim);
2790 }
2791
2792 // Parse the x as a float or return null if it's not a number.
2793 var parseFloatOrNull = function(x) {
2794 var val = parseFloat(x);
2795 // isFinite() returns false for NaN and +/-Infinity.
2796 return isFinite(val) ? val : null;
2797 };
2798
2799 var xParser;
2800 var defaultParserSet = false; // attempt to auto-detect x value type
2801 var expectedCols = this.attr_("labels").length;
2802 var outOfOrder = false;
2803 for (var i = start; i < lines.length; i++) {
2804 var line = lines[i];
2805 if (line.length == 0) continue; // skip blank lines
2806 if (line[0] == '#') continue; // skip comment lines
2807 var inFields = line.split(delim);
2808 if (inFields.length < 2) continue;
2809
2810 var fields = [];
2811 if (!defaultParserSet) {
2812 this.detectTypeFromString_(inFields[0]);
2813 xParser = this.attr_("xValueParser");
2814 defaultParserSet = true;
2815 }
2816 fields[0] = xParser(inFields[0], this);
2817
2818 // If fractions are expected, parse the numbers as "A/B"
2819 if (this.fractions_) {
2820 for (var j = 1; j < inFields.length; j++) {
2821 // TODO(danvk): figure out an appropriate way to flag parse errors.
2822 var vals = inFields[j].split("/");
2823 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2824 }
2825 } else if (this.attr_("errorBars")) {
2826 // If there are error bars, values are (value, stddev) pairs
2827 for (var j = 1; j < inFields.length; j += 2)
2828 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2829 parseFloatOrNull(inFields[j + 1])];
2830 } else if (this.attr_("customBars")) {
2831 // Bars are a low;center;high tuple
2832 for (var j = 1; j < inFields.length; j++) {
2833 var vals = inFields[j].split(";");
2834 fields[j] = [ parseFloatOrNull(vals[0]),
2835 parseFloatOrNull(vals[1]),
2836 parseFloatOrNull(vals[2]) ];
2837 }
2838 } else {
2839 // Values are just numbers
2840 for (var j = 1; j < inFields.length; j++) {
2841 fields[j] = parseFloatOrNull(inFields[j]);
2842 }
2843 }
2844 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2845 outOfOrder = true;
2846 }
2847 ret.push(fields);
2848
2849 if (fields.length != expectedCols) {
2850 this.error("Number of columns in line " + i + " (" + fields.length +
2851 ") does not agree with number of labels (" + expectedCols +
2852 ") " + line);
2853 }
2854 }
2855
2856 if (outOfOrder) {
2857 this.warn("CSV is out of order; order it correctly to speed loading.");
2858 ret.sort(function(a,b) { return a[0] - b[0] });
2859 }
2860
2861 return ret;
2862};
2863
2864/**
2865 * The user has provided their data as a pre-packaged JS array. If the x values
2866 * are numeric, this is the same as dygraphs' internal format. If the x values
2867 * are dates, we need to convert them from Date objects to ms since epoch.
2868 * @param {Array.<Object>} data
2869 * @return {Array.<Object>} data with numeric x values.
2870 */
2871Dygraph.prototype.parseArray_ = function(data) {
2872 // Peek at the first x value to see if it's numeric.
2873 if (data.length == 0) {
2874 this.error("Can't plot empty data set");
2875 return null;
2876 }
2877 if (data[0].length == 0) {
2878 this.error("Data set cannot contain an empty row");
2879 return null;
2880 }
2881
2882 if (this.attr_("labels") == null) {
2883 this.warn("Using default labels. Set labels explicitly via 'labels' " +
2884 "in the options parameter");
2885 this.attrs_.labels = [ "X" ];
2886 for (var i = 1; i < data[0].length; i++) {
2887 this.attrs_.labels.push("Y" + i);
2888 }
2889 }
2890
2891 if (Dygraph.isDateLike(data[0][0])) {
2892 // Some intelligent defaults for a date x-axis.
2893 this.attrs_.xValueFormatter = Dygraph.dateString_;
2894 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2895 this.attrs_.xTicker = Dygraph.dateTicker;
2896
2897 // Assume they're all dates.
2898 var parsedData = Dygraph.clone(data);
2899 for (var i = 0; i < data.length; i++) {
2900 if (parsedData[i].length == 0) {
2901 this.error("Row " + (1 + i) + " of data is empty");
2902 return null;
2903 }
2904 if (parsedData[i][0] == null
2905 || typeof(parsedData[i][0].getTime) != 'function'
2906 || isNaN(parsedData[i][0].getTime())) {
2907 this.error("x value in row " + (1 + i) + " is not a Date");
2908 return null;
2909 }
2910 parsedData[i][0] = parsedData[i][0].getTime();
2911 }
2912 return parsedData;
2913 } else {
2914 // Some intelligent defaults for a numeric x-axis.
2915 this.attrs_.xValueFormatter = function(x) { return x; };
2916 this.attrs_.xTicker = Dygraph.numericTicks;
2917 return data;
2918 }
2919};
2920
2921/**
2922 * Parses a DataTable object from gviz.
2923 * The data is expected to have a first column that is either a date or a
2924 * number. All subsequent columns must be numbers. If there is a clear mismatch
2925 * between this.xValueParser_ and the type of the first column, it will be
2926 * fixed. Fills out rawData_.
2927 * @param {Array.<Object>} data See above.
2928 * @private
2929 */
2930Dygraph.prototype.parseDataTable_ = function(data) {
2931 var cols = data.getNumberOfColumns();
2932 var rows = data.getNumberOfRows();
2933
2934 var indepType = data.getColumnType(0);
2935 if (indepType == 'date' || indepType == 'datetime') {
2936 this.attrs_.xValueFormatter = Dygraph.dateString_;
2937 this.attrs_.xValueParser = Dygraph.dateParser;
2938 this.attrs_.xTicker = Dygraph.dateTicker;
2939 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2940 } else if (indepType == 'number') {
2941 this.attrs_.xValueFormatter = function(x) { return x; };
2942 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
2943 this.attrs_.xTicker = Dygraph.numericTicks;
2944 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
2945 } else {
2946 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2947 "column 1 of DataTable input (Got '" + indepType + "')");
2948 return null;
2949 }
2950
2951 // Array of the column indices which contain data (and not annotations).
2952 var colIdx = [];
2953 var annotationCols = {}; // data index -> [annotation cols]
2954 var hasAnnotations = false;
2955 for (var i = 1; i < cols; i++) {
2956 var type = data.getColumnType(i);
2957 if (type == 'number') {
2958 colIdx.push(i);
2959 } else if (type == 'string' && this.attr_('displayAnnotations')) {
2960 // This is OK -- it's an annotation column.
2961 var dataIdx = colIdx[colIdx.length - 1];
2962 if (!annotationCols.hasOwnProperty(dataIdx)) {
2963 annotationCols[dataIdx] = [i];
2964 } else {
2965 annotationCols[dataIdx].push(i);
2966 }
2967 hasAnnotations = true;
2968 } else {
2969 this.error("Only 'number' is supported as a dependent type with Gviz." +
2970 " 'string' is only supported if displayAnnotations is true");
2971 }
2972 }
2973
2974 // Read column labels
2975 // TODO(danvk): add support back for errorBars
2976 var labels = [data.getColumnLabel(0)];
2977 for (var i = 0; i < colIdx.length; i++) {
2978 labels.push(data.getColumnLabel(colIdx[i]));
2979 if (this.attr_("errorBars")) i += 1;
2980 }
2981 this.attrs_.labels = labels;
2982 cols = labels.length;
2983
2984 var ret = [];
2985 var outOfOrder = false;
2986 var annotations = [];
2987 for (var i = 0; i < rows; i++) {
2988 var row = [];
2989 if (typeof(data.getValue(i, 0)) === 'undefined' ||
2990 data.getValue(i, 0) === null) {
2991 this.warn("Ignoring row " + i +
2992 " of DataTable because of undefined or null first column.");
2993 continue;
2994 }
2995
2996 if (indepType == 'date' || indepType == 'datetime') {
2997 row.push(data.getValue(i, 0).getTime());
2998 } else {
2999 row.push(data.getValue(i, 0));
3000 }
3001 if (!this.attr_("errorBars")) {
3002 for (var j = 0; j < colIdx.length; j++) {
3003 var col = colIdx[j];
3004 row.push(data.getValue(i, col));
3005 if (hasAnnotations &&
3006 annotationCols.hasOwnProperty(col) &&
3007 data.getValue(i, annotationCols[col][0]) != null) {
3008 var ann = {};
3009 ann.series = data.getColumnLabel(col);
3010 ann.xval = row[0];
3011 ann.shortText = String.fromCharCode(65 /* A */ + annotations.length)
3012 ann.text = '';
3013 for (var k = 0; k < annotationCols[col].length; k++) {
3014 if (k) ann.text += "\n";
3015 ann.text += data.getValue(i, annotationCols[col][k]);
3016 }
3017 annotations.push(ann);
3018 }
3019 }
3020 } else {
3021 for (var j = 0; j < cols - 1; j++) {
3022 row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
3023 }
3024 }
3025 if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
3026 outOfOrder = true;
3027 }
3028
3029 // Strip out infinities, which give dygraphs problems later on.
3030 for (var j = 0; j < row.length; j++) {
3031 if (!isFinite(row[j])) row[j] = null;
3032 }
3033 ret.push(row);
3034 }
3035
3036 if (outOfOrder) {
3037 this.warn("DataTable is out of order; order it correctly to speed loading.");
3038 ret.sort(function(a,b) { return a[0] - b[0] });
3039 }
3040 this.rawData_ = ret;
3041
3042 if (annotations.length > 0) {
3043 this.setAnnotations(annotations, true);
3044 }
3045}
3046
3047// These functions are all based on MochiKit.
3048Dygraph.update = function (self, o) {
3049 if (typeof(o) != 'undefined' && o !== null) {
3050 for (var k in o) {
3051 if (o.hasOwnProperty(k)) {
3052 self[k] = o[k];
3053 }
3054 }
3055 }
3056 return self;
3057};
3058
3059Dygraph.isArrayLike = function (o) {
3060 var typ = typeof(o);
3061 if (
3062 (typ != 'object' && !(typ == 'function' &&
3063 typeof(o.item) == 'function')) ||
3064 o === null ||
3065 typeof(o.length) != 'number' ||
3066 o.nodeType === 3
3067 ) {
3068 return false;
3069 }
3070 return true;
3071};
3072
3073Dygraph.isDateLike = function (o) {
3074 if (typeof(o) != "object" || o === null ||
3075 typeof(o.getTime) != 'function') {
3076 return false;
3077 }
3078 return true;
3079};
3080
3081Dygraph.clone = function(o) {
3082 // TODO(danvk): figure out how MochiKit's version works
3083 var r = [];
3084 for (var i = 0; i < o.length; i++) {
3085 if (Dygraph.isArrayLike(o[i])) {
3086 r.push(Dygraph.clone(o[i]));
3087 } else {
3088 r.push(o[i]);
3089 }
3090 }
3091 return r;
3092};
3093
3094
3095/**
3096 * Get the CSV data. If it's in a function, call that function. If it's in a
3097 * file, do an XMLHttpRequest to get it.
3098 * @private
3099 */
3100Dygraph.prototype.start_ = function() {
3101 if (typeof this.file_ == 'function') {
3102 // CSV string. Pretend we got it via XHR.
3103 this.loadedEvent_(this.file_());
3104 } else if (Dygraph.isArrayLike(this.file_)) {
3105 this.rawData_ = this.parseArray_(this.file_);
3106 this.predraw_();
3107 } else if (typeof this.file_ == 'object' &&
3108 typeof this.file_.getColumnRange == 'function') {
3109 // must be a DataTable from gviz.
3110 this.parseDataTable_(this.file_);
3111 this.predraw_();
3112 } else if (typeof this.file_ == 'string') {
3113 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3114 if (this.file_.indexOf('\n') >= 0) {
3115 this.loadedEvent_(this.file_);
3116 } else {
3117 var req = new XMLHttpRequest();
3118 var caller = this;
3119 req.onreadystatechange = function () {
3120 if (req.readyState == 4) {
3121 if (req.status == 200) {
3122 caller.loadedEvent_(req.responseText);
3123 }
3124 }
3125 };
3126
3127 req.open("GET", this.file_, true);
3128 req.send(null);
3129 }
3130 } else {
3131 this.error("Unknown data format: " + (typeof this.file_));
3132 }
3133};
3134
3135/**
3136 * Changes various properties of the graph. These can include:
3137 * <ul>
3138 * <li>file: changes the source data for the graph</li>
3139 * <li>errorBars: changes whether the data contains stddev</li>
3140 * </ul>
3141 * @param {Object} attrs The new properties and values
3142 */
3143Dygraph.prototype.updateOptions = function(attrs) {
3144 // TODO(danvk): this is a mess. Rethink this function.
3145 if ('rollPeriod' in attrs) {
3146 this.rollPeriod_ = attrs.rollPeriod;
3147 }
3148 if ('dateWindow' in attrs) {
3149 this.dateWindow_ = attrs.dateWindow;
3150 }
3151
3152 // TODO(danvk): validate per-series options.
3153 // Supported:
3154 // strokeWidth
3155 // pointSize
3156 // drawPoints
3157 // highlightCircleSize
3158
3159 Dygraph.update(this.user_attrs_, attrs);
3160 Dygraph.update(this.renderOptions_, attrs);
3161
3162 this.labelsFromCSV_ = (this.attr_("labels") == null);
3163
3164 // TODO(danvk): this doesn't match the constructor logic
3165 this.layout_.updateOptions({ 'errorBars': this.attr_("errorBars") });
3166 if (attrs['file']) {
3167 this.file_ = attrs['file'];
3168 this.start_();
3169 } else {
3170 this.predraw_();
3171 }
3172};
3173
3174/**
3175 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3176 * containing div (which has presumably changed size since the dygraph was
3177 * instantiated. If the width/height are specified, the div will be resized.
3178 *
3179 * This is far more efficient than destroying and re-instantiating a
3180 * Dygraph, since it doesn't have to reparse the underlying data.
3181 *
3182 * @param {Number} width Width (in pixels)
3183 * @param {Number} height Height (in pixels)
3184 */
3185Dygraph.prototype.resize = function(width, height) {
3186 if (this.resize_lock) {
3187 return;
3188 }
3189 this.resize_lock = true;
3190
3191 if ((width === null) != (height === null)) {
3192 this.warn("Dygraph.resize() should be called with zero parameters or " +
3193 "two non-NULL parameters. Pretending it was zero.");
3194 width = height = null;
3195 }
3196
3197 // TODO(danvk): there should be a clear() method.
3198 this.maindiv_.innerHTML = "";
3199 this.attrs_.labelsDiv = null;
3200
3201 if (width) {
3202 this.maindiv_.style.width = width + "px";
3203 this.maindiv_.style.height = height + "px";
3204 this.width_ = width;
3205 this.height_ = height;
3206 } else {
3207 this.width_ = this.maindiv_.offsetWidth;
3208 this.height_ = this.maindiv_.offsetHeight;
3209 }
3210
3211 this.createInterface_();
3212 this.predraw_();
3213
3214 this.resize_lock = false;
3215};
3216
3217/**
3218 * Adjusts the number of days in the rolling average. Updates the graph to
3219 * reflect the new averaging period.
3220 * @param {Number} length Number of days over which to average the data.
3221 */
3222Dygraph.prototype.adjustRoll = function(length) {
3223 this.rollPeriod_ = length;
3224 this.predraw_();
3225};
3226
3227/**
3228 * Returns a boolean array of visibility statuses.
3229 */
3230Dygraph.prototype.visibility = function() {
3231 // Do lazy-initialization, so that this happens after we know the number of
3232 // data series.
3233 if (!this.attr_("visibility")) {
3234 this.attrs_["visibility"] = [];
3235 }
3236 while (this.attr_("visibility").length < this.rawData_[0].length - 1) {
3237 this.attr_("visibility").push(true);
3238 }
3239 return this.attr_("visibility");
3240};
3241
3242/**
3243 * Changes the visiblity of a series.
3244 */
3245Dygraph.prototype.setVisibility = function(num, value) {
3246 var x = this.visibility();
3247 if (num < 0 || num >= x.length) {
3248 this.warn("invalid series number in setVisibility: " + num);
3249 } else {
3250 x[num] = value;
3251 this.predraw_();
3252 }
3253};
3254
3255/**
3256 * Update the list of annotations and redraw the chart.
3257 */
3258Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
3259 // Only add the annotation CSS rule once we know it will be used.
3260 Dygraph.addAnnotationRule();
3261 this.annotations_ = ann;
3262 this.layout_.setAnnotations(this.annotations_);
3263 if (!suppressDraw) {
3264 this.predraw_();
3265 }
3266};
3267
3268/**
3269 * Return the list of annotations.
3270 */
3271Dygraph.prototype.annotations = function() {
3272 return this.annotations_;
3273};
3274
3275/**
3276 * Get the index of a series (column) given its name. The first column is the
3277 * x-axis, so the data series start with index 1.
3278 */
3279Dygraph.prototype.indexFromSetName = function(name) {
3280 var labels = this.attr_("labels");
3281 for (var i = 0; i < labels.length; i++) {
3282 if (labels[i] == name) return i;
3283 }
3284 return null;
3285};
3286
3287Dygraph.addAnnotationRule = function() {
3288 if (Dygraph.addedAnnotationCSS) return;
3289
3290 var rule = "border: 1px solid black; " +
3291 "background-color: white; " +
3292 "text-align: center;";
3293
3294 var styleSheetElement = document.createElement("style");
3295 styleSheetElement.type = "text/css";
3296 document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
3297
3298 // Find the first style sheet that we can access.
3299 // We may not add a rule to a style sheet from another domain for security
3300 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3301 // adds its own style sheets from google.com.
3302 for (var i = 0; i < document.styleSheets.length; i++) {
3303 if (document.styleSheets[i].disabled) continue;
3304 var mysheet = document.styleSheets[i];
3305 try {
3306 if (mysheet.insertRule) { // Firefox
3307 var idx = mysheet.cssRules ? mysheet.cssRules.length : 0;
3308 mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx);
3309 } else if (mysheet.addRule) { // IE
3310 mysheet.addRule(".dygraphDefaultAnnotation", rule);
3311 }
3312 Dygraph.addedAnnotationCSS = true;
3313 return;
3314 } catch(err) {
3315 // Was likely a security exception.
3316 }
3317 }
3318
3319 this.warn("Unable to add default annotation CSS rule; display may be off.");
3320}
3321
3322/**
3323 * Create a new canvas element. This is more complex than a simple
3324 * document.createElement("canvas") because of IE and excanvas.
3325 */
3326Dygraph.createCanvas = function() {
3327 var canvas = document.createElement("canvas");
3328
3329 isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
3330 if (isIE && (typeof(G_vmlCanvasManager) != 'undefined')) {
3331 canvas = G_vmlCanvasManager.initElement(canvas);
3332 }
3333
3334 return canvas;
3335};
3336
3337
3338/**
3339 * A wrapper around Dygraph that implements the gviz API.
3340 * @param {Object} container The DOM object the visualization should live in.
3341 */
3342Dygraph.GVizChart = function(container) {
3343 this.container = container;
3344}
3345
3346Dygraph.GVizChart.prototype.draw = function(data, options) {
3347 // Clear out any existing dygraph.
3348 // TODO(danvk): would it make more sense to simply redraw using the current
3349 // date_graph object?
3350 this.container.innerHTML = '';
3351 if (typeof(this.date_graph) != 'undefined') {
3352 this.date_graph.destroy();
3353 }
3354
3355 this.date_graph = new Dygraph(this.container, data, options);
3356}
3357
3358/**
3359 * Google charts compatible setSelection
3360 * Only row selection is supported, all points in the row will be highlighted
3361 * @param {Array} array of the selected cells
3362 * @public
3363 */
3364Dygraph.GVizChart.prototype.setSelection = function(selection_array) {
3365 var row = false;
3366 if (selection_array.length) {
3367 row = selection_array[0].row;
3368 }
3369 this.date_graph.setSelection(row);
3370}
3371
3372/**
3373 * Google charts compatible getSelection implementation
3374 * @return {Array} array of the selected cells
3375 * @public
3376 */
3377Dygraph.GVizChart.prototype.getSelection = function() {
3378 var selection = [];
3379
3380 var row = this.date_graph.getSelection();
3381
3382 if (row < 0) return selection;
3383
3384 col = 1;
3385 for (var i in this.date_graph.layout_.datasets) {
3386 selection.push({row: row, column: col});
3387 col++;
3388 }
3389
3390 return selection;
3391}
3392
3393// Older pages may still use this name.
3394DateGraph = Dygraph;