1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
27 Date,SeriesA,SeriesB,...
28 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
29 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
31 If the 'fractions' option is set, the input should be of the form:
33 Date,SeriesA,SeriesB,...
34 YYYYMMDD,A1/B1,A2/B2,...
35 YYYYMMDD,A1/B1,A2/B2,...
37 And error bars will be calculated automatically using a binomial distribution.
39 For further documentation and examples, see http://dygraphs.com/
44 * An interactive, zoomable graph
45 * @param {String | Function} file A file containing CSV data or a function that
46 * returns this data. The expected format for each line is
47 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
48 * YYYYMMDD,val1,stddev1,val2,stddev2,...
49 * @param {Object} attrs Various other attributes, e.g. errorBars determines
50 * whether the input data contains error ranges.
52 Dygraph
= function(div
, data
, opts
) {
53 if (arguments
.length
> 0) {
54 if (arguments
.length
== 4) {
55 // Old versions of dygraphs took in the series labels as a constructor
56 // parameter. This doesn't make sense anymore, but it's easy to continue
57 // to support this usage.
58 this.warn("Using deprecated four-argument dygraph constructor");
59 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
61 this.__init__(div
, data
, opts
);
66 Dygraph
.NAME
= "Dygraph";
67 Dygraph
.VERSION
= "1.2";
68 Dygraph
.__repr__
= function() {
69 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
71 Dygraph
.toString
= function() {
72 return this.__repr__();
75 // Various default values
76 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
77 Dygraph
.DEFAULT_WIDTH
= 480;
78 Dygraph
.DEFAULT_HEIGHT
= 320;
79 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
81 Dygraph
.LOG_SCALE
= 10;
82 Dygraph
.LN_TEN
= Math
.log(Dygraph
.LOG_SCALE
);
83 Dygraph
.log10
= function(x
) {
84 return Math
.log(x
) / Dygraph
.LN_TEN
;
87 // Default attribute values.
88 Dygraph
.DEFAULT_ATTRS
= {
89 highlightCircleSize
: 3,
95 // TODO(danvk): move defaults from createStatusMessage_ here.
97 labelsSeparateLines
: false,
98 labelsShowZeroValues
: true,
101 showLabelsOnHighlight
: true,
103 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
108 axisLabelFontSize
: 14,
111 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
115 xValueFormatter
: Dygraph
.dateString_
,
116 xValueParser
: Dygraph
.dateParser
,
117 xTicker
: Dygraph
.dateTicker
,
124 wilsonInterval
: true, // only relevant if fractions is true
128 connectSeparatedPoints
: false,
131 hideOverlayOnMouseOut
: true,
136 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
139 // Various logging levels.
145 // Directions for panning and zooming. Use bit operations when combined
146 // values are possible.
147 Dygraph
.HORIZONTAL
= 1;
148 Dygraph
.VERTICAL
= 2;
150 // Used for initializing annotation CSS rules only once.
151 Dygraph
.addedAnnotationCSS
= false;
153 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
154 // Labels is no longer a constructor parameter, since it's typically set
155 // directly from the data source. It also conains a name for the x-axis,
156 // which the previous constructor form did not.
157 if (labels
!= null) {
158 var new_labels
= ["Date"];
159 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
160 Dygraph
.update(attrs
, { 'labels': new_labels
});
162 this.__init__(div
, file
, attrs
);
166 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
167 * and context <canvas> inside of it. See the constructor for details.
169 * @param {Element} div the Element to render the graph into.
170 * @param {String | Function} file Source data
171 * @param {Object} attrs Miscellaneous other options
174 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
175 // Hack for IE: if we're using excanvas and the document hasn't finished
176 // loading yet (and hence may not have initialized whatever it needs to
177 // initialize), then keep calling this routine periodically until it has.
178 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
179 typeof(G_vmlCanvasManager
) != 'undefined' &&
180 document
.readyState
!= 'complete') {
182 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
185 // Support two-argument constructor
186 if (attrs
== null) { attrs
= {}; }
188 // Copy the important bits into the object
189 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
192 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
193 this.previousVerticalX_
= -1;
194 this.fractions_
= attrs
.fractions
|| false;
195 this.dateWindow_
= attrs
.dateWindow
|| null;
197 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
198 this.is_initial_draw_
= true;
199 this.annotations_
= [];
201 // Clear the div. This ensure that, if multiple dygraphs are passed the same
202 // div, then only one will be drawn.
205 // If the div isn't already sized then inherit from our attrs or
206 // give it a default size.
207 if (div
.style
.width
== '') {
208 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
210 if (div
.style
.height
== '') {
211 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
213 this.width_
= parseInt(div
.style
.width
, 10);
214 this.height_
= parseInt(div
.style
.height
, 10);
215 // The div might have been specified as percent of the current window size,
216 // convert that to an appropriate number of pixels.
217 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
218 this.width_
= div
.offsetWidth
;
220 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
221 this.height_
= div
.offsetHeight
;
224 if (this.width_
== 0) {
225 this.error("dygraph has zero width. Please specify a width in pixels.");
227 if (this.height_
== 0) {
228 this.error("dygraph has zero height. Please specify a height in pixels.");
231 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
232 if (attrs
['stackedGraph']) {
233 attrs
['fillGraph'] = true;
234 // TODO(nikhilk): Add any other stackedGraph checks here.
237 // Dygraphs has many options, some of which interact with one another.
238 // To keep track of everything, we maintain two sets of options:
240 // this.user_attrs_ only options explicitly set by the user.
241 // this.attrs_ defaults, options derived from user_attrs_, data.
243 // Options are then accessed this.attr_('attr'), which first looks at
244 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
245 // defaults without overriding behavior that the user specifically asks for.
246 this.user_attrs_
= {};
247 Dygraph
.update(this.user_attrs_
, attrs
);
250 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
252 this.boundaryIds_
= [];
254 // Make a note of whether labels will be pulled from the CSV file.
255 this.labelsFromCSV_
= (this.attr_("labels") == null);
257 // Create the containing DIV and other interactive elements
258 this.createInterface_();
263 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
265 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
266 this.user_attrs_
[seriesName
] != null &&
267 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
268 return this.user_attrs_
[seriesName
][name
];
269 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
270 return this.user_attrs_
[name
];
271 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
272 return this.attrs_
[name
];
278 // TODO(danvk): any way I can get the line numbers to be this.warn call?
279 Dygraph
.prototype.log
= function(severity
, message
) {
280 if (typeof(console
) != 'undefined') {
283 console
.debug('dygraphs: ' + message
);
286 console
.info('dygraphs: ' + message
);
288 case Dygraph
.WARNING
:
289 console
.warn('dygraphs: ' + message
);
292 console
.error('dygraphs: ' + message
);
297 Dygraph
.prototype.info
= function(message
) {
298 this.log(Dygraph
.INFO
, message
);
300 Dygraph
.prototype.warn
= function(message
) {
301 this.log(Dygraph
.WARNING
, message
);
303 Dygraph
.prototype.error
= function(message
) {
304 this.log(Dygraph
.ERROR
, message
);
308 * Returns the current rolling period, as set by the user or an option.
309 * @return {Number} The number of days in the rolling window
311 Dygraph
.prototype.rollPeriod
= function() {
312 return this.rollPeriod_
;
316 * Returns the currently-visible x-range. This can be affected by zooming,
317 * panning or a call to updateOptions.
318 * Returns a two-element array: [left, right].
319 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
321 Dygraph
.prototype.xAxisRange
= function() {
322 if (this.dateWindow_
) return this.dateWindow_
;
324 // The entire chart is visible.
325 var left
= this.rawData_
[0][0];
326 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
327 return [left
, right
];
331 * Returns the currently-visible y-range for an axis. This can be affected by
332 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
333 * called with no arguments, returns the range of the first axis.
334 * Returns a two-element array: [bottom, top].
336 Dygraph
.prototype.yAxisRange
= function(idx
) {
337 if (typeof(idx
) == "undefined") idx
= 0;
338 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
339 return [ this.axes_
[idx
].computedValueRange
[0],
340 this.axes_
[idx
].computedValueRange
[1] ];
344 * Returns the currently-visible y-ranges for each axis. This can be affected by
345 * zooming, panning, calls to updateOptions, etc.
346 * Returns an array of [bottom, top] pairs, one for each y-axis.
348 Dygraph
.prototype.yAxisRanges
= function() {
350 for (var i
= 0; i
< this.axes_
.length
; i
++) {
351 ret
.push(this.yAxisRange(i
));
356 // TODO(danvk): use these functions throughout dygraphs.
358 * Convert from data coordinates to canvas/div X/Y coordinates.
359 * If specified, do this conversion for the coordinate system of a particular
360 * axis. Uses the first axis by default.
361 * Returns a two-element array: [X, Y]
363 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
364 * instead of toDomCoords(null, y, axis).
366 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
367 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
371 * Convert from data x coordinates to canvas/div X coordinate.
372 * If specified, do this conversion for the coordinate system of a particular
374 * Returns a single value or null if x is null.
376 Dygraph
.prototype.toDomXCoord
= function(x
) {
381 var area
= this.plotter_
.area
;
382 var xRange
= this.xAxisRange();
383 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
387 * Convert from data x coordinates to canvas/div Y coordinate and optional
388 * axis. Uses the first axis by default.
390 * returns a single value or null if y is null.
392 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
393 var pct
= this.toPercentYCoord(y
, axis
);
398 var area
= this.plotter_
.area
;
399 return area
.y
+ pct
* area
.h
;
403 * Convert from canvas/div coords to data coordinates.
404 * If specified, do this conversion for the coordinate system of a particular
405 * axis. Uses the first axis by default.
406 * Returns a two-element array: [X, Y].
408 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
409 * instead of toDataCoords(null, y, axis).
411 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
412 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
416 * Convert from canvas/div x coordinate to data coordinate.
418 * If x is null, this returns null.
420 Dygraph
.prototype.toDataXCoord
= function(x
) {
425 var area
= this.plotter_
.area
;
426 var xRange
= this.xAxisRange();
427 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
431 * Convert from canvas/div y coord to value.
433 * If y is null, this returns null.
434 * if axis is null, this uses the first axis.
436 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
441 var area
= this.plotter_
.area
;
442 var yRange
= this.yAxisRange(axis
);
444 if (typeof(axis
) == "undefined") axis
= 0;
445 if (!this.axes_
[axis
].logscale
) {
446 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
448 // Computing the inverse of toDomCoord.
449 var pct
= (y
- area
.y
) / area
.h
451 // Computing the inverse of toPercentYCoord. The function was arrived at with
452 // the following steps:
454 // Original calcuation:
455 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
457 // Move denominator to both sides:
458 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
460 // subtract logr1, and take the negative value.
461 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
463 // Swap both sides of the equation, and we can compute the log of the
464 // return value. Which means we just need to use that as the exponent in
466 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
468 var logr1
= Dygraph
.log10(yRange
[1]);
469 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
470 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
476 * Converts a y for an axis to a percentage from the top to the
479 * If the coordinate represents a value visible on the canvas, then
480 * the value will be between 0 and 1, where 0 is the top of the canvas.
481 * However, this method will return values outside the range, as
482 * values can fall outside the canvas.
484 * If y is null, this returns null.
485 * if axis is null, this uses the first axis.
487 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
491 if (typeof(axis
) == "undefined") axis
= 0;
493 var area
= this.plotter_
.area
;
494 var yRange
= this.yAxisRange(axis
);
497 if (!this.axes_
[axis
].logscale
) {
498 // yrange[1] - y is unit distance from the bottom.
499 // yrange[1] - yrange[0] is the scale of the range.
500 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
501 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
503 var logr1
= Dygraph
.log10(yRange
[1]);
504 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
510 * Returns the number of columns (including the independent variable).
512 Dygraph
.prototype.numColumns
= function() {
513 return this.rawData_
[0].length
;
517 * Returns the number of rows (excluding any header/label row).
519 Dygraph
.prototype.numRows
= function() {
520 return this.rawData_
.length
;
524 * Returns the value in the given row and column. If the row and column exceed
525 * the bounds on the data, returns null. Also returns null if the value is
528 Dygraph
.prototype.getValue
= function(row
, col
) {
529 if (row
< 0 || row
> this.rawData_
.length
) return null;
530 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
532 return this.rawData_
[row
][col
];
535 Dygraph
.addEvent
= function(el
, evt
, fn
) {
536 var normed_fn
= function(e
) {
537 if (!e
) var e
= window
.event
;
540 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
541 el
.addEventListener(evt
, normed_fn
, false);
543 el
.attachEvent('on' + evt
, normed_fn
);
548 // Based on the article at
549 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
550 Dygraph
.cancelEvent
= function(e
) {
551 e
= e
? e
: window
.event
;
552 if (e
.stopPropagation
) {
555 if (e
.preventDefault
) {
558 e
.cancelBubble
= true;
560 e
.returnValue
= false;
565 * Generates interface elements for the Dygraph: a containing div, a div to
566 * display the current point, and a textbox to adjust the rolling average
567 * period. Also creates the Renderer/Layout elements.
570 Dygraph
.prototype.createInterface_
= function() {
571 // Create the all-enclosing graph div
572 var enclosing
= this.maindiv_
;
574 this.graphDiv
= document
.createElement("div");
575 this.graphDiv
.style
.width
= this.width_
+ "px";
576 this.graphDiv
.style
.height
= this.height_
+ "px";
577 enclosing
.appendChild(this.graphDiv
);
579 // Create the canvas for interactive parts of the chart.
580 this.canvas_
= Dygraph
.createCanvas();
581 this.canvas_
.style
.position
= "absolute";
582 this.canvas_
.width
= this.width_
;
583 this.canvas_
.height
= this.height_
;
584 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
585 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
587 // ... and for static parts of the chart.
588 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
590 // The interactive parts of the graph are drawn on top of the chart.
591 this.graphDiv
.appendChild(this.hidden_
);
592 this.graphDiv
.appendChild(this.canvas_
);
593 this.mouseEventElement_
= this.canvas_
;
596 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
597 dygraph
.mouseMove_(e
);
599 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
600 dygraph
.mouseOut_(e
);
603 // Create the grapher
604 // TODO(danvk): why does the Layout need its own set of options?
605 this.layoutOptions_
= { 'xOriginIsZero': false };
606 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
607 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
608 Dygraph
.update(this.layoutOptions_
, {
609 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
611 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
613 // TODO(danvk): why does the Renderer need its own set of options?
614 this.renderOptions_
= { colorScheme
: this.colors_
,
616 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
617 Dygraph
.update(this.renderOptions_
, this.attrs_
);
618 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
620 this.createStatusMessage_();
621 this.createDragInterface_();
625 * Detach DOM elements in the dygraph and null out all data references.
626 * Calling this when you're done with a dygraph can dramatically reduce memory
627 * usage. See, e.g., the tests/perf.html example.
629 Dygraph
.prototype.destroy
= function() {
630 var removeRecursive
= function(node
) {
631 while (node
.hasChildNodes()) {
632 removeRecursive(node
.firstChild
);
633 node
.removeChild(node
.firstChild
);
636 removeRecursive(this.maindiv_
);
638 var nullOut
= function(obj
) {
640 if (typeof(obj
[n
]) === 'object') {
646 // These may not all be necessary, but it can't hurt...
647 nullOut(this.layout_
);
648 nullOut(this.plotter_
);
653 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
654 * this particular canvas. All Dygraph work is done on this.canvas_.
655 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
656 * @return {Object} The newly-created canvas
659 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
660 var h
= Dygraph
.createCanvas();
661 h
.style
.position
= "absolute";
662 // TODO(danvk): h should be offset from canvas. canvas needs to include
663 // some extra area to make it easier to zoom in on the far left and far
664 // right. h needs to be precisely the plot area, so that clipping occurs.
665 h
.style
.top
= canvas
.style
.top
;
666 h
.style
.left
= canvas
.style
.left
;
667 h
.width
= this.width_
;
668 h
.height
= this.height_
;
669 h
.style
.width
= this.width_
+ "px"; // for IE
670 h
.style
.height
= this.height_
+ "px"; // for IE
674 // Taken from MochiKit.Color
675 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
679 if (saturation
=== 0) {
684 var i
= Math
.floor(hue
* 6);
685 var f
= (hue
* 6) - i
;
686 var p
= value
* (1 - saturation
);
687 var q
= value
* (1 - (saturation
* f
));
688 var t
= value
* (1 - (saturation
* (1 - f
)));
690 case 1: red
= q
; green
= value
; blue
= p
; break;
691 case 2: red
= p
; green
= value
; blue
= t
; break;
692 case 3: red
= p
; green
= q
; blue
= value
; break;
693 case 4: red
= t
; green
= p
; blue
= value
; break;
694 case 5: red
= value
; green
= p
; blue
= q
; break;
695 case 6: // fall through
696 case 0: red
= value
; green
= t
; blue
= p
; break;
699 red
= Math
.floor(255 * red
+ 0.5);
700 green
= Math
.floor(255 * green
+ 0.5);
701 blue
= Math
.floor(255 * blue
+ 0.5);
702 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
707 * Generate a set of distinct colors for the data series. This is done with a
708 * color wheel. Saturation/Value are customizable, and the hue is
709 * equally-spaced around the color wheel. If a custom set of colors is
710 * specified, that is used instead.
713 Dygraph
.prototype.setColors_
= function() {
714 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
715 // away with this.renderOptions_.
716 var num
= this.attr_("labels").length
- 1;
718 var colors
= this.attr_('colors');
720 var sat
= this.attr_('colorSaturation') || 1.0;
721 var val
= this.attr_('colorValue') || 0.5;
722 var half
= Math
.ceil(num
/ 2);
723 for (var i
= 1; i
<= num
; i
++) {
724 if (!this.visibility()[i
-1]) continue;
725 // alternate colors for high contrast.
726 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
727 var hue
= (1.0 * idx
/ (1 + num
));
728 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
731 for (var i
= 0; i
< num
; i
++) {
732 if (!this.visibility()[i
]) continue;
733 var colorStr
= colors
[i
% colors
.length
];
734 this.colors_
.push(colorStr
);
738 // TODO(danvk): update this w/r
/t/ the
new options system
.
739 this.renderOptions_
.colorScheme
= this.colors_
;
740 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
741 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
742 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
746 * Return the list of colors. This is either the list of colors passed in the
747 * attributes, or the autogenerated list of rgb(r,g,b) strings.
748 * @return {Array<string>} The list of colors.
750 Dygraph
.prototype.getColors
= function() {
754 // The following functions are from quirksmode.org with a modification for Safari from
755 // http://blog.firetree.net/2005/07/04/javascript-find-position/
756 // http://www.quirksmode.org/js
/findpos
.html
757 Dygraph
.findPosX
= function(obj
) {
762 curleft
+= obj
.offsetLeft
;
763 if(!obj
.offsetParent
)
765 obj
= obj
.offsetParent
;
772 Dygraph
.findPosY
= function(obj
) {
777 curtop
+= obj
.offsetTop
;
778 if(!obj
.offsetParent
)
780 obj
= obj
.offsetParent
;
790 * Create the div that contains information on the selected point(s)
791 * This goes in the top right of the canvas, unless an external div has already
795 Dygraph
.prototype.createStatusMessage_
= function() {
796 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
797 if (userLabelsDiv
&& null != userLabelsDiv
798 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
799 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
801 if (!this.attr_("labelsDiv")) {
802 var divWidth
= this.attr_('labelsDivWidth');
804 "position": "absolute",
807 "width": divWidth
+ "px",
809 "left": (this.width_
- divWidth
- 2) + "px",
810 "background": "white",
812 "overflow": "hidden"};
813 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
814 var div
= document
.createElement("div");
815 for (var name
in messagestyle
) {
816 if (messagestyle
.hasOwnProperty(name
)) {
817 div
.style
[name
] = messagestyle
[name
];
820 this.graphDiv
.appendChild(div
);
821 this.attrs_
.labelsDiv
= div
;
826 * Position the labels div so that its right edge is flush with the right edge
827 * of the charting area.
829 Dygraph
.prototype.positionLabelsDiv_
= function() {
830 // Don't touch a user-specified labelsDiv.
831 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
833 var area
= this.plotter_
.area
;
834 var div
= this.attr_("labelsDiv");
835 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
839 * Create the text box to adjust the averaging period
842 Dygraph
.prototype.createRollInterface_
= function() {
843 // Create a roller if one doesn't exist already.
845 this.roller_
= document
.createElement("input");
846 this.roller_
.type
= "text";
847 this.roller_
.style
.display
= "none";
848 this.graphDiv
.appendChild(this.roller_
);
851 var display
= this.attr_('showRoller') ? 'block' : 'none';
853 var textAttr
= { "position": "absolute",
855 "top": (this.plotter_
.area
.h
- 25) + "px",
856 "left": (this.plotter_
.area
.x
+ 1) + "px",
859 this.roller_
.size
= "2";
860 this.roller_
.value
= this.rollPeriod_
;
861 for (var name
in textAttr
) {
862 if (textAttr
.hasOwnProperty(name
)) {
863 this.roller_
.style
[name
] = textAttr
[name
];
868 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
871 // These functions are taken from MochiKit.Signal
872 Dygraph
.pageX
= function(e
) {
874 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
877 var b
= document
.body
;
879 (de
.scrollLeft
|| b
.scrollLeft
) -
880 (de
.clientLeft
|| 0);
884 Dygraph
.pageY
= function(e
) {
886 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
889 var b
= document
.body
;
891 (de
.scrollTop
|| b
.scrollTop
) -
896 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
897 return Dygraph
.pageX(e
) - context
.px
900 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
901 return Dygraph
.pageY(e
) - context
.py
904 // Called in response to an interaction model operation that
905 // should start the default panning behavior.
907 // It's used in the default callback for "mousedown" operations.
908 // Custom interaction model builders can use it to provide the default
911 Dygraph
.startPan
= function(event
, g
, context
) {
912 context
.isPanning
= true;
913 var xRange
= g
.xAxisRange();
914 context
.dateRange
= xRange
[1] - xRange
[0];
915 context
.initialLeftmostDate
= xRange
[0];
916 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
918 // Record the range of each y-axis at the start of the drag.
919 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
920 context
.is2DPan
= false;
921 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
922 var axis
= g
.axes_
[i
];
923 var yRange
= g
.yAxisRange(i
);
924 // TODO(konigsberg): These values should be in |context|.
925 axis
.dragValueRange
= yRange
[1] - yRange
[0];
926 axis
.initialTopValue
= yRange
[1];
927 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
928 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
932 // Called in response to an interaction model operation that
933 // responds to an event that pans the view.
935 // It's used in the default callback for "mousemove" operations.
936 // Custom interaction model builders can use it to provide the default
939 Dygraph
.movePan
= function(event
, g
, context
) {
940 context
.dragEndX
= g
.dragGetX_(event
, context
);
941 context
.dragEndY
= g
.dragGetY_(event
, context
);
943 var minDate
= context
.initialLeftmostDate
-
944 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
945 var maxDate
= minDate
+ context
.dateRange
;
946 g
.dateWindow_
= [minDate
, maxDate
];
948 // y-axis scaling is automatic unless this is a full 2D pan.
949 if (context
.is2DPan
) {
950 // Adjust each axis appropriately.
951 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
952 var axis
= g
.axes_
[i
];
953 var maxValue
= axis
.initialTopValue
+
954 (context
.dragEndY
- context
.dragStartY
) * axis
.unitsPerPixel
;
955 var minValue
= maxValue
- axis
.dragValueRange
;
956 axis
.valueWindow
= [ minValue
, maxValue
];
963 // Called in response to an interaction model operation that
964 // responds to an event that ends panning.
966 // It's used in the default callback for "mouseup" operations.
967 // Custom interaction model builders can use it to provide the default
970 Dygraph
.endPan
= function(event
, g
, context
) {
971 // TODO(konigsberg): Clear the context data from the axis.
972 // TODO(konigsberg): mouseup should just delete the
973 // context object, and mousedown should create a new one.
974 context
.isPanning
= false;
975 context
.is2DPan
= false;
976 context
.initialLeftmostDate
= null;
977 context
.dateRange
= null;
978 context
.valueRange
= null;
981 // Called in response to an interaction model operation that
982 // responds to an event that starts zooming.
984 // It's used in the default callback for "mousedown" operations.
985 // Custom interaction model builders can use it to provide the default
988 Dygraph
.startZoom
= function(event
, g
, context
) {
989 context
.isZooming
= true;
992 // Called in response to an interaction model operation that
993 // responds to an event that defines zoom boundaries.
995 // It's used in the default callback for "mousemove" operations.
996 // Custom interaction model builders can use it to provide the default
999 Dygraph
.moveZoom
= function(event
, g
, context
) {
1000 context
.dragEndX
= g
.dragGetX_(event
, context
);
1001 context
.dragEndY
= g
.dragGetY_(event
, context
);
1003 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1004 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1006 // drag direction threshold for y axis is twice as large as x axis
1007 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1010 context
.dragDirection
,
1015 context
.prevDragDirection
,
1019 context
.prevEndX
= context
.dragEndX
;
1020 context
.prevEndY
= context
.dragEndY
;
1021 context
.prevDragDirection
= context
.dragDirection
;
1024 // Called in response to an interaction model operation that
1025 // responds to an event that performs a zoom based on previously defined
1028 // It's used in the default callback for "mouseup" operations.
1029 // Custom interaction model builders can use it to provide the default
1030 // zooming behavior.
1032 Dygraph
.endZoom
= function(event
, g
, context
) {
1033 context
.isZooming
= false;
1034 context
.dragEndX
= g
.dragGetX_(event
, context
);
1035 context
.dragEndY
= g
.dragGetY_(event
, context
);
1036 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1037 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1039 if (regionWidth
< 2 && regionHeight
< 2 &&
1040 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1041 // TODO(danvk): pass along more info about the points, e.g. 'x'
1042 if (g
.attr_('clickCallback') != null) {
1043 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1045 if (g
.attr_('pointClickCallback')) {
1046 // check if the click was on a particular point.
1047 var closestIdx
= -1;
1048 var closestDistance
= 0;
1049 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1050 var p
= g
.selPoints_
[i
];
1051 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1052 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1053 if (closestIdx
== -1 || distance
< closestDistance
) {
1054 closestDistance
= distance
;
1059 // Allow any click within two pixels of the dot.
1060 var radius
= g
.attr_('highlightCircleSize') + 2;
1061 if (closestDistance
<= 5 * 5) {
1062 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1067 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1068 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1069 Math
.max(context
.dragStartX
, context
.dragEndX
));
1070 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1071 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1072 Math
.max(context
.dragStartY
, context
.dragEndY
));
1074 g
.canvas_
.getContext("2d").clearRect(0, 0,
1078 context
.dragStartX
= null;
1079 context
.dragStartY
= null;
1082 Dygraph
.defaultInteractionModel
= {
1083 // Track the beginning of drag events
1084 mousedown
: function(event
, g
, context
) {
1085 context
.initializeMouseDown(event
, g
, context
);
1087 if (event
.altKey
|| event
.shiftKey
) {
1088 Dygraph
.startPan(event
, g
, context
);
1090 Dygraph
.startZoom(event
, g
, context
);
1094 // Draw zoom rectangles when the mouse is down and the user moves around
1095 mousemove
: function(event
, g
, context
) {
1096 if (context
.isZooming
) {
1097 Dygraph
.moveZoom(event
, g
, context
);
1098 } else if (context
.isPanning
) {
1099 Dygraph
.movePan(event
, g
, context
);
1103 mouseup
: function(event
, g
, context
) {
1104 if (context
.isZooming
) {
1105 Dygraph
.endZoom(event
, g
, context
);
1106 } else if (context
.isPanning
) {
1107 Dygraph
.endPan(event
, g
, context
);
1111 // Temporarily cancel the dragging event when the mouse leaves the graph
1112 mouseout
: function(event
, g
, context
) {
1113 if (context
.isZooming
) {
1114 context
.dragEndX
= null;
1115 context
.dragEndY
= null;
1119 // Disable zooming out if panning.
1120 dblclick
: function(event
, g
, context
) {
1121 if (event
.altKey
|| event
.shiftKey
) {
1124 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1125 // friendlier to public use.
1130 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1133 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1137 Dygraph
.prototype.createDragInterface_
= function() {
1139 // Tracks whether the mouse is down right now
1141 isPanning
: false, // is this drag part of a pan?
1142 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1147 dragDirection
: null,
1150 prevDragDirection
: null,
1152 // The value on the left side of the graph when a pan operation starts.
1153 initialLeftmostDate
: null,
1155 // The number of units each pixel spans. (This won't be valid for log
1157 xUnitsPerPixel
: null,
1159 // TODO(danvk): update this comment
1160 // The range in second/value units that the viewport encompasses during a
1161 // panning operation.
1164 // Utility function to convert page-wide coordinates to canvas coords
1168 initializeMouseDown
: function(event
, g
, context
) {
1169 // prevents mouse drags from selecting page text.
1170 if (event
.preventDefault
) {
1171 event
.preventDefault(); // Firefox, Chrome, etc.
1173 event
.returnValue
= false; // IE
1174 event
.cancelBubble
= true;
1177 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1178 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1179 context
.dragStartX
= g
.dragGetX_(event
, context
);
1180 context
.dragStartY
= g
.dragGetY_(event
, context
);
1184 var interactionModel
= this.attr_("interactionModel");
1186 // Self is the graph.
1189 // Function that binds the graph and context to the handler.
1190 var bindHandler
= function(handler
) {
1191 return function(event
) {
1192 handler(event
, self
, context
);
1196 for (var eventName
in interactionModel
) {
1197 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1198 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1199 bindHandler(interactionModel
[eventName
]));
1202 // If the user releases the mouse button during a drag, but not over the
1203 // canvas, then it doesn't count as a zooming action.
1204 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1205 if (context
.isZooming
|| context
.isPanning
) {
1206 context
.isZooming
= false;
1207 context
.dragStartX
= null;
1208 context
.dragStartY
= null;
1211 if (context
.isPanning
) {
1212 context
.isPanning
= false;
1213 context
.draggingDate
= null;
1214 context
.dateRange
= null;
1215 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1216 delete self
.axes_
[i
].draggingValue
;
1217 delete self
.axes_
[i
].dragValueRange
;
1224 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1225 * up any previous zoom rectangles that were drawn. This could be optimized to
1226 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1229 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1230 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1231 * @param {Number} startX The X position where the drag started, in canvas
1233 * @param {Number} endX The current X position of the drag, in canvas coords.
1234 * @param {Number} startY The Y position where the drag started, in canvas
1236 * @param {Number} endY The current Y position of the drag, in canvas coords.
1237 * @param {Number} prevDirection the value of direction on the previous call to
1238 * this function. Used to avoid excess redrawing
1239 * @param {Number} prevEndX The value of endX on the previous call to this
1240 * function. Used to avoid excess redrawing
1241 * @param {Number} prevEndY The value of endY on the previous call to this
1242 * function. Used to avoid excess redrawing
1245 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1246 prevDirection
, prevEndX
, prevEndY
) {
1247 var ctx
= this.canvas_
.getContext("2d");
1249 // Clean up from the previous rect if necessary
1250 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1251 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1252 Math
.abs(startX
- prevEndX
), this.height_
);
1253 } else if (prevDirection
== Dygraph
.VERTICAL
){
1254 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1255 this.width_
, Math
.abs(startY
- prevEndY
));
1258 // Draw a light-grey rectangle to show the new viewing area
1259 if (direction
== Dygraph
.HORIZONTAL
) {
1260 if (endX
&& startX
) {
1261 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1262 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1263 Math
.abs(endX
- startX
), this.height_
);
1266 if (direction
== Dygraph
.VERTICAL
) {
1267 if (endY
&& startY
) {
1268 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1269 ctx
.fillRect(0, Math
.min(startY
, endY
),
1270 this.width_
, Math
.abs(endY
- startY
));
1276 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1277 * the canvas. The exact zoom window may be slightly larger if there are no data
1278 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1279 * which accepts dates that match the raw data. This function redraws the graph.
1281 * @param {Number} lowX The leftmost pixel value that should be visible.
1282 * @param {Number} highX The rightmost pixel value that should be visible.
1285 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1286 // Find the earliest and latest dates contained in this canvasx range.
1287 // Convert the call to date ranges of the raw data.
1288 var minDate
= this.toDataXCoord(lowX
);
1289 var maxDate
= this.toDataXCoord(highX
);
1290 this.doZoomXDates_(minDate
, maxDate
);
1294 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1295 * method with doZoomX which accepts pixel coordinates. This function redraws
1298 * @param {Number} minDate The minimum date that should be visible.
1299 * @param {Number} maxDate The maximum date that should be visible.
1302 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1303 this.dateWindow_
= [minDate
, maxDate
];
1305 if (this.attr_("zoomCallback")) {
1306 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1311 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1312 * the canvas. This function redraws the graph.
1314 * @param {Number} lowY The topmost pixel value that should be visible.
1315 * @param {Number} highY The lowest pixel value that should be visible.
1318 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1319 // Find the highest and lowest values in pixel range for each axis.
1320 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1321 // This is because pixels increase as you go down on the screen, whereas data
1322 // coordinates increase as you go up the screen.
1323 var valueRanges
= [];
1324 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1325 var hi
= this.toDataYCoord(lowY
, i
);
1326 var low
= this.toDataYCoord(highY
, i
);
1327 this.axes_
[i
].valueWindow
= [low
, hi
];
1328 valueRanges
.push([low
, hi
]);
1332 if (this.attr_("zoomCallback")) {
1333 var xRange
= this.xAxisRange();
1334 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1339 * Reset the zoom to the original view coordinates. This is the same as
1340 * double-clicking on the graph.
1344 Dygraph
.prototype.doUnzoom_
= function() {
1346 if (this.dateWindow_
!= null) {
1348 this.dateWindow_
= null;
1351 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1352 if (this.axes_
[i
].valueWindow
!= null) {
1354 delete this.axes_
[i
].valueWindow
;
1359 // Putting the drawing operation before the callback because it resets
1362 if (this.attr_("zoomCallback")) {
1363 var minDate
= this.rawData_
[0][0];
1364 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1365 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1371 * When the mouse moves in the canvas, display information about a nearby data
1372 * point and draw dots over those points in the data series. This function
1373 * takes care of cleanup of previously-drawn dots.
1374 * @param {Object} event The mousemove event from the browser.
1377 Dygraph
.prototype.mouseMove_
= function(event
) {
1378 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1379 var points
= this.layout_
.points
;
1384 // Loop through all the points and find the date nearest to our current
1386 var minDist
= 1e+100;
1388 for (var i
= 0; i
< points
.length
; i
++) {
1389 var point
= points
[i
];
1390 if (point
== null) continue;
1391 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1392 if (dist
> minDist
) continue;
1396 if (idx
>= 0) lastx
= points
[idx
].xval
;
1397 // Check that you can really highlight the last day's data
1398 var last
= points
[points
.length
-1];
1399 if (last
!= null && canvasx
> last
.canvasx
)
1400 lastx
= points
[points
.length
-1].xval
;
1402 // Extract the points we've selected
1403 this.selPoints_
= [];
1404 var l
= points
.length
;
1405 if (!this.attr_("stackedGraph")) {
1406 for (var i
= 0; i
< l
; i
++) {
1407 if (points
[i
].xval
== lastx
) {
1408 this.selPoints_
.push(points
[i
]);
1412 // Need to 'unstack' points starting from the bottom
1413 var cumulative_sum
= 0;
1414 for (var i
= l
- 1; i
>= 0; i
--) {
1415 if (points
[i
].xval
== lastx
) {
1416 var p
= {}; // Clone the point since we modify it
1417 for (var k
in points
[i
]) {
1418 p
[k
] = points
[i
][k
];
1420 p
.yval
-= cumulative_sum
;
1421 cumulative_sum
+= p
.yval
;
1422 this.selPoints_
.push(p
);
1425 this.selPoints_
.reverse();
1428 if (this.attr_("highlightCallback")) {
1429 var px
= this.lastx_
;
1430 if (px
!== null && lastx
!= px
) {
1431 // only fire if the selected point has changed.
1432 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1436 // Save last x position for callbacks.
1437 this.lastx_
= lastx
;
1439 this.updateSelection_();
1443 * Transforms layout_.points index into data row number.
1444 * @param int layout_.points index
1445 * @return int row number, or -1 if none could be found.
1448 Dygraph
.prototype.idxToRow_
= function(idx
) {
1449 if (idx
< 0) return -1;
1451 for (var i
in this.layout_
.datasets
) {
1452 if (idx
< this.layout_
.datasets
[i
].length
) {
1453 return this.boundaryIds_
[0][0]+idx
;
1455 idx
-= this.layout_
.datasets
[i
].length
;
1461 * Draw dots over the selectied points in the data series. This function
1462 * takes care of cleanup of previously-drawn dots.
1465 Dygraph
.prototype.updateSelection_
= function() {
1466 // Clear the previously drawn vertical, if there is one
1467 var ctx
= this.canvas_
.getContext("2d");
1468 if (this.previousVerticalX_
>= 0) {
1469 // Determine the maximum highlight circle size.
1470 var maxCircleSize
= 0;
1471 var labels
= this.attr_('labels');
1472 for (var i
= 1; i
< labels
.length
; i
++) {
1473 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1474 if (r
> maxCircleSize
) maxCircleSize
= r
;
1476 var px
= this.previousVerticalX_
;
1477 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1478 2 * maxCircleSize
+ 2, this.height_
);
1481 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1483 if (this.selPoints_
.length
> 0) {
1484 var canvasx
= this.selPoints_
[0].canvasx
;
1486 // Set the status message to indicate the selected point(s)
1487 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1488 var fmtFunc
= this.attr_('yValueFormatter');
1489 var clen
= this.colors_
.length
;
1491 if (this.attr_('showLabelsOnHighlight')) {
1492 // Set the status message to indicate the selected point(s)
1493 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1494 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1495 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1496 if (this.attr_("labelsSeparateLines")) {
1499 var point
= this.selPoints_
[i
];
1500 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1501 var yval
= fmtFunc(point
.yval
);
1502 replace
+= " <b><font color='" + c
.toHex() + "'>"
1503 + point
.name
+ "</font></b>:"
1507 this.attr_("labelsDiv").innerHTML
= replace
;
1510 // Draw colored circles over the center of each selected point
1512 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1513 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1515 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1517 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1518 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1519 0, 2 * Math
.PI
, false);
1524 this.previousVerticalX_
= canvasx
;
1529 * Set manually set selected dots, and display information about them
1530 * @param int row number that should by highlighted
1531 * false value clears the selection
1534 Dygraph
.prototype.setSelection
= function(row
) {
1535 // Extract the points we've selected
1536 this.selPoints_
= [];
1539 if (row
!== false) {
1540 row
= row
-this.boundaryIds_
[0][0];
1543 if (row
!== false && row
>= 0) {
1544 for (var i
in this.layout_
.datasets
) {
1545 if (row
< this.layout_
.datasets
[i
].length
) {
1546 var point
= this.layout_
.points
[pos
+row
];
1548 if (this.attr_("stackedGraph")) {
1549 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1552 this.selPoints_
.push(point
);
1554 pos
+= this.layout_
.datasets
[i
].length
;
1558 if (this.selPoints_
.length
) {
1559 this.lastx_
= this.selPoints_
[0].xval
;
1560 this.updateSelection_();
1563 this.clearSelection();
1569 * The mouse has left the canvas. Clear out whatever artifacts remain
1570 * @param {Object} event the mouseout event from the browser.
1573 Dygraph
.prototype.mouseOut_
= function(event
) {
1574 if (this.attr_("unhighlightCallback")) {
1575 this.attr_("unhighlightCallback")(event
);
1578 if (this.attr_("hideOverlayOnMouseOut")) {
1579 this.clearSelection();
1584 * Remove all selection from the canvas
1587 Dygraph
.prototype.clearSelection
= function() {
1588 // Get rid of the overlay data
1589 var ctx
= this.canvas_
.getContext("2d");
1590 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1591 this.attr_("labelsDiv").innerHTML
= "";
1592 this.selPoints_
= [];
1597 * Returns the number of the currently selected row
1598 * @return int row number, of -1 if nothing is selected
1601 Dygraph
.prototype.getSelection
= function() {
1602 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1606 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1607 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1608 return row
+ this.boundaryIds_
[0][0];
1614 Dygraph
.zeropad
= function(x
) {
1615 if (x
< 10) return "0" + x
; else return "" + x
;
1619 * Return a string version of the hours, minutes and seconds portion of a date.
1620 * @param {Number} date The JavaScript date (ms since epoch)
1621 * @return {String} A time of the form "HH:MM:SS"
1624 Dygraph
.hmsString_
= function(date
) {
1625 var zeropad
= Dygraph
.zeropad
;
1626 var d
= new Date(date
);
1627 if (d
.getSeconds()) {
1628 return zeropad(d
.getHours()) + ":" +
1629 zeropad(d
.getMinutes()) + ":" +
1630 zeropad(d
.getSeconds());
1632 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1637 * Convert a JS date to a string appropriate to display on an axis that
1638 * is displaying values at the stated granularity.
1639 * @param {Date} date The date to format
1640 * @param {Number} granularity One of the Dygraph granularity constants
1641 * @return {String} The formatted date
1644 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1645 if (granularity
>= Dygraph
.DECADAL
) {
1646 return date
.strftime('%Y');
1647 } else if (granularity
>= Dygraph
.MONTHLY
) {
1648 return date
.strftime('%b %y');
1650 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1651 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1652 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1654 return Dygraph
.hmsString_(date
.getTime());
1660 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1661 * @param {Number} date The JavaScript date (ms since epoch)
1662 * @return {String} A date of the form "YYYY/MM/DD"
1665 Dygraph
.dateString_
= function(date
, self
) {
1666 var zeropad
= Dygraph
.zeropad
;
1667 var d
= new Date(date
);
1670 var year
= "" + d
.getFullYear();
1671 // Get a 0 padded month string
1672 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1673 // Get a 0 padded day string
1674 var day
= zeropad(d
.getDate());
1677 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1678 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1680 return year
+ "/" + month + "/" + day
+ ret
;
1684 * Round a number to the specified number of digits past the decimal point.
1685 * @param {Number} num The number to round
1686 * @param {Number} places The number of decimals to which to round
1687 * @return {Number} The rounded number
1690 Dygraph
.round_
= function(num
, places
) {
1691 var shift
= Math
.pow(10, places
);
1692 return Math
.round(num
* shift
)/shift
;
1696 * Fires when there's data available to be graphed.
1697 * @param {String} data Raw CSV data to be plotted
1700 Dygraph
.prototype.loadedEvent_
= function(data
) {
1701 this.rawData_
= this.parseCSV_(data
);
1705 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1706 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1707 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1710 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1713 Dygraph
.prototype.addXTicks_
= function() {
1714 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1715 var startDate
, endDate
;
1716 if (this.dateWindow_
) {
1717 startDate
= this.dateWindow_
[0];
1718 endDate
= this.dateWindow_
[1];
1720 startDate
= this.rawData_
[0][0];
1721 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1724 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1725 this.layout_
.updateOptions({xTicks
: xTicks
});
1728 // Time granularity enumeration
1729 Dygraph
.SECONDLY
= 0;
1730 Dygraph
.TWO_SECONDLY
= 1;
1731 Dygraph
.FIVE_SECONDLY
= 2;
1732 Dygraph
.TEN_SECONDLY
= 3;
1733 Dygraph
.THIRTY_SECONDLY
= 4;
1734 Dygraph
.MINUTELY
= 5;
1735 Dygraph
.TWO_MINUTELY
= 6;
1736 Dygraph
.FIVE_MINUTELY
= 7;
1737 Dygraph
.TEN_MINUTELY
= 8;
1738 Dygraph
.THIRTY_MINUTELY
= 9;
1739 Dygraph
.HOURLY
= 10;
1740 Dygraph
.TWO_HOURLY
= 11;
1741 Dygraph
.SIX_HOURLY
= 12;
1743 Dygraph
.WEEKLY
= 14;
1744 Dygraph
.MONTHLY
= 15;
1745 Dygraph
.QUARTERLY
= 16;
1746 Dygraph
.BIANNUAL
= 17;
1747 Dygraph
.ANNUAL
= 18;
1748 Dygraph
.DECADAL
= 19;
1749 Dygraph
.CENTENNIAL
= 20;
1750 Dygraph
.NUM_GRANULARITIES
= 21;
1752 Dygraph
.SHORT_SPACINGS
= [];
1753 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1754 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1755 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1756 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1757 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1758 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1759 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1760 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1761 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1762 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1763 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1764 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1765 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1766 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1767 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1771 // If we used this time granularity, how many ticks would there be?
1772 // This is only an approximation, but it's generally good enough.
1774 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1775 if (granularity
< Dygraph
.MONTHLY
) {
1776 // Generate one tick mark for every fixed interval of time.
1777 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1778 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1780 var year_mod
= 1; // e.g. to only print one point every 10 years.
1781 var num_months
= 12;
1782 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1783 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1784 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1785 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1786 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1788 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1789 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1790 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1796 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1797 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1799 // Returns an array containing {v: millis, label: label} dictionaries.
1801 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1802 var formatter
= this.attr_("xAxisLabelFormatter");
1804 if (granularity
< Dygraph
.MONTHLY
) {
1805 // Generate one tick mark for every fixed interval of time.
1806 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1807 var format
= '%d%b'; // e.g. "1Jan"
1809 // Find a time less than start_time which occurs on a "nice" time boundary
1810 // for this granularity.
1811 var g
= spacing
/ 1000;
1812 var d
= new Date(start_time
);
1813 if (g
<= 60) { // seconds
1814 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1818 if (g
<= 60) { // minutes
1819 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1824 if (g
<= 24) { // days
1825 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1830 if (g
== 7) { // one week
1831 d
.setDate(d
.getDate() - d
.getDay());
1836 start_time
= d
.getTime();
1838 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1839 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1842 // Display a tick mark on the first of a set of months of each year.
1843 // Years get a tick mark iff y % year_mod == 0. This is useful for
1844 // displaying a tick mark once every 10 years, say, on long time scales.
1846 var year_mod
= 1; // e.g. to only print one point every 10 years.
1848 if (granularity
== Dygraph
.MONTHLY
) {
1849 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1850 } else if (granularity
== Dygraph
.QUARTERLY
) {
1851 months
= [ 0, 3, 6, 9 ];
1852 } else if (granularity
== Dygraph
.BIANNUAL
) {
1854 } else if (granularity
== Dygraph
.ANNUAL
) {
1856 } else if (granularity
== Dygraph
.DECADAL
) {
1859 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1863 this.warn("Span of dates is too long");
1866 var start_year
= new Date(start_time
).getFullYear();
1867 var end_year
= new Date(end_time
).getFullYear();
1868 var zeropad
= Dygraph
.zeropad
;
1869 for (var i
= start_year
; i
<= end_year
; i
++) {
1870 if (i
% year_mod
!= 0) continue;
1871 for (var j
= 0; j
< months
.length
; j
++) {
1872 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1873 var t
= Date
.parse(date_str
);
1874 if (t
< start_time
|| t
> end_time
) continue;
1875 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1885 * Add ticks to the x-axis based on a date range.
1886 * @param {Number} startDate Start of the date window (millis since epoch)
1887 * @param {Number} endDate End of the date window (millis since epoch)
1888 * @return {Array.<Object>} Array of {label, value} tuples.
1891 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1893 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1894 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1895 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1902 return self
.GetXAxis(startDate
, endDate
, chosen
);
1904 // TODO(danvk): signal error.
1908 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
1910 for (var power
= -39; power
<= 39; power
++) {
1911 var range
= Math
.pow(10, power
);
1912 for (var mult
= 1; mult
<= 9; mult
++) {
1913 var val
= range
* mult
;
1920 // val is the value to search for
1921 // arry is the value over which to search
1922 // if abs > 0, find the lowest entry greater than val
1923 // if abs < 0, find the highest entry less than val
1924 // if abs == 0, find the entry that equals val.
1925 // Currently does not work when val is outside the range of arry's values.
1926 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
1927 if (low
== null || high
== null) {
1929 high
= arry
.length
- 1;
1937 var validIndex
= function(idx
) {
1938 return idx
>= 0 && idx
< arry
.length
;
1940 var mid
= parseInt((low
+ high
) / 2);
1941 var element
= arry
[mid
];
1942 if (element
== val
) {
1945 if (element
> val
) {
1947 // Accept if element > val, but also if prior element < val.
1949 if (validIndex(idx
) && arry
[idx
] < val
) {
1953 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
1955 if (element
< val
) {
1957 // Accept if element < val, but also if prior element > val.
1959 if (validIndex(idx
) && arry
[idx
] > val
) {
1963 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
1968 * Add ticks when the x axis has numbers on it (instead of dates)
1969 * TODO(konigsberg): Update comment.
1971 * @param {Number} minV minimum value
1972 * @param {Number} maxV maximum value
1974 * @param {function} attribute accessor function.
1975 * @return {Array.<Object>} Array of {label, value} tuples.
1978 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1979 var attr
= function(k
) {
1980 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1981 return self
.attr_(k
);
1986 for (var i
= 0; i
< vals
.length
; i
++) {
1987 ticks
.push({v
: vals
[i
]});
1990 if (axis_props
&& attr("logscale")) {
1991 var pixelsPerTick
= attr('pixelsPerYLabel');
1992 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
1993 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
1994 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
1995 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2000 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2002 // Count the number of tick values would appear, if we can get at least
2003 // nTicks / 4 accept them
.
2004 var lastDisplayed
= null;
2005 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2006 var axisId
= axis_props
.yAxisId
;
2007 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2008 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2009 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2010 var tick
= { v
: tickValue
};
2011 if (lastDisplayed
== null) {
2013 tickValue
: tickValue
,
2017 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2019 tickValue
: tickValue
,
2028 // Since we went in backwards order.
2032 // ticks.length won't be 0 if the log scale function finds values to insert.
2033 if (ticks
.length
== 0) {
2035 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2036 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2037 // The first spacing greater than pixelsPerYLabel is what we use.
2038 // TODO(danvk): version that works on a log scale.
2039 if (attr("labelsKMG2")) {
2040 var mults
= [1, 2, 4, 8];
2042 var mults
= [1, 2, 5];
2044 var scale
, low_val
, high_val
, nTicks
;
2045 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2046 var pixelsPerTick
= attr('pixelsPerYLabel');
2047 for (var i
= -10; i
< 50; i
++) {
2048 if (attr("labelsKMG2")) {
2049 var base_scale
= Math
.pow(16, i
);
2051 var base_scale
= Math
.pow(10, i
);
2053 for (var j
= 0; j
< mults
.length
; j
++) {
2054 scale
= base_scale
* mults
[j
];
2055 low_val
= Math
.floor(minV
/ scale
) * scale
;
2056 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2057 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2058 var spacing
= self
.height_
/ nTicks
;
2059 // wish I could break out of both loops at once...
2060 if (spacing
> pixelsPerTick
) break;
2062 if (spacing
> pixelsPerTick
) break;
2065 // Construct the set of ticks.
2066 // Allow reverse y-axis if it's explicitly requested.
2067 if (low_val
> high_val
) scale
*= -1;
2068 for (var i
= 0; i
< nTicks
; i
++) {
2069 var tickV
= low_val
+ i
* scale
;
2070 ticks
.push( {v
: tickV
} );
2075 // Add formatted labels to the ticks.
2078 if (attr("labelsKMB")) {
2080 k_labels
= [ "K", "M", "B", "T" ];
2082 if (attr("labelsKMG2")) {
2083 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2085 k_labels
= [ "k", "M", "G", "T" ];
2087 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
2089 // Add labels to the ticks.
2090 for (var i
= 0; i
< ticks
.length
; i
++) {
2091 if (ticks
[i
].label
== null) {
2092 var tickV
= ticks
[i
].v
;
2093 var absTickV
= Math
.abs(tickV
);
2095 if (formatter
!= undefined
) {
2096 label
= formatter(tickV
);
2098 label
= Dygraph
.round_(tickV
, 2);
2100 if (k_labels
.length
) {
2101 // Round up to an appropriate unit.
2103 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2104 if (absTickV
>= n
) {
2105 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
2110 ticks
[i
].label
= label
;
2116 // Computes the range of the data series (including confidence intervals).
2117 // series is either [ [x1, y1], [x2, y2], ... ] or
2118 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2119 // Returns [low, high]
2120 Dygraph
.prototype.extremeValues_
= function(series
) {
2121 var minY
= null, maxY
= null;
2123 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2125 // With custom bars, maxY is the max of the high values.
2126 for (var j
= 0; j
< series
.length
; j
++) {
2127 var y
= series
[j
][1][0];
2129 var low
= y
- series
[j
][1][1];
2130 var high
= y
+ series
[j
][1][2];
2131 if (low
> y
) low
= y
; // this can happen with custom bars,
2132 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2133 if (maxY
== null || high
> maxY
) {
2136 if (minY
== null || low
< minY
) {
2141 for (var j
= 0; j
< series
.length
; j
++) {
2142 var y
= series
[j
][1];
2143 if (y
=== null || isNaN(y
)) continue;
2144 if (maxY
== null || y
> maxY
) {
2147 if (minY
== null || y
< minY
) {
2153 return [minY
, maxY
];
2157 * This function is called once when the chart's data is changed or the options
2158 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2159 * idea is that values derived from the chart's data can be computed here,
2160 * rather than every time the chart is drawn. This includes things like the
2161 * number of axes, rolling averages, etc.
2163 Dygraph
.prototype.predraw_
= function() {
2164 // TODO(danvk): movabilitye more computations out of drawGraph_ and into here.
2165 this.computeYAxes_();
2167 // Create a new plotter.
2168 if (this.plotter_
) this.plotter_
.clear();
2169 this.plotter_
= new DygraphCanvasRenderer(this,
2170 this.hidden_
, this.layout_
,
2171 this.renderOptions_
);
2173 // The roller sits in the bottom left corner of the chart. We don't know where
2174 // this will be until the options are available, so it's positioned here.
2175 this.createRollInterface_();
2177 // Same thing applies for the labelsDiv. It's right edge should be flush with
2178 // the right edge of the charting area (which may not be the same as the right
2179 // edge of the div, if we have two y-axes.
2180 this.positionLabelsDiv_();
2182 // If the data or options have changed, then we'd better redraw.
2187 * Update the graph with new data. This method is called when the viewing area
2188 * has changed. If the underlying data or options have changed, predraw_ will
2189 * be called before drawGraph_ is called.
2192 Dygraph
.prototype.drawGraph_
= function() {
2193 var data
= this.rawData_
;
2195 // This is used to set the second parameter to drawCallback, below.
2196 var is_initial_draw
= this.is_initial_draw_
;
2197 this.is_initial_draw_
= false;
2199 var minY
= null, maxY
= null;
2200 this.layout_
.removeAllDatasets();
2202 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2204 // Loop over the fields (series). Go from the last to the first,
2205 // because if they're stacked that's how we accumulate the values.
2207 var cumulative_y
= []; // For stacked series.
2210 var extremes
= {}; // series name -> [low, high]
2212 // Loop over all fields and create datasets
2213 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2214 if (!this.visibility()[i
- 1]) continue;
2216 var seriesName
= this.attr_("labels")[i
];
2217 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2218 var logScale
= this.attr_('logscale', i
);
2221 for (var j
= 0; j
< data
.length
; j
++) {
2222 var date
= data
[j
][0];
2223 var point
= data
[j
][i
];
2225 // On the log scale, points less than zero do not exist.
2226 // This will create a gap in the chart. Note that this ignores
2227 // connectSeparatedPoints.
2231 series
.push([date
, point
]);
2233 if (point
!= null || !connectSeparatedPoints
) {
2234 series
.push([date
, point
]);
2239 // TODO(danvk): move this into predraw_. It's insane to do it here.
2240 series
= this.rollingAverage(series
, this.rollPeriod_
);
2242 // Prune down to the desired range, if necessary (for zooming)
2243 // Because there can be lines going to points outside of the visible area,
2244 // we actually prune to visible points, plus one on either side.
2245 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2246 if (this.dateWindow_
) {
2247 var low
= this.dateWindow_
[0];
2248 var high
= this.dateWindow_
[1];
2250 // TODO(danvk): do binary search instead of linear search.
2251 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2252 var firstIdx
= null, lastIdx
= null;
2253 for (var k
= 0; k
< series
.length
; k
++) {
2254 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2257 if (series
[k
][0] <= high
) {
2261 if (firstIdx
=== null) firstIdx
= 0;
2262 if (firstIdx
> 0) firstIdx
--;
2263 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2264 if (lastIdx
< series
.length
- 1) lastIdx
++;
2265 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2266 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2267 pruned
.push(series
[k
]);
2271 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2274 var seriesExtremes
= this.extremeValues_(series
);
2277 for (var j
=0; j
<series
.length
; j
++) {
2278 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2281 } else if (this.attr_("stackedGraph")) {
2282 var l
= series
.length
;
2284 for (var j
= 0; j
< l
; j
++) {
2285 // If one data set has a NaN, let all subsequent stacked
2286 // sets inherit the NaN -- only start at 0 for the first set.
2287 var x
= series
[j
][0];
2288 if (cumulative_y
[x
] === undefined
) {
2289 cumulative_y
[x
] = 0;
2292 actual_y
= series
[j
][1];
2293 cumulative_y
[x
] += actual_y
;
2295 series
[j
] = [x
, cumulative_y
[x
]]
2297 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2298 seriesExtremes
[1] = cumulative_y
[x
];
2300 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2301 seriesExtremes
[0] = cumulative_y
[x
];
2305 extremes
[seriesName
] = seriesExtremes
;
2307 datasets
[i
] = series
;
2310 for (var i
= 1; i
< datasets
.length
; i
++) {
2311 if (!this.visibility()[i
- 1]) continue;
2312 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2315 // TODO(danvk): this method doesn't need to return anything.
2316 var out
= this.computeYAxisRanges_(extremes
);
2318 var seriesToAxisMap
= out
[1];
2319 this.layout_
.updateOptions( { yAxes
: axes
,
2320 seriesToAxisMap
: seriesToAxisMap
2325 // Tell PlotKit to use this new data and render itself
2326 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2327 this.layout_
.evaluateWithError();
2328 this.plotter_
.clear();
2329 this.plotter_
.render();
2330 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2331 this.canvas_
.height
);
2333 if (this.attr_("drawCallback") !== null) {
2334 this.attr_("drawCallback")(this, is_initial_draw
);
2339 * Determine properties of the y-axes which are independent of the data
2340 * currently being displayed. This includes things like the number of axes and
2341 * the style of the axes. It does not include the range of each axis and its
2343 * This fills in this.axes_ and this.seriesToAxisMap_.
2344 * axes_ = [ { options } ]
2345 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2346 * indices are into the axes_ array.
2348 Dygraph
.prototype.computeYAxes_
= function() {
2349 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2350 this.seriesToAxisMap_
= {};
2352 // Get a list of series names.
2353 var labels
= this.attr_("labels");
2355 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2357 // all options which could be applied per-axis:
2365 'axisLabelFontSize',
2370 // Copy global axis options over to the first axis.
2371 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2372 var k
= axisOptions
[i
];
2373 var v
= this.attr_(k
);
2374 if (v
) this.axes_
[0][k
] = v
;
2377 // Go through once and add all the axes.
2378 for (var seriesName
in series
) {
2379 if (!series
.hasOwnProperty(seriesName
)) continue;
2380 var axis
= this.attr_("axis", seriesName
);
2382 this.seriesToAxisMap_
[seriesName
] = 0;
2385 if (typeof(axis
) == 'object') {
2386 // Add a new axis, making a copy of its per-axis options.
2388 Dygraph
.update(opts
, this.axes_
[0]);
2389 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2390 var yAxisId
= this.axes_
.length
;
2391 opts
.yAxisId
= yAxisId
;
2393 Dygraph
.update(opts
, axis
);
2394 this.axes_
.push(opts
);
2395 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2399 // Go through one more time and assign series to an axis defined by another
2400 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2401 for (var seriesName
in series
) {
2402 if (!series
.hasOwnProperty(seriesName
)) continue;
2403 var axis
= this.attr_("axis", seriesName
);
2404 if (typeof(axis
) == 'string') {
2405 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2406 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2407 "series " + axis
+ ", which does not define its own axis.");
2410 var idx
= this.seriesToAxisMap_
[axis
];
2411 this.seriesToAxisMap_
[seriesName
] = idx
;
2415 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2416 // this last so that hiding the first series doesn't destroy the axis
2417 // properties of the primary axis.
2418 var seriesToAxisFiltered
= {};
2419 var vis
= this.visibility();
2420 for (var i
= 1; i
< labels
.length
; i
++) {
2422 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2424 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2428 * Returns the number of y-axes on the chart.
2429 * @return {Number} the number of axes.
2431 Dygraph
.prototype.numAxes
= function() {
2433 for (var series
in this.seriesToAxisMap_
) {
2434 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2435 var idx
= this.seriesToAxisMap_
[series
];
2436 if (idx
> last_axis
) last_axis
= idx
;
2438 return 1 + last_axis
;
2442 * Determine the value range and tick marks for each axis.
2443 * @param {Object} extremes A mapping from seriesName -> [low, high]
2444 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2446 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2447 // Build a map from axis number -> [list of series names]
2448 var seriesForAxis
= [];
2449 for (var series
in this.seriesToAxisMap_
) {
2450 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2451 var idx
= this.seriesToAxisMap_
[series
];
2452 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2453 seriesForAxis
[idx
].push(series
);
2456 // Compute extreme values, a span and tick marks for each axis.
2457 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2458 var axis
= this.axes_
[i
];
2459 if (axis
.valueWindow
) {
2460 // This is only set if the user has zoomed on the y-axis. It is never set
2461 // by a user. It takes precedence over axis.valueRange because, if you set
2462 // valueRange, you'd still expect to be able to pan.
2463 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2464 } else if (axis
.valueRange
) {
2465 // This is a user-set value range for this axis.
2466 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2468 // Calculate the extremes of extremes.
2469 var series
= seriesForAxis
[i
];
2470 var minY
= Infinity
; // extremes[series[0]][0];
2471 var maxY
= -Infinity
; // extremes[series[0]][1];
2472 for (var j
= 0; j
< series
.length
; j
++) {
2473 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2474 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2476 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2478 // Add some padding and round up to an integer to be human-friendly.
2479 var span
= maxY
- minY
;
2480 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2481 if (span
== 0) { span
= maxY
; }
2485 if (axis
.logscale
) {
2486 var maxAxisY
= maxY
+ 0.1 * span
;
2487 var minAxisY
= minY
;
2489 var maxAxisY
= maxY
+ 0.1 * span
;
2490 var minAxisY
= minY
- 0.1 * span
;
2492 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2493 if (!this.attr_("avoidMinZero")) {
2494 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2495 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2498 if (this.attr_("includeZero")) {
2499 if (maxY
< 0) maxAxisY
= 0;
2500 if (minY
> 0) minAxisY
= 0;
2504 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2507 // Add ticks. By default, all axes inherit the tick positions of the
2508 // primary axis. However, if an axis is specifically marked as having
2509 // independent ticks, then that is permissible as well.
2510 if (i
== 0 || axis
.independentTicks
) {
2512 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2513 axis
.computedValueRange
[1],
2517 var p_axis
= this.axes_
[0];
2518 var p_ticks
= p_axis
.ticks
;
2519 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2520 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2521 var tick_values
= [];
2522 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2523 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2524 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2525 tick_values
.push(y_val
);
2529 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2530 axis
.computedValueRange
[1],
2531 this, axis
, tick_values
);
2535 return [this.axes_
, this.seriesToAxisMap_
];
2539 * Calculates the rolling average of a data set.
2540 * If originalData is [label, val], rolls the average of those.
2541 * If originalData is [label, [, it's interpreted as [value, stddev]
2542 * and the roll is returned in the same form, with appropriately reduced
2543 * stddev for each value.
2544 * Note that this is where fractional input (i.e. '5/10') is converted into
2546 * @param {Array} originalData The data in the appropriate format (see above)
2547 * @param {Number} rollPeriod The number of days over which to average the data
2549 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2550 if (originalData
.length
< 2)
2551 return originalData
;
2552 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2553 var rollingData
= [];
2554 var sigma
= this.attr_("sigma");
2556 if (this.fractions_
) {
2558 var den
= 0; // numerator/denominator
2560 for (var i
= 0; i
< originalData
.length
; i
++) {
2561 num
+= originalData
[i
][1][0];
2562 den
+= originalData
[i
][1][1];
2563 if (i
- rollPeriod
>= 0) {
2564 num
-= originalData
[i
- rollPeriod
][1][0];
2565 den
-= originalData
[i
- rollPeriod
][1][1];
2568 var date
= originalData
[i
][0];
2569 var value
= den
? num
/ den
: 0.0;
2570 if (this.attr_("errorBars")) {
2571 if (this.wilsonInterval_
) {
2572 // For more details on this confidence interval, see:
2573 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2575 var p
= value
< 0 ? 0 : value
, n
= den
;
2576 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2577 var denom
= 1 + sigma
* sigma
/ den
;
2578 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2579 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2580 rollingData
[i
] = [date
,
2581 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2583 rollingData
[i
] = [date
, [0, 0, 0]];
2586 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2587 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2590 rollingData
[i
] = [date
, mult
* value
];
2593 } else if (this.attr_("customBars")) {
2598 for (var i
= 0; i
< originalData
.length
; i
++) {
2599 var data
= originalData
[i
][1];
2601 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2603 if (y
!= null && !isNaN(y
)) {
2609 if (i
- rollPeriod
>= 0) {
2610 var prev
= originalData
[i
- rollPeriod
];
2611 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2618 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2619 1.0 * (mid
- low
) / count
,
2620 1.0 * (high
- mid
) / count
]];
2623 // Calculate the rolling average for the first rollPeriod - 1 points where
2624 // there is not enough data to roll over the full number of days
2625 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2626 if (!this.attr_("errorBars")){
2627 if (rollPeriod
== 1) {
2628 return originalData
;
2631 for (var i
= 0; i
< originalData
.length
; i
++) {
2634 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2635 var y
= originalData
[j
][1];
2636 if (y
== null || isNaN(y
)) continue;
2638 sum
+= originalData
[j
][1];
2641 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2643 rollingData
[i
] = [originalData
[i
][0], null];
2648 for (var i
= 0; i
< originalData
.length
; i
++) {
2652 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2653 var y
= originalData
[j
][1][0];
2654 if (y
== null || isNaN(y
)) continue;
2656 sum
+= originalData
[j
][1][0];
2657 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2660 var stddev
= Math
.sqrt(variance
) / num_ok
;
2661 rollingData
[i
] = [originalData
[i
][0],
2662 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2664 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2674 * Parses a date, returning the number of milliseconds since epoch. This can be
2675 * passed in as an xValueParser in the Dygraph constructor.
2676 * TODO(danvk): enumerate formats that this understands.
2677 * @param {String} A date in YYYYMMDD format.
2678 * @return {Number} Milliseconds since epoch.
2681 Dygraph
.dateParser
= function(dateStr
, self
) {
2684 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2685 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2686 while (dateStrSlashed
.search("-") != -1) {
2687 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2689 d
= Date
.parse(dateStrSlashed
);
2690 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2691 // TODO(danvk): remove support for this format. It's confusing.
2692 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2693 + "/" + dateStr
.substr(6,2);
2694 d
= Date
.parse(dateStrSlashed
);
2696 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2697 // "2009/07/12 12:34:56"
2698 d
= Date
.parse(dateStr
);
2701 if (!d
|| isNaN(d
)) {
2702 self
.error("Couldn't parse " + dateStr
+ " as a date");
2708 * Detects the type of the str (date or numeric) and sets the various
2709 * formatting attributes in this.attrs_ based on this type.
2710 * @param {String} str An x value.
2713 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2715 if (str
.indexOf('-') >= 0 ||
2716 str
.indexOf('/') >= 0 ||
2717 isNaN(parseFloat(str
))) {
2719 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2720 // TODO(danvk): remove support for this format.
2725 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2726 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2727 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2728 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2730 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2731 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2732 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2733 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2738 * Parses a string in a special csv format. We expect a csv file where each
2739 * line is a date point, and the first field in each line is the date string.
2740 * We also expect that all remaining fields represent series.
2741 * if the errorBars attribute is set, then interpret the fields as:
2742 * date, series1, stddev1, series2, stddev2, ...
2743 * @param {Array.<Object>} data See above.
2746 * @return Array.<Object> An array with one entry for each row. These entries
2747 * are an array of cells in that row. The first entry is the parsed x-value for
2748 * the row. The second, third, etc. are the y-values. These can take on one of
2749 * three forms, depending on the CSV and constructor parameters:
2751 * 2. [ value, stddev ]
2752 * 3. [ low value, center value, high value ]
2754 Dygraph
.prototype.parseCSV_
= function(data
) {
2756 var lines
= data
.split("\n");
2758 // Use the default delimiter or fall back to a tab if that makes sense.
2759 var delim
= this.attr_('delimiter');
2760 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2765 if (this.labelsFromCSV_
) {
2767 this.attrs_
.labels
= lines
[0].split(delim
);
2770 // Parse the x as a float or return null if it's not a number.
2771 var parseFloatOrNull
= function(x
) {
2772 var val
= parseFloat(x
);
2773 // isFinite() returns false for NaN and +/-Infinity
.
2774 return isFinite(val
) ? val
: null;
2778 var defaultParserSet
= false; // attempt to auto-detect x value type
2779 var expectedCols
= this.attr_("labels").length
;
2780 var outOfOrder
= false;
2781 for (var i
= start
; i
< lines
.length
; i
++) {
2782 var line
= lines
[i
];
2783 if (line
.length
== 0) continue; // skip blank lines
2784 if (line
[0] == '#') continue; // skip comment lines
2785 var inFields
= line
.split(delim
);
2786 if (inFields
.length
< 2) continue;
2789 if (!defaultParserSet
) {
2790 this.detectTypeFromString_(inFields
[0]);
2791 xParser
= this.attr_("xValueParser");
2792 defaultParserSet
= true;
2794 fields
[0] = xParser(inFields
[0], this);
2796 // If fractions are expected, parse the numbers as "A/B
"
2797 if (this.fractions_) {
2798 for (var j = 1; j < inFields.length; j++) {
2799 // TODO(danvk): figure out an appropriate way to flag parse errors.
2800 var vals = inFields[j].split("/");
2801 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2803 } else if (this.attr_("errorBars
")) {
2804 // If there are error bars, values are (value, stddev) pairs
2805 for (var j = 1; j < inFields.length; j += 2)
2806 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2807 parseFloatOrNull(inFields[j + 1])];
2808 } else if (this.attr_("customBars
")) {
2809 // Bars are a low;center;high tuple
2810 for (var j = 1; j < inFields.length; j++) {
2811 var vals = inFields[j].split(";");
2812 fields[j] = [ parseFloatOrNull(vals[0]),
2813 parseFloatOrNull(vals[1]),
2814 parseFloatOrNull(vals[2]) ];
2817 // Values are just numbers
2818 for (var j = 1; j < inFields.length; j++) {
2819 fields[j] = parseFloatOrNull(inFields[j]);
2822 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2827 if (fields.length != expectedCols) {
2828 this.error("Number of columns
in line
" + i + " (" + fields.length +
2829 ") does not agree
with number of
labels (" + expectedCols +
2835 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2836 ret.sort(function(a,b) { return a[0] - b[0] });
2843 * The user has provided their data as a pre-packaged JS array. If the x values
2844 * are numeric, this is the same as dygraphs' internal format. If the x values
2845 * are dates, we need to convert them from Date objects to ms since epoch.
2846 * @param {Array.<Object>} data
2847 * @return {Array.<Object>} data with numeric x values.
2849 Dygraph.prototype.parseArray_ = function(data) {
2850 // Peek at the first x value to see if it's numeric.
2851 if (data.length == 0) {
2852 this.error("Can
't plot empty data set");
2855 if (data[0].length == 0) {
2856 this.error("Data set cannot contain an empty row");
2860 if (this.attr_("labels") == null) {
2861 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2862 "in the options parameter");
2863 this.attrs_.labels = [ "X" ];
2864 for (var i = 1; i < data[0].length; i++) {
2865 this.attrs_.labels.push("Y" + i);
2869 if (Dygraph.isDateLike(data[0][0])) {
2870 // Some intelligent defaults for a date x-axis.
2871 this.attrs_.xValueFormatter = Dygraph.dateString_;
2872 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2873 this.attrs_.xTicker = Dygraph.dateTicker;
2875 // Assume they're all dates
.
2876 var parsedData
= Dygraph
.clone(data
);
2877 for (var i
= 0; i
< data
.length
; i
++) {
2878 if (parsedData
[i
].length
== 0) {
2879 this.error("Row " + (1 + i
) + " of data is empty");
2882 if (parsedData
[i
][0] == null
2883 || typeof(parsedData
[i
][0].getTime
) != 'function'
2884 || isNaN(parsedData
[i
][0].getTime())) {
2885 this.error("x value in row " + (1 + i
) + " is not a Date");
2888 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2892 // Some intelligent defaults for a numeric x-axis.
2893 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2894 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2900 * Parses a DataTable object from gviz.
2901 * The data is expected to have a first column that is either a date or a
2902 * number. All subsequent columns must be numbers. If there is a clear mismatch
2903 * between this.xValueParser_ and the type of the first column, it will be
2904 * fixed. Fills out rawData_.
2905 * @param {Array.<Object>} data See above.
2908 Dygraph
.prototype.parseDataTable_
= function(data
) {
2909 var cols
= data
.getNumberOfColumns();
2910 var rows
= data
.getNumberOfRows();
2912 var indepType
= data
.getColumnType(0);
2913 if (indepType
== 'date' || indepType
== 'datetime') {
2914 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2915 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2916 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2917 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2918 } else if (indepType
== 'number') {
2919 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2920 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2921 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2922 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2924 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2925 "column 1 of DataTable input (Got '" + indepType
+ "')");
2929 // Array of the column indices which contain data (and not annotations).
2931 var annotationCols
= {}; // data index -> [annotation cols]
2932 var hasAnnotations
= false;
2933 for (var i
= 1; i
< cols
; i
++) {
2934 var type
= data
.getColumnType(i
);
2935 if (type
== 'number') {
2937 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2938 // This is OK -- it's an annotation column.
2939 var dataIdx
= colIdx
[colIdx
.length
- 1];
2940 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2941 annotationCols
[dataIdx
] = [i
];
2943 annotationCols
[dataIdx
].push(i
);
2945 hasAnnotations
= true;
2947 this.error("Only 'number' is supported as a dependent type with Gviz." +
2948 " 'string' is only supported if displayAnnotations is true");
2952 // Read column labels
2953 // TODO(danvk): add support back for errorBars
2954 var labels
= [data
.getColumnLabel(0)];
2955 for (var i
= 0; i
< colIdx
.length
; i
++) {
2956 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2957 if (this.attr_("errorBars")) i
+= 1;
2959 this.attrs_
.labels
= labels
;
2960 cols
= labels
.length
;
2963 var outOfOrder
= false;
2964 var annotations
= [];
2965 for (var i
= 0; i
< rows
; i
++) {
2967 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2968 data
.getValue(i
, 0) === null) {
2969 this.warn("Ignoring row " + i
+
2970 " of DataTable because of undefined or null first column.");
2974 if (indepType
== 'date' || indepType
== 'datetime') {
2975 row
.push(data
.getValue(i
, 0).getTime());
2977 row
.push(data
.getValue(i
, 0));
2979 if (!this.attr_("errorBars")) {
2980 for (var j
= 0; j
< colIdx
.length
; j
++) {
2981 var col
= colIdx
[j
];
2982 row
.push(data
.getValue(i
, col
));
2983 if (hasAnnotations
&&
2984 annotationCols
.hasOwnProperty(col
) &&
2985 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2987 ann
.series
= data
.getColumnLabel(col
);
2989 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2991 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2992 if (k
) ann
.text
+= "\n";
2993 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2995 annotations
.push(ann
);
2999 for (var j
= 0; j
< cols
- 1; j
++) {
3000 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3003 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3007 // Strip out infinities, which give dygraphs problems later on.
3008 for (var j
= 0; j
< row
.length
; j
++) {
3009 if (!isFinite(row
[j
])) row
[j
] = null;
3015 this.warn("DataTable is out of order; order it correctly to speed loading.");
3016 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3018 this.rawData_
= ret
;
3020 if (annotations
.length
> 0) {
3021 this.setAnnotations(annotations
, true);
3025 // These functions are all based on MochiKit.
3026 Dygraph
.update
= function (self
, o
) {
3027 if (typeof(o
) != 'undefined' && o
!== null) {
3029 if (o
.hasOwnProperty(k
)) {
3037 Dygraph
.isArrayLike
= function (o
) {
3038 var typ
= typeof(o
);
3040 (typ
!= 'object' && !(typ
== 'function' &&
3041 typeof(o
.item
) == 'function')) ||
3043 typeof(o
.length
) != 'number' ||
3051 Dygraph
.isDateLike
= function (o
) {
3052 if (typeof(o
) != "object" || o
=== null ||
3053 typeof(o
.getTime
) != 'function') {
3059 Dygraph
.clone
= function(o
) {
3060 // TODO(danvk): figure out how MochiKit's version works
3062 for (var i
= 0; i
< o
.length
; i
++) {
3063 if (Dygraph
.isArrayLike(o
[i
])) {
3064 r
.push(Dygraph
.clone(o
[i
]));
3074 * Get the CSV data. If it's in a function, call that function. If it's in a
3075 * file, do an XMLHttpRequest to get it.
3078 Dygraph
.prototype.start_
= function() {
3079 if (typeof this.file_
== 'function') {
3080 // CSV string. Pretend we got it via XHR.
3081 this.loadedEvent_(this.file_());
3082 } else if (Dygraph
.isArrayLike(this.file_
)) {
3083 this.rawData_
= this.parseArray_(this.file_
);
3085 } else if (typeof this.file_
== 'object' &&
3086 typeof this.file_
.getColumnRange
== 'function') {
3087 // must be a DataTable from gviz.
3088 this.parseDataTable_(this.file_
);
3090 } else if (typeof this.file_
== 'string') {
3091 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3092 if (this.file_
.indexOf('\n') >= 0) {
3093 this.loadedEvent_(this.file_
);
3095 var req
= new XMLHttpRequest();
3097 req
.onreadystatechange
= function () {
3098 if (req
.readyState
== 4) {
3099 if (req
.status
== 200) {
3100 caller
.loadedEvent_(req
.responseText
);
3105 req
.open("GET", this.file_
, true);
3109 this.error("Unknown data format: " + (typeof this.file_
));
3114 * Changes various properties of the graph. These can include:
3116 * <li>file: changes the source data for the graph</li>
3117 * <li>errorBars: changes whether the data contains stddev</li>
3119 * @param {Object} attrs The new properties and values
3121 Dygraph
.prototype.updateOptions
= function(attrs
) {
3122 // TODO(danvk): this is a mess. Rethink this function.
3123 if ('rollPeriod' in attrs
) {
3124 this.rollPeriod_
= attrs
.rollPeriod
;
3126 if ('dateWindow' in attrs
) {
3127 this.dateWindow_
= attrs
.dateWindow
;
3130 // TODO(danvk): validate per-series options.
3135 // highlightCircleSize
3137 Dygraph
.update(this.user_attrs_
, attrs
);
3138 Dygraph
.update(this.renderOptions_
, attrs
);
3140 this.labelsFromCSV_
= (this.attr_("labels") == null);
3142 // TODO(danvk): this doesn't match the constructor logic
3143 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3144 if (attrs
['file']) {
3145 this.file_
= attrs
['file'];
3153 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3154 * containing div (which has presumably changed size since the dygraph was
3155 * instantiated. If the width/height are specified, the div will be resized.
3157 * This is far more efficient than destroying and re-instantiating a
3158 * Dygraph, since it doesn't have to reparse the underlying data.
3160 * @param {Number} width Width (in pixels)
3161 * @param {Number} height Height (in pixels)
3163 Dygraph
.prototype.resize
= function(width
, height
) {
3164 if (this.resize_lock
) {
3167 this.resize_lock
= true;
3169 if ((width
=== null) != (height
=== null)) {
3170 this.warn("Dygraph.resize() should be called with zero parameters or " +
3171 "two non-NULL parameters. Pretending it was zero.");
3172 width
= height
= null;
3175 // TODO(danvk): there should be a clear() method.
3176 this.maindiv_
.innerHTML
= "";
3177 this.attrs_
.labelsDiv
= null;
3180 this.maindiv_
.style
.width
= width
+ "px";
3181 this.maindiv_
.style
.height
= height
+ "px";
3182 this.width_
= width
;
3183 this.height_
= height
;
3185 this.width_
= this.maindiv_
.offsetWidth
;
3186 this.height_
= this.maindiv_
.offsetHeight
;
3189 this.createInterface_();
3192 this.resize_lock
= false;
3196 * Adjusts the number of days in the rolling average. Updates the graph to
3197 * reflect the new averaging period.
3198 * @param {Number} length Number of days over which to average the data.
3200 Dygraph
.prototype.adjustRoll
= function(length
) {
3201 this.rollPeriod_
= length
;
3206 * Returns a boolean array of visibility statuses.
3208 Dygraph
.prototype.visibility
= function() {
3209 // Do lazy-initialization, so that this happens after we know the number of
3211 if (!this.attr_("visibility")) {
3212 this.attrs_
["visibility"] = [];
3214 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3215 this.attr_("visibility").push(true);
3217 return this.attr_("visibility");
3221 * Changes the visiblity of a series.
3223 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3224 var x
= this.visibility();
3225 if (num
< 0 || num
>= x
.length
) {
3226 this.warn("invalid series number in setVisibility: " + num
);
3234 * Update the list of annotations and redraw the chart.
3236 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3237 // Only add the annotation CSS rule once we know it will be used.
3238 Dygraph
.addAnnotationRule();
3239 this.annotations_
= ann
;
3240 this.layout_
.setAnnotations(this.annotations_
);
3241 if (!suppressDraw
) {
3247 * Return the list of annotations.
3249 Dygraph
.prototype.annotations
= function() {
3250 return this.annotations_
;
3254 * Get the index of a series (column) given its name. The first column is the
3255 * x-axis, so the data series start with index 1.
3257 Dygraph
.prototype.indexFromSetName
= function(name
) {
3258 var labels
= this.attr_("labels");
3259 for (var i
= 0; i
< labels
.length
; i
++) {
3260 if (labels
[i
] == name
) return i
;
3265 Dygraph
.addAnnotationRule
= function() {
3266 if (Dygraph
.addedAnnotationCSS
) return;
3268 var rule
= "border: 1px solid black; " +
3269 "background-color: white; " +
3270 "text-align: center;";
3272 var styleSheetElement
= document
.createElement("style");
3273 styleSheetElement
.type
= "text/css";
3274 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3276 // Find the first style sheet that we can access.
3277 // We may not add a rule to a style sheet from another domain for security
3278 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3279 // adds its own style sheets from google.com.
3280 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3281 if (document
.styleSheets
[i
].disabled
) continue;
3282 var mysheet
= document
.styleSheets
[i
];
3284 if (mysheet
.insertRule
) { // Firefox
3285 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3286 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3287 } else if (mysheet
.addRule
) { // IE
3288 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3290 Dygraph
.addedAnnotationCSS
= true;
3293 // Was likely a security exception.
3297 this.warn("Unable to add default annotation CSS rule; display may be off.");
3301 * Create a new canvas element. This is more complex than a simple
3302 * document.createElement("canvas") because of IE and excanvas.
3304 Dygraph
.createCanvas
= function() {
3305 var canvas
= document
.createElement("canvas");
3307 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3308 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3309 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3317 * A wrapper around Dygraph that implements the gviz API.
3318 * @param {Object} container The DOM object the visualization should live in.
3320 Dygraph
.GVizChart
= function(container
) {
3321 this.container
= container
;
3324 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3325 // Clear out any existing dygraph.
3326 // TODO(danvk): would it make more sense to simply redraw using the current
3327 // date_graph object?
3328 this.container
.innerHTML
= '';
3329 if (typeof(this.date_graph
) != 'undefined') {
3330 this.date_graph
.destroy();
3333 this.date_graph
= new Dygraph(this.container
, data
, options
);
3337 * Google charts compatible setSelection
3338 * Only row selection is supported, all points in the row will be highlighted
3339 * @param {Array} array of the selected cells
3342 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3344 if (selection_array
.length
) {
3345 row
= selection_array
[0].row
;
3347 this.date_graph
.setSelection(row
);
3351 * Google charts compatible getSelection implementation
3352 * @return {Array} array of the selected cells
3355 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3358 var row
= this.date_graph
.getSelection();
3360 if (row
< 0) return selection
;
3363 for (var i
in this.date_graph
.layout_
.datasets
) {
3364 selection
.push({row
: row
, column
: col
});
3371 // Older pages may still use this name.
3372 DateGraph
= Dygraph
;