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