1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
27 Date,SeriesA,SeriesB,...
28 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
29 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
31 If the 'fractions' option is set, the input should be of the form:
33 Date,SeriesA,SeriesB,...
34 YYYYMMDD,A1/B1,A2/B2,...
35 YYYYMMDD,A1/B1,A2/B2,...
37 And error bars will be calculated automatically using a binomial distribution.
39 For further documentation and examples, see http://dygraphs.com/
44 * An interactive, zoomable graph
45 * @param {String | Function} file A file containing CSV data or a function that
46 * returns this data. The expected format for each line is
47 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
48 * YYYYMMDD,val1,stddev1,val2,stddev2,...
49 * @param {Object} attrs Various other attributes, e.g. errorBars determines
50 * whether the input data contains error ranges.
52 Dygraph
= function(div
, data
, opts
) {
53 if (arguments
.length
> 0) {
54 if (arguments
.length
== 4) {
55 // Old versions of dygraphs took in the series labels as a constructor
56 // parameter. This doesn't make sense anymore, but it's easy to continue
57 // to support this usage.
58 this.warn("Using deprecated four-argument dygraph constructor");
59 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
61 this.__init__(div
, data
, opts
);
66 Dygraph
.NAME
= "Dygraph";
67 Dygraph
.VERSION
= "1.2";
68 Dygraph
.__repr__
= function() {
69 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
71 Dygraph
.toString
= function() {
72 return this.__repr__();
75 // Various default values
76 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
77 Dygraph
.DEFAULT_WIDTH
= 480;
78 Dygraph
.DEFAULT_HEIGHT
= 320;
79 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
81 Dygraph
.LOG_SCALE
= 10;
82 Dygraph
.LN_TEN
= Math
.log(Dygraph
.LOG_SCALE
);
83 Dygraph
.log10
= function(x
) {
84 return Math
.log(x
) / Dygraph
.LN_TEN
;
87 // Default attribute values.
88 Dygraph
.DEFAULT_ATTRS
= {
89 highlightCircleSize
: 3,
95 // TODO(danvk): move defaults from createStatusMessage_ here.
97 labelsSeparateLines
: false,
98 labelsShowZeroValues
: true,
101 showLabelsOnHighlight
: true,
103 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
108 axisLabelFontSize
: 14,
111 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
115 xValueFormatter
: Dygraph
.dateString_
,
116 xValueParser
: Dygraph
.dateParser
,
117 xTicker
: Dygraph
.dateTicker
,
124 wilsonInterval
: true, // only relevant if fractions is true
128 connectSeparatedPoints
: false,
131 hideOverlayOnMouseOut
: true,
136 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
139 // Various logging levels.
145 // Directions for panning and zooming. Use bit operations when combined
146 // values are possible.
147 Dygraph
.HORIZONTAL
= 1;
148 Dygraph
.VERTICAL
= 2;
150 // Used for initializing annotation CSS rules only once.
151 Dygraph
.addedAnnotationCSS
= false;
153 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
154 // Labels is no longer a constructor parameter, since it's typically set
155 // directly from the data source. It also conains a name for the x-axis,
156 // which the previous constructor form did not.
157 if (labels
!= null) {
158 var new_labels
= ["Date"];
159 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
160 Dygraph
.update(attrs
, { 'labels': new_labels
});
162 this.__init__(div
, file
, attrs
);
166 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
167 * and context <canvas> inside of it. See the constructor for details.
169 * @param {Element} div the Element to render the graph into.
170 * @param {String | Function} file Source data
171 * @param {Object} attrs Miscellaneous other options
174 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
175 // Hack for IE: if we're using excanvas and the document hasn't finished
176 // loading yet (and hence may not have initialized whatever it needs to
177 // initialize), then keep calling this routine periodically until it has.
178 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
179 typeof(G_vmlCanvasManager
) != 'undefined' &&
180 document
.readyState
!= 'complete') {
182 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
185 // Support two-argument constructor
186 if (attrs
== null) { attrs
= {}; }
188 // Copy the important bits into the object
189 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
192 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
193 this.previousVerticalX_
= -1;
194 this.fractions_
= attrs
.fractions
|| false;
195 this.dateWindow_
= attrs
.dateWindow
|| null;
197 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
198 this.is_initial_draw_
= true;
199 this.annotations_
= [];
201 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
202 this.zoomed_x_
= false;
203 this.zoomed_y_
= false;
205 // Clear the div. This ensure that, if multiple dygraphs are passed the same
206 // div, then only one will be drawn.
209 // If the div isn't already sized then inherit from our attrs or
210 // give it a default size.
211 if (div
.style
.width
== '') {
212 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
214 if (div
.style
.height
== '') {
215 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
217 this.width_
= parseInt(div
.style
.width
, 10);
218 this.height_
= parseInt(div
.style
.height
, 10);
219 // The div might have been specified as percent of the current window size,
220 // convert that to an appropriate number of pixels.
221 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
222 this.width_
= div
.offsetWidth
;
224 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
225 this.height_
= div
.offsetHeight
;
228 if (this.width_
== 0) {
229 this.error("dygraph has zero width. Please specify a width in pixels.");
231 if (this.height_
== 0) {
232 this.error("dygraph has zero height. Please specify a height in pixels.");
235 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
236 if (attrs
['stackedGraph']) {
237 attrs
['fillGraph'] = true;
238 // TODO(nikhilk): Add any other stackedGraph checks here.
241 // Dygraphs has many options, some of which interact with one another.
242 // To keep track of everything, we maintain two sets of options:
244 // this.user_attrs_ only options explicitly set by the user.
245 // this.attrs_ defaults, options derived from user_attrs_, data.
247 // Options are then accessed this.attr_('attr'), which first looks at
248 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
249 // defaults without overriding behavior that the user specifically asks for.
250 this.user_attrs_
= {};
251 Dygraph
.update(this.user_attrs_
, attrs
);
254 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
256 this.boundaryIds_
= [];
258 // Make a note of whether labels will be pulled from the CSV file.
259 this.labelsFromCSV_
= (this.attr_("labels") == null);
261 // Create the containing DIV and other interactive elements
262 this.createInterface_();
268 * Returns the zoomed status of the chart for one or both axes.
270 * Axis is an optional parameter. Can be set to 'x' or 'y'.
272 * The zoomed status for an axis is set whenever a user zooms using the mouse
273 * or when the dateWindow or valueRange are updated (unless the noZoomFlagChange
274 * option is also specified).
276 Dygraph
.prototype.isZoomed
= function(axis
) {
277 if (axis
== null) return this.zoomed_x_
|| this.zoomed_y_
;
278 if (axis
== 'x') return this.zoomed_x_
;
279 if (axis
== 'y') return this.zoomed_y_
;
280 throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
283 Dygraph
.prototype.toString
= function() {
284 var maindiv
= this.maindiv_
;
285 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
286 return "[Dygraph " + id
+ "]";
289 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
291 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
292 this.user_attrs_
[seriesName
] != null &&
293 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
294 return this.user_attrs_
[seriesName
][name
];
295 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
296 return this.user_attrs_
[name
];
297 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
298 return this.attrs_
[name
];
304 // TODO(danvk): any way I can get the line numbers to be this.warn call?
305 Dygraph
.prototype.log
= function(severity
, message
) {
306 if (typeof(console
) != 'undefined') {
309 console
.debug('dygraphs: ' + message
);
312 console
.info('dygraphs: ' + message
);
314 case Dygraph
.WARNING
:
315 console
.warn('dygraphs: ' + message
);
318 console
.error('dygraphs: ' + message
);
323 Dygraph
.prototype.info
= function(message
) {
324 this.log(Dygraph
.INFO
, message
);
326 Dygraph
.prototype.warn
= function(message
) {
327 this.log(Dygraph
.WARNING
, message
);
329 Dygraph
.prototype.error
= function(message
) {
330 this.log(Dygraph
.ERROR
, message
);
334 * Returns the current rolling period, as set by the user or an option.
335 * @return {Number} The number of days in the rolling window
337 Dygraph
.prototype.rollPeriod
= function() {
338 return this.rollPeriod_
;
342 * Returns the currently-visible x-range. This can be affected by zooming,
343 * panning or a call to updateOptions.
344 * Returns a two-element array: [left, right].
345 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
347 Dygraph
.prototype.xAxisRange
= function() {
348 if (this.dateWindow_
) return this.dateWindow_
;
350 // The entire chart is visible.
351 var left
= this.rawData_
[0][0];
352 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
353 return [left
, right
];
357 * Returns the currently-visible y-range for an axis. This can be affected by
358 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
359 * called with no arguments, returns the range of the first axis.
360 * Returns a two-element array: [bottom, top].
362 Dygraph
.prototype.yAxisRange
= function(idx
) {
363 if (typeof(idx
) == "undefined") idx
= 0;
364 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
365 return [ this.axes_
[idx
].computedValueRange
[0],
366 this.axes_
[idx
].computedValueRange
[1] ];
370 * Returns the currently-visible y-ranges for each axis. This can be affected by
371 * zooming, panning, calls to updateOptions, etc.
372 * Returns an array of [bottom, top] pairs, one for each y-axis.
374 Dygraph
.prototype.yAxisRanges
= function() {
376 for (var i
= 0; i
< this.axes_
.length
; i
++) {
377 ret
.push(this.yAxisRange(i
));
382 // TODO(danvk): use these functions throughout dygraphs.
384 * Convert from data coordinates to canvas/div X/Y coordinates.
385 * If specified, do this conversion for the coordinate system of a particular
386 * axis. Uses the first axis by default.
387 * Returns a two-element array: [X, Y]
389 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
390 * instead of toDomCoords(null, y, axis).
392 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
393 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
397 * Convert from data x coordinates to canvas/div X coordinate.
398 * If specified, do this conversion for the coordinate system of a particular
400 * Returns a single value or null if x is null.
402 Dygraph
.prototype.toDomXCoord
= function(x
) {
407 var area
= this.plotter_
.area
;
408 var xRange
= this.xAxisRange();
409 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
413 * Convert from data x coordinates to canvas/div Y coordinate and optional
414 * axis. Uses the first axis by default.
416 * returns a single value or null if y is null.
418 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
419 var pct
= this.toPercentYCoord(y
, axis
);
424 var area
= this.plotter_
.area
;
425 return area
.y
+ pct
* area
.h
;
429 * Convert from canvas/div coords to data coordinates.
430 * If specified, do this conversion for the coordinate system of a particular
431 * axis. Uses the first axis by default.
432 * Returns a two-element array: [X, Y].
434 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
435 * instead of toDataCoords(null, y, axis).
437 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
438 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
442 * Convert from canvas/div x coordinate to data coordinate.
444 * If x is null, this returns null.
446 Dygraph
.prototype.toDataXCoord
= function(x
) {
451 var area
= this.plotter_
.area
;
452 var xRange
= this.xAxisRange();
453 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
457 * Convert from canvas/div y coord to value.
459 * If y is null, this returns null.
460 * if axis is null, this uses the first axis.
462 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
467 var area
= this.plotter_
.area
;
468 var yRange
= this.yAxisRange(axis
);
470 if (typeof(axis
) == "undefined") axis
= 0;
471 if (!this.axes_
[axis
].logscale
) {
472 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
474 // Computing the inverse of toDomCoord.
475 var pct
= (y
- area
.y
) / area
.h
477 // Computing the inverse of toPercentYCoord. The function was arrived at with
478 // the following steps:
480 // Original calcuation:
481 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
483 // Move denominator to both sides:
484 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
486 // subtract logr1, and take the negative value.
487 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
489 // Swap both sides of the equation, and we can compute the log of the
490 // return value. Which means we just need to use that as the exponent in
492 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
494 var logr1
= Dygraph
.log10(yRange
[1]);
495 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
496 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
502 * Converts a y for an axis to a percentage from the top to the
505 * If the coordinate represents a value visible on the canvas, then
506 * the value will be between 0 and 1, where 0 is the top of the canvas.
507 * However, this method will return values outside the range, as
508 * values can fall outside the canvas.
510 * If y is null, this returns null.
511 * if axis is null, this uses the first axis.
513 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
517 if (typeof(axis
) == "undefined") axis
= 0;
519 var area
= this.plotter_
.area
;
520 var yRange
= this.yAxisRange(axis
);
523 if (!this.axes_
[axis
].logscale
) {
524 // yrange[1] - y is unit distance from the bottom.
525 // yrange[1] - yrange[0] is the scale of the range.
526 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
527 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
529 var logr1
= Dygraph
.log10(yRange
[1]);
530 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
536 * Returns the number of columns (including the independent variable).
538 Dygraph
.prototype.numColumns
= function() {
539 return this.rawData_
[0].length
;
543 * Returns the number of rows (excluding any header/label row).
545 Dygraph
.prototype.numRows
= function() {
546 return this.rawData_
.length
;
550 * Returns the value in the given row and column. If the row and column exceed
551 * the bounds on the data, returns null. Also returns null if the value is
554 Dygraph
.prototype.getValue
= function(row
, col
) {
555 if (row
< 0 || row
> this.rawData_
.length
) return null;
556 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
558 return this.rawData_
[row
][col
];
561 Dygraph
.addEvent
= function(el
, evt
, fn
) {
562 var normed_fn
= function(e
) {
563 if (!e
) var e
= window
.event
;
566 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
567 el
.addEventListener(evt
, normed_fn
, false);
569 el
.attachEvent('on' + evt
, normed_fn
);
574 // Based on the article at
575 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
576 Dygraph
.cancelEvent
= function(e
) {
577 e
= e
? e
: window
.event
;
578 if (e
.stopPropagation
) {
581 if (e
.preventDefault
) {
584 e
.cancelBubble
= true;
586 e
.returnValue
= false;
591 * Generates interface elements for the Dygraph: a containing div, a div to
592 * display the current point, and a textbox to adjust the rolling average
593 * period. Also creates the Renderer/Layout elements.
596 Dygraph
.prototype.createInterface_
= function() {
597 // Create the all-enclosing graph div
598 var enclosing
= this.maindiv_
;
600 this.graphDiv
= document
.createElement("div");
601 this.graphDiv
.style
.width
= this.width_
+ "px";
602 this.graphDiv
.style
.height
= this.height_
+ "px";
603 enclosing
.appendChild(this.graphDiv
);
605 // Create the canvas for interactive parts of the chart.
606 this.canvas_
= Dygraph
.createCanvas();
607 this.canvas_
.style
.position
= "absolute";
608 this.canvas_
.width
= this.width_
;
609 this.canvas_
.height
= this.height_
;
610 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
611 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
613 // ... and for static parts of the chart.
614 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
616 // The interactive parts of the graph are drawn on top of the chart.
617 this.graphDiv
.appendChild(this.hidden_
);
618 this.graphDiv
.appendChild(this.canvas_
);
619 this.mouseEventElement_
= this.canvas_
;
622 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
623 dygraph
.mouseMove_(e
);
625 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
626 dygraph
.mouseOut_(e
);
629 // Create the grapher
630 // TODO(danvk): why does the Layout need its own set of options?
631 this.layoutOptions_
= { 'xOriginIsZero': false };
632 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
633 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
634 Dygraph
.update(this.layoutOptions_
, {
635 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
637 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
639 // TODO(danvk): why does the Renderer need its own set of options?
640 this.renderOptions_
= { colorScheme
: this.colors_
,
642 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
643 Dygraph
.update(this.renderOptions_
, this.attrs_
);
644 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
646 this.createStatusMessage_();
647 this.createDragInterface_();
651 * Detach DOM elements in the dygraph and null out all data references.
652 * Calling this when you're done with a dygraph can dramatically reduce memory
653 * usage. See, e.g., the tests/perf.html example.
655 Dygraph
.prototype.destroy
= function() {
656 var removeRecursive
= function(node
) {
657 while (node
.hasChildNodes()) {
658 removeRecursive(node
.firstChild
);
659 node
.removeChild(node
.firstChild
);
662 removeRecursive(this.maindiv_
);
664 var nullOut
= function(obj
) {
666 if (typeof(obj
[n
]) === 'object') {
672 // These may not all be necessary, but it can't hurt...
673 nullOut(this.layout_
);
674 nullOut(this.plotter_
);
679 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
680 * this particular canvas. All Dygraph work is done on this.canvas_.
681 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
682 * @return {Object} The newly-created canvas
685 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
686 var h
= Dygraph
.createCanvas();
687 h
.style
.position
= "absolute";
688 // TODO(danvk): h should be offset from canvas. canvas needs to include
689 // some extra area to make it easier to zoom in on the far left and far
690 // right. h needs to be precisely the plot area, so that clipping occurs.
691 h
.style
.top
= canvas
.style
.top
;
692 h
.style
.left
= canvas
.style
.left
;
693 h
.width
= this.width_
;
694 h
.height
= this.height_
;
695 h
.style
.width
= this.width_
+ "px"; // for IE
696 h
.style
.height
= this.height_
+ "px"; // for IE
700 // Taken from MochiKit.Color
701 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
705 if (saturation
=== 0) {
710 var i
= Math
.floor(hue
* 6);
711 var f
= (hue
* 6) - i
;
712 var p
= value
* (1 - saturation
);
713 var q
= value
* (1 - (saturation
* f
));
714 var t
= value
* (1 - (saturation
* (1 - f
)));
716 case 1: red
= q
; green
= value
; blue
= p
; break;
717 case 2: red
= p
; green
= value
; blue
= t
; break;
718 case 3: red
= p
; green
= q
; blue
= value
; break;
719 case 4: red
= t
; green
= p
; blue
= value
; break;
720 case 5: red
= value
; green
= p
; blue
= q
; break;
721 case 6: // fall through
722 case 0: red
= value
; green
= t
; blue
= p
; break;
725 red
= Math
.floor(255 * red
+ 0.5);
726 green
= Math
.floor(255 * green
+ 0.5);
727 blue
= Math
.floor(255 * blue
+ 0.5);
728 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
733 * Generate a set of distinct colors for the data series. This is done with a
734 * color wheel. Saturation/Value are customizable, and the hue is
735 * equally-spaced around the color wheel. If a custom set of colors is
736 * specified, that is used instead.
739 Dygraph
.prototype.setColors_
= function() {
740 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
741 // away with this.renderOptions_.
742 var num
= this.attr_("labels").length
- 1;
744 var colors
= this.attr_('colors');
746 var sat
= this.attr_('colorSaturation') || 1.0;
747 var val
= this.attr_('colorValue') || 0.5;
748 var half
= Math
.ceil(num
/ 2);
749 for (var i
= 1; i
<= num
; i
++) {
750 if (!this.visibility()[i
-1]) continue;
751 // alternate colors for high contrast.
752 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
753 var hue
= (1.0 * idx
/ (1 + num
));
754 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
757 for (var i
= 0; i
< num
; i
++) {
758 if (!this.visibility()[i
]) continue;
759 var colorStr
= colors
[i
% colors
.length
];
760 this.colors_
.push(colorStr
);
764 // TODO(danvk): update this w/r
/t/ the
new options system
.
765 this.renderOptions_
.colorScheme
= this.colors_
;
766 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
767 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
768 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
772 * Return the list of colors. This is either the list of colors passed in the
773 * attributes, or the autogenerated list of rgb(r,g,b) strings.
774 * @return {Array<string>} The list of colors.
776 Dygraph
.prototype.getColors
= function() {
780 // The following functions are from quirksmode.org with a modification for Safari from
781 // http://blog.firetree.net/2005/07/04/javascript-find-position/
782 // http://www.quirksmode.org/js
/findpos
.html
783 Dygraph
.findPosX
= function(obj
) {
788 curleft
+= obj
.offsetLeft
;
789 if(!obj
.offsetParent
)
791 obj
= obj
.offsetParent
;
798 Dygraph
.findPosY
= function(obj
) {
803 curtop
+= obj
.offsetTop
;
804 if(!obj
.offsetParent
)
806 obj
= obj
.offsetParent
;
816 * Create the div that contains information on the selected point(s)
817 * This goes in the top right of the canvas, unless an external div has already
821 Dygraph
.prototype.createStatusMessage_
= function() {
822 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
823 if (userLabelsDiv
&& null != userLabelsDiv
824 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
825 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
827 if (!this.attr_("labelsDiv")) {
828 var divWidth
= this.attr_('labelsDivWidth');
830 "position": "absolute",
833 "width": divWidth
+ "px",
835 "left": (this.width_
- divWidth
- 2) + "px",
836 "background": "white",
838 "overflow": "hidden"};
839 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
840 var div
= document
.createElement("div");
841 for (var name
in messagestyle
) {
842 if (messagestyle
.hasOwnProperty(name
)) {
843 div
.style
[name
] = messagestyle
[name
];
846 this.graphDiv
.appendChild(div
);
847 this.attrs_
.labelsDiv
= div
;
852 * Position the labels div so that its right edge is flush with the right edge
853 * of the charting area.
855 Dygraph
.prototype.positionLabelsDiv_
= function() {
856 // Don't touch a user-specified labelsDiv.
857 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
859 var area
= this.plotter_
.area
;
860 var div
= this.attr_("labelsDiv");
861 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
865 * Create the text box to adjust the averaging period
868 Dygraph
.prototype.createRollInterface_
= function() {
869 // Create a roller if one doesn't exist already.
871 this.roller_
= document
.createElement("input");
872 this.roller_
.type
= "text";
873 this.roller_
.style
.display
= "none";
874 this.graphDiv
.appendChild(this.roller_
);
877 var display
= this.attr_('showRoller') ? 'block' : 'none';
879 var textAttr
= { "position": "absolute",
881 "top": (this.plotter_
.area
.h
- 25) + "px",
882 "left": (this.plotter_
.area
.x
+ 1) + "px",
885 this.roller_
.size
= "2";
886 this.roller_
.value
= this.rollPeriod_
;
887 for (var name
in textAttr
) {
888 if (textAttr
.hasOwnProperty(name
)) {
889 this.roller_
.style
[name
] = textAttr
[name
];
894 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
897 // These functions are taken from MochiKit.Signal
898 Dygraph
.pageX
= function(e
) {
900 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
903 var b
= document
.body
;
905 (de
.scrollLeft
|| b
.scrollLeft
) -
906 (de
.clientLeft
|| 0);
910 Dygraph
.pageY
= function(e
) {
912 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
915 var b
= document
.body
;
917 (de
.scrollTop
|| b
.scrollTop
) -
922 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
923 return Dygraph
.pageX(e
) - context
.px
926 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
927 return Dygraph
.pageY(e
) - context
.py
930 // Called in response to an interaction model operation that
931 // should start the default panning behavior.
933 // It's used in the default callback for "mousedown" operations.
934 // Custom interaction model builders can use it to provide the default
937 Dygraph
.startPan
= function(event
, g
, context
) {
938 context
.isPanning
= true;
939 var xRange
= g
.xAxisRange();
940 context
.dateRange
= xRange
[1] - xRange
[0];
941 context
.initialLeftmostDate
= xRange
[0];
942 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
944 // Record the range of each y-axis at the start of the drag.
945 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
946 context
.is2DPan
= false;
947 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
948 var axis
= g
.axes_
[i
];
949 var yRange
= g
.yAxisRange(i
);
950 // TODO(konigsberg): These values should be in |context|.
951 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
953 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
954 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
956 axis
.initialTopValue
= yRange
[1];
957 axis
.dragValueRange
= yRange
[1] - yRange
[0];
959 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
961 // While calculating axes, set 2dpan.
962 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
966 // Called in response to an interaction model operation that
967 // responds to an event that pans the view.
969 // It's used in the default callback for "mousemove" operations.
970 // Custom interaction model builders can use it to provide the default
973 Dygraph
.movePan
= function(event
, g
, context
) {
974 context
.dragEndX
= g
.dragGetX_(event
, context
);
975 context
.dragEndY
= g
.dragGetY_(event
, context
);
977 var minDate
= context
.initialLeftmostDate
-
978 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
979 var maxDate
= minDate
+ context
.dateRange
;
980 g
.dateWindow_
= [minDate
, maxDate
];
982 // y-axis scaling is automatic unless this is a full 2D pan.
983 if (context
.is2DPan
) {
984 // Adjust each axis appropriately.
985 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
986 var axis
= g
.axes_
[i
];
988 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
989 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
991 // In log scale, maxValue and minValue are the logs of those values.
992 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
993 var minValue
= maxValue
- axis
.dragValueRange
;
995 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
996 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
998 axis
.valueWindow
= [ minValue
, maxValue
];
1006 // Called in response to an interaction model operation that
1007 // responds to an event that ends panning.
1009 // It's used in the default callback for "mouseup" operations.
1010 // Custom interaction model builders can use it to provide the default
1011 // panning behavior.
1013 Dygraph
.endPan
= function(event
, g
, context
) {
1014 // TODO(konigsberg): Clear the context data from the axis.
1015 // TODO(konigsberg): mouseup should just delete the
1016 // context object, and mousedown should create a new one.
1017 context
.isPanning
= false;
1018 context
.is2DPan
= false;
1019 context
.initialLeftmostDate
= null;
1020 context
.dateRange
= null;
1021 context
.valueRange
= null;
1024 // Called in response to an interaction model operation that
1025 // responds to an event that starts zooming.
1027 // It's used in the default callback for "mousedown" operations.
1028 // Custom interaction model builders can use it to provide the default
1029 // zooming behavior.
1031 Dygraph
.startZoom
= function(event
, g
, context
) {
1032 context
.isZooming
= true;
1035 // Called in response to an interaction model operation that
1036 // responds to an event that defines zoom boundaries.
1038 // It's used in the default callback for "mousemove" operations.
1039 // Custom interaction model builders can use it to provide the default
1040 // zooming behavior.
1042 Dygraph
.moveZoom
= function(event
, g
, context
) {
1043 context
.dragEndX
= g
.dragGetX_(event
, context
);
1044 context
.dragEndY
= g
.dragGetY_(event
, context
);
1046 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1047 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1049 // drag direction threshold for y axis is twice as large as x axis
1050 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1053 context
.dragDirection
,
1058 context
.prevDragDirection
,
1062 context
.prevEndX
= context
.dragEndX
;
1063 context
.prevEndY
= context
.dragEndY
;
1064 context
.prevDragDirection
= context
.dragDirection
;
1067 // Called in response to an interaction model operation that
1068 // responds to an event that performs a zoom based on previously defined
1071 // It's used in the default callback for "mouseup" operations.
1072 // Custom interaction model builders can use it to provide the default
1073 // zooming behavior.
1075 Dygraph
.endZoom
= function(event
, g
, context
) {
1076 context
.isZooming
= false;
1077 context
.dragEndX
= g
.dragGetX_(event
, context
);
1078 context
.dragEndY
= g
.dragGetY_(event
, context
);
1079 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1080 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1082 if (regionWidth
< 2 && regionHeight
< 2 &&
1083 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1084 // TODO(danvk): pass along more info about the points, e.g. 'x'
1085 if (g
.attr_('clickCallback') != null) {
1086 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1088 if (g
.attr_('pointClickCallback')) {
1089 // check if the click was on a particular point.
1090 var closestIdx
= -1;
1091 var closestDistance
= 0;
1092 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1093 var p
= g
.selPoints_
[i
];
1094 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1095 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1096 if (closestIdx
== -1 || distance
< closestDistance
) {
1097 closestDistance
= distance
;
1102 // Allow any click within two pixels of the dot.
1103 var radius
= g
.attr_('highlightCircleSize') + 2;
1104 if (closestDistance
<= 5 * 5) {
1105 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1110 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1111 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1112 Math
.max(context
.dragStartX
, context
.dragEndX
));
1113 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1114 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1115 Math
.max(context
.dragStartY
, context
.dragEndY
));
1117 g
.canvas_
.getContext("2d").clearRect(0, 0,
1121 context
.dragStartX
= null;
1122 context
.dragStartY
= null;
1125 Dygraph
.defaultInteractionModel
= {
1126 // Track the beginning of drag events
1127 mousedown
: function(event
, g
, context
) {
1128 context
.initializeMouseDown(event
, g
, context
);
1130 if (event
.altKey
|| event
.shiftKey
) {
1131 Dygraph
.startPan(event
, g
, context
);
1133 Dygraph
.startZoom(event
, g
, context
);
1137 // Draw zoom rectangles when the mouse is down and the user moves around
1138 mousemove
: function(event
, g
, context
) {
1139 if (context
.isZooming
) {
1140 Dygraph
.moveZoom(event
, g
, context
);
1141 } else if (context
.isPanning
) {
1142 Dygraph
.movePan(event
, g
, context
);
1146 mouseup
: function(event
, g
, context
) {
1147 if (context
.isZooming
) {
1148 Dygraph
.endZoom(event
, g
, context
);
1149 } else if (context
.isPanning
) {
1150 Dygraph
.endPan(event
, g
, context
);
1154 // Temporarily cancel the dragging event when the mouse leaves the graph
1155 mouseout
: function(event
, g
, context
) {
1156 if (context
.isZooming
) {
1157 context
.dragEndX
= null;
1158 context
.dragEndY
= null;
1162 // Disable zooming out if panning.
1163 dblclick
: function(event
, g
, context
) {
1164 if (event
.altKey
|| event
.shiftKey
) {
1167 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1168 // friendlier to public use.
1173 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1176 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1180 Dygraph
.prototype.createDragInterface_
= function() {
1182 // Tracks whether the mouse is down right now
1184 isPanning
: false, // is this drag part of a pan?
1185 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1190 dragDirection
: null,
1193 prevDragDirection
: null,
1195 // The value on the left side of the graph when a pan operation starts.
1196 initialLeftmostDate
: null,
1198 // The number of units each pixel spans. (This won't be valid for log
1200 xUnitsPerPixel
: null,
1202 // TODO(danvk): update this comment
1203 // The range in second/value units that the viewport encompasses during a
1204 // panning operation.
1207 // Utility function to convert page-wide coordinates to canvas coords
1211 initializeMouseDown
: function(event
, g
, context
) {
1212 // prevents mouse drags from selecting page text.
1213 if (event
.preventDefault
) {
1214 event
.preventDefault(); // Firefox, Chrome, etc.
1216 event
.returnValue
= false; // IE
1217 event
.cancelBubble
= true;
1220 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1221 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1222 context
.dragStartX
= g
.dragGetX_(event
, context
);
1223 context
.dragStartY
= g
.dragGetY_(event
, context
);
1227 var interactionModel
= this.attr_("interactionModel");
1229 // Self is the graph.
1232 // Function that binds the graph and context to the handler.
1233 var bindHandler
= function(handler
) {
1234 return function(event
) {
1235 handler(event
, self
, context
);
1239 for (var eventName
in interactionModel
) {
1240 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1241 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1242 bindHandler(interactionModel
[eventName
]));
1245 // If the user releases the mouse button during a drag, but not over the
1246 // canvas, then it doesn't count as a zooming action.
1247 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1248 if (context
.isZooming
|| context
.isPanning
) {
1249 context
.isZooming
= false;
1250 context
.dragStartX
= null;
1251 context
.dragStartY
= null;
1254 if (context
.isPanning
) {
1255 context
.isPanning
= false;
1256 context
.draggingDate
= null;
1257 context
.dateRange
= null;
1258 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1259 delete self
.axes_
[i
].draggingValue
;
1260 delete self
.axes_
[i
].dragValueRange
;
1267 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1268 * up any previous zoom rectangles that were drawn. This could be optimized to
1269 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1272 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1273 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1274 * @param {Number} startX The X position where the drag started, in canvas
1276 * @param {Number} endX The current X position of the drag, in canvas coords.
1277 * @param {Number} startY The Y position where the drag started, in canvas
1279 * @param {Number} endY The current Y position of the drag, in canvas coords.
1280 * @param {Number} prevDirection the value of direction on the previous call to
1281 * this function. Used to avoid excess redrawing
1282 * @param {Number} prevEndX The value of endX on the previous call to this
1283 * function. Used to avoid excess redrawing
1284 * @param {Number} prevEndY The value of endY on the previous call to this
1285 * function. Used to avoid excess redrawing
1288 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1289 prevDirection
, prevEndX
, prevEndY
) {
1290 var ctx
= this.canvas_
.getContext("2d");
1292 // Clean up from the previous rect if necessary
1293 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1294 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1295 Math
.abs(startX
- prevEndX
), this.height_
);
1296 } else if (prevDirection
== Dygraph
.VERTICAL
){
1297 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1298 this.width_
, Math
.abs(startY
- prevEndY
));
1301 // Draw a light-grey rectangle to show the new viewing area
1302 if (direction
== Dygraph
.HORIZONTAL
) {
1303 if (endX
&& startX
) {
1304 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1305 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1306 Math
.abs(endX
- startX
), this.height_
);
1309 if (direction
== Dygraph
.VERTICAL
) {
1310 if (endY
&& startY
) {
1311 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1312 ctx
.fillRect(0, Math
.min(startY
, endY
),
1313 this.width_
, Math
.abs(endY
- startY
));
1319 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1320 * the canvas. The exact zoom window may be slightly larger if there are no data
1321 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1322 * which accepts dates that match the raw data. This function redraws the graph.
1324 * @param {Number} lowX The leftmost pixel value that should be visible.
1325 * @param {Number} highX The rightmost pixel value that should be visible.
1328 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1329 // Find the earliest and latest dates contained in this canvasx range.
1330 // Convert the call to date ranges of the raw data.
1331 var minDate
= this.toDataXCoord(lowX
);
1332 var maxDate
= this.toDataXCoord(highX
);
1333 this.doZoomXDates_(minDate
, maxDate
);
1337 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1338 * method with doZoomX which accepts pixel coordinates. This function redraws
1341 * @param {Number} minDate The minimum date that should be visible.
1342 * @param {Number} maxDate The maximum date that should be visible.
1345 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1346 this.dateWindow_
= [minDate
, maxDate
];
1347 this.zoomed_x_
= true;
1349 if (this.attr_("zoomCallback")) {
1350 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1355 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1356 * the canvas. This function redraws the graph.
1358 * @param {Number} lowY The topmost pixel value that should be visible.
1359 * @param {Number} highY The lowest pixel value that should be visible.
1362 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1363 // Find the highest and lowest values in pixel range for each axis.
1364 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1365 // This is because pixels increase as you go down on the screen, whereas data
1366 // coordinates increase as you go up the screen.
1367 var valueRanges
= [];
1368 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1369 var hi
= this.toDataYCoord(lowY
, i
);
1370 var low
= this.toDataYCoord(highY
, i
);
1371 this.axes_
[i
].valueWindow
= [low
, hi
];
1372 valueRanges
.push([low
, hi
]);
1375 this.zoomed_y_
= true;
1377 if (this.attr_("zoomCallback")) {
1378 var xRange
= this.xAxisRange();
1379 var yRange
= this.yAxisRange();
1380 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1385 * Reset the zoom to the original view coordinates. This is the same as
1386 * double-clicking on the graph.
1390 Dygraph
.prototype.doUnzoom_
= function() {
1392 if (this.dateWindow_
!= null) {
1394 this.dateWindow_
= null;
1397 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1398 if (this.axes_
[i
].valueWindow
!= null) {
1400 delete this.axes_
[i
].valueWindow
;
1405 // Putting the drawing operation before the callback because it resets
1407 this.zoomed_x_
= false;
1408 this.zoomed_y_
= false;
1410 if (this.attr_("zoomCallback")) {
1411 var minDate
= this.rawData_
[0][0];
1412 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1413 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1419 * When the mouse moves in the canvas, display information about a nearby data
1420 * point and draw dots over those points in the data series. This function
1421 * takes care of cleanup of previously-drawn dots.
1422 * @param {Object} event The mousemove event from the browser.
1425 Dygraph
.prototype.mouseMove_
= function(event
) {
1426 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1427 var points
= this.layout_
.points
;
1432 // Loop through all the points and find the date nearest to our current
1434 var minDist
= 1e+100;
1436 for (var i
= 0; i
< points
.length
; i
++) {
1437 var point
= points
[i
];
1438 if (point
== null) continue;
1439 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1440 if (dist
> minDist
) continue;
1444 if (idx
>= 0) lastx
= points
[idx
].xval
;
1446 // Extract the points we've selected
1447 this.selPoints_
= [];
1448 var l
= points
.length
;
1449 if (!this.attr_("stackedGraph")) {
1450 for (var i
= 0; i
< l
; i
++) {
1451 if (points
[i
].xval
== lastx
) {
1452 this.selPoints_
.push(points
[i
]);
1456 // Need to 'unstack' points starting from the bottom
1457 var cumulative_sum
= 0;
1458 for (var i
= l
- 1; i
>= 0; i
--) {
1459 if (points
[i
].xval
== lastx
) {
1460 var p
= {}; // Clone the point since we modify it
1461 for (var k
in points
[i
]) {
1462 p
[k
] = points
[i
][k
];
1464 p
.yval
-= cumulative_sum
;
1465 cumulative_sum
+= p
.yval
;
1466 this.selPoints_
.push(p
);
1469 this.selPoints_
.reverse();
1472 if (this.attr_("highlightCallback")) {
1473 var px
= this.lastx_
;
1474 if (px
!== null && lastx
!= px
) {
1475 // only fire if the selected point has changed.
1476 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1480 // Save last x position for callbacks.
1481 this.lastx_
= lastx
;
1483 this.updateSelection_();
1487 * Transforms layout_.points index into data row number.
1488 * @param int layout_.points index
1489 * @return int row number, or -1 if none could be found.
1492 Dygraph
.prototype.idxToRow_
= function(idx
) {
1493 if (idx
< 0) return -1;
1495 for (var i
in this.layout_
.datasets
) {
1496 if (idx
< this.layout_
.datasets
[i
].length
) {
1497 return this.boundaryIds_
[0][0]+idx
;
1499 idx
-= this.layout_
.datasets
[i
].length
;
1505 * Draw dots over the selectied points in the data series. This function
1506 * takes care of cleanup of previously-drawn dots.
1509 Dygraph
.prototype.updateSelection_
= function() {
1510 // Clear the previously drawn vertical, if there is one
1511 var ctx
= this.canvas_
.getContext("2d");
1512 if (this.previousVerticalX_
>= 0) {
1513 // Determine the maximum highlight circle size.
1514 var maxCircleSize
= 0;
1515 var labels
= this.attr_('labels');
1516 for (var i
= 1; i
< labels
.length
; i
++) {
1517 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1518 if (r
> maxCircleSize
) maxCircleSize
= r
;
1520 var px
= this.previousVerticalX_
;
1521 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1522 2 * maxCircleSize
+ 2, this.height_
);
1525 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1527 if (this.selPoints_
.length
> 0) {
1528 var canvasx
= this.selPoints_
[0].canvasx
;
1530 // Set the status message to indicate the selected point(s)
1531 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1532 var fmtFunc
= this.attr_('yValueFormatter');
1533 var clen
= this.colors_
.length
;
1535 if (this.attr_('showLabelsOnHighlight')) {
1536 // Set the status message to indicate the selected point(s)
1537 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1538 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1539 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1540 if (this.attr_("labelsSeparateLines")) {
1543 var point
= this.selPoints_
[i
];
1544 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1545 var yval
= fmtFunc(point
.yval
);
1546 replace
+= " <b><font color='" + c
.toHex() + "'>"
1547 + point
.name
+ "</font></b>:"
1551 this.attr_("labelsDiv").innerHTML
= replace
;
1554 // Draw colored circles over the center of each selected point
1556 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1557 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1559 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1561 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1562 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1563 0, 2 * Math
.PI
, false);
1568 this.previousVerticalX_
= canvasx
;
1573 * Set manually set selected dots, and display information about them
1574 * @param int row number that should by highlighted
1575 * false value clears the selection
1578 Dygraph
.prototype.setSelection
= function(row
) {
1579 // Extract the points we've selected
1580 this.selPoints_
= [];
1583 if (row
!== false) {
1584 row
= row
-this.boundaryIds_
[0][0];
1587 if (row
!== false && row
>= 0) {
1588 for (var i
in this.layout_
.datasets
) {
1589 if (row
< this.layout_
.datasets
[i
].length
) {
1590 var point
= this.layout_
.points
[pos
+row
];
1592 if (this.attr_("stackedGraph")) {
1593 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1596 this.selPoints_
.push(point
);
1598 pos
+= this.layout_
.datasets
[i
].length
;
1602 if (this.selPoints_
.length
) {
1603 this.lastx_
= this.selPoints_
[0].xval
;
1604 this.updateSelection_();
1607 this.clearSelection();
1613 * The mouse has left the canvas. Clear out whatever artifacts remain
1614 * @param {Object} event the mouseout event from the browser.
1617 Dygraph
.prototype.mouseOut_
= function(event
) {
1618 if (this.attr_("unhighlightCallback")) {
1619 this.attr_("unhighlightCallback")(event
);
1622 if (this.attr_("hideOverlayOnMouseOut")) {
1623 this.clearSelection();
1628 * Remove all selection from the canvas
1631 Dygraph
.prototype.clearSelection
= function() {
1632 // Get rid of the overlay data
1633 var ctx
= this.canvas_
.getContext("2d");
1634 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1635 this.attr_("labelsDiv").innerHTML
= "";
1636 this.selPoints_
= [];
1641 * Returns the number of the currently selected row
1642 * @return int row number, of -1 if nothing is selected
1645 Dygraph
.prototype.getSelection
= function() {
1646 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1650 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1651 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1652 return row
+ this.boundaryIds_
[0][0];
1658 Dygraph
.zeropad
= function(x
) {
1659 if (x
< 10) return "0" + x
; else return "" + x
;
1663 * Return a string version of the hours, minutes and seconds portion of a date.
1664 * @param {Number} date The JavaScript date (ms since epoch)
1665 * @return {String} A time of the form "HH:MM:SS"
1668 Dygraph
.hmsString_
= function(date
) {
1669 var zeropad
= Dygraph
.zeropad
;
1670 var d
= new Date(date
);
1671 if (d
.getSeconds()) {
1672 return zeropad(d
.getHours()) + ":" +
1673 zeropad(d
.getMinutes()) + ":" +
1674 zeropad(d
.getSeconds());
1676 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1681 * Convert a JS date to a string appropriate to display on an axis that
1682 * is displaying values at the stated granularity.
1683 * @param {Date} date The date to format
1684 * @param {Number} granularity One of the Dygraph granularity constants
1685 * @return {String} The formatted date
1688 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1689 if (granularity
>= Dygraph
.DECADAL
) {
1690 return date
.strftime('%Y');
1691 } else if (granularity
>= Dygraph
.MONTHLY
) {
1692 return date
.strftime('%b %y');
1694 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1695 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1696 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1698 return Dygraph
.hmsString_(date
.getTime());
1704 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1705 * @param {Number} date The JavaScript date (ms since epoch)
1706 * @return {String} A date of the form "YYYY/MM/DD"
1709 Dygraph
.dateString_
= function(date
, self
) {
1710 var zeropad
= Dygraph
.zeropad
;
1711 var d
= new Date(date
);
1714 var year
= "" + d
.getFullYear();
1715 // Get a 0 padded month string
1716 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1717 // Get a 0 padded day string
1718 var day
= zeropad(d
.getDate());
1721 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1722 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1724 return year
+ "/" + month + "/" + day
+ ret
;
1728 * Round a number to the specified number of digits past the decimal point.
1729 * @param {Number} num The number to round
1730 * @param {Number} places The number of decimals to which to round
1731 * @return {Number} The rounded number
1734 Dygraph
.round_
= function(num
, places
) {
1735 var shift
= Math
.pow(10, places
);
1736 return Math
.round(num
* shift
)/shift
;
1740 * Fires when there's data available to be graphed.
1741 * @param {String} data Raw CSV data to be plotted
1744 Dygraph
.prototype.loadedEvent_
= function(data
) {
1745 this.rawData_
= this.parseCSV_(data
);
1749 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1750 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1751 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1754 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1757 Dygraph
.prototype.addXTicks_
= function() {
1758 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1759 var startDate
, endDate
;
1760 if (this.dateWindow_
) {
1761 startDate
= this.dateWindow_
[0];
1762 endDate
= this.dateWindow_
[1];
1764 startDate
= this.rawData_
[0][0];
1765 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1768 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1769 this.layout_
.updateOptions({xTicks
: xTicks
});
1772 // Time granularity enumeration
1773 Dygraph
.SECONDLY
= 0;
1774 Dygraph
.TWO_SECONDLY
= 1;
1775 Dygraph
.FIVE_SECONDLY
= 2;
1776 Dygraph
.TEN_SECONDLY
= 3;
1777 Dygraph
.THIRTY_SECONDLY
= 4;
1778 Dygraph
.MINUTELY
= 5;
1779 Dygraph
.TWO_MINUTELY
= 6;
1780 Dygraph
.FIVE_MINUTELY
= 7;
1781 Dygraph
.TEN_MINUTELY
= 8;
1782 Dygraph
.THIRTY_MINUTELY
= 9;
1783 Dygraph
.HOURLY
= 10;
1784 Dygraph
.TWO_HOURLY
= 11;
1785 Dygraph
.SIX_HOURLY
= 12;
1787 Dygraph
.WEEKLY
= 14;
1788 Dygraph
.MONTHLY
= 15;
1789 Dygraph
.QUARTERLY
= 16;
1790 Dygraph
.BIANNUAL
= 17;
1791 Dygraph
.ANNUAL
= 18;
1792 Dygraph
.DECADAL
= 19;
1793 Dygraph
.CENTENNIAL
= 20;
1794 Dygraph
.NUM_GRANULARITIES
= 21;
1796 Dygraph
.SHORT_SPACINGS
= [];
1797 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1798 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1799 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1800 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1801 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1802 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1803 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1804 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1805 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1806 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1807 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1808 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1809 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1810 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1811 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1815 // If we used this time granularity, how many ticks would there be?
1816 // This is only an approximation, but it's generally good enough.
1818 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1819 if (granularity
< Dygraph
.MONTHLY
) {
1820 // Generate one tick mark for every fixed interval of time.
1821 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1822 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1824 var year_mod
= 1; // e.g. to only print one point every 10 years.
1825 var num_months
= 12;
1826 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1827 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1828 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1829 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1830 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1832 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1833 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1834 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1840 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1841 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1843 // Returns an array containing {v: millis, label: label} dictionaries.
1845 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1846 var formatter
= this.attr_("xAxisLabelFormatter");
1848 if (granularity
< Dygraph
.MONTHLY
) {
1849 // Generate one tick mark for every fixed interval of time.
1850 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1851 var format
= '%d%b'; // e.g. "1Jan"
1853 // Find a time less than start_time which occurs on a "nice" time boundary
1854 // for this granularity.
1855 var g
= spacing
/ 1000;
1856 var d
= new Date(start_time
);
1857 if (g
<= 60) { // seconds
1858 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1862 if (g
<= 60) { // minutes
1863 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1868 if (g
<= 24) { // days
1869 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1874 if (g
== 7) { // one week
1875 d
.setDate(d
.getDate() - d
.getDay());
1880 start_time
= d
.getTime();
1882 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1883 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1886 // Display a tick mark on the first of a set of months of each year.
1887 // Years get a tick mark iff y % year_mod == 0. This is useful for
1888 // displaying a tick mark once every 10 years, say, on long time scales.
1890 var year_mod
= 1; // e.g. to only print one point every 10 years.
1892 if (granularity
== Dygraph
.MONTHLY
) {
1893 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1894 } else if (granularity
== Dygraph
.QUARTERLY
) {
1895 months
= [ 0, 3, 6, 9 ];
1896 } else if (granularity
== Dygraph
.BIANNUAL
) {
1898 } else if (granularity
== Dygraph
.ANNUAL
) {
1900 } else if (granularity
== Dygraph
.DECADAL
) {
1903 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1907 this.warn("Span of dates is too long");
1910 var start_year
= new Date(start_time
).getFullYear();
1911 var end_year
= new Date(end_time
).getFullYear();
1912 var zeropad
= Dygraph
.zeropad
;
1913 for (var i
= start_year
; i
<= end_year
; i
++) {
1914 if (i
% year_mod
!= 0) continue;
1915 for (var j
= 0; j
< months
.length
; j
++) {
1916 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1917 var t
= Date
.parse(date_str
);
1918 if (t
< start_time
|| t
> end_time
) continue;
1919 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1929 * Add ticks to the x-axis based on a date range.
1930 * @param {Number} startDate Start of the date window (millis since epoch)
1931 * @param {Number} endDate End of the date window (millis since epoch)
1932 * @return {Array.<Object>} Array of {label, value} tuples.
1935 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1937 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1938 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1939 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1946 return self
.GetXAxis(startDate
, endDate
, chosen
);
1948 // TODO(danvk): signal error.
1952 // This is a list of human-friendly values at which to show tick marks on a log
1953 // scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
1954 // ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
1955 // NOTE: this assumes that Dygraph.LOG_SCALE = 10.
1956 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
1958 for (var power
= -39; power
<= 39; power
++) {
1959 var range
= Math
.pow(10, power
);
1960 for (var mult
= 1; mult
<= 9; mult
++) {
1961 var val
= range
* mult
;
1968 // val is the value to search for
1969 // arry is the value over which to search
1970 // if abs > 0, find the lowest entry greater than val
1971 // if abs < 0, find the highest entry less than val
1972 // if abs == 0, find the entry that equals val.
1973 // Currently does not work when val is outside the range of arry's values.
1974 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
1975 if (low
== null || high
== null) {
1977 high
= arry
.length
- 1;
1985 var validIndex
= function(idx
) {
1986 return idx
>= 0 && idx
< arry
.length
;
1988 var mid
= parseInt((low
+ high
) / 2);
1989 var element
= arry
[mid
];
1990 if (element
== val
) {
1993 if (element
> val
) {
1995 // Accept if element > val, but also if prior element < val.
1997 if (validIndex(idx
) && arry
[idx
] < val
) {
2001 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2003 if (element
< val
) {
2005 // Accept if element < val, but also if prior element > val.
2007 if (validIndex(idx
) && arry
[idx
] > val
) {
2011 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2016 * Add ticks when the x axis has numbers on it (instead of dates)
2017 * TODO(konigsberg): Update comment.
2019 * @param {Number} minV minimum value
2020 * @param {Number} maxV maximum value
2022 * @param {function} attribute accessor function.
2023 * @return {Array.<Object>} Array of {label, value} tuples.
2026 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2027 var attr
= function(k
) {
2028 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2029 return self
.attr_(k
);
2034 for (var i
= 0; i
< vals
.length
; i
++) {
2035 ticks
.push({v
: vals
[i
]});
2038 if (axis_props
&& attr("logscale")) {
2039 var pixelsPerTick
= attr('pixelsPerYLabel');
2040 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2041 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2042 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2043 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2048 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2050 // Count the number of tick values would appear, if we can get at least
2051 // nTicks / 4 accept them
.
2052 var lastDisplayed
= null;
2053 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2054 var axisId
= axis_props
.yAxisId
;
2055 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2056 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2057 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2058 var tick
= { v
: tickValue
};
2059 if (lastDisplayed
== null) {
2061 tickValue
: tickValue
,
2065 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2067 tickValue
: tickValue
,
2076 // Since we went in backwards order.
2081 // ticks.length won't be 0 if the log scale function finds values to insert.
2082 if (ticks
.length
== 0) {
2084 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2085 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2086 // The first spacing greater than pixelsPerYLabel is what we use.
2087 // TODO(danvk): version that works on a log scale.
2088 if (attr("labelsKMG2")) {
2089 var mults
= [1, 2, 4, 8];
2091 var mults
= [1, 2, 5];
2093 var scale
, low_val
, high_val
, nTicks
;
2094 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2095 var pixelsPerTick
= attr('pixelsPerYLabel');
2096 for (var i
= -10; i
< 50; i
++) {
2097 if (attr("labelsKMG2")) {
2098 var base_scale
= Math
.pow(16, i
);
2100 var base_scale
= Math
.pow(10, i
);
2102 for (var j
= 0; j
< mults
.length
; j
++) {
2103 scale
= base_scale
* mults
[j
];
2104 low_val
= Math
.floor(minV
/ scale
) * scale
;
2105 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2106 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2107 var spacing
= self
.height_
/ nTicks
;
2108 // wish I could break out of both loops at once...
2109 if (spacing
> pixelsPerTick
) break;
2111 if (spacing
> pixelsPerTick
) break;
2114 // Construct the set of ticks.
2115 // Allow reverse y-axis if it's explicitly requested.
2116 if (low_val
> high_val
) scale
*= -1;
2117 for (var i
= 0; i
< nTicks
; i
++) {
2118 var tickV
= low_val
+ i
* scale
;
2119 ticks
.push( {v
: tickV
} );
2124 // Add formatted labels to the ticks.
2127 if (attr("labelsKMB")) {
2129 k_labels
= [ "K", "M", "B", "T" ];
2131 if (attr("labelsKMG2")) {
2132 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2134 k_labels
= [ "k", "M", "G", "T" ];
2136 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
2138 // Add labels to the ticks.
2139 for (var i
= 0; i
< ticks
.length
; i
++) {
2140 if (ticks
[i
].label
== null) {
2141 var tickV
= ticks
[i
].v
;
2142 var absTickV
= Math
.abs(tickV
);
2144 if (formatter
!= undefined
) {
2145 label
= formatter(tickV
);
2147 label
= Dygraph
.round_(tickV
, 2);
2149 if (k_labels
.length
) {
2150 // Round up to an appropriate unit.
2152 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2153 if (absTickV
>= n
) {
2154 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
2159 ticks
[i
].label
= label
;
2165 // Computes the range of the data series (including confidence intervals).
2166 // series is either [ [x1, y1], [x2, y2], ... ] or
2167 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2168 // Returns [low, high]
2169 Dygraph
.prototype.extremeValues_
= function(series
) {
2170 var minY
= null, maxY
= null;
2172 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2174 // With custom bars, maxY is the max of the high values.
2175 for (var j
= 0; j
< series
.length
; j
++) {
2176 var y
= series
[j
][1][0];
2178 var low
= y
- series
[j
][1][1];
2179 var high
= y
+ series
[j
][1][2];
2180 if (low
> y
) low
= y
; // this can happen with custom bars,
2181 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2182 if (maxY
== null || high
> maxY
) {
2185 if (minY
== null || low
< minY
) {
2190 for (var j
= 0; j
< series
.length
; j
++) {
2191 var y
= series
[j
][1];
2192 if (y
=== null || isNaN(y
)) continue;
2193 if (maxY
== null || y
> maxY
) {
2196 if (minY
== null || y
< minY
) {
2202 return [minY
, maxY
];
2206 * This function is called once when the chart's data is changed or the options
2207 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2208 * idea is that values derived from the chart's data can be computed here,
2209 * rather than every time the chart is drawn. This includes things like the
2210 * number of axes, rolling averages, etc.
2212 Dygraph
.prototype.predraw_
= function() {
2213 // TODO(danvk): move more computations out of drawGraph_ and into here.
2214 this.computeYAxes_();
2216 // Create a new plotter.
2217 if (this.plotter_
) this.plotter_
.clear();
2218 this.plotter_
= new DygraphCanvasRenderer(this,
2219 this.hidden_
, this.layout_
,
2220 this.renderOptions_
);
2222 // The roller sits in the bottom left corner of the chart. We don't know where
2223 // this will be until the options are available, so it's positioned here.
2224 this.createRollInterface_();
2226 // Same thing applies for the labelsDiv. It's right edge should be flush with
2227 // the right edge of the charting area (which may not be the same as the right
2228 // edge of the div, if we have two y-axes.
2229 this.positionLabelsDiv_();
2231 // If the data or options have changed, then we'd better redraw.
2236 * Update the graph with new data. This method is called when the viewing area
2237 * has changed. If the underlying data or options have changed, predraw_ will
2238 * be called before drawGraph_ is called.
2241 Dygraph
.prototype.drawGraph_
= function() {
2242 var data
= this.rawData_
;
2244 // This is used to set the second parameter to drawCallback, below.
2245 var is_initial_draw
= this.is_initial_draw_
;
2246 this.is_initial_draw_
= false;
2248 var minY
= null, maxY
= null;
2249 this.layout_
.removeAllDatasets();
2251 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2253 // Loop over the fields (series). Go from the last to the first,
2254 // because if they're stacked that's how we accumulate the values.
2256 var cumulative_y
= []; // For stacked series.
2259 var extremes
= {}; // series name -> [low, high]
2261 // Loop over all fields and create datasets
2262 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2263 if (!this.visibility()[i
- 1]) continue;
2265 var seriesName
= this.attr_("labels")[i
];
2266 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2267 var logScale
= this.attr_('logscale', i
);
2270 for (var j
= 0; j
< data
.length
; j
++) {
2271 var date
= data
[j
][0];
2272 var point
= data
[j
][i
];
2274 // On the log scale, points less than zero do not exist.
2275 // This will create a gap in the chart. Note that this ignores
2276 // connectSeparatedPoints.
2280 series
.push([date
, point
]);
2282 if (point
!= null || !connectSeparatedPoints
) {
2283 series
.push([date
, point
]);
2288 // TODO(danvk): move this into predraw_. It's insane to do it here.
2289 series
= this.rollingAverage(series
, this.rollPeriod_
);
2291 // Prune down to the desired range, if necessary (for zooming)
2292 // Because there can be lines going to points outside of the visible area,
2293 // we actually prune to visible points, plus one on either side.
2294 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2295 if (this.dateWindow_
) {
2296 var low
= this.dateWindow_
[0];
2297 var high
= this.dateWindow_
[1];
2299 // TODO(danvk): do binary search instead of linear search.
2300 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2301 var firstIdx
= null, lastIdx
= null;
2302 for (var k
= 0; k
< series
.length
; k
++) {
2303 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2306 if (series
[k
][0] <= high
) {
2310 if (firstIdx
=== null) firstIdx
= 0;
2311 if (firstIdx
> 0) firstIdx
--;
2312 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2313 if (lastIdx
< series
.length
- 1) lastIdx
++;
2314 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2315 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2316 pruned
.push(series
[k
]);
2320 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2323 var seriesExtremes
= this.extremeValues_(series
);
2326 for (var j
=0; j
<series
.length
; j
++) {
2327 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2330 } else if (this.attr_("stackedGraph")) {
2331 var l
= series
.length
;
2333 for (var j
= 0; j
< l
; j
++) {
2334 // If one data set has a NaN, let all subsequent stacked
2335 // sets inherit the NaN -- only start at 0 for the first set.
2336 var x
= series
[j
][0];
2337 if (cumulative_y
[x
] === undefined
) {
2338 cumulative_y
[x
] = 0;
2341 actual_y
= series
[j
][1];
2342 cumulative_y
[x
] += actual_y
;
2344 series
[j
] = [x
, cumulative_y
[x
]]
2346 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2347 seriesExtremes
[1] = cumulative_y
[x
];
2349 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2350 seriesExtremes
[0] = cumulative_y
[x
];
2354 extremes
[seriesName
] = seriesExtremes
;
2356 datasets
[i
] = series
;
2359 for (var i
= 1; i
< datasets
.length
; i
++) {
2360 if (!this.visibility()[i
- 1]) continue;
2361 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2364 if (datasets
.length
> 0) {
2365 // TODO(danvk): this method doesn't need to return anything.
2366 var out
= this.computeYAxisRanges_(extremes
);
2368 var seriesToAxisMap
= out
[1];
2369 this.layout_
.updateOptions( { yAxes
: axes
,
2370 seriesToAxisMap
: seriesToAxisMap
2375 // Save the X axis zoomed status as the updateOptions call will tend to set it errorneously
2376 var tmp_zoomed_x
= this.zoomed_x_
;
2377 // Tell PlotKit to use this new data and render itself
2378 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2379 this.zoomed_x_
= tmp_zoomed_x
;
2380 this.layout_
.evaluateWithError();
2381 this.plotter_
.clear();
2382 this.plotter_
.render();
2383 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2384 this.canvas_
.height
);
2386 if (this.attr_("drawCallback") !== null) {
2387 this.attr_("drawCallback")(this, is_initial_draw
);
2392 * Determine properties of the y-axes which are independent of the data
2393 * currently being displayed. This includes things like the number of axes and
2394 * the style of the axes. It does not include the range of each axis and its
2396 * This fills in this.axes_ and this.seriesToAxisMap_.
2397 * axes_ = [ { options } ]
2398 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2399 * indices are into the axes_ array.
2401 Dygraph
.prototype.computeYAxes_
= function() {
2403 if (this.axes_
!= undefined
) {
2404 // Preserve valueWindow settings.
2406 for (var index
= 0; index
< this.axes_
.length
; index
++) {
2407 valueWindows
.push(this.axes_
[index
].valueWindow
);
2411 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2412 this.seriesToAxisMap_
= {};
2414 // Get a list of series names.
2415 var labels
= this.attr_("labels");
2417 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2419 // all options which could be applied per-axis:
2427 'axisLabelFontSize',
2432 // Copy global axis options over to the first axis.
2433 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2434 var k
= axisOptions
[i
];
2435 var v
= this.attr_(k
);
2436 if (v
) this.axes_
[0][k
] = v
;
2439 // Go through once and add all the axes.
2440 for (var seriesName
in series
) {
2441 if (!series
.hasOwnProperty(seriesName
)) continue;
2442 var axis
= this.attr_("axis", seriesName
);
2444 this.seriesToAxisMap_
[seriesName
] = 0;
2447 if (typeof(axis
) == 'object') {
2448 // Add a new axis, making a copy of its per-axis options.
2450 Dygraph
.update(opts
, this.axes_
[0]);
2451 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2452 var yAxisId
= this.axes_
.length
;
2453 opts
.yAxisId
= yAxisId
;
2455 Dygraph
.update(opts
, axis
);
2456 this.axes_
.push(opts
);
2457 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2461 // Go through one more time and assign series to an axis defined by another
2462 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2463 for (var seriesName
in series
) {
2464 if (!series
.hasOwnProperty(seriesName
)) continue;
2465 var axis
= this.attr_("axis", seriesName
);
2466 if (typeof(axis
) == 'string') {
2467 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2468 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2469 "series " + axis
+ ", which does not define its own axis.");
2472 var idx
= this.seriesToAxisMap_
[axis
];
2473 this.seriesToAxisMap_
[seriesName
] = idx
;
2477 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2478 // this last so that hiding the first series doesn't destroy the axis
2479 // properties of the primary axis.
2480 var seriesToAxisFiltered
= {};
2481 var vis
= this.visibility();
2482 for (var i
= 1; i
< labels
.length
; i
++) {
2484 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2486 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2488 if (valueWindows
!= undefined
) {
2489 // Restore valueWindow settings.
2490 for (var index
= 0; index
< valueWindows
.length
; index
++) {
2491 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2497 * Returns the number of y-axes on the chart.
2498 * @return {Number} the number of axes.
2500 Dygraph
.prototype.numAxes
= function() {
2502 for (var series
in this.seriesToAxisMap_
) {
2503 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2504 var idx
= this.seriesToAxisMap_
[series
];
2505 if (idx
> last_axis
) last_axis
= idx
;
2507 return 1 + last_axis
;
2511 * Determine the value range and tick marks for each axis.
2512 * @param {Object} extremes A mapping from seriesName -> [low, high]
2513 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2515 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2516 // Build a map from axis number -> [list of series names]
2517 var seriesForAxis
= [];
2518 for (var series
in this.seriesToAxisMap_
) {
2519 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2520 var idx
= this.seriesToAxisMap_
[series
];
2521 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2522 seriesForAxis
[idx
].push(series
);
2525 // Compute extreme values, a span and tick marks for each axis.
2526 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2527 var axis
= this.axes_
[i
];
2528 if (axis
.valueWindow
) {
2529 // This is only set if the user has zoomed on the y-axis. It is never set
2530 // by a user. It takes precedence over axis.valueRange because, if you set
2531 // valueRange, you'd still expect to be able to pan.
2532 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2533 } else if (axis
.valueRange
) {
2534 // This is a user-set value range for this axis.
2535 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2537 // Calculate the extremes of extremes.
2538 var series
= seriesForAxis
[i
];
2539 var minY
= Infinity
; // extremes[series[0]][0];
2540 var maxY
= -Infinity
; // extremes[series[0]][1];
2541 for (var j
= 0; j
< series
.length
; j
++) {
2542 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2543 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2545 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2547 // Add some padding and round up to an integer to be human-friendly.
2548 var span
= maxY
- minY
;
2549 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2550 if (span
== 0) { span
= maxY
; }
2554 if (axis
.logscale
) {
2555 var maxAxisY
= maxY
+ 0.1 * span
;
2556 var minAxisY
= minY
;
2558 var maxAxisY
= maxY
+ 0.1 * span
;
2559 var minAxisY
= minY
- 0.1 * span
;
2561 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2562 if (!this.attr_("avoidMinZero")) {
2563 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2564 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2567 if (this.attr_("includeZero")) {
2568 if (maxY
< 0) maxAxisY
= 0;
2569 if (minY
> 0) minAxisY
= 0;
2573 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2576 // Add ticks. By default, all axes inherit the tick positions of the
2577 // primary axis. However, if an axis is specifically marked as having
2578 // independent ticks, then that is permissible as well.
2579 if (i
== 0 || axis
.independentTicks
) {
2581 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2582 axis
.computedValueRange
[1],
2586 var p_axis
= this.axes_
[0];
2587 var p_ticks
= p_axis
.ticks
;
2588 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2589 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2590 var tick_values
= [];
2591 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2592 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2593 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2594 tick_values
.push(y_val
);
2598 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2599 axis
.computedValueRange
[1],
2600 this, axis
, tick_values
);
2604 return [this.axes_
, this.seriesToAxisMap_
];
2608 * Calculates the rolling average of a data set.
2609 * If originalData is [label, val], rolls the average of those.
2610 * If originalData is [label, [, it's interpreted as [value, stddev]
2611 * and the roll is returned in the same form, with appropriately reduced
2612 * stddev for each value.
2613 * Note that this is where fractional input (i.e. '5/10') is converted into
2615 * @param {Array} originalData The data in the appropriate format (see above)
2616 * @param {Number} rollPeriod The number of days over which to average the data
2618 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2619 if (originalData
.length
< 2)
2620 return originalData
;
2621 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2622 var rollingData
= [];
2623 var sigma
= this.attr_("sigma");
2625 if (this.fractions_
) {
2627 var den
= 0; // numerator/denominator
2629 for (var i
= 0; i
< originalData
.length
; i
++) {
2630 num
+= originalData
[i
][1][0];
2631 den
+= originalData
[i
][1][1];
2632 if (i
- rollPeriod
>= 0) {
2633 num
-= originalData
[i
- rollPeriod
][1][0];
2634 den
-= originalData
[i
- rollPeriod
][1][1];
2637 var date
= originalData
[i
][0];
2638 var value
= den
? num
/ den
: 0.0;
2639 if (this.attr_("errorBars")) {
2640 if (this.wilsonInterval_
) {
2641 // For more details on this confidence interval, see:
2642 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2644 var p
= value
< 0 ? 0 : value
, n
= den
;
2645 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2646 var denom
= 1 + sigma
* sigma
/ den
;
2647 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2648 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2649 rollingData
[i
] = [date
,
2650 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2652 rollingData
[i
] = [date
, [0, 0, 0]];
2655 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2656 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2659 rollingData
[i
] = [date
, mult
* value
];
2662 } else if (this.attr_("customBars")) {
2667 for (var i
= 0; i
< originalData
.length
; i
++) {
2668 var data
= originalData
[i
][1];
2670 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2672 if (y
!= null && !isNaN(y
)) {
2678 if (i
- rollPeriod
>= 0) {
2679 var prev
= originalData
[i
- rollPeriod
];
2680 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2687 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2688 1.0 * (mid
- low
) / count
,
2689 1.0 * (high
- mid
) / count
]];
2692 // Calculate the rolling average for the first rollPeriod - 1 points where
2693 // there is not enough data to roll over the full number of days
2694 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2695 if (!this.attr_("errorBars")){
2696 if (rollPeriod
== 1) {
2697 return originalData
;
2700 for (var i
= 0; i
< originalData
.length
; i
++) {
2703 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2704 var y
= originalData
[j
][1];
2705 if (y
== null || isNaN(y
)) continue;
2707 sum
+= originalData
[j
][1];
2710 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2712 rollingData
[i
] = [originalData
[i
][0], null];
2717 for (var i
= 0; i
< originalData
.length
; i
++) {
2721 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2722 var y
= originalData
[j
][1][0];
2723 if (y
== null || isNaN(y
)) continue;
2725 sum
+= originalData
[j
][1][0];
2726 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2729 var stddev
= Math
.sqrt(variance
) / num_ok
;
2730 rollingData
[i
] = [originalData
[i
][0],
2731 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2733 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2743 * Parses a date, returning the number of milliseconds since epoch. This can be
2744 * passed in as an xValueParser in the Dygraph constructor.
2745 * TODO(danvk): enumerate formats that this understands.
2746 * @param {String} A date in YYYYMMDD format.
2747 * @return {Number} Milliseconds since epoch.
2750 Dygraph
.dateParser
= function(dateStr
, self
) {
2753 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2754 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2755 while (dateStrSlashed
.search("-") != -1) {
2756 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2758 d
= Date
.parse(dateStrSlashed
);
2759 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2760 // TODO(danvk): remove support for this format. It's confusing.
2761 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2762 + "/" + dateStr
.substr(6,2);
2763 d
= Date
.parse(dateStrSlashed
);
2765 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2766 // "2009/07/12 12:34:56"
2767 d
= Date
.parse(dateStr
);
2770 if (!d
|| isNaN(d
)) {
2771 self
.error("Couldn't parse " + dateStr
+ " as a date");
2777 * Detects the type of the str (date or numeric) and sets the various
2778 * formatting attributes in this.attrs_ based on this type.
2779 * @param {String} str An x value.
2782 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2784 if (str
.indexOf('-') > 0 ||
2785 str
.indexOf('/') >= 0 ||
2786 isNaN(parseFloat(str
))) {
2788 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2789 // TODO(danvk): remove support for this format.
2794 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2795 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2796 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2797 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2799 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2800 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2801 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2802 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2807 * Parses a string in a special csv format. We expect a csv file where each
2808 * line is a date point, and the first field in each line is the date string.
2809 * We also expect that all remaining fields represent series.
2810 * if the errorBars attribute is set, then interpret the fields as:
2811 * date, series1, stddev1, series2, stddev2, ...
2812 * @param {Array.<Object>} data See above.
2815 * @return Array.<Object> An array with one entry for each row. These entries
2816 * are an array of cells in that row. The first entry is the parsed x-value for
2817 * the row. The second, third, etc. are the y-values. These can take on one of
2818 * three forms, depending on the CSV and constructor parameters:
2820 * 2. [ value, stddev ]
2821 * 3. [ low value, center value, high value ]
2823 Dygraph
.prototype.parseCSV_
= function(data
) {
2825 var lines
= data
.split("\n");
2827 // Use the default delimiter or fall back to a tab if that makes sense.
2828 var delim
= this.attr_('delimiter');
2829 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2834 if (this.labelsFromCSV_
) {
2836 this.attrs_
.labels
= lines
[0].split(delim
);
2839 // Parse the x as a float or return null if it's not a number.
2840 var parseFloatOrNull
= function(x
) {
2841 var val
= parseFloat(x
);
2842 // isFinite() returns false for NaN and +/-Infinity
.
2843 return isFinite(val
) ? val
: null;
2847 var defaultParserSet
= false; // attempt to auto-detect x value type
2848 var expectedCols
= this.attr_("labels").length
;
2849 var outOfOrder
= false;
2850 for (var i
= start
; i
< lines
.length
; i
++) {
2851 var line
= lines
[i
];
2852 if (line
.length
== 0) continue; // skip blank lines
2853 if (line
[0] == '#') continue; // skip comment lines
2854 var inFields
= line
.split(delim
);
2855 if (inFields
.length
< 2) continue;
2858 if (!defaultParserSet
) {
2859 this.detectTypeFromString_(inFields
[0]);
2860 xParser
= this.attr_("xValueParser");
2861 defaultParserSet
= true;
2863 fields
[0] = xParser(inFields
[0], this);
2865 // If fractions are expected, parse the numbers as "A/B
"
2866 if (this.fractions_) {
2867 for (var j = 1; j < inFields.length; j++) {
2868 // TODO(danvk): figure out an appropriate way to flag parse errors.
2869 var vals = inFields[j].split("/");
2870 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2872 } else if (this.attr_("errorBars
")) {
2873 // If there are error bars, values are (value, stddev) pairs
2874 for (var j = 1; j < inFields.length; j += 2)
2875 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2876 parseFloatOrNull(inFields[j + 1])];
2877 } else if (this.attr_("customBars
")) {
2878 // Bars are a low;center;high tuple
2879 for (var j = 1; j < inFields.length; j++) {
2880 var vals = inFields[j].split(";");
2881 fields[j] = [ parseFloatOrNull(vals[0]),
2882 parseFloatOrNull(vals[1]),
2883 parseFloatOrNull(vals[2]) ];
2886 // Values are just numbers
2887 for (var j = 1; j < inFields.length; j++) {
2888 fields[j] = parseFloatOrNull(inFields[j]);
2891 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2896 if (fields.length != expectedCols) {
2897 this.error("Number of columns
in line
" + i + " (" + fields.length +
2898 ") does not agree
with number of
labels (" + expectedCols +
2904 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2905 ret.sort(function(a,b) { return a[0] - b[0] });
2912 * The user has provided their data as a pre-packaged JS array. If the x values
2913 * are numeric, this is the same as dygraphs' internal format. If the x values
2914 * are dates, we need to convert them from Date objects to ms since epoch.
2915 * @param {Array.<Object>} data
2916 * @return {Array.<Object>} data with numeric x values.
2918 Dygraph.prototype.parseArray_ = function(data) {
2919 // Peek at the first x value to see if it's numeric.
2920 if (data.length == 0) {
2921 this.error("Can
't plot empty data set");
2924 if (data[0].length == 0) {
2925 this.error("Data set cannot contain an empty row");
2929 if (this.attr_("labels") == null) {
2930 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2931 "in the options parameter");
2932 this.attrs_.labels = [ "X" ];
2933 for (var i = 1; i < data[0].length; i++) {
2934 this.attrs_.labels.push("Y" + i);
2938 if (Dygraph.isDateLike(data[0][0])) {
2939 // Some intelligent defaults for a date x-axis.
2940 this.attrs_.xValueFormatter = Dygraph.dateString_;
2941 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2942 this.attrs_.xTicker = Dygraph.dateTicker;
2944 // Assume they're all dates
.
2945 var parsedData
= Dygraph
.clone(data
);
2946 for (var i
= 0; i
< data
.length
; i
++) {
2947 if (parsedData
[i
].length
== 0) {
2948 this.error("Row " + (1 + i
) + " of data is empty");
2951 if (parsedData
[i
][0] == null
2952 || typeof(parsedData
[i
][0].getTime
) != 'function'
2953 || isNaN(parsedData
[i
][0].getTime())) {
2954 this.error("x value in row " + (1 + i
) + " is not a Date");
2957 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2961 // Some intelligent defaults for a numeric x-axis.
2962 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2963 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2969 * Parses a DataTable object from gviz.
2970 * The data is expected to have a first column that is either a date or a
2971 * number. All subsequent columns must be numbers. If there is a clear mismatch
2972 * between this.xValueParser_ and the type of the first column, it will be
2973 * fixed. Fills out rawData_.
2974 * @param {Array.<Object>} data See above.
2977 Dygraph
.prototype.parseDataTable_
= function(data
) {
2978 var cols
= data
.getNumberOfColumns();
2979 var rows
= data
.getNumberOfRows();
2981 var indepType
= data
.getColumnType(0);
2982 if (indepType
== 'date' || indepType
== 'datetime') {
2983 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2984 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2985 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2986 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2987 } else if (indepType
== 'number') {
2988 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2989 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2990 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2991 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2993 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2994 "column 1 of DataTable input (Got '" + indepType
+ "')");
2998 // Array of the column indices which contain data (and not annotations).
3000 var annotationCols
= {}; // data index -> [annotation cols]
3001 var hasAnnotations
= false;
3002 for (var i
= 1; i
< cols
; i
++) {
3003 var type
= data
.getColumnType(i
);
3004 if (type
== 'number') {
3006 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3007 // This is OK -- it's an annotation column.
3008 var dataIdx
= colIdx
[colIdx
.length
- 1];
3009 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3010 annotationCols
[dataIdx
] = [i
];
3012 annotationCols
[dataIdx
].push(i
);
3014 hasAnnotations
= true;
3016 this.error("Only 'number' is supported as a dependent type with Gviz." +
3017 " 'string' is only supported if displayAnnotations is true");
3021 // Read column labels
3022 // TODO(danvk): add support back for errorBars
3023 var labels
= [data
.getColumnLabel(0)];
3024 for (var i
= 0; i
< colIdx
.length
; i
++) {
3025 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3026 if (this.attr_("errorBars")) i
+= 1;
3028 this.attrs_
.labels
= labels
;
3029 cols
= labels
.length
;
3032 var outOfOrder
= false;
3033 var annotations
= [];
3034 for (var i
= 0; i
< rows
; i
++) {
3036 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3037 data
.getValue(i
, 0) === null) {
3038 this.warn("Ignoring row " + i
+
3039 " of DataTable because of undefined or null first column.");
3043 if (indepType
== 'date' || indepType
== 'datetime') {
3044 row
.push(data
.getValue(i
, 0).getTime());
3046 row
.push(data
.getValue(i
, 0));
3048 if (!this.attr_("errorBars")) {
3049 for (var j
= 0; j
< colIdx
.length
; j
++) {
3050 var col
= colIdx
[j
];
3051 row
.push(data
.getValue(i
, col
));
3052 if (hasAnnotations
&&
3053 annotationCols
.hasOwnProperty(col
) &&
3054 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3056 ann
.series
= data
.getColumnLabel(col
);
3058 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3060 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3061 if (k
) ann
.text
+= "\n";
3062 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3064 annotations
.push(ann
);
3068 for (var j
= 0; j
< cols
- 1; j
++) {
3069 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3072 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3076 // Strip out infinities, which give dygraphs problems later on.
3077 for (var j
= 0; j
< row
.length
; j
++) {
3078 if (!isFinite(row
[j
])) row
[j
] = null;
3084 this.warn("DataTable is out of order; order it correctly to speed loading.");
3085 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3087 this.rawData_
= ret
;
3089 if (annotations
.length
> 0) {
3090 this.setAnnotations(annotations
, true);
3094 // These functions are all based on MochiKit.
3095 Dygraph
.update
= function (self
, o
) {
3096 if (typeof(o
) != 'undefined' && o
!== null) {
3098 if (o
.hasOwnProperty(k
)) {
3106 Dygraph
.isArrayLike
= function (o
) {
3107 var typ
= typeof(o
);
3109 (typ
!= 'object' && !(typ
== 'function' &&
3110 typeof(o
.item
) == 'function')) ||
3112 typeof(o
.length
) != 'number' ||
3120 Dygraph
.isDateLike
= function (o
) {
3121 if (typeof(o
) != "object" || o
=== null ||
3122 typeof(o
.getTime
) != 'function') {
3128 Dygraph
.clone
= function(o
) {
3129 // TODO(danvk): figure out how MochiKit's version works
3131 for (var i
= 0; i
< o
.length
; i
++) {
3132 if (Dygraph
.isArrayLike(o
[i
])) {
3133 r
.push(Dygraph
.clone(o
[i
]));
3143 * Get the CSV data. If it's in a function, call that function. If it's in a
3144 * file, do an XMLHttpRequest to get it.
3147 Dygraph
.prototype.start_
= function() {
3148 if (typeof this.file_
== 'function') {
3149 // CSV string. Pretend we got it via XHR.
3150 this.loadedEvent_(this.file_());
3151 } else if (Dygraph
.isArrayLike(this.file_
)) {
3152 this.rawData_
= this.parseArray_(this.file_
);
3154 } else if (typeof this.file_
== 'object' &&
3155 typeof this.file_
.getColumnRange
== 'function') {
3156 // must be a DataTable from gviz.
3157 this.parseDataTable_(this.file_
);
3159 } else if (typeof this.file_
== 'string') {
3160 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3161 if (this.file_
.indexOf('\n') >= 0) {
3162 this.loadedEvent_(this.file_
);
3164 var req
= new XMLHttpRequest();
3166 req
.onreadystatechange
= function () {
3167 if (req
.readyState
== 4) {
3168 if (req
.status
== 200) {
3169 caller
.loadedEvent_(req
.responseText
);
3174 req
.open("GET", this.file_
, true);
3178 this.error("Unknown data format: " + (typeof this.file_
));
3183 * Changes various properties of the graph. These can include:
3185 * <li>file: changes the source data for the graph</li>
3186 * <li>errorBars: changes whether the data contains stddev</li>
3189 * If the dateWindow or valueRange options are specified, the relevant zoomed_x_
3190 * or zoomed_y_ flags are set, unless the noZoomFlagChange option is also
3191 * secified. This allows for the chart to be programmatically zoomed without
3192 * altering the zoomed flags.
3194 * @param {Object} attrs The new properties and values
3196 Dygraph
.prototype.updateOptions
= function(attrs
) {
3197 // TODO(danvk): this is a mess. Rethink this function.
3198 if ('rollPeriod' in attrs
) {
3199 this.rollPeriod_
= attrs
.rollPeriod
;
3201 if ('dateWindow' in attrs
) {
3202 this.dateWindow_
= attrs
.dateWindow
;
3203 if (!('noZoomFlagChange' in attrs
)) {
3204 this.zoomed_x_
= attrs
.dateWindow
!= null;
3207 if ('valueRange' in attrs
&& !('noZoomFlagChange' in attrs
)) {
3208 this.zoomed_y_
= attrs
.valueRange
!= null;
3211 // TODO(danvk): validate per-series options.
3216 // highlightCircleSize
3218 Dygraph
.update(this.user_attrs_
, attrs
);
3219 Dygraph
.update(this.renderOptions_
, attrs
);
3221 this.labelsFromCSV_
= (this.attr_("labels") == null);
3223 // TODO(danvk): this doesn't match the constructor logic
3224 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3225 if (attrs
['file']) {
3226 this.file_
= attrs
['file'];
3234 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3235 * containing div (which has presumably changed size since the dygraph was
3236 * instantiated. If the width/height are specified, the div will be resized.
3238 * This is far more efficient than destroying and re-instantiating a
3239 * Dygraph, since it doesn't have to reparse the underlying data.
3241 * @param {Number} width Width (in pixels)
3242 * @param {Number} height Height (in pixels)
3244 Dygraph
.prototype.resize
= function(width
, height
) {
3245 if (this.resize_lock
) {
3248 this.resize_lock
= true;
3250 if ((width
=== null) != (height
=== null)) {
3251 this.warn("Dygraph.resize() should be called with zero parameters or " +
3252 "two non-NULL parameters. Pretending it was zero.");
3253 width
= height
= null;
3256 // TODO(danvk): there should be a clear() method.
3257 this.maindiv_
.innerHTML
= "";
3258 this.attrs_
.labelsDiv
= null;
3261 this.maindiv_
.style
.width
= width
+ "px";
3262 this.maindiv_
.style
.height
= height
+ "px";
3263 this.width_
= width
;
3264 this.height_
= height
;
3266 this.width_
= this.maindiv_
.offsetWidth
;
3267 this.height_
= this.maindiv_
.offsetHeight
;
3270 this.createInterface_();
3273 this.resize_lock
= false;
3277 * Adjusts the number of days in the rolling average. Updates the graph to
3278 * reflect the new averaging period.
3279 * @param {Number} length Number of days over which to average the data.
3281 Dygraph
.prototype.adjustRoll
= function(length
) {
3282 this.rollPeriod_
= length
;
3287 * Returns a boolean array of visibility statuses.
3289 Dygraph
.prototype.visibility
= function() {
3290 // Do lazy-initialization, so that this happens after we know the number of
3292 if (!this.attr_("visibility")) {
3293 this.attrs_
["visibility"] = [];
3295 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3296 this.attr_("visibility").push(true);
3298 return this.attr_("visibility");
3302 * Changes the visiblity of a series.
3304 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3305 var x
= this.visibility();
3306 if (num
< 0 || num
>= x
.length
) {
3307 this.warn("invalid series number in setVisibility: " + num
);
3315 * Update the list of annotations and redraw the chart.
3317 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3318 // Only add the annotation CSS rule once we know it will be used.
3319 Dygraph
.addAnnotationRule();
3320 this.annotations_
= ann
;
3321 this.layout_
.setAnnotations(this.annotations_
);
3322 if (!suppressDraw
) {
3328 * Return the list of annotations.
3330 Dygraph
.prototype.annotations
= function() {
3331 return this.annotations_
;
3335 * Get the index of a series (column) given its name. The first column is the
3336 * x-axis, so the data series start with index 1.
3338 Dygraph
.prototype.indexFromSetName
= function(name
) {
3339 var labels
= this.attr_("labels");
3340 for (var i
= 0; i
< labels
.length
; i
++) {
3341 if (labels
[i
] == name
) return i
;
3346 Dygraph
.addAnnotationRule
= function() {
3347 if (Dygraph
.addedAnnotationCSS
) return;
3349 var rule
= "border: 1px solid black; " +
3350 "background-color: white; " +
3351 "text-align: center;";
3353 var styleSheetElement
= document
.createElement("style");
3354 styleSheetElement
.type
= "text/css";
3355 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3357 // Find the first style sheet that we can access.
3358 // We may not add a rule to a style sheet from another domain for security
3359 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3360 // adds its own style sheets from google.com.
3361 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3362 if (document
.styleSheets
[i
].disabled
) continue;
3363 var mysheet
= document
.styleSheets
[i
];
3365 if (mysheet
.insertRule
) { // Firefox
3366 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3367 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3368 } else if (mysheet
.addRule
) { // IE
3369 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3371 Dygraph
.addedAnnotationCSS
= true;
3374 // Was likely a security exception.
3378 this.warn("Unable to add default annotation CSS rule; display may be off.");
3382 * Create a new canvas element. This is more complex than a simple
3383 * document.createElement("canvas") because of IE and excanvas.
3385 Dygraph
.createCanvas
= function() {
3386 var canvas
= document
.createElement("canvas");
3388 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3389 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3390 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3398 * A wrapper around Dygraph that implements the gviz API.
3399 * @param {Object} container The DOM object the visualization should live in.
3401 Dygraph
.GVizChart
= function(container
) {
3402 this.container
= container
;
3405 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3406 // Clear out any existing dygraph.
3407 // TODO(danvk): would it make more sense to simply redraw using the current
3408 // date_graph object?
3409 this.container
.innerHTML
= '';
3410 if (typeof(this.date_graph
) != 'undefined') {
3411 this.date_graph
.destroy();
3414 this.date_graph
= new Dygraph(this.container
, data
, options
);
3418 * Google charts compatible setSelection
3419 * Only row selection is supported, all points in the row will be highlighted
3420 * @param {Array} array of the selected cells
3423 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3425 if (selection_array
.length
) {
3426 row
= selection_array
[0].row
;
3428 this.date_graph
.setSelection(row
);
3432 * Google charts compatible getSelection implementation
3433 * @return {Array} array of the selected cells
3436 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3439 var row
= this.date_graph
.getSelection();
3441 if (row
< 0) return selection
;
3444 for (var i
in this.date_graph
.layout_
.datasets
) {
3445 selection
.push({row
: row
, column
: col
});
3452 // Older pages may still use this name.
3453 DateGraph
= Dygraph
;