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
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://dygraphs.com/
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
83 // Default attribute values.
84 Dygraph
.DEFAULT_ATTRS
= {
85 highlightCircleSize
: 3,
91 // TODO(danvk): move defaults from createStatusMessage_ here.
93 labelsSeparateLines
: false,
94 labelsShowZeroValues
: true,
97 showLabelsOnHighlight
: true,
99 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
104 axisLabelFontSize
: 14,
107 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
111 xValueFormatter
: Dygraph
.dateString_
,
112 xValueParser
: Dygraph
.dateParser
,
113 xTicker
: Dygraph
.dateTicker
,
121 wilsonInterval
: true, // only relevant if fractions is true
125 connectSeparatedPoints
: false,
128 hideOverlayOnMouseOut
: true,
133 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
136 // Various logging levels.
142 // Directions for panning and zooming. Use bit operations when combined
143 // values are possible.
144 Dygraph
.HORIZONTAL
= 1;
145 Dygraph
.VERTICAL
= 2;
147 // Used for initializing annotation CSS rules only once.
148 Dygraph
.addedAnnotationCSS
= false;
150 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
151 // Labels is no longer a constructor parameter, since it's typically set
152 // directly from the data source. It also conains a name for the x-axis,
153 // which the previous constructor form did not.
154 if (labels
!= null) {
155 var new_labels
= ["Date"];
156 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
157 Dygraph
.update(attrs
, { 'labels': new_labels
});
159 this.__init__(div
, file
, attrs
);
163 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
164 * and context <canvas> inside of it. See the constructor for details.
166 * @param {Element} div the Element to render the graph into.
167 * @param {String | Function} file Source data
168 * @param {Object} attrs Miscellaneous other options
171 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
172 // Hack for IE: if we're using excanvas and the document hasn't finished
173 // loading yet (and hence may not have initialized whatever it needs to
174 // initialize), then keep calling this routine periodically until it has.
175 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
176 typeof(G_vmlCanvasManager
) != 'undefined' &&
177 document
.readyState
!= 'complete') {
179 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
182 // Support two-argument constructor
183 if (attrs
== null) { attrs
= {}; }
185 // Copy the important bits into the object
186 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
189 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
190 this.previousVerticalX_
= -1;
191 this.fractions_
= attrs
.fractions
|| false;
192 this.dateWindow_
= attrs
.dateWindow
|| null;
194 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
195 this.is_initial_draw_
= true;
196 this.annotations_
= [];
198 // Clear the div. This ensure that, if multiple dygraphs are passed the same
199 // div, then only one will be drawn.
202 // If the div isn't already sized then inherit from our attrs or
203 // give it a default size.
204 if (div
.style
.width
== '') {
205 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
207 if (div
.style
.height
== '') {
208 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
210 this.width_
= parseInt(div
.style
.width
, 10);
211 this.height_
= parseInt(div
.style
.height
, 10);
212 // The div might have been specified as percent of the current window size,
213 // convert that to an appropriate number of pixels.
214 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
215 this.width_
= div
.offsetWidth
;
217 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
218 this.height_
= div
.offsetHeight
;
221 if (this.width_
== 0) {
222 this.error("dygraph has zero width. Please specify a width in pixels.");
224 if (this.height_
== 0) {
225 this.error("dygraph has zero height. Please specify a height in pixels.");
228 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
229 if (attrs
['stackedGraph']) {
230 attrs
['fillGraph'] = true;
231 // TODO(nikhilk): Add any other stackedGraph checks here.
234 // Dygraphs has many options, some of which interact with one another.
235 // To keep track of everything, we maintain two sets of options:
237 // this.user_attrs_ only options explicitly set by the user.
238 // this.attrs_ defaults, options derived from user_attrs_, data.
240 // Options are then accessed this.attr_('attr'), which first looks at
241 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
242 // defaults without overriding behavior that the user specifically asks for.
243 this.user_attrs_
= {};
244 Dygraph
.update(this.user_attrs_
, attrs
);
247 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
249 this.boundaryIds_
= [];
251 // Make a note of whether labels will be pulled from the CSV file.
252 this.labelsFromCSV_
= (this.attr_("labels") == null);
254 // Create the containing DIV and other interactive elements
255 this.createInterface_();
260 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
262 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
263 this.user_attrs_
[seriesName
] != null &&
264 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
265 return this.user_attrs_
[seriesName
][name
];
266 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
267 return this.user_attrs_
[name
];
268 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
269 return this.attrs_
[name
];
275 // TODO(danvk): any way I can get the line numbers to be this.warn call?
276 Dygraph
.prototype.log
= function(severity
, message
) {
277 if (typeof(console
) != 'undefined') {
280 console
.debug('dygraphs: ' + message
);
283 console
.info('dygraphs: ' + message
);
285 case Dygraph
.WARNING
:
286 console
.warn('dygraphs: ' + message
);
289 console
.error('dygraphs: ' + message
);
294 Dygraph
.prototype.info
= function(message
) {
295 this.log(Dygraph
.INFO
, message
);
297 Dygraph
.prototype.warn
= function(message
) {
298 this.log(Dygraph
.WARNING
, message
);
300 Dygraph
.prototype.error
= function(message
) {
301 this.log(Dygraph
.ERROR
, message
);
305 * Returns the current rolling period, as set by the user or an option.
306 * @return {Number} The number of days in the rolling window
308 Dygraph
.prototype.rollPeriod
= function() {
309 return this.rollPeriod_
;
313 * Returns the currently-visible x-range. This can be affected by zooming,
314 * panning or a call to updateOptions.
315 * Returns a two-element array: [left, right].
316 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
318 Dygraph
.prototype.xAxisRange
= function() {
319 if (this.dateWindow_
) return this.dateWindow_
;
321 // The entire chart is visible.
322 var left
= this.rawData_
[0][0];
323 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
324 return [left
, right
];
328 * Returns the currently-visible y-range for an axis. This can be affected by
329 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
330 * called with no arguments, returns the range of the first axis.
331 * Returns a two-element array: [bottom, top].
333 Dygraph
.prototype.yAxisRange
= function(idx
) {
334 if (typeof(idx
) == "undefined") idx
= 0;
335 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
336 return [ this.axes_
[idx
].computedValueRange
[0],
337 this.axes_
[idx
].computedValueRange
[1] ];
341 * Returns the currently-visible y-ranges for each axis. This can be affected by
342 * zooming, panning, calls to updateOptions, etc.
343 * Returns an array of [bottom, top] pairs, one for each y-axis.
345 Dygraph
.prototype.yAxisRanges
= function() {
347 for (var i
= 0; i
< this.axes_
.length
; i
++) {
348 ret
.push(this.yAxisRange(i
));
353 // TODO(danvk): use these functions throughout dygraphs.
355 * Convert from data coordinates to canvas/div X/Y coordinates.
356 * If specified, do this conversion for the coordinate system of a particular
357 * axis. Uses the first axis by default.
358 * Returns a two-element array: [X, Y]
360 * Note: use toDomXCoord instead of toDomCoords(x. null) and use toDomYCoord
361 * instead of toDomCoords(null, y, axis).
363 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
364 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
368 * Convert from data x coordinates to canvas/div X coordinate.
369 * If specified, do this conversion for the coordinate system of a particular
370 * axis. Uses the first axis by default.
371 * returns a single value or null if x is null.
373 Dygraph
.prototype.toDomXCoord
= function(x
) {
378 var area
= this.plotter_
.area
;
379 var xRange
= this.xAxisRange();
380 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
384 * Convert from data x coordinates to canvas/div Y coordinate and optional
385 * axis. Uses the first axis by default.
387 * returns a single value or null if y is null.
389 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
390 var pct
= toPercentYCoord(y
, axis
);
395 return area
.y
+ pct
* area
.h
;
399 * Convert from canvas/div coords to data coordinates.
400 * If specified, do this conversion for the coordinate system of a particular
401 * axis. Uses the first axis by default.
402 * Returns a two-element array: [X, Y].
404 * Note: use toDataXCoord instead of toDataCoords(x. null) and use toDataYCoord
405 * instead of toDataCoords(null, y, axis).
407 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
408 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
412 * Convert from canvas/div x coordinate to data coordinate.
414 * If x is null, this returns null.
416 Dygraph
.prototype.toDataXCoord
= function(x
) {
421 var area
= this.plotter_
.area
;
422 var xRange
= this.xAxisRange();
423 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
427 * Convert from canvas/div y coord to value.
429 * If y is null, this returns null.
430 * if axis is null, this uses the first axis.
432 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
437 var area
= this.plotter_
.area
;
438 var yRange
= this.yAxisRange(axis
);
440 if (!this.attr_("logscale")) {
441 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
443 // Computing the inverse of toDomCoord.
444 var pct
= (y
- area
.y
) / area
.h
446 // Computing the inverse of toPercentYCoord. The function was arrived at with
447 // the following steps:
449 // Original calcuation:
450 // pct = (logr1 - Math.log(y)) / (logr1
- Math
.log(yRange
[0]));
452 // Move denominator to both sides:
453 // pct * (logr1 - Math.log(yRange[0])) = logr1 - Math.log(y);
455 // subtract logr1, and take the negative value.
456 // logr1 - (pct * (logr1 - Math.log(yRange[0]))) = Math.log(y);
458 // Swap both sides of the equation, and we can compute the log of the
459 // return value. Which means we just need to use that as the exponent in
461 // Math.log(y) = logr1 - (pct * (logr1 - Math.log(yRange[0])));
463 var logr1
= Math
.log(yRange
[1]);
464 var exponent
= logr1
- (pct
* (logr1
- Math
.log(yRange
[0])));
465 var value
= Math
.pow(Math
.E
, exponent
);
471 * Converts a y for an axis to a percentage from the top to the
474 * If the coordinate represents a value visible on the canvas, then
475 * the value will be between 0 and 1, where 0 is the top of the canvas.
476 * However, this method will return values outside the range, as
477 * values can fall outside the canvas.
479 * If y is null, this returns null.
480 * if axis is null, this uses the first axis.
482 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
487 var area
= this.plotter_
.area
;
488 var yRange
= this.yAxisRange(axis
);
491 if (!this.attr_("logscale")) {
492 // yrange[1] - y is unit distance from the bottom.
493 // yrange[1] - yrange[0] is the scale of the range.
494 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
495 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
497 var logr1
= Math
.log(yRange
[1]);
498 pct
= (logr1
- Math
.log(y
)) / (logr1
- Math
.log(yRange
[0]));
504 * Returns the number of columns (including the independent variable).
506 Dygraph
.prototype.numColumns
= function() {
507 return this.rawData_
[0].length
;
511 * Returns the number of rows (excluding any header/label row).
513 Dygraph
.prototype.numRows
= function() {
514 return this.rawData_
.length
;
518 * Returns the value in the given row and column. If the row and column exceed
519 * the bounds on the data, returns null. Also returns null if the value is
522 Dygraph
.prototype.getValue
= function(row
, col
) {
523 if (row
< 0 || row
> this.rawData_
.length
) return null;
524 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
526 return this.rawData_
[row
][col
];
529 Dygraph
.addEvent
= function(el
, evt
, fn
) {
530 var normed_fn
= function(e
) {
531 if (!e
) var e
= window
.event
;
534 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
535 el
.addEventListener(evt
, normed_fn
, false);
537 el
.attachEvent('on' + evt
, normed_fn
);
542 // Based on the article at
543 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
544 Dygraph
.cancelEvent
= function(e
) {
545 e
= e
? e
: window
.event
;
546 if (e
.stopPropagation
) {
549 if (e
.preventDefault
) {
552 e
.cancelBubble
= true;
554 e
.returnValue
= false;
559 * Generates interface elements for the Dygraph: a containing div, a div to
560 * display the current point, and a textbox to adjust the rolling average
561 * period. Also creates the Renderer/Layout elements.
564 Dygraph
.prototype.createInterface_
= function() {
565 // Create the all-enclosing graph div
566 var enclosing
= this.maindiv_
;
568 this.graphDiv
= document
.createElement("div");
569 this.graphDiv
.style
.width
= this.width_
+ "px";
570 this.graphDiv
.style
.height
= this.height_
+ "px";
571 enclosing
.appendChild(this.graphDiv
);
573 // Create the canvas for interactive parts of the chart.
574 this.canvas_
= Dygraph
.createCanvas();
575 this.canvas_
.style
.position
= "absolute";
576 this.canvas_
.width
= this.width_
;
577 this.canvas_
.height
= this.height_
;
578 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
579 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
581 // ... and for static parts of the chart.
582 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
584 // The interactive parts of the graph are drawn on top of the chart.
585 this.graphDiv
.appendChild(this.hidden_
);
586 this.graphDiv
.appendChild(this.canvas_
);
587 this.mouseEventElement_
= this.canvas_
;
590 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
591 dygraph
.mouseMove_(e
);
593 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
594 dygraph
.mouseOut_(e
);
597 // Create the grapher
598 // TODO(danvk): why does the Layout need its own set of options?
599 this.layoutOptions_
= { 'xOriginIsZero': false };
600 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
601 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
602 Dygraph
.update(this.layoutOptions_
, {
603 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
605 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
607 // TODO(danvk): why does the Renderer need its own set of options?
608 this.renderOptions_
= { colorScheme
: this.colors_
,
610 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
611 Dygraph
.update(this.renderOptions_
, this.attrs_
);
612 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
614 this.createStatusMessage_();
615 this.createDragInterface_();
619 * Detach DOM elements in the dygraph and null out all data references.
620 * Calling this when you're done with a dygraph can dramatically reduce memory
621 * usage. See, e.g., the tests/perf.html example.
623 Dygraph
.prototype.destroy
= function() {
624 var removeRecursive
= function(node
) {
625 while (node
.hasChildNodes()) {
626 removeRecursive(node
.firstChild
);
627 node
.removeChild(node
.firstChild
);
630 removeRecursive(this.maindiv_
);
632 var nullOut
= function(obj
) {
634 if (typeof(obj
[n
]) === 'object') {
640 // These may not all be necessary, but it can't hurt...
641 nullOut(this.layout_
);
642 nullOut(this.plotter_
);
647 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
648 * this particular canvas. All Dygraph work is done on this.canvas_.
649 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
650 * @return {Object} The newly-created canvas
653 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
654 var h
= Dygraph
.createCanvas();
655 h
.style
.position
= "absolute";
656 // TODO(danvk): h should be offset from canvas. canvas needs to include
657 // some extra area to make it easier to zoom in on the far left and far
658 // right. h needs to be precisely the plot area, so that clipping occurs.
659 h
.style
.top
= canvas
.style
.top
;
660 h
.style
.left
= canvas
.style
.left
;
661 h
.width
= this.width_
;
662 h
.height
= this.height_
;
663 h
.style
.width
= this.width_
+ "px"; // for IE
664 h
.style
.height
= this.height_
+ "px"; // for IE
668 // Taken from MochiKit.Color
669 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
673 if (saturation
=== 0) {
678 var i
= Math
.floor(hue
* 6);
679 var f
= (hue
* 6) - i
;
680 var p
= value
* (1 - saturation
);
681 var q
= value
* (1 - (saturation
* f
));
682 var t
= value
* (1 - (saturation
* (1 - f
)));
684 case 1: red
= q
; green
= value
; blue
= p
; break;
685 case 2: red
= p
; green
= value
; blue
= t
; break;
686 case 3: red
= p
; green
= q
; blue
= value
; break;
687 case 4: red
= t
; green
= p
; blue
= value
; break;
688 case 5: red
= value
; green
= p
; blue
= q
; break;
689 case 6: // fall through
690 case 0: red
= value
; green
= t
; blue
= p
; break;
693 red
= Math
.floor(255 * red
+ 0.5);
694 green
= Math
.floor(255 * green
+ 0.5);
695 blue
= Math
.floor(255 * blue
+ 0.5);
696 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
701 * Generate a set of distinct colors for the data series. This is done with a
702 * color wheel. Saturation/Value are customizable, and the hue is
703 * equally-spaced around the color wheel. If a custom set of colors is
704 * specified, that is used instead.
707 Dygraph
.prototype.setColors_
= function() {
708 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
709 // away with this.renderOptions_.
710 var num
= this.attr_("labels").length
- 1;
712 var colors
= this.attr_('colors');
714 var sat
= this.attr_('colorSaturation') || 1.0;
715 var val
= this.attr_('colorValue') || 0.5;
716 var half
= Math
.ceil(num
/ 2);
717 for (var i
= 1; i
<= num
; i
++) {
718 if (!this.visibility()[i
-1]) continue;
719 // alternate colors for high contrast.
720 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
721 var hue
= (1.0 * idx
/ (1 + num
));
722 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
725 for (var i
= 0; i
< num
; i
++) {
726 if (!this.visibility()[i
]) continue;
727 var colorStr
= colors
[i
% colors
.length
];
728 this.colors_
.push(colorStr
);
732 // TODO(danvk): update this w/r
/t/ the
new options system
.
733 this.renderOptions_
.colorScheme
= this.colors_
;
734 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
735 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
736 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
740 * Return the list of colors. This is either the list of colors passed in the
741 * attributes, or the autogenerated list of rgb(r,g,b) strings.
742 * @return {Array<string>} The list of colors.
744 Dygraph
.prototype.getColors
= function() {
748 // The following functions are from quirksmode.org with a modification for Safari from
749 // http://blog.firetree.net/2005/07/04/javascript-find-position/
750 // http://www.quirksmode.org/js
/findpos
.html
751 Dygraph
.findPosX
= function(obj
) {
756 curleft
+= obj
.offsetLeft
;
757 if(!obj
.offsetParent
)
759 obj
= obj
.offsetParent
;
766 Dygraph
.findPosY
= function(obj
) {
771 curtop
+= obj
.offsetTop
;
772 if(!obj
.offsetParent
)
774 obj
= obj
.offsetParent
;
784 * Create the div that contains information on the selected point(s)
785 * This goes in the top right of the canvas, unless an external div has already
789 Dygraph
.prototype.createStatusMessage_
= function() {
790 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
791 if (userLabelsDiv
&& null != userLabelsDiv
792 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
793 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
795 if (!this.attr_("labelsDiv")) {
796 var divWidth
= this.attr_('labelsDivWidth');
798 "position": "absolute",
801 "width": divWidth
+ "px",
803 "left": (this.width_
- divWidth
- 2) + "px",
804 "background": "white",
806 "overflow": "hidden"};
807 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
808 var div
= document
.createElement("div");
809 for (var name
in messagestyle
) {
810 if (messagestyle
.hasOwnProperty(name
)) {
811 div
.style
[name
] = messagestyle
[name
];
814 this.graphDiv
.appendChild(div
);
815 this.attrs_
.labelsDiv
= div
;
820 * Position the labels div so that its right edge is flush with the right edge
821 * of the charting area.
823 Dygraph
.prototype.positionLabelsDiv_
= function() {
824 // Don't touch a user-specified labelsDiv.
825 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
827 var area
= this.plotter_
.area
;
828 var div
= this.attr_("labelsDiv");
829 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
833 * Create the text box to adjust the averaging period
836 Dygraph
.prototype.createRollInterface_
= function() {
837 // Create a roller if one doesn't exist already.
839 this.roller_
= document
.createElement("input");
840 this.roller_
.type
= "text";
841 this.roller_
.style
.display
= "none";
842 this.graphDiv
.appendChild(this.roller_
);
845 var display
= this.attr_('showRoller') ? 'block' : 'none';
847 var textAttr
= { "position": "absolute",
849 "top": (this.plotter_
.area
.h
- 25) + "px",
850 "left": (this.plotter_
.area
.x
+ 1) + "px",
853 this.roller_
.size
= "2";
854 this.roller_
.value
= this.rollPeriod_
;
855 for (var name
in textAttr
) {
856 if (textAttr
.hasOwnProperty(name
)) {
857 this.roller_
.style
[name
] = textAttr
[name
];
862 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
865 // These functions are taken from MochiKit.Signal
866 Dygraph
.pageX
= function(e
) {
868 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
871 var b
= document
.body
;
873 (de
.scrollLeft
|| b
.scrollLeft
) -
874 (de
.clientLeft
|| 0);
878 Dygraph
.pageY
= function(e
) {
880 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
883 var b
= document
.body
;
885 (de
.scrollTop
|| b
.scrollTop
) -
890 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
891 return Dygraph
.pageX(e
) - context
.px
894 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
895 return Dygraph
.pageY(e
) - context
.py
898 // Called in response to an interaction model operation that
899 // should start the default panning behavior.
901 // It's used in the default callback for "mousedown" operations.
902 // Custom interaction model builders can use it to provide the default
905 Dygraph
.startPan
= function(event
, g
, context
) {
906 context
.isPanning
= true;
907 var xRange
= g
.xAxisRange();
908 context
.dateRange
= xRange
[1] - xRange
[0];
910 // Record the range of each y-axis at the start of the drag.
911 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
912 context
.is2DPan
= false;
913 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
914 var axis
= g
.axes_
[i
];
915 var yRange
= g
.yAxisRange(i
);
916 axis
.dragValueRange
= yRange
[1] - yRange
[0];
917 axis
.draggingValue
= g
.toDataYCoord(context
.dragStartY
, i
);
918 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
921 // TODO(konigsberg): Switch from all this math to toDataCoords?
922 // Seems to work for the dragging value.
923 context
.draggingDate
= (context
.dragStartX
/ g
.width_
) * context
.dateRange
+ xRange
[0];
926 // Called in response to an interaction model operation that
927 // responds to an event that pans the view.
929 // It's used in the default callback for "mousemove" operations.
930 // Custom interaction model builders can use it to provide the default
933 Dygraph
.movePan
= function(event
, g
, context
) {
934 context
.dragEndX
= g
.dragGetX_(event
, context
);
935 context
.dragEndY
= g
.dragGetY_(event
, context
);
937 // TODO(danvk): update this comment
938 // Want to have it so that:
939 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
940 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
941 // 3. draggingValue appears at dragEndY.
942 // 4. valueRange is unaltered.
944 var minDate
= context
.draggingDate
- (context
.dragEndX
/ g
.width_
) * context
.dateRange
;
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 var y_frac
= context
.dragEndY
/ g
.height_
;
952 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
953 var axis
= g
.axes_
[i
];
954 var maxValue
= axis
.draggingValue
+ y_frac
* axis
.dragValueRange
;
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 context
.isPanning
= false;
972 context
.is2DPan
= false;
973 context
.draggingDate
= null;
974 context
.dateRange
= null;
975 context
.valueRange
= null;
978 // Called in response to an interaction model operation that
979 // responds to an event that starts zooming.
981 // It's used in the default callback for "mousedown" operations.
982 // Custom interaction model builders can use it to provide the default
985 Dygraph
.startZoom
= function(event
, g
, context
) {
986 context
.isZooming
= true;
989 // Called in response to an interaction model operation that
990 // responds to an event that defines zoom boundaries.
992 // It's used in the default callback for "mousemove" operations.
993 // Custom interaction model builders can use it to provide the default
996 Dygraph
.moveZoom
= function(event
, g
, context
) {
997 context
.dragEndX
= g
.dragGetX_(event
, context
);
998 context
.dragEndY
= g
.dragGetY_(event
, context
);
1000 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1001 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1003 // drag direction threshold for y axis is twice as large as x axis
1004 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1007 context
.dragDirection
,
1012 context
.prevDragDirection
,
1016 context
.prevEndX
= context
.dragEndX
;
1017 context
.prevEndY
= context
.dragEndY
;
1018 context
.prevDragDirection
= context
.dragDirection
;
1021 // Called in response to an interaction model operation that
1022 // responds to an event that performs a zoom based on previously defined
1025 // It's used in the default callback for "mouseup" operations.
1026 // Custom interaction model builders can use it to provide the default
1027 // zooming behavior.
1029 Dygraph
.endZoom
= function(event
, g
, context
) {
1030 context
.isZooming
= false;
1031 context
.dragEndX
= g
.dragGetX_(event
, context
);
1032 context
.dragEndY
= g
.dragGetY_(event
, context
);
1033 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1034 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1036 if (regionWidth
< 2 && regionHeight
< 2 &&
1037 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1038 // TODO(danvk): pass along more info about the points, e.g. 'x'
1039 if (g
.attr_('clickCallback') != null) {
1040 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1042 if (g
.attr_('pointClickCallback')) {
1043 // check if the click was on a particular point.
1044 var closestIdx
= -1;
1045 var closestDistance
= 0;
1046 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1047 var p
= g
.selPoints_
[i
];
1048 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1049 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1050 if (closestIdx
== -1 || distance
< closestDistance
) {
1051 closestDistance
= distance
;
1056 // Allow any click within two pixels of the dot.
1057 var radius
= g
.attr_('highlightCircleSize') + 2;
1058 if (closestDistance
<= 5 * 5) {
1059 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1064 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1065 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1066 Math
.max(context
.dragStartX
, context
.dragEndX
));
1067 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1068 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1069 Math
.max(context
.dragStartY
, context
.dragEndY
));
1071 g
.canvas_
.getContext("2d").clearRect(0, 0,
1075 context
.dragStartX
= null;
1076 context
.dragStartY
= null;
1079 Dygraph
.defaultInteractionModel
= {
1080 // Track the beginning of drag events
1081 mousedown
: function(event
, g
, context
) {
1082 context
.initializeMouseDown(event
, g
, context
);
1084 if (event
.altKey
|| event
.shiftKey
) {
1085 Dygraph
.startPan(event
, g
, context
);
1087 Dygraph
.startZoom(event
, g
, context
);
1091 // Draw zoom rectangles when the mouse is down and the user moves around
1092 mousemove
: function(event
, g
, context
) {
1093 if (context
.isZooming
) {
1094 Dygraph
.moveZoom(event
, g
, context
);
1095 } else if (context
.isPanning
) {
1096 Dygraph
.movePan(event
, g
, context
);
1100 mouseup
: function(event
, g
, context
) {
1101 if (context
.isZooming
) {
1102 Dygraph
.endZoom(event
, g
, context
);
1103 } else if (context
.isPanning
) {
1104 Dygraph
.endPan(event
, g
, context
);
1108 // Temporarily cancel the dragging event when the mouse leaves the graph
1109 mouseout
: function(event
, g
, context
) {
1110 if (context
.isZooming
) {
1111 context
.dragEndX
= null;
1112 context
.dragEndY
= null;
1116 // Disable zooming out if panning.
1117 dblclick
: function(event
, g
, context
) {
1118 if (event
.altKey
|| event
.shiftKey
) {
1121 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1122 // friendlier to public use.
1127 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1130 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1134 Dygraph
.prototype.createDragInterface_
= function() {
1136 // Tracks whether the mouse is down right now
1138 isPanning
: false, // is this drag part of a pan?
1139 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1144 dragDirection
: null,
1147 prevDragDirection
: null,
1149 // TODO(danvk): update this comment
1150 // draggingDate and draggingValue represent the [date,value] point on the
1151 // graph at which the mouse was pressed. As the mouse moves while panning,
1152 // the viewport must pan so that the mouse position points to
1153 // [draggingDate, draggingValue]
1156 // TODO(danvk): update this comment
1157 // The range in second/value units that the viewport encompasses during a
1158 // panning operation.
1161 // Utility function to convert page-wide coordinates to canvas coords
1165 initializeMouseDown
: function(event
, g
, context
) {
1166 // prevents mouse drags from selecting page text.
1167 if (event
.preventDefault
) {
1168 event
.preventDefault(); // Firefox, Chrome, etc.
1170 event
.returnValue
= false; // IE
1171 event
.cancelBubble
= true;
1174 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1175 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1176 context
.dragStartX
= g
.dragGetX_(event
, context
);
1177 context
.dragStartY
= g
.dragGetY_(event
, context
);
1181 var interactionModel
= this.attr_("interactionModel");
1183 // Self is the graph.
1186 // Function that binds the graph and context to the handler.
1187 var bindHandler
= function(handler
) {
1188 return function(event
) {
1189 handler(event
, self
, context
);
1193 for (var eventName
in interactionModel
) {
1194 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1195 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1196 bindHandler(interactionModel
[eventName
]));
1199 // If the user releases the mouse button during a drag, but not over the
1200 // canvas, then it doesn't count as a zooming action.
1201 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1202 if (context
.isZooming
|| context
.isPanning
) {
1203 context
.isZooming
= false;
1204 context
.dragStartX
= null;
1205 context
.dragStartY
= null;
1208 if (context
.isPanning
) {
1209 context
.isPanning
= false;
1210 context
.draggingDate
= null;
1211 context
.dateRange
= null;
1212 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1213 delete self
.axes_
[i
].draggingValue
;
1214 delete self
.axes_
[i
].dragValueRange
;
1221 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1222 * up any previous zoom rectangles that were drawn. This could be optimized to
1223 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1226 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1227 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1228 * @param {Number} startX The X position where the drag started, in canvas
1230 * @param {Number} endX The current X position of the drag, in canvas coords.
1231 * @param {Number} startY The Y position where the drag started, in canvas
1233 * @param {Number} endY The current Y position of the drag, in canvas coords.
1234 * @param {Number} prevDirection the value of direction on the previous call to
1235 * this function. Used to avoid excess redrawing
1236 * @param {Number} prevEndX The value of endX on the previous call to this
1237 * function. Used to avoid excess redrawing
1238 * @param {Number} prevEndY The value of endY on the previous call to this
1239 * function. Used to avoid excess redrawing
1242 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1243 prevDirection
, prevEndX
, prevEndY
) {
1244 var ctx
= this.canvas_
.getContext("2d");
1246 // Clean up from the previous rect if necessary
1247 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1248 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1249 Math
.abs(startX
- prevEndX
), this.height_
);
1250 } else if (prevDirection
== Dygraph
.VERTICAL
){
1251 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1252 this.width_
, Math
.abs(startY
- prevEndY
));
1255 // Draw a light-grey rectangle to show the new viewing area
1256 if (direction
== Dygraph
.HORIZONTAL
) {
1257 if (endX
&& startX
) {
1258 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1259 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1260 Math
.abs(endX
- startX
), this.height_
);
1263 if (direction
== Dygraph
.VERTICAL
) {
1264 if (endY
&& startY
) {
1265 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1266 ctx
.fillRect(0, Math
.min(startY
, endY
),
1267 this.width_
, Math
.abs(endY
- startY
));
1273 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1274 * the canvas. The exact zoom window may be slightly larger if there are no data
1275 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1276 * which accepts dates that match the raw data. This function redraws the graph.
1278 * @param {Number} lowX The leftmost pixel value that should be visible.
1279 * @param {Number} highX The rightmost pixel value that should be visible.
1282 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1283 // Find the earliest and latest dates contained in this canvasx range.
1284 // Convert the call to date ranges of the raw data.
1285 var minDate
= this.toDataXCoord(lowX
);
1286 var maxDate
= this.toDataXCoord(highX
);
1287 this.doZoomXDates_(minDate
, maxDate
);
1291 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1292 * method with doZoomX which accepts pixel coordinates. This function redraws
1295 * @param {Number} minDate The minimum date that should be visible.
1296 * @param {Number} maxDate The maximum date that should be visible.
1299 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1300 this.dateWindow_
= [minDate
, maxDate
];
1302 if (this.attr_("zoomCallback")) {
1303 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1308 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1309 * the canvas. This function redraws the graph.
1311 * @param {Number} lowY The topmost pixel value that should be visible.
1312 * @param {Number} highY The lowest pixel value that should be visible.
1315 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1316 // Find the highest and lowest values in pixel range for each axis.
1317 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1318 // This is because pixels increase as you go down on the screen, whereas data
1319 // coordinates increase as you go up the screen.
1320 var valueRanges
= [];
1321 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1322 var hi
= this.toDataYCoord(lowY
, i
);
1323 var low
= this.toDataYCoord(highY
, i
);
1324 this.axes_
[i
].valueWindow
= [low
, hi
];
1325 valueRanges
.push([low
, hi
]);
1329 if (this.attr_("zoomCallback")) {
1330 var xRange
= this.xAxisRange();
1331 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1336 * Reset the zoom to the original view coordinates. This is the same as
1337 * double-clicking on the graph.
1341 Dygraph
.prototype.doUnzoom_
= function() {
1343 if (this.dateWindow_
!= null) {
1345 this.dateWindow_
= null;
1348 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1349 if (this.axes_
[i
].valueWindow
!= null) {
1351 delete this.axes_
[i
].valueWindow
;
1356 // Putting the drawing operation before the callback because it resets
1359 if (this.attr_("zoomCallback")) {
1360 var minDate
= this.rawData_
[0][0];
1361 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1362 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1368 * When the mouse moves in the canvas, display information about a nearby data
1369 * point and draw dots over those points in the data series. This function
1370 * takes care of cleanup of previously-drawn dots.
1371 * @param {Object} event The mousemove event from the browser.
1374 Dygraph
.prototype.mouseMove_
= function(event
) {
1375 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1376 var points
= this.layout_
.points
;
1381 // Loop through all the points and find the date nearest to our current
1383 var minDist
= 1e+100;
1385 for (var i
= 0; i
< points
.length
; i
++) {
1386 var point
= points
[i
];
1387 if (point
== null) continue;
1388 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1389 if (dist
> minDist
) continue;
1393 if (idx
>= 0) lastx
= points
[idx
].xval
;
1394 // Check that you can really highlight the last day's data
1395 var last
= points
[points
.length
-1];
1396 if (last
!= null && canvasx
> last
.canvasx
)
1397 lastx
= points
[points
.length
-1].xval
;
1399 // Extract the points we've selected
1400 this.selPoints_
= [];
1401 var l
= points
.length
;
1402 if (!this.attr_("stackedGraph")) {
1403 for (var i
= 0; i
< l
; i
++) {
1404 if (points
[i
].xval
== lastx
) {
1405 this.selPoints_
.push(points
[i
]);
1409 // Need to 'unstack' points starting from the bottom
1410 var cumulative_sum
= 0;
1411 for (var i
= l
- 1; i
>= 0; i
--) {
1412 if (points
[i
].xval
== lastx
) {
1413 var p
= {}; // Clone the point since we modify it
1414 for (var k
in points
[i
]) {
1415 p
[k
] = points
[i
][k
];
1417 p
.yval
-= cumulative_sum
;
1418 cumulative_sum
+= p
.yval
;
1419 this.selPoints_
.push(p
);
1422 this.selPoints_
.reverse();
1425 if (this.attr_("highlightCallback")) {
1426 var px
= this.lastx_
;
1427 if (px
!== null && lastx
!= px
) {
1428 // only fire if the selected point has changed.
1429 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1433 // Save last x position for callbacks.
1434 this.lastx_
= lastx
;
1436 this.updateSelection_();
1440 * Transforms layout_.points index into data row number.
1441 * @param int layout_.points index
1442 * @return int row number, or -1 if none could be found.
1445 Dygraph
.prototype.idxToRow_
= function(idx
) {
1446 if (idx
< 0) return -1;
1448 for (var i
in this.layout_
.datasets
) {
1449 if (idx
< this.layout_
.datasets
[i
].length
) {
1450 return this.boundaryIds_
[0][0]+idx
;
1452 idx
-= this.layout_
.datasets
[i
].length
;
1458 * Draw dots over the selectied points in the data series. This function
1459 * takes care of cleanup of previously-drawn dots.
1462 Dygraph
.prototype.updateSelection_
= function() {
1463 // Clear the previously drawn vertical, if there is one
1464 var ctx
= this.canvas_
.getContext("2d");
1465 if (this.previousVerticalX_
>= 0) {
1466 // Determine the maximum highlight circle size.
1467 var maxCircleSize
= 0;
1468 var labels
= this.attr_('labels');
1469 for (var i
= 1; i
< labels
.length
; i
++) {
1470 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1471 if (r
> maxCircleSize
) maxCircleSize
= r
;
1473 var px
= this.previousVerticalX_
;
1474 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1475 2 * maxCircleSize
+ 2, this.height_
);
1478 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1480 if (this.selPoints_
.length
> 0) {
1481 var canvasx
= this.selPoints_
[0].canvasx
;
1483 // Set the status message to indicate the selected point(s)
1484 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1485 var fmtFunc
= this.attr_('yValueFormatter');
1486 var clen
= this.colors_
.length
;
1488 if (this.attr_('showLabelsOnHighlight')) {
1489 // Set the status message to indicate the selected point(s)
1490 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1491 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1492 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1493 if (this.attr_("labelsSeparateLines")) {
1496 var point
= this.selPoints_
[i
];
1497 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1498 var yval
= fmtFunc(point
.yval
);
1499 replace
+= " <b><font color='" + c
.toHex() + "'>"
1500 + point
.name
+ "</font></b>:"
1504 this.attr_("labelsDiv").innerHTML
= replace
;
1507 // Draw colored circles over the center of each selected point
1509 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1510 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1512 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1514 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1515 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1516 0, 2 * Math
.PI
, false);
1521 this.previousVerticalX_
= canvasx
;
1526 * Set manually set selected dots, and display information about them
1527 * @param int row number that should by highlighted
1528 * false value clears the selection
1531 Dygraph
.prototype.setSelection
= function(row
) {
1532 // Extract the points we've selected
1533 this.selPoints_
= [];
1536 if (row
!== false) {
1537 row
= row
-this.boundaryIds_
[0][0];
1540 if (row
!== false && row
>= 0) {
1541 for (var i
in this.layout_
.datasets
) {
1542 if (row
< this.layout_
.datasets
[i
].length
) {
1543 var point
= this.layout_
.points
[pos
+row
];
1545 if (this.attr_("stackedGraph")) {
1546 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1549 this.selPoints_
.push(point
);
1551 pos
+= this.layout_
.datasets
[i
].length
;
1555 if (this.selPoints_
.length
) {
1556 this.lastx_
= this.selPoints_
[0].xval
;
1557 this.updateSelection_();
1560 this.clearSelection();
1566 * The mouse has left the canvas. Clear out whatever artifacts remain
1567 * @param {Object} event the mouseout event from the browser.
1570 Dygraph
.prototype.mouseOut_
= function(event
) {
1571 if (this.attr_("unhighlightCallback")) {
1572 this.attr_("unhighlightCallback")(event
);
1575 if (this.attr_("hideOverlayOnMouseOut")) {
1576 this.clearSelection();
1581 * Remove all selection from the canvas
1584 Dygraph
.prototype.clearSelection
= function() {
1585 // Get rid of the overlay data
1586 var ctx
= this.canvas_
.getContext("2d");
1587 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1588 this.attr_("labelsDiv").innerHTML
= "";
1589 this.selPoints_
= [];
1594 * Returns the number of the currently selected row
1595 * @return int row number, of -1 if nothing is selected
1598 Dygraph
.prototype.getSelection
= function() {
1599 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1603 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1604 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1605 return row
+ this.boundaryIds_
[0][0];
1611 Dygraph
.zeropad
= function(x
) {
1612 if (x
< 10) return "0" + x
; else return "" + x
;
1616 * Return a string version of the hours, minutes and seconds portion of a date.
1617 * @param {Number} date The JavaScript date (ms since epoch)
1618 * @return {String} A time of the form "HH:MM:SS"
1621 Dygraph
.hmsString_
= function(date
) {
1622 var zeropad
= Dygraph
.zeropad
;
1623 var d
= new Date(date
);
1624 if (d
.getSeconds()) {
1625 return zeropad(d
.getHours()) + ":" +
1626 zeropad(d
.getMinutes()) + ":" +
1627 zeropad(d
.getSeconds());
1629 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1634 * Convert a JS date to a string appropriate to display on an axis that
1635 * is displaying values at the stated granularity.
1636 * @param {Date} date The date to format
1637 * @param {Number} granularity One of the Dygraph granularity constants
1638 * @return {String} The formatted date
1641 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1642 if (granularity
>= Dygraph
.DECADAL
) {
1643 return date
.strftime('%Y');
1644 } else if (granularity
>= Dygraph
.MONTHLY
) {
1645 return date
.strftime('%b %y');
1647 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1648 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1649 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1651 return Dygraph
.hmsString_(date
.getTime());
1657 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1658 * @param {Number} date The JavaScript date (ms since epoch)
1659 * @return {String} A date of the form "YYYY/MM/DD"
1662 Dygraph
.dateString_
= function(date
, self
) {
1663 var zeropad
= Dygraph
.zeropad
;
1664 var d
= new Date(date
);
1667 var year
= "" + d
.getFullYear();
1668 // Get a 0 padded month string
1669 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1670 // Get a 0 padded day string
1671 var day
= zeropad(d
.getDate());
1674 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1675 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1677 return year
+ "/" + month + "/" + day
+ ret
;
1681 * Round a number to the specified number of digits past the decimal point.
1682 * @param {Number} num The number to round
1683 * @param {Number} places The number of decimals to which to round
1684 * @return {Number} The rounded number
1687 Dygraph
.round_
= function(num
, places
) {
1688 var shift
= Math
.pow(10, places
);
1689 return Math
.round(num
* shift
)/shift
;
1693 * Fires when there's data available to be graphed.
1694 * @param {String} data Raw CSV data to be plotted
1697 Dygraph
.prototype.loadedEvent_
= function(data
) {
1698 this.rawData_
= this.parseCSV_(data
);
1702 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1703 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1704 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1707 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1710 Dygraph
.prototype.addXTicks_
= function() {
1711 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1712 var startDate
, endDate
;
1713 if (this.dateWindow_
) {
1714 startDate
= this.dateWindow_
[0];
1715 endDate
= this.dateWindow_
[1];
1717 startDate
= this.rawData_
[0][0];
1718 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1721 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1722 this.layout_
.updateOptions({xTicks
: xTicks
});
1725 // Time granularity enumeration
1726 Dygraph
.SECONDLY
= 0;
1727 Dygraph
.TWO_SECONDLY
= 1;
1728 Dygraph
.FIVE_SECONDLY
= 2;
1729 Dygraph
.TEN_SECONDLY
= 3;
1730 Dygraph
.THIRTY_SECONDLY
= 4;
1731 Dygraph
.MINUTELY
= 5;
1732 Dygraph
.TWO_MINUTELY
= 6;
1733 Dygraph
.FIVE_MINUTELY
= 7;
1734 Dygraph
.TEN_MINUTELY
= 8;
1735 Dygraph
.THIRTY_MINUTELY
= 9;
1736 Dygraph
.HOURLY
= 10;
1737 Dygraph
.TWO_HOURLY
= 11;
1738 Dygraph
.SIX_HOURLY
= 12;
1740 Dygraph
.WEEKLY
= 14;
1741 Dygraph
.MONTHLY
= 15;
1742 Dygraph
.QUARTERLY
= 16;
1743 Dygraph
.BIANNUAL
= 17;
1744 Dygraph
.ANNUAL
= 18;
1745 Dygraph
.DECADAL
= 19;
1746 Dygraph
.CENTENNIAL
= 20;
1747 Dygraph
.NUM_GRANULARITIES
= 21;
1749 Dygraph
.SHORT_SPACINGS
= [];
1750 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1751 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1752 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1753 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1754 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1755 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1756 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1757 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1758 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1759 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1760 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1761 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1762 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1763 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1764 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1768 // If we used this time granularity, how many ticks would there be?
1769 // This is only an approximation, but it's generally good enough.
1771 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1772 if (granularity
< Dygraph
.MONTHLY
) {
1773 // Generate one tick mark for every fixed interval of time.
1774 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1775 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1777 var year_mod
= 1; // e.g. to only print one point every 10 years.
1778 var num_months
= 12;
1779 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1780 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1781 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1782 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1783 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1785 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1786 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1787 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1793 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1794 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1796 // Returns an array containing {v: millis, label: label} dictionaries.
1798 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1799 var formatter
= this.attr_("xAxisLabelFormatter");
1801 if (granularity
< Dygraph
.MONTHLY
) {
1802 // Generate one tick mark for every fixed interval of time.
1803 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1804 var format
= '%d%b'; // e.g. "1Jan"
1806 // Find a time less than start_time which occurs on a "nice" time boundary
1807 // for this granularity.
1808 var g
= spacing
/ 1000;
1809 var d
= new Date(start_time
);
1810 if (g
<= 60) { // seconds
1811 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1815 if (g
<= 60) { // minutes
1816 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1821 if (g
<= 24) { // days
1822 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1827 if (g
== 7) { // one week
1828 d
.setDate(d
.getDate() - d
.getDay());
1833 start_time
= d
.getTime();
1835 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1836 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1839 // Display a tick mark on the first of a set of months of each year.
1840 // Years get a tick mark iff y % year_mod == 0. This is useful for
1841 // displaying a tick mark once every 10 years, say, on long time scales.
1843 var year_mod
= 1; // e.g. to only print one point every 10 years.
1845 if (granularity
== Dygraph
.MONTHLY
) {
1846 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1847 } else if (granularity
== Dygraph
.QUARTERLY
) {
1848 months
= [ 0, 3, 6, 9 ];
1849 } else if (granularity
== Dygraph
.BIANNUAL
) {
1851 } else if (granularity
== Dygraph
.ANNUAL
) {
1853 } else if (granularity
== Dygraph
.DECADAL
) {
1856 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1860 this.warn("Span of dates is too long");
1863 var start_year
= new Date(start_time
).getFullYear();
1864 var end_year
= new Date(end_time
).getFullYear();
1865 var zeropad
= Dygraph
.zeropad
;
1866 for (var i
= start_year
; i
<= end_year
; i
++) {
1867 if (i
% year_mod
!= 0) continue;
1868 for (var j
= 0; j
< months
.length
; j
++) {
1869 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1870 var t
= Date
.parse(date_str
);
1871 if (t
< start_time
|| t
> end_time
) continue;
1872 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1882 * Add ticks to the x-axis based on a date range.
1883 * @param {Number} startDate Start of the date window (millis since epoch)
1884 * @param {Number} endDate End of the date window (millis since epoch)
1885 * @return {Array.<Object>} Array of {label, value} tuples.
1888 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1890 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1891 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1892 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1899 return self
.GetXAxis(startDate
, endDate
, chosen
);
1901 // TODO(danvk): signal error.
1906 * Add ticks when the x axis has numbers on it (instead of dates)
1907 * TODO(konigsberg): Update comment.
1909 * @param {Number} startDate Start of the date window (millis since epoch)
1910 * @param {Number} endDate End of the date window (millis since epoch)
1912 * @param {function} attribute accessor function.
1913 * @return {Array.<Object>} Array of {label, value} tuples.
1916 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1917 var attr
= function(k
) {
1918 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1919 return self
.attr_(k
);
1924 for (var i
= 0; i
< vals
.length
; i
++) {
1925 ticks
.push({v
: vals
[i
]});
1928 if (self
.attr_("logscale")) {
1929 // As opposed to the other ways for computing ticks, we're just going
1930 // for nearby values. There's no reasonable way to scale the values
1931 // (unless we want to show strings like "log(" + x + ")") in which case
1932 // x can be integer values.
1934 // so compute height / pixelsPerTick and move on
.
1935 var pixelsPerTick
= attr('pixelsPerYLabel');
1936 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
1939 // Construct the set of ticks.
1940 for (var i
= 0; i
< nTicks
; i
++) {
1941 ticks
.push( {v
: vv
} );
1946 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1947 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1948 // The first spacing greater than pixelsPerYLabel is what we use.
1949 // TODO(danvk): version that works on a log scale.
1950 if (attr("labelsKMG2")) {
1951 var mults
= [1, 2, 4, 8];
1953 var mults
= [1, 2, 5];
1955 var scale
, low_val
, high_val
, nTicks
;
1956 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1957 var pixelsPerTick
= attr('pixelsPerYLabel');
1958 for (var i
= -10; i
< 50; i
++) {
1959 if (attr("labelsKMG2")) {
1960 var base_scale
= Math
.pow(16, i
);
1962 var base_scale
= Math
.pow(10, i
);
1964 for (var j
= 0; j
< mults
.length
; j
++) {
1965 scale
= base_scale
* mults
[j
];
1966 low_val
= Math
.floor(minV
/ scale
) * scale
;
1967 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1968 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1969 var spacing
= self
.height_
/ nTicks
;
1970 // wish I could break out of both loops at once...
1971 if (spacing
> pixelsPerTick
) break;
1973 if (spacing
> pixelsPerTick
) break;
1976 // Construct the set of ticks.
1977 // Allow reverse y-axis if it's explicitly requested.
1978 if (low_val
> high_val
) scale
*= -1;
1979 for (var i
= 0; i
< nTicks
; i
++) {
1980 var tickV
= low_val
+ i
* scale
;
1981 ticks
.push( {v
: tickV
} );
1986 // Add formatted labels to the ticks.
1989 if (attr("labelsKMB")) {
1991 k_labels
= [ "K", "M", "B", "T" ];
1993 if (attr("labelsKMG2")) {
1994 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1996 k_labels
= [ "k", "M", "G", "T" ];
1998 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
2000 for (var i
= 0; i
< ticks
.length
; i
++) {
2001 var tickV
= ticks
[i
].v
;
2002 var absTickV
= Math
.abs(tickV
);
2004 if (formatter
!= undefined
) {
2005 label
= formatter(tickV
);
2007 label
= Dygraph
.round_(tickV
, 2);
2009 if (k_labels
.length
) {
2010 // Round up to an appropriate unit.
2012 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2013 if (absTickV
>= n
) {
2014 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
2019 ticks
[i
].label
= label
;
2024 // Computes the range of the data series (including confidence intervals).
2025 // series is either [ [x1, y1], [x2, y2], ... ] or
2026 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2027 // Returns [low, high]
2028 Dygraph
.prototype.extremeValues_
= function(series
) {
2029 var minY
= null, maxY
= null;
2031 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2033 // With custom bars, maxY is the max of the high values.
2034 for (var j
= 0; j
< series
.length
; j
++) {
2035 var y
= series
[j
][1][0];
2037 var low
= y
- series
[j
][1][1];
2038 var high
= y
+ series
[j
][1][2];
2039 if (low
> y
) low
= y
; // this can happen with custom bars,
2040 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2041 if (maxY
== null || high
> maxY
) {
2044 if (minY
== null || low
< minY
) {
2049 for (var j
= 0; j
< series
.length
; j
++) {
2050 var y
= series
[j
][1];
2051 if (y
=== null || isNaN(y
)) continue;
2052 if (maxY
== null || y
> maxY
) {
2055 if (minY
== null || y
< minY
) {
2061 return [minY
, maxY
];
2065 * This function is called once when the chart's data is changed or the options
2066 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2067 * idea is that values derived from the chart's data can be computed here,
2068 * rather than every time the chart is drawn. This includes things like the
2069 * number of axes, rolling averages, etc.
2071 Dygraph
.prototype.predraw_
= function() {
2072 // TODO(danvk): move more computations out of drawGraph_ and into here.
2073 this.computeYAxes_();
2075 // Create a new plotter.
2076 if (this.plotter_
) this.plotter_
.clear();
2077 this.plotter_
= new DygraphCanvasRenderer(this,
2078 this.hidden_
, this.layout_
,
2079 this.renderOptions_
);
2081 // The roller sits in the bottom left corner of the chart. We don't know where
2082 // this will be until the options are available, so it's positioned here.
2083 this.createRollInterface_();
2085 // Same thing applies for the labelsDiv. It's right edge should be flush with
2086 // the right edge of the charting area (which may not be the same as the right
2087 // edge of the div, if we have two y-axes.
2088 this.positionLabelsDiv_();
2090 // If the data or options have changed, then we'd better redraw.
2095 * Update the graph with new data. This method is called when the viewing area
2096 * has changed. If the underlying data or options have changed, predraw_ will
2097 * be called before drawGraph_ is called.
2100 Dygraph
.prototype.drawGraph_
= function() {
2101 var data
= this.rawData_
;
2103 // This is used to set the second parameter to drawCallback, below.
2104 var is_initial_draw
= this.is_initial_draw_
;
2105 this.is_initial_draw_
= false;
2107 var minY
= null, maxY
= null;
2108 this.layout_
.removeAllDatasets();
2110 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2112 // Loop over the fields (series). Go from the last to the first,
2113 // because if they're stacked that's how we accumulate the values.
2115 var cumulative_y
= []; // For stacked series.
2118 var extremes
= {}; // series name -> [low, high]
2120 // Loop over all fields and create datasets
2121 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2122 if (!this.visibility()[i
- 1]) continue;
2124 var seriesName
= this.attr_("labels")[i
];
2125 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2128 for (var j
= 0; j
< data
.length
; j
++) {
2129 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
2130 var date
= data
[j
][0];
2131 series
.push([date
, data
[j
][i
]]);
2135 // TODO(danvk): move this into predraw_. It's insane to do it here.
2136 series
= this.rollingAverage(series
, this.rollPeriod_
);
2138 // Prune down to the desired range, if necessary (for zooming)
2139 // Because there can be lines going to points outside of the visible area,
2140 // we actually prune to visible points, plus one on either side.
2141 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2142 if (this.dateWindow_
) {
2143 var low
= this.dateWindow_
[0];
2144 var high
= this.dateWindow_
[1];
2146 // TODO(danvk): do binary search instead of linear search.
2147 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2148 var firstIdx
= null, lastIdx
= null;
2149 for (var k
= 0; k
< series
.length
; k
++) {
2150 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2153 if (series
[k
][0] <= high
) {
2157 if (firstIdx
=== null) firstIdx
= 0;
2158 if (firstIdx
> 0) firstIdx
--;
2159 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2160 if (lastIdx
< series
.length
- 1) lastIdx
++;
2161 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2162 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2163 pruned
.push(series
[k
]);
2167 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2170 var seriesExtremes
= this.extremeValues_(series
);
2173 for (var j
=0; j
<series
.length
; j
++) {
2174 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2177 } else if (this.attr_("stackedGraph")) {
2178 var l
= series
.length
;
2180 for (var j
= 0; j
< l
; j
++) {
2181 // If one data set has a NaN, let all subsequent stacked
2182 // sets inherit the NaN -- only start at 0 for the first set.
2183 var x
= series
[j
][0];
2184 if (cumulative_y
[x
] === undefined
) {
2185 cumulative_y
[x
] = 0;
2188 actual_y
= series
[j
][1];
2189 cumulative_y
[x
] += actual_y
;
2191 series
[j
] = [x
, cumulative_y
[x
]]
2193 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2194 seriesExtremes
[1] = cumulative_y
[x
];
2196 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2197 seriesExtremes
[0] = cumulative_y
[x
];
2201 extremes
[seriesName
] = seriesExtremes
;
2203 datasets
[i
] = series
;
2206 for (var i
= 1; i
< datasets
.length
; i
++) {
2207 if (!this.visibility()[i
- 1]) continue;
2208 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2211 // TODO(danvk): this method doesn't need to return anything.
2212 var out
= this.computeYAxisRanges_(extremes
);
2214 var seriesToAxisMap
= out
[1];
2215 this.layout_
.updateOptions( { yAxes
: axes
,
2216 seriesToAxisMap
: seriesToAxisMap
2221 // Tell PlotKit to use this new data and render itself
2222 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2223 this.layout_
.evaluateWithError();
2224 this.plotter_
.clear();
2225 this.plotter_
.render();
2226 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2227 this.canvas_
.height
);
2229 if (this.attr_("drawCallback") !== null) {
2230 this.attr_("drawCallback")(this, is_initial_draw
);
2235 * Determine properties of the y-axes which are independent of the data
2236 * currently being displayed. This includes things like the number of axes and
2237 * the style of the axes. It does not include the range of each axis and its
2239 * This fills in this.axes_ and this.seriesToAxisMap_.
2240 * axes_ = [ { options } ]
2241 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2242 * indices are into the axes_ array.
2244 Dygraph
.prototype.computeYAxes_
= function() {
2245 this.axes_
= [{}]; // always have at least one y-axis.
2246 this.seriesToAxisMap_
= {};
2248 // Get a list of series names.
2249 var labels
= this.attr_("labels");
2251 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2253 // all options which could be applied per-axis:
2261 'axisLabelFontSize',
2265 // Copy global axis options over to the first axis.
2266 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2267 var k
= axisOptions
[i
];
2268 var v
= this.attr_(k
);
2269 if (v
) this.axes_
[0][k
] = v
;
2272 // Go through once and add all the axes.
2273 for (var seriesName
in series
) {
2274 if (!series
.hasOwnProperty(seriesName
)) continue;
2275 var axis
= this.attr_("axis", seriesName
);
2277 this.seriesToAxisMap_
[seriesName
] = 0;
2280 if (typeof(axis
) == 'object') {
2281 // Add a new axis, making a copy of its per-axis options.
2283 Dygraph
.update(opts
, this.axes_
[0]);
2284 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2285 Dygraph
.update(opts
, axis
);
2286 this.axes_
.push(opts
);
2287 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2291 // Go through one more time and assign series to an axis defined by another
2292 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2293 for (var seriesName
in series
) {
2294 if (!series
.hasOwnProperty(seriesName
)) continue;
2295 var axis
= this.attr_("axis", seriesName
);
2296 if (typeof(axis
) == 'string') {
2297 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2298 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2299 "series " + axis
+ ", which does not define its own axis.");
2302 var idx
= this.seriesToAxisMap_
[axis
];
2303 this.seriesToAxisMap_
[seriesName
] = idx
;
2307 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2308 // this last so that hiding the first series doesn't destroy the axis
2309 // properties of the primary axis.
2310 var seriesToAxisFiltered
= {};
2311 var vis
= this.visibility();
2312 for (var i
= 1; i
< labels
.length
; i
++) {
2314 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2316 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2320 * Returns the number of y-axes on the chart.
2321 * @return {Number} the number of axes.
2323 Dygraph
.prototype.numAxes
= function() {
2325 for (var series
in this.seriesToAxisMap_
) {
2326 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2327 var idx
= this.seriesToAxisMap_
[series
];
2328 if (idx
> last_axis
) last_axis
= idx
;
2330 return 1 + last_axis
;
2334 * Determine the value range and tick marks for each axis.
2335 * @param {Object} extremes A mapping from seriesName -> [low, high]
2336 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2338 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2339 // Build a map from axis number -> [list of series names]
2340 var seriesForAxis
= [];
2341 for (var series
in this.seriesToAxisMap_
) {
2342 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2343 var idx
= this.seriesToAxisMap_
[series
];
2344 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2345 seriesForAxis
[idx
].push(series
);
2348 // Compute extreme values, a span and tick marks for each axis.
2349 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2350 var isLogScale
= this.attr_("logscale");
2351 var axis
= this.axes_
[i
];
2352 if (axis
.valueWindow
) {
2353 // This is only set if the user has zoomed on the y-axis. It is never set
2354 // by a user. It takes precedence over axis.valueRange because, if you set
2355 // valueRange, you'd still expect to be able to pan.
2356 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2357 } else if (axis
.valueRange
) {
2358 // This is a user-set value range for this axis.
2359 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2361 // Calculate the extremes of extremes.
2362 var series
= seriesForAxis
[i
];
2363 var minY
= Infinity
; // extremes[series[0]][0];
2364 var maxY
= -Infinity
; // extremes[series[0]][1];
2365 for (var j
= 0; j
< series
.length
; j
++) {
2366 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2367 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2369 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2371 // Add some padding and round up to an integer to be human-friendly.
2372 var span
= maxY
- minY
;
2373 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2374 if (span
== 0) { span
= maxY
; }
2379 var maxAxisY
= maxY
+ 0.1 * span
;
2380 var minAxisY
= minY
;
2382 var maxAxisY
= maxY
+ 0.1 * span
;
2383 var minAxisY
= minY
- 0.1 * span
;
2385 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2386 if (!this.attr_("avoidMinZero")) {
2387 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2388 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2391 if (this.attr_("includeZero")) {
2392 if (maxY
< 0) maxAxisY
= 0;
2393 if (minY
> 0) minAxisY
= 0;
2397 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2400 // Add ticks. By default, all axes inherit the tick positions of the
2401 // primary axis. However, if an axis is specifically marked as having
2402 // independent ticks, then that is permissible as well.
2403 if (i
== 0 || axis
.independentTicks
) {
2405 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2406 axis
.computedValueRange
[1],
2410 var p_axis
= this.axes_
[0];
2411 var p_ticks
= p_axis
.ticks
;
2412 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2413 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2414 var tick_values
= [];
2415 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2416 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2417 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2418 tick_values
.push(y_val
);
2422 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2423 axis
.computedValueRange
[1],
2424 this, axis
, tick_values
);
2428 return [this.axes_
, this.seriesToAxisMap_
];
2432 * Calculates the rolling average of a data set.
2433 * If originalData is [label, val], rolls the average of those.
2434 * If originalData is [label, [, it's interpreted as [value, stddev]
2435 * and the roll is returned in the same form, with appropriately reduced
2436 * stddev for each value.
2437 * Note that this is where fractional input (i.e. '5/10') is converted into
2439 * @param {Array} originalData The data in the appropriate format (see above)
2440 * @param {Number} rollPeriod The number of days over which to average the data
2442 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2443 if (originalData
.length
< 2)
2444 return originalData
;
2445 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2446 var rollingData
= [];
2447 var sigma
= this.attr_("sigma");
2449 if (this.fractions_
) {
2451 var den
= 0; // numerator/denominator
2453 for (var i
= 0; i
< originalData
.length
; i
++) {
2454 num
+= originalData
[i
][1][0];
2455 den
+= originalData
[i
][1][1];
2456 if (i
- rollPeriod
>= 0) {
2457 num
-= originalData
[i
- rollPeriod
][1][0];
2458 den
-= originalData
[i
- rollPeriod
][1][1];
2461 var date
= originalData
[i
][0];
2462 var value
= den
? num
/ den
: 0.0;
2463 if (this.attr_("errorBars")) {
2464 if (this.wilsonInterval_
) {
2465 // For more details on this confidence interval, see:
2466 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2468 var p
= value
< 0 ? 0 : value
, n
= den
;
2469 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2470 var denom
= 1 + sigma
* sigma
/ den
;
2471 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2472 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2473 rollingData
[i
] = [date
,
2474 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2476 rollingData
[i
] = [date
, [0, 0, 0]];
2479 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2480 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2483 rollingData
[i
] = [date
, mult
* value
];
2486 } else if (this.attr_("customBars")) {
2491 for (var i
= 0; i
< originalData
.length
; i
++) {
2492 var data
= originalData
[i
][1];
2494 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2496 if (y
!= null && !isNaN(y
)) {
2502 if (i
- rollPeriod
>= 0) {
2503 var prev
= originalData
[i
- rollPeriod
];
2504 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2511 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2512 1.0 * (mid
- low
) / count
,
2513 1.0 * (high
- mid
) / count
]];
2516 // Calculate the rolling average for the first rollPeriod - 1 points where
2517 // there is not enough data to roll over the full number of days
2518 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2519 if (!this.attr_("errorBars")){
2520 if (rollPeriod
== 1) {
2521 return originalData
;
2524 for (var i
= 0; i
< originalData
.length
; i
++) {
2527 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2528 var y
= originalData
[j
][1];
2529 if (y
== null || isNaN(y
)) continue;
2531 sum
+= originalData
[j
][1];
2534 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2536 rollingData
[i
] = [originalData
[i
][0], null];
2541 for (var i
= 0; i
< originalData
.length
; i
++) {
2545 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2546 var y
= originalData
[j
][1][0];
2547 if (y
== null || isNaN(y
)) continue;
2549 sum
+= originalData
[j
][1][0];
2550 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2553 var stddev
= Math
.sqrt(variance
) / num_ok
;
2554 rollingData
[i
] = [originalData
[i
][0],
2555 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2557 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2567 * Parses a date, returning the number of milliseconds since epoch. This can be
2568 * passed in as an xValueParser in the Dygraph constructor.
2569 * TODO(danvk): enumerate formats that this understands.
2570 * @param {String} A date in YYYYMMDD format.
2571 * @return {Number} Milliseconds since epoch.
2574 Dygraph
.dateParser
= function(dateStr
, self
) {
2577 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2578 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2579 while (dateStrSlashed
.search("-") != -1) {
2580 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2582 d
= Date
.parse(dateStrSlashed
);
2583 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2584 // TODO(danvk): remove support for this format. It's confusing.
2585 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2586 + "/" + dateStr
.substr(6,2);
2587 d
= Date
.parse(dateStrSlashed
);
2589 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2590 // "2009/07/12 12:34:56"
2591 d
= Date
.parse(dateStr
);
2594 if (!d
|| isNaN(d
)) {
2595 self
.error("Couldn't parse " + dateStr
+ " as a date");
2601 * Detects the type of the str (date or numeric) and sets the various
2602 * formatting attributes in this.attrs_ based on this type.
2603 * @param {String} str An x value.
2606 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2608 if (str
.indexOf('-') >= 0 ||
2609 str
.indexOf('/') >= 0 ||
2610 isNaN(parseFloat(str
))) {
2612 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2613 // TODO(danvk): remove support for this format.
2618 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2619 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2620 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2621 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2623 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2624 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2625 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2626 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2631 * Parses a string in a special csv format. We expect a csv file where each
2632 * line is a date point, and the first field in each line is the date string.
2633 * We also expect that all remaining fields represent series.
2634 * if the errorBars attribute is set, then interpret the fields as:
2635 * date, series1, stddev1, series2, stddev2, ...
2636 * @param {Array.<Object>} data See above.
2639 * @return Array.<Object> An array with one entry for each row. These entries
2640 * are an array of cells in that row. The first entry is the parsed x-value for
2641 * the row. The second, third, etc. are the y-values. These can take on one of
2642 * three forms, depending on the CSV and constructor parameters:
2644 * 2. [ value, stddev ]
2645 * 3. [ low value, center value, high value ]
2647 Dygraph
.prototype.parseCSV_
= function(data
) {
2649 var lines
= data
.split("\n");
2651 // Use the default delimiter or fall back to a tab if that makes sense.
2652 var delim
= this.attr_('delimiter');
2653 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2658 if (this.labelsFromCSV_
) {
2660 this.attrs_
.labels
= lines
[0].split(delim
);
2663 // Parse the x as a float or return null if it's not a number.
2664 var parseFloatOrNull
= function(x
) {
2665 var val
= parseFloat(x
);
2666 // isFinite() returns false for NaN and +/-Infinity
.
2667 return isFinite(val
) ? val
: null;
2671 var defaultParserSet
= false; // attempt to auto-detect x value type
2672 var expectedCols
= this.attr_("labels").length
;
2673 var outOfOrder
= false;
2674 for (var i
= start
; i
< lines
.length
; i
++) {
2675 var line
= lines
[i
];
2676 if (line
.length
== 0) continue; // skip blank lines
2677 if (line
[0] == '#') continue; // skip comment lines
2678 var inFields
= line
.split(delim
);
2679 if (inFields
.length
< 2) continue;
2682 if (!defaultParserSet
) {
2683 this.detectTypeFromString_(inFields
[0]);
2684 xParser
= this.attr_("xValueParser");
2685 defaultParserSet
= true;
2687 fields
[0] = xParser(inFields
[0], this);
2689 // If fractions are expected, parse the numbers as "A/B
"
2690 if (this.fractions_) {
2691 for (var j = 1; j < inFields.length; j++) {
2692 // TODO(danvk): figure out an appropriate way to flag parse errors.
2693 var vals = inFields[j].split("/");
2694 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2696 } else if (this.attr_("errorBars
")) {
2697 // If there are error bars, values are (value, stddev) pairs
2698 for (var j = 1; j < inFields.length; j += 2)
2699 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2700 parseFloatOrNull(inFields[j + 1])];
2701 } else if (this.attr_("customBars
")) {
2702 // Bars are a low;center;high tuple
2703 for (var j = 1; j < inFields.length; j++) {
2704 var vals = inFields[j].split(";");
2705 fields[j] = [ parseFloatOrNull(vals[0]),
2706 parseFloatOrNull(vals[1]),
2707 parseFloatOrNull(vals[2]) ];
2710 // Values are just numbers
2711 for (var j = 1; j < inFields.length; j++) {
2712 fields[j] = parseFloatOrNull(inFields[j]);
2715 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2720 if (fields.length != expectedCols) {
2721 this.error("Number of columns
in line
" + i + " (" + fields.length +
2722 ") does not agree
with number of
labels (" + expectedCols +
2728 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2729 ret.sort(function(a,b) { return a[0] - b[0] });
2736 * The user has provided their data as a pre-packaged JS array. If the x values
2737 * are numeric, this is the same as dygraphs' internal format. If the x values
2738 * are dates, we need to convert them from Date objects to ms since epoch.
2739 * @param {Array.<Object>} data
2740 * @return {Array.<Object>} data with numeric x values.
2742 Dygraph.prototype.parseArray_ = function(data) {
2743 // Peek at the first x value to see if it's numeric.
2744 if (data.length == 0) {
2745 this.error("Can
't plot empty data set");
2748 if (data[0].length == 0) {
2749 this.error("Data set cannot contain an empty row");
2753 if (this.attr_("labels") == null) {
2754 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2755 "in the options parameter");
2756 this.attrs_.labels = [ "X" ];
2757 for (var i = 1; i < data[0].length; i++) {
2758 this.attrs_.labels.push("Y" + i);
2762 if (Dygraph.isDateLike(data[0][0])) {
2763 // Some intelligent defaults for a date x-axis.
2764 this.attrs_.xValueFormatter = Dygraph.dateString_;
2765 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2766 this.attrs_.xTicker = Dygraph.dateTicker;
2768 // Assume they're all dates
.
2769 var parsedData
= Dygraph
.clone(data
);
2770 for (var i
= 0; i
< data
.length
; i
++) {
2771 if (parsedData
[i
].length
== 0) {
2772 this.error("Row " + (1 + i
) + " of data is empty");
2775 if (parsedData
[i
][0] == null
2776 || typeof(parsedData
[i
][0].getTime
) != 'function'
2777 || isNaN(parsedData
[i
][0].getTime())) {
2778 this.error("x value in row " + (1 + i
) + " is not a Date");
2781 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2785 // Some intelligent defaults for a numeric x-axis.
2786 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2787 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2793 * Parses a DataTable object from gviz.
2794 * The data is expected to have a first column that is either a date or a
2795 * number. All subsequent columns must be numbers. If there is a clear mismatch
2796 * between this.xValueParser_ and the type of the first column, it will be
2797 * fixed. Fills out rawData_.
2798 * @param {Array.<Object>} data See above.
2801 Dygraph
.prototype.parseDataTable_
= function(data
) {
2802 var cols
= data
.getNumberOfColumns();
2803 var rows
= data
.getNumberOfRows();
2805 var indepType
= data
.getColumnType(0);
2806 if (indepType
== 'date' || indepType
== 'datetime') {
2807 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2808 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2809 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2810 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2811 } else if (indepType
== 'number') {
2812 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2813 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2814 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2815 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2817 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2818 "column 1 of DataTable input (Got '" + indepType
+ "')");
2822 // Array of the column indices which contain data (and not annotations).
2824 var annotationCols
= {}; // data index -> [annotation cols]
2825 var hasAnnotations
= false;
2826 for (var i
= 1; i
< cols
; i
++) {
2827 var type
= data
.getColumnType(i
);
2828 if (type
== 'number') {
2830 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2831 // This is OK -- it's an annotation column.
2832 var dataIdx
= colIdx
[colIdx
.length
- 1];
2833 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2834 annotationCols
[dataIdx
] = [i
];
2836 annotationCols
[dataIdx
].push(i
);
2838 hasAnnotations
= true;
2840 this.error("Only 'number' is supported as a dependent type with Gviz." +
2841 " 'string' is only supported if displayAnnotations is true");
2845 // Read column labels
2846 // TODO(danvk): add support back for errorBars
2847 var labels
= [data
.getColumnLabel(0)];
2848 for (var i
= 0; i
< colIdx
.length
; i
++) {
2849 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2850 if (this.attr_("errorBars")) i
+= 1;
2852 this.attrs_
.labels
= labels
;
2853 cols
= labels
.length
;
2856 var outOfOrder
= false;
2857 var annotations
= [];
2858 for (var i
= 0; i
< rows
; i
++) {
2860 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2861 data
.getValue(i
, 0) === null) {
2862 this.warn("Ignoring row " + i
+
2863 " of DataTable because of undefined or null first column.");
2867 if (indepType
== 'date' || indepType
== 'datetime') {
2868 row
.push(data
.getValue(i
, 0).getTime());
2870 row
.push(data
.getValue(i
, 0));
2872 if (!this.attr_("errorBars")) {
2873 for (var j
= 0; j
< colIdx
.length
; j
++) {
2874 var col
= colIdx
[j
];
2875 row
.push(data
.getValue(i
, col
));
2876 if (hasAnnotations
&&
2877 annotationCols
.hasOwnProperty(col
) &&
2878 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2880 ann
.series
= data
.getColumnLabel(col
);
2882 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2884 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2885 if (k
) ann
.text
+= "\n";
2886 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2888 annotations
.push(ann
);
2892 for (var j
= 0; j
< cols
- 1; j
++) {
2893 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2896 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2900 // Strip out infinities, which give dygraphs problems later on.
2901 for (var j
= 0; j
< row
.length
; j
++) {
2902 if (!isFinite(row
[j
])) row
[j
] = null;
2908 this.warn("DataTable is out of order; order it correctly to speed loading.");
2909 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2911 this.rawData_
= ret
;
2913 if (annotations
.length
> 0) {
2914 this.setAnnotations(annotations
, true);
2918 // These functions are all based on MochiKit.
2919 Dygraph
.update
= function (self
, o
) {
2920 if (typeof(o
) != 'undefined' && o
!== null) {
2922 if (o
.hasOwnProperty(k
)) {
2930 Dygraph
.isArrayLike
= function (o
) {
2931 var typ
= typeof(o
);
2933 (typ
!= 'object' && !(typ
== 'function' &&
2934 typeof(o
.item
) == 'function')) ||
2936 typeof(o
.length
) != 'number' ||
2944 Dygraph
.isDateLike
= function (o
) {
2945 if (typeof(o
) != "object" || o
=== null ||
2946 typeof(o
.getTime
) != 'function') {
2952 Dygraph
.clone
= function(o
) {
2953 // TODO(danvk): figure out how MochiKit's version works
2955 for (var i
= 0; i
< o
.length
; i
++) {
2956 if (Dygraph
.isArrayLike(o
[i
])) {
2957 r
.push(Dygraph
.clone(o
[i
]));
2967 * Get the CSV data. If it's in a function, call that function. If it's in a
2968 * file, do an XMLHttpRequest to get it.
2971 Dygraph
.prototype.start_
= function() {
2972 if (typeof this.file_
== 'function') {
2973 // CSV string. Pretend we got it via XHR.
2974 this.loadedEvent_(this.file_());
2975 } else if (Dygraph
.isArrayLike(this.file_
)) {
2976 this.rawData_
= this.parseArray_(this.file_
);
2978 } else if (typeof this.file_
== 'object' &&
2979 typeof this.file_
.getColumnRange
== 'function') {
2980 // must be a DataTable from gviz.
2981 this.parseDataTable_(this.file_
);
2983 } else if (typeof this.file_
== 'string') {
2984 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2985 if (this.file_
.indexOf('\n') >= 0) {
2986 this.loadedEvent_(this.file_
);
2988 var req
= new XMLHttpRequest();
2990 req
.onreadystatechange
= function () {
2991 if (req
.readyState
== 4) {
2992 if (req
.status
== 200) {
2993 caller
.loadedEvent_(req
.responseText
);
2998 req
.open("GET", this.file_
, true);
3002 this.error("Unknown data format: " + (typeof this.file_
));
3007 * Changes various properties of the graph. These can include:
3009 * <li>file: changes the source data for the graph</li>
3010 * <li>errorBars: changes whether the data contains stddev</li>
3012 * @param {Object} attrs The new properties and values
3014 Dygraph
.prototype.updateOptions
= function(attrs
) {
3015 // TODO(danvk): this is a mess. Rethink this function.
3016 if ('rollPeriod' in attrs
) {
3017 this.rollPeriod_
= attrs
.rollPeriod
;
3019 if ('dateWindow' in attrs
) {
3020 this.dateWindow_
= attrs
.dateWindow
;
3023 // TODO(danvk): validate per-series options.
3028 // highlightCircleSize
3030 Dygraph
.update(this.user_attrs_
, attrs
);
3031 Dygraph
.update(this.renderOptions_
, attrs
);
3033 this.labelsFromCSV_
= (this.attr_("labels") == null);
3035 // TODO(danvk): this doesn't match the constructor logic
3036 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3037 if (attrs
['file']) {
3038 this.file_
= attrs
['file'];
3046 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3047 * containing div (which has presumably changed size since the dygraph was
3048 * instantiated. If the width/height are specified, the div will be resized.
3050 * This is far more efficient than destroying and re-instantiating a
3051 * Dygraph, since it doesn't have to reparse the underlying data.
3053 * @param {Number} width Width (in pixels)
3054 * @param {Number} height Height (in pixels)
3056 Dygraph
.prototype.resize
= function(width
, height
) {
3057 if (this.resize_lock
) {
3060 this.resize_lock
= true;
3062 if ((width
=== null) != (height
=== null)) {
3063 this.warn("Dygraph.resize() should be called with zero parameters or " +
3064 "two non-NULL parameters. Pretending it was zero.");
3065 width
= height
= null;
3068 // TODO(danvk): there should be a clear() method.
3069 this.maindiv_
.innerHTML
= "";
3070 this.attrs_
.labelsDiv
= null;
3073 this.maindiv_
.style
.width
= width
+ "px";
3074 this.maindiv_
.style
.height
= height
+ "px";
3075 this.width_
= width
;
3076 this.height_
= height
;
3078 this.width_
= this.maindiv_
.offsetWidth
;
3079 this.height_
= this.maindiv_
.offsetHeight
;
3082 this.createInterface_();
3085 this.resize_lock
= false;
3089 * Adjusts the number of days in the rolling average. Updates the graph to
3090 * reflect the new averaging period.
3091 * @param {Number} length Number of days over which to average the data.
3093 Dygraph
.prototype.adjustRoll
= function(length
) {
3094 this.rollPeriod_
= length
;
3099 * Returns a boolean array of visibility statuses.
3101 Dygraph
.prototype.visibility
= function() {
3102 // Do lazy-initialization, so that this happens after we know the number of
3104 if (!this.attr_("visibility")) {
3105 this.attrs_
["visibility"] = [];
3107 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3108 this.attr_("visibility").push(true);
3110 return this.attr_("visibility");
3114 * Changes the visiblity of a series.
3116 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3117 var x
= this.visibility();
3118 if (num
< 0 || num
>= x
.length
) {
3119 this.warn("invalid series number in setVisibility: " + num
);
3127 * Update the list of annotations and redraw the chart.
3129 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3130 // Only add the annotation CSS rule once we know it will be used.
3131 Dygraph
.addAnnotationRule();
3132 this.annotations_
= ann
;
3133 this.layout_
.setAnnotations(this.annotations_
);
3134 if (!suppressDraw
) {
3140 * Return the list of annotations.
3142 Dygraph
.prototype.annotations
= function() {
3143 return this.annotations_
;
3147 * Get the index of a series (column) given its name. The first column is the
3148 * x-axis, so the data series start with index 1.
3150 Dygraph
.prototype.indexFromSetName
= function(name
) {
3151 var labels
= this.attr_("labels");
3152 for (var i
= 0; i
< labels
.length
; i
++) {
3153 if (labels
[i
] == name
) return i
;
3158 Dygraph
.addAnnotationRule
= function() {
3159 if (Dygraph
.addedAnnotationCSS
) return;
3161 var rule
= "border: 1px solid black; " +
3162 "background-color: white; " +
3163 "text-align: center;";
3165 var styleSheetElement
= document
.createElement("style");
3166 styleSheetElement
.type
= "text/css";
3167 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3169 // Find the first style sheet that we can access.
3170 // We may not add a rule to a style sheet from another domain for security
3171 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3172 // adds its own style sheets from google.com.
3173 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3174 if (document
.styleSheets
[i
].disabled
) continue;
3175 var mysheet
= document
.styleSheets
[i
];
3177 if (mysheet
.insertRule
) { // Firefox
3178 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3179 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3180 } else if (mysheet
.addRule
) { // IE
3181 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3183 Dygraph
.addedAnnotationCSS
= true;
3186 // Was likely a security exception.
3190 this.warn("Unable to add default annotation CSS rule; display may be off.");
3194 * Create a new canvas element. This is more complex than a simple
3195 * document.createElement("canvas") because of IE and excanvas.
3197 Dygraph
.createCanvas
= function() {
3198 var canvas
= document
.createElement("canvas");
3200 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3201 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3202 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3210 * A wrapper around Dygraph that implements the gviz API.
3211 * @param {Object} container The DOM object the visualization should live in.
3213 Dygraph
.GVizChart
= function(container
) {
3214 this.container
= container
;
3217 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3218 // Clear out any existing dygraph.
3219 // TODO(danvk): would it make more sense to simply redraw using the current
3220 // date_graph object?
3221 this.container
.innerHTML
= '';
3222 if (typeof(this.date_graph
) != 'undefined') {
3223 this.date_graph
.destroy();
3226 this.date_graph
= new Dygraph(this.container
, data
, options
);
3230 * Google charts compatible setSelection
3231 * Only row selection is supported, all points in the row will be highlighted
3232 * @param {Array} array of the selected cells
3235 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3237 if (selection_array
.length
) {
3238 row
= selection_array
[0].row
;
3240 this.date_graph
.setSelection(row
);
3244 * Google charts compatible getSelection implementation
3245 * @return {Array} array of the selected cells
3248 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3251 var row
= this.date_graph
.getSelection();
3253 if (row
< 0) return selection
;
3256 for (var i
in this.date_graph
.layout_
.datasets
) {
3257 selection
.push({row
: row
, column
: col
});
3264 // Older pages may still use this name.
3265 DateGraph
= Dygraph
;