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