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