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