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