update demo colors
[dygraphs.git] / dygraph.js
CommitLineData
6a1aa64f
DV
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
285a6bda
DV
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
6a1aa64f
DV
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">
285a6bda
DV
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
16 { }); // options
6a1aa64f
DV
17 </script>
18
19 The CSV file is of the form
20
285a6bda 21 Date,SeriesA,SeriesB,SeriesC
6a1aa64f
DV
22 YYYYMMDD,A1,B1,C1
23 YYYYMMDD,A2,B2,C2
24
6a1aa64f
DV
25 If the 'errorBars' option is set in the constructor, the input should be of
26 the form
27
285a6bda 28 Date,SeriesA,SeriesB,...
6a1aa64f
DV
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
285a6bda 34 Date,SeriesA,SeriesB,...
6a1aa64f
DV
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
285a6bda 40 For further documentation and examples, see http://www.danvk.org/dygraphs
6a1aa64f
DV
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,...
6a1aa64f
DV
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
52 */
285a6bda
DV
53Dygraph = 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 }
6a1aa64f
DV
65};
66
285a6bda
DV
67Dygraph.NAME = "Dygraph";
68Dygraph.VERSION = "1.2";
69Dygraph.__repr__ = function() {
6a1aa64f
DV
70 return "[" + this.NAME + " " + this.VERSION + "]";
71};
285a6bda 72Dygraph.toString = function() {
6a1aa64f
DV
73 return this.__repr__();
74};
75
76// Various default values
285a6bda
DV
77Dygraph.DEFAULT_ROLL_PERIOD = 1;
78Dygraph.DEFAULT_WIDTH = 480;
79Dygraph.DEFAULT_HEIGHT = 320;
80Dygraph.AXIS_LINE_WIDTH = 0.3;
6a1aa64f 81
8e4a6af3 82// Default attribute values.
285a6bda 83Dygraph.DEFAULT_ATTRS = {
a9fc39ab 84 highlightCircleSize: 3,
8e4a6af3 85 pixelsPerXLabel: 60,
c6336f04 86 pixelsPerYLabel: 30,
285a6bda 87
8e4a6af3
DV
88 labelsDivWidth: 250,
89 labelsDivStyles: {
90 // TODO(danvk): move defaults from createStatusMessage_ here.
285a6bda
DV
91 },
92 labelsSeparateLines: false,
93 labelsKMB: false,
94
95 strokeWidth: 1.0,
8e4a6af3 96
8846615a
DV
97 axisTickSize: 3,
98 axisLabelFontSize: 14,
99 xAxisLabelWidth: 50,
100 yAxisLabelWidth: 50,
101 rightGap: 5,
285a6bda
DV
102
103 showRoller: false,
104 xValueFormatter: Dygraph.dateString_,
105 xValueParser: Dygraph.dateParser,
106 xTicker: Dygraph.dateTicker,
107
108 sigma: 2.0,
109 errorBars: false,
110 fractions: false,
111 wilsonInterval: true, // only relevant if fractions is true
112 customBars: false
113};
114
115// Various logging levels.
116Dygraph.DEBUG = 1;
117Dygraph.INFO = 2;
118Dygraph.WARNING = 3;
119Dygraph.ERROR = 3;
120
121Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
122 // Labels is no longer a constructor parameter, since it's typically set
123 // directly from the data source. It also conains a name for the x-axis,
124 // which the previous constructor form did not.
125 if (labels != null) {
126 var new_labels = ["Date"];
127 for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
fc80a396 128 Dygraph.update(attrs, { 'labels': new_labels });
285a6bda
DV
129 }
130 this.__init__(div, file, attrs);
8e4a6af3
DV
131};
132
6a1aa64f 133/**
285a6bda 134 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
6a1aa64f
DV
135 * and interaction &lt;canvas&gt; inside of it. See the constructor for details
136 * on the parameters.
137 * @param {String | Function} file Source data
138 * @param {Array.<String>} labels Names of the data series
139 * @param {Object} attrs Miscellaneous other options
140 * @private
141 */
285a6bda
DV
142Dygraph.prototype.__init__ = function(div, file, attrs) {
143 // Support two-argument constructor
144 if (attrs == null) { attrs = {}; }
145
6a1aa64f 146 // Copy the important bits into the object
32988383 147 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
6a1aa64f 148 this.maindiv_ = div;
6a1aa64f 149 this.file_ = file;
285a6bda 150 this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD;
6a1aa64f 151 this.previousVerticalX_ = -1;
6a1aa64f 152 this.fractions_ = attrs.fractions || false;
6a1aa64f
DV
153 this.dateWindow_ = attrs.dateWindow || null;
154 this.valueRange_ = attrs.valueRange || null;
6a1aa64f 155 this.wilsonInterval_ = attrs.wilsonInterval || true;
8e4a6af3 156
f7d6278e
DV
157 // Clear the div. This ensure that, if multiple dygraphs are passed the same
158 // div, then only one will be drawn.
159 div.innerHTML = "";
160
285a6bda
DV
161 // If the div isn't already sized then give it a default size.
162 if (div.style.width == '') {
163 div.style.width = Dygraph.DEFAULT_WIDTH + "px";
164 }
165 if (div.style.height == '') {
166 div.style.height = Dygraph.DEFAULT_HEIGHT + "px";
32988383 167 }
285a6bda
DV
168 this.width_ = parseInt(div.style.width, 10);
169 this.height_ = parseInt(div.style.height, 10);
32988383 170
285a6bda
DV
171 // Dygraphs has many options, some of which interact with one another.
172 // To keep track of everything, we maintain two sets of options:
173 //
174 // this.user_attrs_ only options explicitly set by the user.
175 // this.attrs_ defaults, options derived from user_attrs_, data.
176 //
177 // Options are then accessed this.attr_('attr'), which first looks at
178 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
179 // defaults without overriding behavior that the user specifically asks for.
180 this.user_attrs_ = {};
fc80a396 181 Dygraph.update(this.user_attrs_, attrs);
6a1aa64f 182
285a6bda 183 this.attrs_ = {};
fc80a396 184 Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
6a1aa64f 185
285a6bda
DV
186 // Make a note of whether labels will be pulled from the CSV file.
187 this.labelsFromCSV_ = (this.attr_("labels") == null);
6a1aa64f
DV
188
189 // Create the containing DIV and other interactive elements
190 this.createInterface_();
191
192 // Create the PlotKit grapher
285a6bda
DV
193 // TODO(danvk): why does the Layout need its own set of options?
194 this.layoutOptions_ = { 'errorBars': (this.attr_("errorBars") ||
9922b78b 195 this.attr_("customBars")),
6a1aa64f 196 'xOriginIsZero': false };
fc80a396
DV
197 Dygraph.update(this.layoutOptions_, this.attrs_);
198 Dygraph.update(this.layoutOptions_, this.user_attrs_);
6a1aa64f 199
efe0829a 200 this.layout_ = new DygraphLayout(this, this.layoutOptions_);
6a1aa64f 201
285a6bda 202 // TODO(danvk): why does the Renderer need its own set of options?
6a1aa64f
DV
203 this.renderOptions_ = { colorScheme: this.colors_,
204 strokeColor: null,
285a6bda 205 axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
fc80a396
DV
206 Dygraph.update(this.renderOptions_, this.attrs_);
207 Dygraph.update(this.renderOptions_, this.user_attrs_);
9317362d
DV
208 this.plotter_ = new DygraphCanvasRenderer(this,
209 this.hidden_, this.layout_,
285a6bda 210 this.renderOptions_);
6a1aa64f
DV
211
212 this.createStatusMessage_();
213 this.createRollInterface_();
214 this.createDragInterface_();
215
738fc797 216 this.start_();
6a1aa64f
DV
217};
218
285a6bda
DV
219Dygraph.prototype.attr_ = function(name) {
220 if (typeof(this.user_attrs_[name]) != 'undefined') {
221 return this.user_attrs_[name];
222 } else if (typeof(this.attrs_[name]) != 'undefined') {
223 return this.attrs_[name];
224 } else {
225 return null;
226 }
227};
228
229// TODO(danvk): any way I can get the line numbers to be this.warn call?
230Dygraph.prototype.log = function(severity, message) {
231 if (typeof(console) != 'undefined') {
232 switch (severity) {
233 case Dygraph.DEBUG:
234 console.debug('dygraphs: ' + message);
235 break;
236 case Dygraph.INFO:
237 console.info('dygraphs: ' + message);
238 break;
239 case Dygraph.WARNING:
240 console.warn('dygraphs: ' + message);
241 break;
242 case Dygraph.ERROR:
243 console.error('dygraphs: ' + message);
244 break;
245 }
246 }
247}
248Dygraph.prototype.info = function(message) {
249 this.log(Dygraph.INFO, message);
250}
251Dygraph.prototype.warn = function(message) {
252 this.log(Dygraph.WARNING, message);
253}
254Dygraph.prototype.error = function(message) {
255 this.log(Dygraph.ERROR, message);
256}
257
6a1aa64f
DV
258/**
259 * Returns the current rolling period, as set by the user or an option.
260 * @return {Number} The number of days in the rolling window
261 */
285a6bda 262Dygraph.prototype.rollPeriod = function() {
6a1aa64f 263 return this.rollPeriod_;
76171648
DV
264};
265
266Dygraph.addEvent = function(el, evt, fn) {
267 var normed_fn = function(e) {
268 if (!e) var e = window.event;
269 fn(e);
270 };
271 if (window.addEventListener) { // Mozilla, Netscape, Firefox
272 el.addEventListener(evt, normed_fn, false);
273 } else { // IE
274 el.attachEvent('on' + evt, normed_fn);
275 }
276};
6a1aa64f
DV
277
278/**
285a6bda 279 * Generates interface elements for the Dygraph: a containing div, a div to
6a1aa64f
DV
280 * display the current point, and a textbox to adjust the rolling average
281 * period.
282 * @private
283 */
285a6bda 284Dygraph.prototype.createInterface_ = function() {
6a1aa64f
DV
285 // Create the all-enclosing graph div
286 var enclosing = this.maindiv_;
287
b0c3b730
DV
288 this.graphDiv = document.createElement("div");
289 this.graphDiv.style.width = this.width_ + "px";
290 this.graphDiv.style.height = this.height_ + "px";
291 enclosing.appendChild(this.graphDiv);
292
293 // Create the canvas for interactive parts of the chart.
294 this.canvas_ = document.createElement("canvas");
295 this.canvas_.style.position = "absolute";
296 this.canvas_.width = this.width_;
297 this.canvas_.height = this.height_;
298 this.graphDiv.appendChild(this.canvas_);
299
300 // ... and for static parts of the chart.
6a1aa64f 301 this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
76171648
DV
302
303 var dygraph = this;
304 Dygraph.addEvent(this.hidden_, 'mousemove', function(e) {
305 dygraph.mouseMove_(e);
306 });
307 Dygraph.addEvent(this.hidden_, 'mouseout', function(e) {
308 dygraph.mouseOut_(e);
309 });
6a1aa64f
DV
310}
311
312/**
313 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
285a6bda 314 * this particular canvas. All Dygraph work is done on this.canvas_.
8846615a 315 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
6a1aa64f
DV
316 * @return {Object} The newly-created canvas
317 * @private
318 */
285a6bda 319Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
6a1aa64f
DV
320 var h = document.createElement("canvas");
321 h.style.position = "absolute";
322 h.style.top = canvas.style.top;
323 h.style.left = canvas.style.left;
324 h.width = this.width_;
325 h.height = this.height_;
b0c3b730 326 this.graphDiv.appendChild(h);
6a1aa64f
DV
327 return h;
328};
329
f474c2a3
DV
330// Taken from MochiKit.Color
331Dygraph.hsvToRGB = function (hue, saturation, value) {
332 var red;
333 var green;
334 var blue;
335 if (saturation === 0) {
336 red = value;
337 green = value;
338 blue = value;
339 } else {
340 var i = Math.floor(hue * 6);
341 var f = (hue * 6) - i;
342 var p = value * (1 - saturation);
343 var q = value * (1 - (saturation * f));
344 var t = value * (1 - (saturation * (1 - f)));
345 switch (i) {
346 case 1: red = q; green = value; blue = p; break;
347 case 2: red = p; green = value; blue = t; break;
348 case 3: red = p; green = q; blue = value; break;
349 case 4: red = t; green = p; blue = value; break;
350 case 5: red = value; green = p; blue = q; break;
351 case 6: // fall through
352 case 0: red = value; green = t; blue = p; break;
353 }
354 }
355 red = Math.floor(255 * red + 0.5);
356 green = Math.floor(255 * green + 0.5);
357 blue = Math.floor(255 * blue + 0.5);
358 return 'rgb(' + red + ',' + green + ',' + blue + ')';
359};
360
361
6a1aa64f
DV
362/**
363 * Generate a set of distinct colors for the data series. This is done with a
364 * color wheel. Saturation/Value are customizable, and the hue is
365 * equally-spaced around the color wheel. If a custom set of colors is
366 * specified, that is used instead.
6a1aa64f
DV
367 * @private
368 */
285a6bda
DV
369Dygraph.prototype.setColors_ = function() {
370 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
371 // away with this.renderOptions_.
372 var num = this.attr_("labels").length - 1;
6a1aa64f 373 this.colors_ = [];
285a6bda
DV
374 var colors = this.attr_('colors');
375 if (!colors) {
376 var sat = this.attr_('colorSaturation') || 1.0;
377 var val = this.attr_('colorValue') || 0.5;
6a1aa64f
DV
378 for (var i = 1; i <= num; i++) {
379 var hue = (1.0*i/(1+num));
f474c2a3 380 this.colors_.push( Dygraph.hsvToRGB(hue, sat, val) );
6a1aa64f
DV
381 }
382 } else {
383 for (var i = 0; i < num; i++) {
285a6bda 384 var colorStr = colors[i % colors.length];
f474c2a3 385 this.colors_.push(colorStr);
6a1aa64f
DV
386 }
387 }
285a6bda
DV
388
389 // TODO(danvk): update this w/r/t/ the new options system.
390 this.renderOptions_.colorScheme = this.colors_;
fc80a396
DV
391 Dygraph.update(this.plotter_.options, this.renderOptions_);
392 Dygraph.update(this.layoutOptions_, this.user_attrs_);
393 Dygraph.update(this.layoutOptions_, this.attrs_);
6a1aa64f
DV
394}
395
3df0ccf0
DV
396// The following functions are from quirksmode.org
397// http://www.quirksmode.org/js/findpos.html
398Dygraph.findPosX = function(obj) {
399 var curleft = 0;
400 if (obj.offsetParent) {
401 while (obj.offsetParent) {
402 curleft += obj.offsetLeft;
403 obj = obj.offsetParent;
404 }
405 }
406 else if (obj.x)
407 curleft += obj.x;
408 return curleft;
409};
410
411Dygraph.findPosY = function(obj) {
412 var curtop = 0;
413 if (obj.offsetParent) {
414 while (obj.offsetParent) {
415 curtop += obj.offsetTop;
416 obj = obj.offsetParent;
417 }
418 }
419 else if (obj.y)
420 curtop += obj.y;
421 return curtop;
422};
423
6a1aa64f
DV
424/**
425 * Create the div that contains information on the selected point(s)
426 * This goes in the top right of the canvas, unless an external div has already
427 * been specified.
428 * @private
429 */
285a6bda
DV
430Dygraph.prototype.createStatusMessage_ = function(){
431 if (!this.attr_("labelsDiv")) {
432 var divWidth = this.attr_('labelsDivWidth');
b0c3b730 433 var messagestyle = {
6a1aa64f
DV
434 "position": "absolute",
435 "fontSize": "14px",
436 "zIndex": 10,
437 "width": divWidth + "px",
438 "top": "0px",
8846615a 439 "left": (this.width_ - divWidth - 2) + "px",
6a1aa64f
DV
440 "background": "white",
441 "textAlign": "left",
b0c3b730 442 "overflow": "hidden"};
fc80a396 443 Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
b0c3b730
DV
444 var div = document.createElement("div");
445 for (var name in messagestyle) {
446 div.style[name] = messagestyle[name];
447 }
448 this.graphDiv.appendChild(div);
285a6bda 449 this.attrs_.labelsDiv = div;
6a1aa64f
DV
450 }
451};
452
453/**
454 * Create the text box to adjust the averaging period
455 * @return {Object} The newly-created text box
456 * @private
457 */
285a6bda 458Dygraph.prototype.createRollInterface_ = function() {
285a6bda 459 var display = this.attr_('showRoller') ? "block" : "none";
b0c3b730
DV
460 var textAttr = { "position": "absolute",
461 "zIndex": 10,
462 "top": (this.plotter_.area.h - 25) + "px",
463 "left": (this.plotter_.area.x + 1) + "px",
464 "display": display
6a1aa64f 465 };
b0c3b730
DV
466 var roller = document.createElement("input");
467 roller.type = "text";
468 roller.size = "2";
469 roller.value = this.rollPeriod_;
470 for (var name in textAttr) {
471 roller.style[name] = textAttr[name];
472 }
473
6a1aa64f 474 var pa = this.graphDiv;
b0c3b730 475 pa.appendChild(roller);
76171648
DV
476 var dygraph = this;
477 roller.onchange = function() { dygraph.adjustRoll(roller.value); };
6a1aa64f 478 return roller;
76171648
DV
479};
480
481// These functions are taken from MochiKit.Signal
482Dygraph.pageX = function(e) {
483 if (e.pageX) {
484 return (!e.pageX || e.pageX < 0) ? 0 : e.pageX;
485 } else {
486 var de = document;
487 var b = document.body;
488 return e.clientX +
489 (de.scrollLeft || b.scrollLeft) -
490 (de.clientLeft || 0);
491 }
492};
493
494Dygraph.pageY = function(e) {
495 if (e.pageY) {
496 return (!e.pageY || e.pageY < 0) ? 0 : e.pageY;
497 } else {
498 var de = document;
499 var b = document.body;
500 return e.clientY +
501 (de.scrollTop || b.scrollTop) -
502 (de.clientTop || 0);
503 }
504};
6a1aa64f
DV
505
506/**
507 * Set up all the mouse handlers needed to capture dragging behavior for zoom
27385109 508 * events.
6a1aa64f
DV
509 * @private
510 */
285a6bda 511Dygraph.prototype.createDragInterface_ = function() {
6a1aa64f
DV
512 var self = this;
513
514 // Tracks whether the mouse is down right now
515 var mouseDown = false;
516 var dragStartX = null;
517 var dragStartY = null;
518 var dragEndX = null;
519 var dragEndY = null;
520 var prevEndX = null;
521
522 // Utility function to convert page-wide coordinates to canvas coords
67e650dc
DV
523 var px = 0;
524 var py = 0;
76171648
DV
525 var getX = function(e) { return Dygraph.pageX(e) - px };
526 var getY = function(e) { return Dygraph.pageX(e) - py };
6a1aa64f
DV
527
528 // Draw zoom rectangles when the mouse is down and the user moves around
76171648 529 Dygraph.addEvent(this.hidden_, 'mousemove', function(event) {
6a1aa64f
DV
530 if (mouseDown) {
531 dragEndX = getX(event);
532 dragEndY = getY(event);
533
534 self.drawZoomRect_(dragStartX, dragEndX, prevEndX);
535 prevEndX = dragEndX;
536 }
537 });
538
539 // Track the beginning of drag events
76171648 540 Dygraph.addEvent(this.hidden_, 'mousedown', function(event) {
6a1aa64f 541 mouseDown = true;
3df0ccf0
DV
542 px = Dygraph.findPosX(self.canvas_);
543 py = Dygraph.findPosY(self.canvas_);
6a1aa64f
DV
544 dragStartX = getX(event);
545 dragStartY = getY(event);
546 });
547
548 // If the user releases the mouse button during a drag, but not over the
549 // canvas, then it doesn't count as a zooming action.
76171648 550 Dygraph.addEvent(document, 'mouseup', function(event) {
6a1aa64f
DV
551 if (mouseDown) {
552 mouseDown = false;
553 dragStartX = null;
554 dragStartY = null;
555 }
556 });
557
558 // Temporarily cancel the dragging event when the mouse leaves the graph
76171648 559 Dygraph.addEvent(this.hidden_, 'mouseout', function(event) {
6a1aa64f
DV
560 if (mouseDown) {
561 dragEndX = null;
562 dragEndY = null;
563 }
564 });
565
566 // If the mouse is released on the canvas during a drag event, then it's a
567 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
76171648 568 Dygraph.addEvent(this.hidden_, 'mouseup', function(event) {
6a1aa64f
DV
569 if (mouseDown) {
570 mouseDown = false;
571 dragEndX = getX(event);
572 dragEndY = getY(event);
573 var regionWidth = Math.abs(dragEndX - dragStartX);
574 var regionHeight = Math.abs(dragEndY - dragStartY);
575
576 if (regionWidth < 2 && regionHeight < 2 &&
285a6bda 577 self.attr_('clickCallback') != null &&
6a1aa64f 578 self.lastx_ != undefined) {
285a6bda
DV
579 // TODO(danvk): pass along more info about the point.
580 self.attr_('clickCallback')(event, new Date(self.lastx_));
6a1aa64f
DV
581 }
582
583 if (regionWidth >= 10) {
584 self.doZoom_(Math.min(dragStartX, dragEndX),
585 Math.max(dragStartX, dragEndX));
586 } else {
587 self.canvas_.getContext("2d").clearRect(0, 0,
588 self.canvas_.width,
589 self.canvas_.height);
590 }
591
592 dragStartX = null;
593 dragStartY = null;
594 }
595 });
596
597 // Double-clicking zooms back out
76171648 598 Dygraph.addEvent(this.hidden_, 'dblclick', function(event) {
6a1aa64f
DV
599 self.dateWindow_ = null;
600 self.drawGraph_(self.rawData_);
601 var minDate = self.rawData_[0][0];
602 var maxDate = self.rawData_[self.rawData_.length - 1][0];
285a6bda
DV
603 if (self.attr_("zoomCallback")) {
604 self.attr_("zoomCallback")(minDate, maxDate);
67e650dc 605 }
6a1aa64f
DV
606 });
607};
608
609/**
610 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
611 * up any previous zoom rectangles that were drawn. This could be optimized to
612 * avoid extra redrawing, but it's tricky to avoid interactions with the status
613 * dots.
614 * @param {Number} startX The X position where the drag started, in canvas
615 * coordinates.
616 * @param {Number} endX The current X position of the drag, in canvas coords.
617 * @param {Number} prevEndX The value of endX on the previous call to this
618 * function. Used to avoid excess redrawing
619 * @private
620 */
285a6bda 621Dygraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
6a1aa64f
DV
622 var ctx = this.canvas_.getContext("2d");
623
624 // Clean up from the previous rect if necessary
625 if (prevEndX) {
626 ctx.clearRect(Math.min(startX, prevEndX), 0,
627 Math.abs(startX - prevEndX), this.height_);
628 }
629
630 // Draw a light-grey rectangle to show the new viewing area
631 if (endX && startX) {
632 ctx.fillStyle = "rgba(128,128,128,0.33)";
633 ctx.fillRect(Math.min(startX, endX), 0,
634 Math.abs(endX - startX), this.height_);
635 }
636};
637
638/**
639 * Zoom to something containing [lowX, highX]. These are pixel coordinates
640 * in the canvas. The exact zoom window may be slightly larger if there are no
641 * data points near lowX or highX. This function redraws the graph.
642 * @param {Number} lowX The leftmost pixel value that should be visible.
643 * @param {Number} highX The rightmost pixel value that should be visible.
644 * @private
645 */
285a6bda 646Dygraph.prototype.doZoom_ = function(lowX, highX) {
6a1aa64f
DV
647 // Find the earliest and latest dates contained in this canvasx range.
648 var points = this.layout_.points;
649 var minDate = null;
650 var maxDate = null;
651 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
652 for (var i = 0; i < points.length; i++) {
653 var cx = points[i].canvasx;
654 var x = points[i].xval;
655 if (cx < lowX && (minDate == null || x > minDate)) minDate = x;
656 if (cx > highX && (maxDate == null || x < maxDate)) maxDate = x;
657 }
658 // Use the extremes if either is missing
659 if (minDate == null) minDate = points[0].xval;
660 if (maxDate == null) maxDate = points[points.length-1].xval;
661
662 this.dateWindow_ = [minDate, maxDate];
663 this.drawGraph_(this.rawData_);
285a6bda
DV
664 if (this.attr_("zoomCallback")) {
665 this.attr_("zoomCallback")(minDate, maxDate);
67e650dc 666 }
6a1aa64f
DV
667};
668
669/**
670 * When the mouse moves in the canvas, display information about a nearby data
671 * point and draw dots over those points in the data series. This function
672 * takes care of cleanup of previously-drawn dots.
673 * @param {Object} event The mousemove event from the browser.
674 * @private
675 */
285a6bda 676Dygraph.prototype.mouseMove_ = function(event) {
76171648 677 var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.hidden_);
6a1aa64f
DV
678 var points = this.layout_.points;
679
680 var lastx = -1;
681 var lasty = -1;
682
683 // Loop through all the points and find the date nearest to our current
684 // location.
685 var minDist = 1e+100;
686 var idx = -1;
687 for (var i = 0; i < points.length; i++) {
688 var dist = Math.abs(points[i].canvasx - canvasx);
689 if (dist > minDist) break;
690 minDist = dist;
691 idx = i;
692 }
693 if (idx >= 0) lastx = points[idx].xval;
694 // Check that you can really highlight the last day's data
695 if (canvasx > points[points.length-1].canvasx)
696 lastx = points[points.length-1].xval;
697
698 // Extract the points we've selected
699 var selPoints = [];
700 for (var i = 0; i < points.length; i++) {
701 if (points[i].xval == lastx) {
702 selPoints.push(points[i]);
703 }
704 }
705
706 // Clear the previously drawn vertical, if there is one
285a6bda 707 var circleSize = this.attr_('highlightCircleSize');
6a1aa64f
DV
708 var ctx = this.canvas_.getContext("2d");
709 if (this.previousVerticalX_ >= 0) {
710 var px = this.previousVerticalX_;
711 ctx.clearRect(px - circleSize - 1, 0, 2 * circleSize + 2, this.height_);
712 }
713
584ceeaa
DV
714 var isOK = function(x) { return x && !isNaN(x); };
715
6a1aa64f
DV
716 if (selPoints.length > 0) {
717 var canvasx = selPoints[0].canvasx;
718
719 // Set the status message to indicate the selected point(s)
285a6bda 720 var replace = this.attr_('xValueFormatter')(lastx, this) + ":";
6a1aa64f
DV
721 var clen = this.colors_.length;
722 for (var i = 0; i < selPoints.length; i++) {
584ceeaa 723 if (!isOK(selPoints[i].canvasy)) continue;
285a6bda 724 if (this.attr_("labelsSeparateLines")) {
6a1aa64f
DV
725 replace += "<br/>";
726 }
727 var point = selPoints[i];
f474c2a3
DV
728 var c = new RGBColor(this.colors_[i%clen]);
729 replace += " <b><font color='" + c.toHex() + "'>"
6a1aa64f
DV
730 + point.name + "</font></b>:"
731 + this.round_(point.yval, 2);
732 }
285a6bda 733 this.attr_("labelsDiv").innerHTML = replace;
6a1aa64f
DV
734
735 // Save last x position for callbacks.
736 this.lastx_ = lastx;
737
738 // Draw colored circles over the center of each selected point
739 ctx.save()
740 for (var i = 0; i < selPoints.length; i++) {
584ceeaa 741 if (!isOK(selPoints[i%clen].canvasy)) continue;
6a1aa64f 742 ctx.beginPath();
f474c2a3 743 ctx.fillStyle = this.colors_[i%clen];
6a1aa64f
DV
744 ctx.arc(canvasx, selPoints[i%clen].canvasy, circleSize, 0, 360, false);
745 ctx.fill();
746 }
747 ctx.restore();
748
749 this.previousVerticalX_ = canvasx;
750 }
751};
752
753/**
754 * The mouse has left the canvas. Clear out whatever artifacts remain
755 * @param {Object} event the mouseout event from the browser.
756 * @private
757 */
285a6bda 758Dygraph.prototype.mouseOut_ = function(event) {
6a1aa64f
DV
759 // Get rid of the overlay data
760 var ctx = this.canvas_.getContext("2d");
761 ctx.clearRect(0, 0, this.width_, this.height_);
285a6bda 762 this.attr_("labelsDiv").innerHTML = "";
6a1aa64f
DV
763};
764
285a6bda 765Dygraph.zeropad = function(x) {
32988383
DV
766 if (x < 10) return "0" + x; else return "" + x;
767}
768
6a1aa64f 769/**
6b8e33dd
DV
770 * Return a string version of the hours, minutes and seconds portion of a date.
771 * @param {Number} date The JavaScript date (ms since epoch)
772 * @return {String} A time of the form "HH:MM:SS"
773 * @private
774 */
285a6bda
DV
775Dygraph.prototype.hmsString_ = function(date) {
776 var zeropad = Dygraph.zeropad;
6b8e33dd
DV
777 var d = new Date(date);
778 if (d.getSeconds()) {
779 return zeropad(d.getHours()) + ":" +
780 zeropad(d.getMinutes()) + ":" +
781 zeropad(d.getSeconds());
782 } else if (d.getMinutes()) {
783 return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
784 } else {
785 return zeropad(d.getHours());
786 }
787}
788
789/**
6a1aa64f
DV
790 * Convert a JS date (millis since epoch) to YYYY/MM/DD
791 * @param {Number} date The JavaScript date (ms since epoch)
792 * @return {String} A date of the form "YYYY/MM/DD"
793 * @private
285a6bda 794 * TODO(danvk): why is this part of the prototype?
6a1aa64f 795 */
285a6bda
DV
796Dygraph.dateString_ = function(date, self) {
797 var zeropad = Dygraph.zeropad;
6a1aa64f
DV
798 var d = new Date(date);
799
800 // Get the year:
801 var year = "" + d.getFullYear();
802 // Get a 0 padded month string
6b8e33dd 803 var month = zeropad(d.getMonth() + 1); //months are 0-offset, sigh
6a1aa64f 804 // Get a 0 padded day string
6b8e33dd 805 var day = zeropad(d.getDate());
6a1aa64f 806
6b8e33dd
DV
807 var ret = "";
808 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
285a6bda 809 if (frac) ret = " " + self.hmsString_(date);
6b8e33dd
DV
810
811 return year + "/" + month + "/" + day + ret;
6a1aa64f
DV
812};
813
814/**
815 * Round a number to the specified number of digits past the decimal point.
816 * @param {Number} num The number to round
817 * @param {Number} places The number of decimals to which to round
818 * @return {Number} The rounded number
819 * @private
820 */
285a6bda 821Dygraph.prototype.round_ = function(num, places) {
6a1aa64f
DV
822 var shift = Math.pow(10, places);
823 return Math.round(num * shift)/shift;
824};
825
826/**
827 * Fires when there's data available to be graphed.
828 * @param {String} data Raw CSV data to be plotted
829 * @private
830 */
285a6bda 831Dygraph.prototype.loadedEvent_ = function(data) {
6a1aa64f
DV
832 this.rawData_ = this.parseCSV_(data);
833 this.drawGraph_(this.rawData_);
834};
835
285a6bda 836Dygraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
8846615a 837 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
285a6bda 838Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
6a1aa64f
DV
839
840/**
841 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
842 * @private
843 */
285a6bda 844Dygraph.prototype.addXTicks_ = function() {
6a1aa64f
DV
845 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
846 var startDate, endDate;
847 if (this.dateWindow_) {
848 startDate = this.dateWindow_[0];
849 endDate = this.dateWindow_[1];
850 } else {
851 startDate = this.rawData_[0][0];
852 endDate = this.rawData_[this.rawData_.length - 1][0];
853 }
854
285a6bda 855 var xTicks = this.attr_('xTicker')(startDate, endDate, this);
6a1aa64f 856 this.layout_.updateOptions({xTicks: xTicks});
32988383
DV
857};
858
859// Time granularity enumeration
285a6bda
DV
860Dygraph.SECONDLY = 0;
861Dygraph.TEN_SECONDLY = 1;
862Dygraph.THIRTY_SECONDLY = 2;
863Dygraph.MINUTELY = 3;
864Dygraph.TEN_MINUTELY = 4;
865Dygraph.THIRTY_MINUTELY = 5;
866Dygraph.HOURLY = 6;
867Dygraph.SIX_HOURLY = 7;
868Dygraph.DAILY = 8;
869Dygraph.WEEKLY = 9;
870Dygraph.MONTHLY = 10;
871Dygraph.QUARTERLY = 11;
872Dygraph.BIANNUAL = 12;
873Dygraph.ANNUAL = 13;
874Dygraph.DECADAL = 14;
875Dygraph.NUM_GRANULARITIES = 15;
876
877Dygraph.SHORT_SPACINGS = [];
878Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
879Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10;
880Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30;
881Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60;
882Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10;
883Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
884Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600;
885Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600 * 6;
886Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
887Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
32988383
DV
888
889// NumXTicks()
890//
891// If we used this time granularity, how many ticks would there be?
892// This is only an approximation, but it's generally good enough.
893//
285a6bda
DV
894Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
895 if (granularity < Dygraph.MONTHLY) {
32988383 896 // Generate one tick mark for every fixed interval of time.
285a6bda 897 var spacing = Dygraph.SHORT_SPACINGS[granularity];
32988383
DV
898 return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing);
899 } else {
900 var year_mod = 1; // e.g. to only print one point every 10 years.
901 var num_months = 12;
285a6bda
DV
902 if (granularity == Dygraph.QUARTERLY) num_months = 3;
903 if (granularity == Dygraph.BIANNUAL) num_months = 2;
904 if (granularity == Dygraph.ANNUAL) num_months = 1;
905 if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
32988383
DV
906
907 var msInYear = 365.2524 * 24 * 3600 * 1000;
908 var num_years = 1.0 * (end_time - start_time) / msInYear;
909 return Math.floor(0.5 + 1.0 * num_years * num_months / year_mod);
910 }
911};
912
913// GetXAxis()
914//
915// Construct an x-axis of nicely-formatted times on meaningful boundaries
916// (e.g. 'Jan 09' rather than 'Jan 22, 2009').
917//
918// Returns an array containing {v: millis, label: label} dictionaries.
919//
285a6bda 920Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
32988383 921 var ticks = [];
285a6bda 922 if (granularity < Dygraph.MONTHLY) {
32988383 923 // Generate one tick mark for every fixed interval of time.
285a6bda 924 var spacing = Dygraph.SHORT_SPACINGS[granularity];
32988383 925 var format = '%d%b'; // e.g. "1 Jan"
328bb812 926 // TODO(danvk): be smarter about making sure this really hits a "nice" time.
285a6bda 927 if (granularity < Dygraph.HOURLY) {
328bb812
DV
928 start_time = spacing * Math.floor(0.5 + start_time / spacing);
929 }
32988383
DV
930 for (var t = start_time; t <= end_time; t += spacing) {
931 var d = new Date(t);
932 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
285a6bda 933 if (frac == 0 || granularity >= Dygraph.DAILY) {
32988383
DV
934 // the extra hour covers DST problems.
935 ticks.push({ v:t, label: new Date(t + 3600*1000).strftime(format) });
936 } else {
937 ticks.push({ v:t, label: this.hmsString_(t) });
938 }
939 }
940 } else {
941 // Display a tick mark on the first of a set of months of each year.
942 // Years get a tick mark iff y % year_mod == 0. This is useful for
943 // displaying a tick mark once every 10 years, say, on long time scales.
944 var months;
945 var year_mod = 1; // e.g. to only print one point every 10 years.
946
285a6bda 947 if (granularity == Dygraph.MONTHLY) {
32988383 948 months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
285a6bda 949 } else if (granularity == Dygraph.QUARTERLY) {
32988383 950 months = [ 0, 3, 6, 9 ];
285a6bda 951 } else if (granularity == Dygraph.BIANNUAL) {
32988383 952 months = [ 0, 6 ];
285a6bda 953 } else if (granularity == Dygraph.ANNUAL) {
32988383 954 months = [ 0 ];
285a6bda 955 } else if (granularity == Dygraph.DECADAL) {
32988383
DV
956 months = [ 0 ];
957 year_mod = 10;
958 }
959
960 var start_year = new Date(start_time).getFullYear();
961 var end_year = new Date(end_time).getFullYear();
285a6bda 962 var zeropad = Dygraph.zeropad;
32988383
DV
963 for (var i = start_year; i <= end_year; i++) {
964 if (i % year_mod != 0) continue;
965 for (var j = 0; j < months.length; j++) {
966 var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
967 var t = Date.parse(date_str);
968 if (t < start_time || t > end_time) continue;
969 ticks.push({ v:t, label: new Date(t).strftime('%b %y') });
970 }
971 }
972 }
973
974 return ticks;
975};
976
6a1aa64f
DV
977
978/**
979 * Add ticks to the x-axis based on a date range.
980 * @param {Number} startDate Start of the date window (millis since epoch)
981 * @param {Number} endDate End of the date window (millis since epoch)
982 * @return {Array.<Object>} Array of {label, value} tuples.
983 * @public
984 */
285a6bda 985Dygraph.dateTicker = function(startDate, endDate, self) {
32988383 986 var chosen = -1;
285a6bda
DV
987 for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) {
988 var num_ticks = self.NumXTicks(startDate, endDate, i);
989 if (self.width_ / num_ticks >= self.attr_('pixelsPerXLabel')) {
32988383
DV
990 chosen = i;
991 break;
2769de62 992 }
6a1aa64f
DV
993 }
994
32988383 995 if (chosen >= 0) {
285a6bda 996 return self.GetXAxis(startDate, endDate, chosen);
6a1aa64f 997 } else {
32988383 998 // TODO(danvk): signal error.
6a1aa64f 999 }
6a1aa64f
DV
1000};
1001
1002/**
1003 * Add ticks when the x axis has numbers on it (instead of dates)
1004 * @param {Number} startDate Start of the date window (millis since epoch)
1005 * @param {Number} endDate End of the date window (millis since epoch)
1006 * @return {Array.<Object>} Array of {label, value} tuples.
1007 * @public
1008 */
285a6bda 1009Dygraph.numericTicks = function(minV, maxV, self) {
c6336f04
DV
1010 // Basic idea:
1011 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1012 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
285a6bda 1013 // The first spacing greater than pixelsPerYLabel is what we use.
c6336f04
DV
1014 var mults = [1, 2, 5];
1015 var scale, low_val, high_val, nTicks;
285a6bda
DV
1016 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1017 var pixelsPerTick = self.attr_('pixelsPerYLabel');
c6336f04
DV
1018 for (var i = -10; i < 50; i++) {
1019 var base_scale = Math.pow(10, i);
1020 for (var j = 0; j < mults.length; j++) {
1021 scale = base_scale * mults[j];
c6336f04
DV
1022 low_val = Math.floor(minV / scale) * scale;
1023 high_val = Math.ceil(maxV / scale) * scale;
1024 nTicks = (high_val - low_val) / scale;
285a6bda 1025 var spacing = self.height_ / nTicks;
c6336f04 1026 // wish I could break out of both loops at once...
285a6bda 1027 if (spacing > pixelsPerTick) break;
c6336f04 1028 }
285a6bda 1029 if (spacing > pixelsPerTick) break;
6a1aa64f
DV
1030 }
1031
1032 // Construct labels for the ticks
1033 var ticks = [];
c6336f04
DV
1034 for (var i = 0; i < nTicks; i++) {
1035 var tickV = low_val + i * scale;
285a6bda
DV
1036 var label = self.round_(tickV, 2);
1037 if (self.attr_("labelsKMB")) {
6a1aa64f
DV
1038 var k = 1000;
1039 if (tickV >= k*k*k) {
285a6bda 1040 label = self.round_(tickV/(k*k*k), 1) + "B";
6a1aa64f 1041 } else if (tickV >= k*k) {
285a6bda 1042 label = self.round_(tickV/(k*k), 1) + "M";
6a1aa64f 1043 } else if (tickV >= k) {
285a6bda 1044 label = self.round_(tickV/k, 1) + "K";
6a1aa64f
DV
1045 }
1046 }
1047 ticks.push( {label: label, v: tickV} );
1048 }
1049 return ticks;
1050};
1051
1052/**
1053 * Adds appropriate ticks on the y-axis
1054 * @param {Number} minY The minimum Y value in the data set
1055 * @param {Number} maxY The maximum Y value in the data set
1056 * @private
1057 */
285a6bda 1058Dygraph.prototype.addYTicks_ = function(minY, maxY) {
6a1aa64f 1059 // Set the number of ticks so that the labels are human-friendly.
285a6bda
DV
1060 // TODO(danvk): make this an attribute as well.
1061 var ticks = Dygraph.numericTicks(minY, maxY, this);
6a1aa64f
DV
1062 this.layout_.updateOptions( { yAxis: [minY, maxY],
1063 yTicks: ticks } );
1064};
1065
5011e7a1
DV
1066// Computes the range of the data series (including confidence intervals).
1067// series is either [ [x1, y1], [x2, y2], ... ] or
1068// [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1069// Returns [low, high]
1070Dygraph.prototype.extremeValues_ = function(series) {
1071 var minY = null, maxY = null;
1072
9922b78b 1073 var bars = this.attr_("errorBars") || this.attr_("customBars");
5011e7a1
DV
1074 if (bars) {
1075 // With custom bars, maxY is the max of the high values.
1076 for (var j = 0; j < series.length; j++) {
1077 var y = series[j][1][0];
1078 if (!y) continue;
1079 var low = y - series[j][1][1];
1080 var high = y + series[j][1][2];
1081 if (low > y) low = y; // this can happen with custom bars,
1082 if (high < y) high = y; // e.g. in tests/custom-bars.html
1083 if (maxY == null || high > maxY) {
1084 maxY = high;
1085 }
1086 if (minY == null || low < minY) {
1087 minY = low;
1088 }
1089 }
1090 } else {
1091 for (var j = 0; j < series.length; j++) {
1092 var y = series[j][1];
1093 if (!y) continue;
1094 if (maxY == null || y > maxY) {
1095 maxY = y;
1096 }
1097 if (minY == null || y < minY) {
1098 minY = y;
1099 }
1100 }
1101 }
1102
1103 return [minY, maxY];
1104};
1105
6a1aa64f
DV
1106/**
1107 * Update the graph with new data. Data is in the format
1108 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1109 * or, if errorBars=true,
1110 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1111 * @param {Array.<Object>} data The data (see above)
1112 * @private
1113 */
285a6bda 1114Dygraph.prototype.drawGraph_ = function(data) {
3bd9c228 1115 var minY = null, maxY = null;
6a1aa64f 1116 this.layout_.removeAllDatasets();
285a6bda 1117 this.setColors_();
9317362d 1118 this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
285a6bda 1119
6a1aa64f
DV
1120 // Loop over all fields in the dataset
1121 for (var i = 1; i < data[0].length; i++) {
1122 var series = [];
1123 for (var j = 0; j < data.length; j++) {
1124 var date = data[j][0];
1125 series[j] = [date, data[j][i]];
1126 }
1127 series = this.rollingAverage(series, this.rollPeriod_);
1128
1129 // Prune down to the desired range, if necessary (for zooming)
9922b78b 1130 var bars = this.attr_("errorBars") || this.attr_("customBars");
6a1aa64f
DV
1131 if (this.dateWindow_) {
1132 var low = this.dateWindow_[0];
1133 var high= this.dateWindow_[1];
1134 var pruned = [];
1135 for (var k = 0; k < series.length; k++) {
1136 if (series[k][0] >= low && series[k][0] <= high) {
1137 pruned.push(series[k]);
6a1aa64f
DV
1138 }
1139 }
1140 series = pruned;
6a1aa64f
DV
1141 }
1142
648acd28
DV
1143 var extremes = this.extremeValues_(series);
1144 var thisMinY = extremes[0];
1145 var thisMaxY = extremes[1];
5011e7a1
DV
1146 if (!minY || thisMinY < minY) minY = thisMinY;
1147 if (!maxY || thisMaxY > maxY) maxY = thisMaxY;
1148
6a1aa64f
DV
1149 if (bars) {
1150 var vals = [];
1151 for (var j=0; j<series.length; j++)
1152 vals[j] = [series[j][0],
1153 series[j][1][0], series[j][1][1], series[j][1][2]];
285a6bda 1154 this.layout_.addDataset(this.attr_("labels")[i], vals);
6a1aa64f 1155 } else {
285a6bda 1156 this.layout_.addDataset(this.attr_("labels")[i], series);
6a1aa64f
DV
1157 }
1158 }
1159
1160 // Use some heuristics to come up with a good maxY value, unless it's been
1161 // set explicitly by the user.
1162 if (this.valueRange_ != null) {
1163 this.addYTicks_(this.valueRange_[0], this.valueRange_[1]);
1164 } else {
1165 // Add some padding and round up to an integer to be human-friendly.
3bd9c228
DV
1166 var span = maxY - minY;
1167 var maxAxisY = maxY + 0.1 * span;
1168 var minAxisY = minY - 0.1 * span;
1169
1170 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
ceb009dd
DV
1171 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
1172 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
3bd9c228
DV
1173
1174 if (this.attr_("includeZero")) {
1175 if (maxY < 0) maxAxisY = 0;
1176 if (minY > 0) minAxisY = 0;
1177 }
1178
1179 this.addYTicks_(minAxisY, maxAxisY);
6a1aa64f
DV
1180 }
1181
1182 this.addXTicks_();
1183
1184 // Tell PlotKit to use this new data and render itself
1185 this.layout_.evaluateWithError();
1186 this.plotter_.clear();
1187 this.plotter_.render();
1188 this.canvas_.getContext('2d').clearRect(0, 0,
1189 this.canvas_.width, this.canvas_.height);
1190};
1191
1192/**
1193 * Calculates the rolling average of a data set.
1194 * If originalData is [label, val], rolls the average of those.
1195 * If originalData is [label, [, it's interpreted as [value, stddev]
1196 * and the roll is returned in the same form, with appropriately reduced
1197 * stddev for each value.
1198 * Note that this is where fractional input (i.e. '5/10') is converted into
1199 * decimal values.
1200 * @param {Array} originalData The data in the appropriate format (see above)
1201 * @param {Number} rollPeriod The number of days over which to average the data
1202 */
285a6bda 1203Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
6a1aa64f
DV
1204 if (originalData.length < 2)
1205 return originalData;
1206 var rollPeriod = Math.min(rollPeriod, originalData.length - 1);
1207 var rollingData = [];
285a6bda 1208 var sigma = this.attr_("sigma");
6a1aa64f
DV
1209
1210 if (this.fractions_) {
1211 var num = 0;
1212 var den = 0; // numerator/denominator
1213 var mult = 100.0;
1214 for (var i = 0; i < originalData.length; i++) {
1215 num += originalData[i][1][0];
1216 den += originalData[i][1][1];
1217 if (i - rollPeriod >= 0) {
1218 num -= originalData[i - rollPeriod][1][0];
1219 den -= originalData[i - rollPeriod][1][1];
1220 }
1221
1222 var date = originalData[i][0];
1223 var value = den ? num / den : 0.0;
285a6bda 1224 if (this.attr_("errorBars")) {
6a1aa64f
DV
1225 if (this.wilsonInterval_) {
1226 // For more details on this confidence interval, see:
1227 // http://en.wikipedia.org/wiki/Binomial_confidence_interval
1228 if (den) {
1229 var p = value < 0 ? 0 : value, n = den;
1230 var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
1231 var denom = 1 + sigma * sigma / den;
1232 var low = (p + sigma * sigma / (2 * den) - pm) / denom;
1233 var high = (p + sigma * sigma / (2 * den) + pm) / denom;
1234 rollingData[i] = [date,
1235 [p * mult, (p - low) * mult, (high - p) * mult]];
1236 } else {
1237 rollingData[i] = [date, [0, 0, 0]];
1238 }
1239 } else {
1240 var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
1241 rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
1242 }
1243 } else {
1244 rollingData[i] = [date, mult * value];
1245 }
1246 }
9922b78b 1247 } else if (this.attr_("customBars")) {
f6885d6a
DV
1248 var low = 0;
1249 var mid = 0;
1250 var high = 0;
1251 var count = 0;
6a1aa64f
DV
1252 for (var i = 0; i < originalData.length; i++) {
1253 var data = originalData[i][1];
1254 var y = data[1];
1255 rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
f6885d6a
DV
1256
1257 low += data[0];
1258 mid += y;
1259 high += data[2];
1260 count += 1;
1261 if (i - rollPeriod >= 0) {
1262 var prev = originalData[i - rollPeriod];
1263 low -= prev[1][0];
1264 mid -= prev[1][1];
1265 high -= prev[1][2];
1266 count -= 1;
1267 }
1268 rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
1269 1.0 * (mid - low) / count,
1270 1.0 * (high - mid) / count ]];
2769de62 1271 }
6a1aa64f
DV
1272 } else {
1273 // Calculate the rolling average for the first rollPeriod - 1 points where
1274 // there is not enough data to roll over the full number of days
1275 var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
285a6bda 1276 if (!this.attr_("errorBars")){
5011e7a1
DV
1277 if (rollPeriod == 1) {
1278 return originalData;
1279 }
1280
2847c1cf 1281 for (var i = 0; i < originalData.length; i++) {
6a1aa64f 1282 var sum = 0;
5011e7a1 1283 var num_ok = 0;
2847c1cf
DV
1284 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
1285 var y = originalData[j][1];
5011e7a1
DV
1286 if (!y || isNaN(y)) continue;
1287 num_ok++;
2847c1cf 1288 sum += originalData[j][1];
6a1aa64f 1289 }
5011e7a1 1290 if (num_ok) {
2847c1cf 1291 rollingData[i] = [originalData[i][0], sum / num_ok];
5011e7a1 1292 } else {
2847c1cf 1293 rollingData[i] = [originalData[i][0], null];
5011e7a1 1294 }
6a1aa64f 1295 }
2847c1cf
DV
1296
1297 } else {
1298 for (var i = 0; i < originalData.length; i++) {
6a1aa64f
DV
1299 var sum = 0;
1300 var variance = 0;
5011e7a1 1301 var num_ok = 0;
2847c1cf 1302 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
5011e7a1
DV
1303 var y = originalData[j][1][0];
1304 if (!y || isNaN(y)) continue;
1305 num_ok++;
6a1aa64f
DV
1306 sum += originalData[j][1][0];
1307 variance += Math.pow(originalData[j][1][1], 2);
1308 }
5011e7a1
DV
1309 if (num_ok) {
1310 var stddev = Math.sqrt(variance) / num_ok;
1311 rollingData[i] = [originalData[i][0],
1312 [sum / num_ok, sigma * stddev, sigma * stddev]];
1313 } else {
1314 rollingData[i] = [originalData[i][0], [null, null, null]];
1315 }
6a1aa64f
DV
1316 }
1317 }
1318 }
1319
1320 return rollingData;
1321};
1322
1323/**
1324 * Parses a date, returning the number of milliseconds since epoch. This can be
285a6bda
DV
1325 * passed in as an xValueParser in the Dygraph constructor.
1326 * TODO(danvk): enumerate formats that this understands.
6a1aa64f
DV
1327 * @param {String} A date in YYYYMMDD format.
1328 * @return {Number} Milliseconds since epoch.
1329 * @public
1330 */
285a6bda 1331Dygraph.dateParser = function(dateStr, self) {
6a1aa64f 1332 var dateStrSlashed;
285a6bda 1333 var d;
2769de62 1334 if (dateStr.length == 10 && dateStr.search("-") != -1) { // e.g. '2009-07-12'
6a1aa64f 1335 dateStrSlashed = dateStr.replace("-", "/", "g");
353a0294
DV
1336 while (dateStrSlashed.search("-") != -1) {
1337 dateStrSlashed = dateStrSlashed.replace("-", "/");
1338 }
285a6bda 1339 d = Date.parse(dateStrSlashed);
2769de62 1340 } else if (dateStr.length == 8) { // e.g. '20090712'
285a6bda 1341 // TODO(danvk): remove support for this format. It's confusing.
6a1aa64f
DV
1342 dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
1343 + "/" + dateStr.substr(6,2);
285a6bda 1344 d = Date.parse(dateStrSlashed);
2769de62
DV
1345 } else {
1346 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1347 // "2009/07/12 12:34:56"
285a6bda
DV
1348 d = Date.parse(dateStr);
1349 }
1350
1351 if (!d || isNaN(d)) {
1352 self.error("Couldn't parse " + dateStr + " as a date");
1353 }
1354 return d;
1355};
1356
1357/**
1358 * Detects the type of the str (date or numeric) and sets the various
1359 * formatting attributes in this.attrs_ based on this type.
1360 * @param {String} str An x value.
1361 * @private
1362 */
1363Dygraph.prototype.detectTypeFromString_ = function(str) {
1364 var isDate = false;
1365 if (str.indexOf('-') >= 0 ||
1366 str.indexOf('/') >= 0 ||
1367 isNaN(parseFloat(str))) {
1368 isDate = true;
1369 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
1370 // TODO(danvk): remove support for this format.
1371 isDate = true;
1372 }
1373
1374 if (isDate) {
1375 this.attrs_.xValueFormatter = Dygraph.dateString_;
1376 this.attrs_.xValueParser = Dygraph.dateParser;
1377 this.attrs_.xTicker = Dygraph.dateTicker;
1378 } else {
1379 this.attrs_.xValueFormatter = function(x) { return x; };
1380 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
1381 this.attrs_.xTicker = Dygraph.numericTicks;
6a1aa64f 1382 }
6a1aa64f
DV
1383};
1384
1385/**
1386 * Parses a string in a special csv format. We expect a csv file where each
1387 * line is a date point, and the first field in each line is the date string.
1388 * We also expect that all remaining fields represent series.
285a6bda 1389 * if the errorBars attribute is set, then interpret the fields as:
6a1aa64f
DV
1390 * date, series1, stddev1, series2, stddev2, ...
1391 * @param {Array.<Object>} data See above.
1392 * @private
285a6bda
DV
1393 *
1394 * @return Array.<Object> An array with one entry for each row. These entries
1395 * are an array of cells in that row. The first entry is the parsed x-value for
1396 * the row. The second, third, etc. are the y-values. These can take on one of
1397 * three forms, depending on the CSV and constructor parameters:
1398 * 1. numeric value
1399 * 2. [ value, stddev ]
1400 * 3. [ low value, center value, high value ]
6a1aa64f 1401 */
285a6bda 1402Dygraph.prototype.parseCSV_ = function(data) {
6a1aa64f
DV
1403 var ret = [];
1404 var lines = data.split("\n");
285a6bda 1405 var start = 0;
6a1aa64f 1406 if (this.labelsFromCSV_) {
285a6bda
DV
1407 start = 1;
1408 this.attrs_.labels = lines[0].split(",");
6a1aa64f
DV
1409 }
1410
285a6bda
DV
1411 var xParser;
1412 var defaultParserSet = false; // attempt to auto-detect x value type
1413 var expectedCols = this.attr_("labels").length;
6a1aa64f
DV
1414 for (var i = start; i < lines.length; i++) {
1415 var line = lines[i];
1416 if (line.length == 0) continue; // skip blank lines
1417 var inFields = line.split(',');
285a6bda 1418 if (inFields.length < 2) continue;
6a1aa64f
DV
1419
1420 var fields = [];
285a6bda
DV
1421 if (!defaultParserSet) {
1422 this.detectTypeFromString_(inFields[0]);
1423 xParser = this.attr_("xValueParser");
1424 defaultParserSet = true;
1425 }
1426 fields[0] = xParser(inFields[0], this);
6a1aa64f
DV
1427
1428 // If fractions are expected, parse the numbers as "A/B"
1429 if (this.fractions_) {
1430 for (var j = 1; j < inFields.length; j++) {
1431 // TODO(danvk): figure out an appropriate way to flag parse errors.
1432 var vals = inFields[j].split("/");
1433 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1434 }
285a6bda 1435 } else if (this.attr_("errorBars")) {
6a1aa64f
DV
1436 // If there are error bars, values are (value, stddev) pairs
1437 for (var j = 1; j < inFields.length; j += 2)
1438 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1439 parseFloat(inFields[j + 1])];
9922b78b 1440 } else if (this.attr_("customBars")) {
6a1aa64f
DV
1441 // Bars are a low;center;high tuple
1442 for (var j = 1; j < inFields.length; j++) {
1443 var vals = inFields[j].split(";");
1444 fields[j] = [ parseFloat(vals[0]),
1445 parseFloat(vals[1]),
1446 parseFloat(vals[2]) ];
1447 }
1448 } else {
1449 // Values are just numbers
285a6bda 1450 for (var j = 1; j < inFields.length; j++) {
6a1aa64f 1451 fields[j] = parseFloat(inFields[j]);
285a6bda 1452 }
6a1aa64f
DV
1453 }
1454 ret.push(fields);
285a6bda
DV
1455
1456 if (fields.length != expectedCols) {
1457 this.error("Number of columns in line " + i + " (" + fields.length +
1458 ") does not agree with number of labels (" + expectedCols +
1459 ") " + line);
1460 }
6a1aa64f
DV
1461 }
1462 return ret;
1463};
1464
1465/**
285a6bda
DV
1466 * The user has provided their data as a pre-packaged JS array. If the x values
1467 * are numeric, this is the same as dygraphs' internal format. If the x values
1468 * are dates, we need to convert them from Date objects to ms since epoch.
1469 * @param {Array.<Object>} data
1470 * @return {Array.<Object>} data with numeric x values.
1471 */
1472Dygraph.prototype.parseArray_ = function(data) {
1473 // Peek at the first x value to see if it's numeric.
1474 if (data.length == 0) {
1475 this.error("Can't plot empty data set");
1476 return null;
1477 }
1478 if (data[0].length == 0) {
1479 this.error("Data set cannot contain an empty row");
1480 return null;
1481 }
1482
1483 if (this.attr_("labels") == null) {
1484 this.warn("Using default labels. Set labels explicitly via 'labels' " +
1485 "in the options parameter");
1486 this.attrs_.labels = [ "X" ];
1487 for (var i = 1; i < data[0].length; i++) {
1488 this.attrs_.labels.push("Y" + i);
1489 }
1490 }
1491
2dda3850 1492 if (Dygraph.isDateLike(data[0][0])) {
285a6bda
DV
1493 // Some intelligent defaults for a date x-axis.
1494 this.attrs_.xValueFormatter = Dygraph.dateString_;
1495 this.attrs_.xTicker = Dygraph.dateTicker;
1496
1497 // Assume they're all dates.
e3ab7b40 1498 var parsedData = Dygraph.clone(data);
285a6bda
DV
1499 for (var i = 0; i < data.length; i++) {
1500 if (parsedData[i].length == 0) {
1501 this.error("Row " << (1 + i) << " of data is empty");
1502 return null;
1503 }
1504 if (parsedData[i][0] == null
1505 || typeof(parsedData[i][0].getTime) != 'function') {
1506 this.error("x value in row " << (1 + i) << " is not a Date");
1507 return null;
1508 }
1509 parsedData[i][0] = parsedData[i][0].getTime();
1510 }
1511 return parsedData;
1512 } else {
1513 // Some intelligent defaults for a numeric x-axis.
1514 this.attrs_.xValueFormatter = function(x) { return x; };
1515 this.attrs_.xTicker = Dygraph.numericTicks;
1516 return data;
1517 }
1518};
1519
1520/**
79420a1e
DV
1521 * Parses a DataTable object from gviz.
1522 * The data is expected to have a first column that is either a date or a
1523 * number. All subsequent columns must be numbers. If there is a clear mismatch
1524 * between this.xValueParser_ and the type of the first column, it will be
1525 * fixed. Returned value is in the same format as return value of parseCSV_.
1526 * @param {Array.<Object>} data See above.
1527 * @private
1528 */
285a6bda 1529Dygraph.prototype.parseDataTable_ = function(data) {
79420a1e
DV
1530 var cols = data.getNumberOfColumns();
1531 var rows = data.getNumberOfRows();
1532
1533 // Read column labels
1534 var labels = [];
1535 for (var i = 0; i < cols; i++) {
1536 labels.push(data.getColumnLabel(i));
1537 }
285a6bda 1538 this.attrs_.labels = labels;
79420a1e 1539
d955e223 1540 var indepType = data.getColumnType(0);
285a6bda
DV
1541 if (indepType == 'date') {
1542 this.attrs_.xValueFormatter = Dygraph.dateString_;
1543 this.attrs_.xValueParser = Dygraph.dateParser;
1544 this.attrs_.xTicker = Dygraph.dateTicker;
33127159 1545 } else if (indepType == 'number') {
285a6bda
DV
1546 this.attrs_.xValueFormatter = function(x) { return x; };
1547 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
1548 this.attrs_.xTicker = Dygraph.numericTicks;
1549 } else {
33127159 1550 this.error("only 'date' and 'number' types are supported for column 1 " +
285a6bda 1551 "of DataTable input (Got '" + indepType + "')");
79420a1e
DV
1552 return null;
1553 }
1554
1555 var ret = [];
1556 for (var i = 0; i < rows; i++) {
1557 var row = [];
b3b20e24 1558 if (!data.getValue(i, 0)) continue;
d955e223
DV
1559 if (indepType == 'date') {
1560 row.push(data.getValue(i, 0).getTime());
1561 } else {
1562 row.push(data.getValue(i, 0));
1563 }
79420a1e
DV
1564 for (var j = 1; j < cols; j++) {
1565 row.push(data.getValue(i, j));
1566 }
243d96e8 1567 ret.push(row);
79420a1e
DV
1568 }
1569 return ret;
1570}
1571
24e5350c 1572// These functions are all based on MochiKit.
fc80a396
DV
1573Dygraph.update = function (self, o) {
1574 if (typeof(o) != 'undefined' && o !== null) {
1575 for (var k in o) {
1576 self[k] = o[k];
1577 }
1578 }
1579 return self;
1580};
1581
2dda3850
DV
1582Dygraph.isArrayLike = function (o) {
1583 var typ = typeof(o);
1584 if (
1585 (typ != 'object' && !(typ == 'function' &&
1586 typeof(o.item) == 'function')) ||
1587 o === null ||
1588 typeof(o.length) != 'number' ||
1589 o.nodeType === 3
1590 ) {
1591 return false;
1592 }
1593 return true;
1594};
1595
1596Dygraph.isDateLike = function (o) {
1597 if (typeof(o) != "object" || o === null ||
1598 typeof(o.getTime) != 'function') {
1599 return false;
1600 }
1601 return true;
1602};
1603
e3ab7b40
DV
1604Dygraph.clone = function(o) {
1605 // TODO(danvk): figure out how MochiKit's version works
1606 var r = [];
1607 for (var i = 0; i < o.length; i++) {
1608 if (Dygraph.isArrayLike(o[i])) {
1609 r.push(Dygraph.clone(o[i]));
1610 } else {
1611 r.push(o[i]);
1612 }
1613 }
1614 return r;
24e5350c
DV
1615};
1616
2dda3850 1617
79420a1e 1618/**
6a1aa64f
DV
1619 * Get the CSV data. If it's in a function, call that function. If it's in a
1620 * file, do an XMLHttpRequest to get it.
1621 * @private
1622 */
285a6bda 1623Dygraph.prototype.start_ = function() {
6a1aa64f 1624 if (typeof this.file_ == 'function') {
285a6bda 1625 // CSV string. Pretend we got it via XHR.
6a1aa64f 1626 this.loadedEvent_(this.file_());
2dda3850 1627 } else if (Dygraph.isArrayLike(this.file_)) {
285a6bda
DV
1628 this.rawData_ = this.parseArray_(this.file_);
1629 this.drawGraph_(this.rawData_);
79420a1e
DV
1630 } else if (typeof this.file_ == 'object' &&
1631 typeof this.file_.getColumnRange == 'function') {
1632 // must be a DataTable from gviz.
1633 this.rawData_ = this.parseDataTable_(this.file_);
1634 this.drawGraph_(this.rawData_);
285a6bda
DV
1635 } else if (typeof this.file_ == 'string') {
1636 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1637 if (this.file_.indexOf('\n') >= 0) {
1638 this.loadedEvent_(this.file_);
1639 } else {
1640 var req = new XMLHttpRequest();
1641 var caller = this;
1642 req.onreadystatechange = function () {
1643 if (req.readyState == 4) {
1644 if (req.status == 200) {
1645 caller.loadedEvent_(req.responseText);
1646 }
6a1aa64f 1647 }
285a6bda 1648 };
6a1aa64f 1649
285a6bda
DV
1650 req.open("GET", this.file_, true);
1651 req.send(null);
1652 }
1653 } else {
1654 this.error("Unknown data format: " + (typeof this.file_));
6a1aa64f
DV
1655 }
1656};
1657
1658/**
1659 * Changes various properties of the graph. These can include:
1660 * <ul>
1661 * <li>file: changes the source data for the graph</li>
1662 * <li>errorBars: changes whether the data contains stddev</li>
1663 * </ul>
1664 * @param {Object} attrs The new properties and values
1665 */
285a6bda
DV
1666Dygraph.prototype.updateOptions = function(attrs) {
1667 // TODO(danvk): this is a mess. Rethink this function.
6a1aa64f
DV
1668 if (attrs.rollPeriod) {
1669 this.rollPeriod_ = attrs.rollPeriod;
1670 }
1671 if (attrs.dateWindow) {
1672 this.dateWindow_ = attrs.dateWindow;
1673 }
1674 if (attrs.valueRange) {
1675 this.valueRange_ = attrs.valueRange;
1676 }
fc80a396 1677 Dygraph.update(this.user_attrs_, attrs);
285a6bda
DV
1678
1679 this.labelsFromCSV_ = (this.attr_("labels") == null);
1680
1681 // TODO(danvk): this doesn't match the constructor logic
1682 this.layout_.updateOptions({ 'errorBars': this.attr_("errorBars") });
6a1aa64f
DV
1683 if (attrs['file'] && attrs['file'] != this.file_) {
1684 this.file_ = attrs['file'];
1685 this.start_();
1686 } else {
1687 this.drawGraph_(this.rawData_);
1688 }
1689};
1690
1691/**
1692 * Adjusts the number of days in the rolling average. Updates the graph to
1693 * reflect the new averaging period.
1694 * @param {Number} length Number of days over which to average the data.
1695 */
285a6bda 1696Dygraph.prototype.adjustRoll = function(length) {
6a1aa64f
DV
1697 this.rollPeriod_ = length;
1698 this.drawGraph_(this.rawData_);
1699};
540d00f1
DV
1700
1701
1702/**
285a6bda 1703 * A wrapper around Dygraph that implements the gviz API.
540d00f1
DV
1704 * @param {Object} container The DOM object the visualization should live in.
1705 */
285a6bda 1706Dygraph.GVizChart = function(container) {
540d00f1
DV
1707 this.container = container;
1708}
1709
285a6bda 1710Dygraph.GVizChart.prototype.draw = function(data, options) {
540d00f1 1711 this.container.innerHTML = '';
285a6bda 1712 this.date_graph = new Dygraph(this.container, data, options);
540d00f1 1713}
285a6bda
DV
1714
1715// Older pages may still use this name.
1716DateGraph = Dygraph;