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