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