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