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