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