3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
8 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
9 * string. Dygraph can handle multiple series with or without error bars. The
10 * date/value ranges will be automatically set. Dygraph uses the
11 * <canvas> tag, so it only works in FF1.5+.
12 * @author danvdk@gmail.com (Dan Vanderkam)
15 <div id="graphdiv" style="width:800px; height:500px;"></div>
16 <script type="text/javascript">
17 new Dygraph(document.getElementById("graphdiv"),
18 "datafile.csv", // CSV file with headers
22 The CSV file is of the form
24 Date,SeriesA,SeriesB,SeriesC
28 If the 'errorBars' option is set in the constructor, the input should be of
30 Date,SeriesA,SeriesB,...
31 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
32 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
34 If the 'fractions' option is set, the input should be of the form:
36 Date,SeriesA,SeriesB,...
37 YYYYMMDD,A1/B1,A2/B2,...
38 YYYYMMDD,A1/B1,A2/B2,...
40 And error bars will be calculated automatically using a binomial distribution.
42 For further documentation and examples, see http://dygraphs.com/
46 /*jshint globalstrict: true */
47 /*global DygraphRangeSelector:false, DygraphLayout:false, DygraphCanvasRenderer:false, G_vmlCanvasManager:false */
51 * Creates an interactive, zoomable chart.
54 * @param {div | String} div A div or the id of a div into which to construct
56 * @param {String | Function} file A file containing CSV data or a function
57 * that returns this data. The most basic expected format for each line is
58 * "YYYY/MM/DD,val1,val2,...". For more information, see
59 * http://dygraphs.com/data.html.
60 * @param {Object} attrs Various other attributes, e.g. errorBars determines
61 * whether the input data contains error ranges. For a complete list of
62 * options, see http://dygraphs.com/options.html.
64 var Dygraph
= function(div
, data
, opts
, opt_fourth_param
) {
65 if (opt_fourth_param
!== undefined
) {
66 // Old versions of dygraphs took in the series labels as a constructor
67 // parameter. This doesn't make sense anymore, but it's easy to continue
68 // to support this usage.
69 this.warn("Using deprecated four-argument dygraph constructor");
70 this.__old_init__(div
, data
, opts
, opt_fourth_param
);
72 this.__init__(div
, data
, opts
);
76 Dygraph
.NAME
= "Dygraph";
77 Dygraph
.VERSION
= "1.2";
78 Dygraph
.__repr__
= function() {
79 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
83 * Returns information about the Dygraph class.
85 Dygraph
.toString
= function() {
86 return this.__repr__();
89 // Various default values
90 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
91 Dygraph
.DEFAULT_WIDTH
= 480;
92 Dygraph
.DEFAULT_HEIGHT
= 320;
94 Dygraph
.ANIMATION_STEPS
= 10;
95 Dygraph
.ANIMATION_DURATION
= 200;
97 // These are defined before DEFAULT_ATTRS so that it can refer to them.
100 * Return a string version of a number. This respects the digitsAfterDecimal
101 * and maxNumberWidth options.
102 * @param {Number} x The number to be formatted
103 * @param {Dygraph} opts An options view
104 * @param {String} name The name of the point's data series
105 * @param {Dygraph} g The dygraph object
107 Dygraph
.numberValueFormatter
= function(x
, opts
, pt
, g
) {
108 var sigFigs
= opts('sigFigs');
110 if (sigFigs
!== null) {
111 // User has opted for a fixed number of significant figures.
112 return Dygraph
.floatFormat(x
, sigFigs
);
115 var digits
= opts('digitsAfterDecimal');
116 var maxNumberWidth
= opts('maxNumberWidth');
118 // switch to scientific notation if we underflow or overflow fixed display.
120 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
121 Math
.abs(x
) < Math
.pow(10, -digits
))) {
122 return x
.toExponential(digits
);
124 return '' + Dygraph
.round_(x
, digits
);
129 * variant for use as an axisLabelFormatter.
132 Dygraph
.numberAxisLabelFormatter
= function(x
, granularity
, opts
, g
) {
133 return Dygraph
.numberValueFormatter(x
, opts
, g
);
137 * Convert a JS date (millis since epoch) to YYYY/MM/DD
138 * @param {Number} date The JavaScript date (ms since epoch)
139 * @return {String} A date of the form "YYYY/MM/DD"
142 Dygraph
.dateString_
= function(date
) {
143 var zeropad
= Dygraph
.zeropad
;
144 var d
= new Date(date
);
147 var year
= "" + d
.getFullYear();
148 // Get a 0 padded month string
149 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
150 // Get a 0 padded day string
151 var day
= zeropad(d
.getDate());
154 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
155 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
157 return year
+ "/" + month + "/" + day
+ ret
;
161 * Convert a JS date to a string appropriate to display on an axis that
162 * is displaying values at the stated granularity.
163 * @param {Date} date The date to format
164 * @param {Number} granularity One of the Dygraph granularity constants
165 * @return {String} The formatted date
168 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
169 if (granularity
>= Dygraph
.DECADAL
) {
170 return date
.strftime('%Y');
171 } else if (granularity
>= Dygraph
.MONTHLY
) {
172 return date
.strftime('%b %y');
174 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
175 if (frac
=== 0 || granularity
>= Dygraph
.DAILY
) {
176 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
178 return Dygraph
.hmsString_(date
.getTime());
184 * Standard plotters. These may be used by clients.
185 * Available plotters are:
186 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
187 * - Dygraph.Plotters.errorPlotter: draws error bars
188 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
190 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
191 * This causes all the lines to be drawn over all the fills/error bars.
193 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
196 // Default attribute values.
197 Dygraph
.DEFAULT_ATTRS
= {
198 highlightCircleSize
: 3,
199 highlightSeriesOpts
: null,
200 highlightSeriesBackgroundAlpha
: 0.5,
204 // TODO(danvk): move defaults from createStatusMessage_ here.
206 labelsSeparateLines
: false,
207 labelsShowZeroValues
: true,
210 showLabelsOnHighlight
: true,
212 digitsAfterDecimal
: 2,
217 strokeBorderWidth
: 0,
218 strokeBorderColor
: "white",
221 axisLabelFontSize
: 14,
227 xValueParser
: Dygraph
.dateParser
,
234 wilsonInterval
: true, // only relevant if fractions is true
238 connectSeparatedPoints
: false,
241 hideOverlayOnMouseOut
: true,
243 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
244 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
248 drawAxesAtZero
: false,
250 // Sizes of the various chart labels.
257 axisLineColor
: "black",
260 axisLabelColor
: "black",
261 axisLabelFont
: "Arial", // TODO(danvk): is this implemented?
265 gridLineColor
: "rgb(128,128,128)",
267 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
268 animatedZooms
: false, // (for now)
270 // Range selector options
271 showRangeSelector
: false,
272 rangeSelectorHeight
: 40,
273 rangeSelectorPlotStrokeColor
: "#808FAB",
274 rangeSelectorPlotFillColor
: "#A7B1C4",
276 // The ordering here ensures that central lines always appear above any
277 // fill bars/error bars
.
279 Dygraph
.Plotters
.fillPlotter
,
280 Dygraph
.Plotters
.errorPlotter
,
281 Dygraph
.Plotters
.linePlotter
288 axisLabelFormatter
: Dygraph
.dateAxisFormatter
,
289 valueFormatter
: Dygraph
.dateString_
,
290 ticker
: null // will be set in dygraph-tickers.js
294 valueFormatter
: Dygraph
.numberValueFormatter
,
295 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
296 ticker
: null // will be set in dygraph-tickers.js
300 valueFormatter
: Dygraph
.numberValueFormatter
,
301 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
302 ticker
: null // will be set in dygraph-tickers.js
307 // Directions for panning and zooming. Use bit operations when combined
308 // values are possible.
309 Dygraph
.HORIZONTAL
= 1;
310 Dygraph
.VERTICAL
= 2;
312 // Installed plugins, in order of precedence (most-general to most-specific).
313 // Plugins are installed after they are defined, in plugins/install.js
.
317 // Used for initializing annotation CSS rules only once.
318 Dygraph
.addedAnnotationCSS
= false;
320 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
321 // Labels is no longer a constructor parameter, since it's typically set
322 // directly from the data source. It also conains a name for the x-axis,
323 // which the previous constructor form did not.
324 if (labels
!== null) {
325 var new_labels
= ["Date"];
326 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
327 Dygraph
.update(attrs
, { 'labels': new_labels
});
329 this.__init__(div
, file
, attrs
);
333 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
334 * and context <canvas> inside of it. See the constructor for details.
336 * @param {Element} div the Element to render the graph into.
337 * @param {String | Function} file Source data
338 * @param {Object} attrs Miscellaneous other options
341 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
342 // Hack for IE: if we're using excanvas and the document hasn't finished
343 // loading yet (and hence may not have initialized whatever it needs to
344 // initialize), then keep calling this routine periodically until it has.
345 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
346 typeof(G_vmlCanvasManager
) != 'undefined' &&
347 document
.readyState
!= 'complete') {
349 setTimeout(function() { self
.__init__(div
, file
, attrs
); }, 100);
353 // Support two-argument constructor
354 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
356 attrs
= Dygraph
.mapLegacyOptions_(attrs
);
359 Dygraph
.error("Constructing dygraph with a non-existent div!");
363 this.isUsingExcanvas_
= typeof(G_vmlCanvasManager
) != 'undefined';
365 // Copy the important bits into the object
366 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
369 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
370 this.previousVerticalX_
= -1;
371 this.fractions_
= attrs
.fractions
|| false;
372 this.dateWindow_
= attrs
.dateWindow
|| null;
374 this.is_initial_draw_
= true;
375 this.annotations_
= [];
377 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
378 this.zoomed_x_
= false;
379 this.zoomed_y_
= false;
381 // Clear the div. This ensure that, if multiple dygraphs are passed the same
382 // div, then only one will be drawn.
385 // For historical reasons, the 'width' and 'height' options trump all CSS
386 // rules _except_ for an explicit 'width' or 'height' on the div.
387 // As an added convenience, if the div has zero height (like <div></div> does
388 // without any styles), then we use a default height/width
.
389 if (div
.style
.width
=== '' && attrs
.width
) {
390 div
.style
.width
= attrs
.width
+ "px";
392 if (div
.style
.height
=== '' && attrs
.height
) {
393 div
.style
.height
= attrs
.height
+ "px";
395 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
396 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
397 if (div
.style
.width
=== '') {
398 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
401 // these will be zero if the dygraph's div is hidden.
402 this.width_
= div
.clientWidth
;
403 this.height_
= div
.clientHeight
;
405 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
406 if (attrs
.stackedGraph
) {
407 attrs
.fillGraph
= true;
408 // TODO(nikhilk): Add any other stackedGraph checks here.
411 // Dygraphs has many options, some of which interact with one another.
412 // To keep track of everything, we maintain two sets of options:
414 // this.user_attrs_ only options explicitly set by the user.
415 // this.attrs_ defaults, options derived from user_attrs_, data.
417 // Options are then accessed this.attr_('attr'), which first looks at
418 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
419 // defaults without overriding behavior that the user specifically asks for.
420 this.user_attrs_
= {};
421 Dygraph
.update(this.user_attrs_
, attrs
);
423 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
425 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
427 this.boundaryIds_
= [];
428 this.setIndexByName_
= {};
429 this.datasetIndex_
= [];
431 this.registeredEvents_
= [];
432 this.eventListeners_
= {};
434 // Create the containing DIV and other interactive elements
435 this.createInterface_();
439 for (var i
= 0; i
< Dygraph
.PLUGINS
.length
; i
++) {
440 var plugin
= Dygraph
.PLUGINS
[i
];
441 var pluginInstance
= new plugin();
443 plugin
: pluginInstance
,
449 var handlers
= pluginInstance
.activate(this);
450 for (var eventName
in handlers
) {
451 // TODO(danvk): validate eventName.
452 pluginDict
.events
[eventName
] = handlers
[eventName
];
455 this.plugins_
.push(pluginDict
);
458 // At this point, plugins can no longer register event handlers.
459 // Construct a map from event -> ordered list of [callback, plugin].
460 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
461 var plugin_dict
= this.plugins_
[i
];
462 for (var eventName
in plugin_dict
.events
) {
463 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
464 var callback
= plugin_dict
.events
[eventName
];
466 var pair
= [plugin_dict
.plugin
, callback
];
467 if (!(eventName
in this.eventListeners_
)) {
468 this.eventListeners_
[eventName
] = [pair
];
470 this.eventListeners_
[eventName
].push(pair
);
479 * Triggers a cascade of events to the various plugins which are interested in them.
480 * Returns true if the "default behavior" should be performed, i.e. if none of
481 * the event listeners called event.preventDefault().
484 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
485 if (!name
in this.eventListeners_
) return true;
487 // QUESTION: can we use objects & prototypes to speed this up?
491 defaultPrevented
: false,
492 preventDefault
: function() {
493 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
494 e
.defaultPrevented
= true;
496 propagationStopped
: false,
497 stopPropagation
: function() {
498 e
.propagationStopped
= true;
501 Dygraph
.update(e
, extra_props
);
503 var callback_plugin_pairs
= this.eventListeners_
[name
];
504 if (callback_plugin_pairs
) {
505 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
506 var plugin
= callback_plugin_pairs
[i
][0];
507 var callback
= callback_plugin_pairs
[i
][1];
508 callback
.call(plugin
, e
);
509 if (e
.propagationStopped
) break;
512 return e
.defaultPrevented
;
516 * Returns the zoomed status of the chart for one or both axes.
518 * Axis is an optional parameter. Can be set to 'x' or 'y'.
520 * The zoomed status for an axis is set whenever a user zooms using the mouse
521 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
522 * option is also specified).
524 Dygraph
.prototype.isZoomed
= function(axis
) {
525 if (axis
== null) return this.zoomed_x_
|| this.zoomed_y_
;
526 if (axis
=== 'x') return this.zoomed_x_
;
527 if (axis
=== 'y') return this.zoomed_y_
;
528 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
532 * Returns information about the Dygraph object, including its containing ID.
534 Dygraph
.prototype.toString
= function() {
535 var maindiv
= this.maindiv_
;
536 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
537 return "[Dygraph " + id
+ "]";
542 * Returns the value of an option. This may be set by the user (either in the
543 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
545 * @param { String } name The name of the option, e.g. 'rollPeriod'.
546 * @param { String } [seriesName] The name of the series to which the option
547 * will be applied. If no per-series value of this option is available, then
548 * the global value is returned. This is optional.
549 * @return { ... } The value of the option.
551 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
552 // <REMOVE_FOR_COMBINED>
553 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
554 this.error('Must include options reference JS for testing');
555 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
556 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
557 'in the Dygraphs.OPTIONS_REFERENCE listing.');
558 // Only log this error once.
559 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
561 // </REMOVE_FOR_COMBINED
>
564 sources
.push(this.attrs_
);
565 if (this.user_attrs_
) {
566 sources
.push(this.user_attrs_
);
568 if (this.user_attrs_
.hasOwnProperty(seriesName
)) {
569 sources
.push(this.user_attrs_
[seriesName
]);
571 if (seriesName
=== this.highlightSet_
&&
572 this.user_attrs_
.hasOwnProperty('highlightSeriesOpts')) {
573 sources
.push(this.user_attrs_
['highlightSeriesOpts']);
579 for (var i
= sources
.length
- 1; i
>= 0; --i
) {
580 var source
= sources
[i
];
581 if (source
.hasOwnProperty(name
)) {
590 * Returns the current value for an option, as set in the constructor or via
591 * updateOptions. You may pass in an (optional) series name to get per-series
592 * values for the option.
594 * All values returned by this method should be considered immutable. If you
595 * modify them, there is no guarantee that the changes will be honored or that
596 * dygraphs will remain in a consistent state. If you want to modify an option,
597 * use updateOptions() instead.
599 * @param { String } name The name of the option (e.g. 'strokeWidth')
600 * @param { String } [opt_seriesName] Series name to get per-series values.
601 * @return { ... } The value of the option.
603 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
604 return this.attr_(name
, opt_seriesName
);
609 * @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2')
610 * @return { ... } A function mapping string -> option value
612 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
614 return function(opt
) {
615 var axis_opts
= self
.user_attrs_
.axes
;
616 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
][opt
]) {
617 return axis_opts
[axis
][opt
];
619 // user-specified attributes always trump defaults, even if they're less
621 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
622 return self
.user_attrs_
[opt
];
625 axis_opts
= self
.attrs_
.axes
;
626 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
][opt
]) {
627 return axis_opts
[axis
][opt
];
629 // check old-style axis options
630 // TODO(danvk): add a deprecation warning if either of these match.
631 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
632 return self
.axes_
[0][opt
];
633 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
634 return self
.axes_
[1][opt
];
636 return self
.attr_(opt
);
641 * Returns the current rolling period, as set by the user or an option.
642 * @return {Number} The number of points in the rolling window
644 Dygraph
.prototype.rollPeriod
= function() {
645 return this.rollPeriod_
;
649 * Returns the currently-visible x-range. This can be affected by zooming,
650 * panning or a call to updateOptions.
651 * Returns a two-element array: [left, right].
652 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
654 Dygraph
.prototype.xAxisRange
= function() {
655 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
659 * Returns the lower- and upper-bound x-axis values of the
662 Dygraph
.prototype.xAxisExtremes
= function() {
663 var left
= this.rawData_
[0][0];
664 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
665 return [left
, right
];
669 * Returns the currently-visible y-range for an axis. This can be affected by
670 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
671 * called with no arguments, returns the range of the first axis.
672 * Returns a two-element array: [bottom, top].
674 Dygraph
.prototype.yAxisRange
= function(idx
) {
675 if (typeof(idx
) == "undefined") idx
= 0;
676 if (idx
< 0 || idx
>= this.axes_
.length
) {
679 var axis
= this.axes_
[idx
];
680 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
684 * Returns the currently-visible y-ranges for each axis. This can be affected by
685 * zooming, panning, calls to updateOptions, etc.
686 * Returns an array of [bottom, top] pairs, one for each y-axis.
688 Dygraph
.prototype.yAxisRanges
= function() {
690 for (var i
= 0; i
< this.axes_
.length
; i
++) {
691 ret
.push(this.yAxisRange(i
));
696 // TODO(danvk): use these functions throughout dygraphs.
698 * Convert from data coordinates to canvas/div X/Y coordinates.
699 * If specified, do this conversion for the coordinate system of a particular
700 * axis. Uses the first axis by default.
701 * Returns a two-element array: [X, Y]
703 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
704 * instead of toDomCoords(null, y, axis).
706 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
707 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
711 * Convert from data x coordinates to canvas/div X coordinate.
712 * If specified, do this conversion for the coordinate system of a particular
714 * Returns a single value or null if x is null.
716 Dygraph
.prototype.toDomXCoord
= function(x
) {
721 var area
= this.plotter_
.area
;
722 var xRange
= this.xAxisRange();
723 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
727 * Convert from data x coordinates to canvas/div Y coordinate and optional
728 * axis. Uses the first axis by default.
730 * returns a single value or null if y is null.
732 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
733 var pct
= this.toPercentYCoord(y
, axis
);
738 var area
= this.plotter_
.area
;
739 return area
.y
+ pct
* area
.h
;
743 * Convert from canvas/div coords to data coordinates.
744 * If specified, do this conversion for the coordinate system of a particular
745 * axis. Uses the first axis by default.
746 * Returns a two-element array: [X, Y].
748 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
749 * instead of toDataCoords(null, y, axis).
751 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
752 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
756 * Convert from canvas/div x coordinate to data coordinate.
758 * If x is null, this returns null.
760 Dygraph
.prototype.toDataXCoord
= function(x
) {
765 var area
= this.plotter_
.area
;
766 var xRange
= this.xAxisRange();
767 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
771 * Convert from canvas/div y coord to value.
773 * If y is null, this returns null.
774 * if axis is null, this uses the first axis.
776 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
781 var area
= this.plotter_
.area
;
782 var yRange
= this.yAxisRange(axis
);
784 if (typeof(axis
) == "undefined") axis
= 0;
785 if (!this.axes_
[axis
].logscale
) {
786 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
788 // Computing the inverse of toDomCoord.
789 var pct
= (y
- area
.y
) / area
.h
;
791 // Computing the inverse of toPercentYCoord. The function was arrived at with
792 // the following steps:
794 // Original calcuation:
795 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
797 // Move denominator to both sides:
798 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
800 // subtract logr1, and take the negative value.
801 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
803 // Swap both sides of the equation, and we can compute the log of the
804 // return value. Which means we just need to use that as the exponent in
806 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
808 var logr1
= Dygraph
.log10(yRange
[1]);
809 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
810 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
816 * Converts a y for an axis to a percentage from the top to the
817 * bottom of the drawing area.
819 * If the coordinate represents a value visible on the canvas, then
820 * the value will be between 0 and 1, where 0 is the top of the canvas.
821 * However, this method will return values outside the range, as
822 * values can fall outside the canvas.
824 * If y is null, this returns null.
825 * if axis is null, this uses the first axis.
827 * @param { Number } y The data y-coordinate.
828 * @param { Number } [axis] The axis number on which the data coordinate lives.
829 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
831 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
835 if (typeof(axis
) == "undefined") axis
= 0;
837 var yRange
= this.yAxisRange(axis
);
840 if (!this.axes_
[axis
].logscale
) {
841 // yRange[1] - y is unit distance from the bottom.
842 // yRange[1] - yRange[0] is the scale of the range.
843 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
844 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
846 var logr1
= Dygraph
.log10(yRange
[1]);
847 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
853 * Converts an x value to a percentage from the left to the right of
856 * If the coordinate represents a value visible on the canvas, then
857 * the value will be between 0 and 1, where 0 is the left of the canvas.
858 * However, this method will return values outside the range, as
859 * values can fall outside the canvas.
861 * If x is null, this returns null.
862 * @param { Number } x The data x-coordinate.
863 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
865 Dygraph
.prototype.toPercentXCoord
= function(x
) {
870 var xRange
= this.xAxisRange();
871 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
875 * Returns the number of columns (including the independent variable).
876 * @return { Integer } The number of columns.
878 Dygraph
.prototype.numColumns
= function() {
879 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
883 * Returns the number of rows (excluding any header/label row).
884 * @return { Integer } The number of rows, less any header.
886 Dygraph
.prototype.numRows
= function() {
887 return this.rawData_
.length
;
891 * Returns the full range of the x-axis, as determined by the most extreme
892 * values in the data set. Not affected by zooming, visibility, etc.
893 * TODO(danvk): merge w/ xAxisExtremes
894 * @return { Array<Number> } A [low, high] pair
897 Dygraph
.prototype.fullXRange_
= function() {
898 if (this.numRows() > 0) {
899 return [this.rawData_
[0][0], this.rawData_
[this.numRows() - 1][0]];
906 * Returns the value in the given row and column. If the row and column exceed
907 * the bounds on the data, returns null. Also returns null if the value is
909 * @param { Number} row The row number of the data (0-based). Row 0 is the
910 * first row of data, not a header row.
911 * @param { Number} col The column number of the data (0-based)
912 * @return { Number } The value in the specified cell or null if the row/col
915 Dygraph
.prototype.getValue
= function(row
, col
) {
916 if (row
< 0 || row
> this.rawData_
.length
) return null;
917 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
919 return this.rawData_
[row
][col
];
923 * Generates interface elements for the Dygraph: a containing div, a div to
924 * display the current point, and a textbox to adjust the rolling average
925 * period. Also creates the Renderer/Layout elements.
928 Dygraph
.prototype.createInterface_
= function() {
929 // Create the all-enclosing graph div
930 var enclosing
= this.maindiv_
;
932 this.graphDiv
= document
.createElement("div");
933 this.graphDiv
.style
.width
= this.width_
+ "px";
934 this.graphDiv
.style
.height
= this.height_
+ "px";
935 enclosing
.appendChild(this.graphDiv
);
937 // Create the canvas for interactive parts of the chart.
938 this.canvas_
= Dygraph
.createCanvas();
939 this.canvas_
.style
.position
= "absolute";
940 this.canvas_
.width
= this.width_
;
941 this.canvas_
.height
= this.height_
;
942 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
943 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
945 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
947 // ... and for static parts of the chart.
948 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
949 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
951 if (this.attr_('showRangeSelector')) {
952 // The range selector must be created here so that its canvases and contexts get created here.
953 // For some reason, if the canvases and contexts don't get created here, things don't work in IE.
954 this.rangeSelector_
= new DygraphRangeSelector(this);
957 // The interactive parts of the graph are drawn on top of the chart.
958 this.graphDiv
.appendChild(this.hidden_
);
959 this.graphDiv
.appendChild(this.canvas_
);
960 this.mouseEventElement_
= this.createMouseEventElement_();
962 // Create the grapher
963 this.layout_
= new DygraphLayout(this);
965 if (this.rangeSelector_
) {
966 // This needs to happen after the graph canvases are added to the div and the layout object is created.
967 this.rangeSelector_
.addToGraph(this.graphDiv
, this.layout_
);
972 this.mouseMoveHandler
= function(e
) {
973 dygraph
.mouseMove_(e
);
975 this.addEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler
);
977 this.mouseOutHandler
= function(e
) {
978 dygraph
.mouseOut_(e
);
980 this.addEvent(this.mouseEventElement_
, 'mouseout', this.mouseOutHandler
);
982 this.createDragInterface_();
984 this.resizeHandler
= function(e
) {
988 // Update when the window is resized.
989 // TODO(danvk): drop frames depending on complexity of the chart.
990 this.addEvent(window
, 'resize', this.resizeHandler
);
994 * Detach DOM elements in the dygraph and null out all data references.
995 * Calling this when you're done with a dygraph can dramatically reduce memory
996 * usage. See, e.g., the tests/perf.html example.
998 Dygraph
.prototype.destroy
= function() {
999 var removeRecursive
= function(node
) {
1000 while (node
.hasChildNodes()) {
1001 removeRecursive(node
.firstChild
);
1002 node
.removeChild(node
.firstChild
);
1006 for (var idx
= 0; idx
< this.registeredEvents_
.length
; idx
++) {
1007 var reg
= this.registeredEvents_
[idx
];
1008 Dygraph
.removeEvent(reg
.elem
, reg
.type
, reg
.fn
);
1010 this.registeredEvents_
= [];
1012 // remove mouse event handlers (This may not be necessary anymore)
1013 Dygraph
.removeEvent(this.mouseEventElement_
, 'mouseout', this.mouseOutHandler
);
1014 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler
);
1015 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseUpHandler_
);
1016 removeRecursive(this.maindiv_
);
1018 var nullOut
= function(obj
) {
1019 for (var n
in obj
) {
1020 if (typeof(obj
[n
]) === 'object') {
1025 // remove event handlers
1026 Dygraph
.removeEvent(window
,'resize',this.resizeHandler
);
1027 this.resizeHandler
= null;
1028 // These may not all be necessary, but it can't hurt...
1029 nullOut(this.layout_
);
1030 nullOut(this.plotter_
);
1035 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1036 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1037 * or the zoom rectangles) is done on this.canvas_.
1038 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1039 * @return {Object} The newly-created canvas
1042 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1043 var h
= Dygraph
.createCanvas();
1044 h
.style
.position
= "absolute";
1045 // TODO(danvk): h should be offset from canvas. canvas needs to include
1046 // some extra area to make it easier to zoom in on the far left and far
1047 // right. h needs to be precisely the plot area, so that clipping occurs.
1048 h
.style
.top
= canvas
.style
.top
;
1049 h
.style
.left
= canvas
.style
.left
;
1050 h
.width
= this.width_
;
1051 h
.height
= this.height_
;
1052 h
.style
.width
= this.width_
+ "px"; // for IE
1053 h
.style
.height
= this.height_
+ "px"; // for IE
1058 * Creates an overlay element used to handle mouse events.
1059 * @return {Object} The mouse event element.
1062 Dygraph
.prototype.createMouseEventElement_
= function() {
1063 if (this.isUsingExcanvas_
) {
1064 var elem
= document
.createElement("div");
1065 elem
.style
.position
= 'absolute';
1066 elem
.style
.backgroundColor
= 'white';
1067 elem
.style
.filter
= 'alpha(opacity=0)';
1068 elem
.style
.width
= this.width_
+ "px";
1069 elem
.style
.height
= this.height_
+ "px";
1070 this.graphDiv
.appendChild(elem
);
1073 return this.canvas_
;
1078 * Generate a set of distinct colors for the data series. This is done with a
1079 * color wheel. Saturation/Value are customizable, and the hue is
1080 * equally-spaced around the color wheel. If a custom set of colors is
1081 * specified, that is used instead.
1084 Dygraph
.prototype.setColors_
= function() {
1085 var labels
= this.getLabels();
1086 var num
= labels
.length
- 1;
1088 this.colorsMap_
= {};
1089 var colors
= this.attr_('colors');
1092 var sat
= this.attr_('colorSaturation') || 1.0;
1093 var val
= this.attr_('colorValue') || 0.5;
1094 var half
= Math
.ceil(num
/ 2);
1095 for (i
= 1; i
<= num
; i
++) {
1096 if (!this.visibility()[i
-1]) continue;
1097 // alternate colors for high contrast.
1098 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
1099 var hue
= (1.0 * idx
/ (1 + num
));
1100 var colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1101 this.colors_
.push(colorStr
);
1102 this.colorsMap_
[labels
[i
]] = colorStr
;
1105 for (i
= 0; i
< num
; i
++) {
1106 if (!this.visibility()[i
]) continue;
1107 var colorStr
= colors
[i
% colors
.length
];
1108 this.colors_
.push(colorStr
);
1109 this.colorsMap_
[labels
[1 + i
]] = colorStr
;
1115 * Return the list of colors. This is either the list of colors passed in the
1116 * attributes or the autogenerated list of rgb(r,g,b) strings.
1117 * This does not return colors for invisible series.
1118 * @return {Array<string>} The list of colors.
1120 Dygraph
.prototype.getColors
= function() {
1121 return this.colors_
;
1125 * Returns a few attributes of a series, i.e. its color, its visibility, which
1126 * axis it's assigned to, and its column in the original data.
1127 * Returns null if the series does not exist.
1128 * Otherwise, returns an object with column, visibility, color and axis properties.
1129 * The "axis" property will be set to 1 for y1 and 2 for y2.
1130 * The "column" property can be fed back into getValue(row, column) to get
1131 * values for this series.
1133 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1135 var labels
= this.getLabels();
1136 for (var i
= 1; i
< labels
.length
; i
++) {
1137 if (labels
[i
] == series_name
) {
1142 if (idx
== -1) return null;
1147 visible
: this.visibility()[idx
- 1],
1148 color
: this.colorsMap_
[series_name
],
1149 axis
: 1 + this.seriesToAxisMap_
[series_name
]
1154 * Create the text box to adjust the averaging period
1157 Dygraph
.prototype.createRollInterface_
= function() {
1158 // Create a roller if one doesn't exist already.
1159 if (!this.roller_
) {
1160 this.roller_
= document
.createElement("input");
1161 this.roller_
.type
= "text";
1162 this.roller_
.style
.display
= "none";
1163 this.graphDiv
.appendChild(this.roller_
);
1166 var display
= this.attr_('showRoller') ? 'block' : 'none';
1168 var area
= this.plotter_
.area
;
1169 var textAttr
= { "position": "absolute",
1171 "top": (area
.y
+ area
.h
- 25) + "px",
1172 "left": (area
.x
+ 1) + "px",
1175 this.roller_
.size
= "2";
1176 this.roller_
.value
= this.rollPeriod_
;
1177 for (var name
in textAttr
) {
1178 if (textAttr
.hasOwnProperty(name
)) {
1179 this.roller_
.style
[name
] = textAttr
[name
];
1184 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1189 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1190 * canvas (i.e. DOM Coords).
1192 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1193 return Dygraph
.pageX(e
) - context
.px
;
1198 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1199 * canvas (i.e. DOM Coords).
1201 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1202 return Dygraph
.pageY(e
) - context
.py
;
1206 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1210 Dygraph
.prototype.createDragInterface_
= function() {
1212 // Tracks whether the mouse is down right now
1214 isPanning
: false, // is this drag part of a pan?
1215 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1216 dragStartX
: null, // pixel coordinates
1217 dragStartY
: null, // pixel coordinates
1218 dragEndX
: null, // pixel coordinates
1219 dragEndY
: null, // pixel coordinates
1220 dragDirection
: null,
1221 prevEndX
: null, // pixel coordinates
1222 prevEndY
: null, // pixel coordinates
1223 prevDragDirection
: null,
1224 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1226 // The value on the left side of the graph when a pan operation starts.
1227 initialLeftmostDate
: null,
1229 // The number of units each pixel spans. (This won't be valid for log
1231 xUnitsPerPixel
: null,
1233 // TODO(danvk): update this comment
1234 // The range in second/value units that the viewport encompasses during a
1235 // panning operation.
1238 // Top-left corner of the canvas, in DOM coords
1239 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1243 // Values for use with panEdgeFraction, which limit how far outside the
1244 // graph's data boundaries it can be panned.
1245 boundedDates
: null, // [minDate, maxDate]
1246 boundedValues
: null, // [[minValue, maxValue] ...]
1248 // contextB is the same thing as this context object but renamed.
1249 initializeMouseDown
: function(event
, g
, contextB
) {
1250 // prevents mouse drags from selecting page text.
1251 if (event
.preventDefault
) {
1252 event
.preventDefault(); // Firefox, Chrome, etc.
1254 event
.returnValue
= false; // IE
1255 event
.cancelBubble
= true;
1258 contextB
.px
= Dygraph
.findPosX(g
.canvas_
);
1259 contextB
.py
= Dygraph
.findPosY(g
.canvas_
);
1260 contextB
.dragStartX
= g
.dragGetX_(event
, contextB
);
1261 contextB
.dragStartY
= g
.dragGetY_(event
, contextB
);
1262 contextB
.cancelNextDblclick
= false;
1266 var interactionModel
= this.attr_("interactionModel");
1268 // Self is the graph.
1271 // Function that binds the graph and context to the handler.
1272 var bindHandler
= function(handler
) {
1273 return function(event
) {
1274 handler(event
, self
, context
);
1278 for (var eventName
in interactionModel
) {
1279 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1280 this.addEvent(this.mouseEventElement_
, eventName
,
1281 bindHandler(interactionModel
[eventName
]));
1284 // If the user releases the mouse button during a drag, but not over the
1285 // canvas, then it doesn't count as a zooming action.
1286 this.mouseUpHandler_
= function(event
) {
1287 if (context
.isZooming
|| context
.isPanning
) {
1288 context
.isZooming
= false;
1289 context
.dragStartX
= null;
1290 context
.dragStartY
= null;
1293 if (context
.isPanning
) {
1294 context
.isPanning
= false;
1295 context
.draggingDate
= null;
1296 context
.dateRange
= null;
1297 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1298 delete self
.axes_
[i
].draggingValue
;
1299 delete self
.axes_
[i
].dragValueRange
;
1304 this.addEvent(document
, 'mouseup', this.mouseUpHandler_
);
1308 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1309 * up any previous zoom rectangles that were drawn. This could be optimized to
1310 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1313 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1314 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1315 * @param {Number} startX The X position where the drag started, in canvas
1317 * @param {Number} endX The current X position of the drag, in canvas coords.
1318 * @param {Number} startY The Y position where the drag started, in canvas
1320 * @param {Number} endY The current Y position of the drag, in canvas coords.
1321 * @param {Number} prevDirection the value of direction on the previous call to
1322 * this function. Used to avoid excess redrawing
1323 * @param {Number} prevEndX The value of endX on the previous call to this
1324 * function. Used to avoid excess redrawing
1325 * @param {Number} prevEndY The value of endY on the previous call to this
1326 * function. Used to avoid excess redrawing
1329 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1330 endY
, prevDirection
, prevEndX
,
1332 var ctx
= this.canvas_ctx_
;
1334 // Clean up from the previous rect if necessary
1335 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1336 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1337 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1338 } else if (prevDirection
== Dygraph
.VERTICAL
){
1339 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1340 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1343 // Draw a light-grey rectangle to show the new viewing area
1344 if (direction
== Dygraph
.HORIZONTAL
) {
1345 if (endX
&& startX
) {
1346 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1347 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1348 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1350 } else if (direction
== Dygraph
.VERTICAL
) {
1351 if (endY
&& startY
) {
1352 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1353 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1354 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1358 if (this.isUsingExcanvas_
) {
1359 this.currentZoomRectArgs_
= [direction
, startX
, endX
, startY
, endY
, 0, 0, 0];
1364 * Clear the zoom rectangle (and perform no zoom).
1367 Dygraph
.prototype.clearZoomRect_
= function() {
1368 this.currentZoomRectArgs_
= null;
1369 this.canvas_ctx_
.clearRect(0, 0, this.canvas_
.width
, this.canvas_
.height
);
1373 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1374 * the canvas. The exact zoom window may be slightly larger if there are no data
1375 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1376 * which accepts dates that match the raw data. This function redraws the graph.
1378 * @param {Number} lowX The leftmost pixel value that should be visible.
1379 * @param {Number} highX The rightmost pixel value that should be visible.
1382 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1383 this.currentZoomRectArgs_
= null;
1384 // Find the earliest and latest dates contained in this canvasx range.
1385 // Convert the call to date ranges of the raw data.
1386 var minDate
= this.toDataXCoord(lowX
);
1387 var maxDate
= this.toDataXCoord(highX
);
1388 this.doZoomXDates_(minDate
, maxDate
);
1392 * Transition function to use in animations. Returns values between 0.0
1393 * (totally old values) and 1.0 (totally new values) for each frame.
1396 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1398 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1402 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1403 * method with doZoomX which accepts pixel coordinates. This function redraws
1406 * @param {Number} minDate The minimum date that should be visible.
1407 * @param {Number} maxDate The maximum date that should be visible.
1410 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1411 // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation
1412 // can produce strange effects. Rather than the y-axis transitioning slowly
1413 // between values, it can jerk around.)
1414 var old_window
= this.xAxisRange();
1415 var new_window
= [minDate
, maxDate
];
1416 this.zoomed_x_
= true;
1418 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1419 if (that
.attr_("zoomCallback")) {
1420 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1426 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1427 * the canvas. This function redraws the graph.
1429 * @param {Number} lowY The topmost pixel value that should be visible.
1430 * @param {Number} highY The lowest pixel value that should be visible.
1433 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1434 this.currentZoomRectArgs_
= null;
1435 // Find the highest and lowest values in pixel range for each axis.
1436 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1437 // This is because pixels increase as you go down on the screen, whereas data
1438 // coordinates increase as you go up the screen.
1439 var oldValueRanges
= this.yAxisRanges();
1440 var newValueRanges
= [];
1441 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1442 var hi
= this.toDataYCoord(lowY
, i
);
1443 var low
= this.toDataYCoord(highY
, i
);
1444 newValueRanges
.push([low
, hi
]);
1447 this.zoomed_y_
= true;
1449 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1450 if (that
.attr_("zoomCallback")) {
1451 var xRange
= that
.xAxisRange();
1452 that
.attr_("zoomCallback")(xRange
[0], xRange
[1], that
.yAxisRanges());
1458 * Reset the zoom to the original view coordinates. This is the same as
1459 * double-clicking on the graph.
1463 Dygraph
.prototype.doUnzoom_
= function() {
1464 var dirty
= false, dirtyX
= false, dirtyY
= false;
1465 if (this.dateWindow_
!== null) {
1470 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1471 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1477 // Clear any selection, since it's likely to be drawn in the wrong place.
1478 this.clearSelection();
1481 this.zoomed_x_
= false;
1482 this.zoomed_y_
= false;
1484 var minDate
= this.rawData_
[0][0];
1485 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1487 // With only one frame, don't bother calculating extreme ranges.
1488 // TODO(danvk): merge this block w/ the code below
.
1489 if (!this.attr_("animatedZooms")) {
1490 this.dateWindow_
= null;
1491 for (i
= 0; i
< this.axes_
.length
; i
++) {
1492 if (this.axes_
[i
].valueWindow
!== null) {
1493 delete this.axes_
[i
].valueWindow
;
1497 if (this.attr_("zoomCallback")) {
1498 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1503 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1505 oldWindow
= this.xAxisRange();
1506 newWindow
= [minDate
, maxDate
];
1510 oldValueRanges
= this.yAxisRanges();
1511 // TODO(danvk): this is pretty inefficient
1512 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1513 var extremes
= packed
[1];
1515 // this has the side-effect of modifying this.axes_.
1516 // this doesn't make much sense in this context, but it's convenient (we
1517 // need this.axes_[*].extremeValues) and not harmful since we'll be
1518 // calling drawGraph_ shortly, which clobbers these values.
1519 this.computeYAxisRanges_(extremes
);
1521 newValueRanges
= [];
1522 for (i
= 0; i
< this.axes_
.length
; i
++) {
1523 var axis
= this.axes_
[i
];
1524 newValueRanges
.push(axis
.valueRange
!= null ? axis
.valueRange
: axis
.extremeRange
);
1529 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1531 that
.dateWindow_
= null;
1532 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1533 if (that
.axes_
[i
].valueWindow
!== null) {
1534 delete that
.axes_
[i
].valueWindow
;
1537 if (that
.attr_("zoomCallback")) {
1538 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1545 * Combined animation logic for all zoom functions.
1546 * either the x parameters or y parameters may be null.
1549 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1550 var steps
= this.attr_("animatedZooms") ? Dygraph
.ANIMATION_STEPS
: 1;
1553 var valueRanges
= [];
1556 if (oldXRange
!== null && newXRange
!== null) {
1557 for (step
= 1; step
<= steps
; step
++) {
1558 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1559 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1560 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1564 if (oldYRanges
!== null && newYRanges
!== null) {
1565 for (step
= 1; step
<= steps
; step
++) {
1566 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1568 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1569 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1570 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1572 valueRanges
[step
-1] = thisRange
;
1577 Dygraph
.repeatAndCleanup(function(step
) {
1578 if (valueRanges
.length
) {
1579 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1580 var w
= valueRanges
[step
][i
];
1581 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1584 if (windows
.length
) {
1585 that
.dateWindow_
= windows
[step
];
1588 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1592 * Get the current graph's area object.
1594 * Returns: {x, y, w, h}
1596 Dygraph
.prototype.getArea
= function() {
1597 return this.plotter_
.area
;
1601 * Convert a mouse event to DOM coordinates relative to the graph origin.
1603 * Returns a two-element array: [X, Y].
1605 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1606 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1607 var canvasy
= Dygraph
.pageY(event
) - Dygraph
.findPosY(this.mouseEventElement_
);
1608 return [canvasx
, canvasy
];
1612 * Given a canvas X coordinate, find the closest row.
1613 * @param {Number} domX graph-relative DOM X coordinate
1614 * Returns: row number, integer
1617 Dygraph
.prototype.findClosestRow
= function(domX
) {
1618 var minDistX
= Infinity
;
1619 var pointIdx
= -1, setIdx
= -1;
1620 var sets
= this.layout_
.points
;
1621 for (var i
= 0; i
< sets
.length
; i
++) {
1622 var points
= sets
[i
];
1623 var len
= points
.length
;
1624 for (var j
= 0; j
< len
; j
++) {
1625 var point
= points
[j
];
1626 if (!Dygraph
.isValidPoint(point
, true)) continue;
1627 var dist
= Math
.abs(point
.canvasx
- domX
);
1628 if (dist
< minDistX
) {
1636 // TODO(danvk): remove this function; it's trivial and has only one use.
1637 return this.idxToRow_(setIdx
, pointIdx
);
1641 * Given canvas X,Y coordinates, find the closest point.
1643 * This finds the individual data point across all visible series
1644 * that's closest to the supplied DOM coordinates using the standard
1645 * Euclidean X,Y distance.
1647 * @param {Number} domX graph-relative DOM X coordinate
1648 * @param {Number} domY graph-relative DOM Y coordinate
1649 * Returns: {row, seriesName, point}
1652 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1653 var minDist
= Infinity
;
1655 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
;
1656 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
1657 var points
= this.layout_
.points
[setIdx
];
1658 for (var i
= 0; i
< points
.length
; ++i
) {
1659 var point
= points
[i
];
1660 if (!Dygraph
.isValidPoint(point
)) continue;
1661 dx
= point
.canvasx
- domX
;
1662 dy
= point
.canvasy
- domY
;
1663 dist
= dx
* dx
+ dy
* dy
;
1664 if (dist
< minDist
) {
1666 closestPoint
= point
;
1667 closestSeries
= setIdx
;
1672 var name
= this.layout_
.setNames
[closestSeries
];
1674 row
: idx
+ this.getLeftBoundary_(),
1681 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1683 * This first finds the X data point closest to the supplied DOM X coordinate,
1684 * then finds the series which puts the Y coordinate on top of its filled area,
1685 * using linear interpolation between adjacent point pairs.
1687 * @param {Number} domX graph-relative DOM X coordinate
1688 * @param {Number} domY graph-relative DOM Y coordinate
1689 * Returns: {row, seriesName, point}
1692 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1693 var row
= this.findClosestRow(domX
);
1694 var boundary
= this.getLeftBoundary_();
1695 var rowIdx
= row
- boundary
;
1696 var sets
= this.layout_
.points
;
1697 var closestPoint
, closestSeries
;
1698 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
1699 var points
= this.layout_
.points
[setIdx
];
1700 if (rowIdx
>= points
.length
) continue;
1701 var p1
= points
[rowIdx
];
1702 if (!Dygraph
.isValidPoint(p1
)) continue;
1703 var py
= p1
.canvasy
;
1704 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1705 // interpolate series Y value using next point
1706 var p2
= points
[rowIdx
+ 1];
1707 if (Dygraph
.isValidPoint(p2
)) {
1708 var dx
= p2
.canvasx
- p1
.canvasx
;
1710 var r
= (domX
- p1
.canvasx
) / dx
;
1711 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1714 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1715 // interpolate series Y value using previous point
1716 var p0
= points
[rowIdx
- 1];
1717 if (Dygraph
.isValidPoint(p0
)) {
1718 var dx
= p1
.canvasx
- p0
.canvasx
;
1720 var r
= (p1
.canvasx
- domX
) / dx
;
1721 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1725 // Stop if the point (domX, py) is above this series' upper edge
1726 if (setIdx
== 0 || py
< domY
) {
1728 closestSeries
= setIdx
;
1731 var name
= this.layout_
.setNames
[closestSeries
];
1740 * When the mouse moves in the canvas, display information about a nearby data
1741 * point and draw dots over those points in the data series. This function
1742 * takes care of cleanup of previously-drawn dots.
1743 * @param {Object} event The mousemove event from the browser.
1746 Dygraph
.prototype.mouseMove_
= function(event
) {
1747 // This prevents JS errors when mousing over the canvas before data loads.
1748 var points
= this.layout_
.points
;
1749 if (points
=== undefined
|| points
=== null) return;
1751 var canvasCoords
= this.eventToDomCoords(event
);
1752 var canvasx
= canvasCoords
[0];
1753 var canvasy
= canvasCoords
[1];
1755 var highlightSeriesOpts
= this.attr_("highlightSeriesOpts");
1756 var selectionChanged
= false;
1757 if (highlightSeriesOpts
&& !this.lockedSet_
) {
1759 if (this.attr_("stackedGraph")) {
1760 closest
= this.findStackedPoint(canvasx
, canvasy
);
1762 closest
= this.findClosestPoint(canvasx
, canvasy
);
1764 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1766 var idx
= this.findClosestRow(canvasx
);
1767 selectionChanged
= this.setSelection(idx
);
1770 var callback
= this.attr_("highlightCallback");
1771 if (callback
&& selectionChanged
) {
1772 callback(event
, this.lastx_
, this.selPoints_
, this.lastRow_
, this.highlightSet_
);
1777 * Fetch left offset from first defined boundaryIds record (see bug #236).
1780 Dygraph
.prototype.getLeftBoundary_
= function() {
1781 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
1782 if (this.boundaryIds_
[i
] !== undefined
) {
1783 return this.boundaryIds_
[i
][0];
1790 * Transforms layout_.points index into data row number.
1791 * @param int layout_.points index
1792 * @return int row number, or -1 if none could be found.
1795 Dygraph
.prototype.idxToRow_
= function(setIdx
, rowIdx
) {
1796 if (rowIdx
< 0) return -1;
1798 var boundary
= this.getLeftBoundary_();
1799 return boundary
+ rowIdx
;
1800 // for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
1801 // var set = this.layout_.datasets[setIdx];
1802 // if (idx < set.length) {
1803 // return boundary + idx;
1805 // idx -= set.length;
1810 Dygraph
.prototype.animateSelection_
= function(direction
) {
1811 var totalSteps
= 10;
1813 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
1814 if (this.animateId
=== undefined
) this.animateId
= 0;
1815 var start
= this.fadeLevel
;
1816 var steps
= direction
< 0 ? start
: totalSteps
- start
;
1818 if (this.fadeLevel
) {
1819 this.updateSelection_(1.0);
1824 var thisId
= ++this.animateId
;
1826 Dygraph
.repeatAndCleanup(
1828 // ignore simultaneous animations
1829 if (that
.animateId
!= thisId
) return;
1831 that
.fadeLevel
+= direction
;
1832 if (that
.fadeLevel
=== 0) {
1833 that
.clearSelection();
1835 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
1838 steps
, millis
, function() {});
1842 * Draw dots over the selectied points in the data series. This function
1843 * takes care of cleanup of previously-drawn dots.
1846 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
1847 var defaultPrevented
= this.cascadeEvents_('select', {
1848 selectedX
: this.lastx_
,
1849 selectedPoints
: this.selPoints_
1851 // TODO(danvk): use defaultPrevented here?
1853 // Clear the previously drawn vertical, if there is one
1855 var ctx
= this.canvas_ctx_
;
1856 if (this.attr_('highlightSeriesOpts')) {
1857 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1858 var alpha
= 1.0 - this.attr_('highlightSeriesBackgroundAlpha');
1860 // Activating background fade includes an animation effect for a gradual
1861 // fade. TODO(klausw): make this independently configurable if it causes
1862 // issues? Use a shared preference to control animations?
1863 var animateBackgroundFade
= true;
1864 if (animateBackgroundFade
) {
1865 if (opt_animFraction
=== undefined
) {
1866 // start a new animation
1867 this.animateSelection_(1);
1870 alpha
*= opt_animFraction
;
1872 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
1873 ctx
.fillRect(0, 0, this.width_
, this.height_
);
1876 // Redraw only the highlighted series in the interactive canvas (not the
1877 // static plot canvas, which is where series are usually drawn).
1878 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
1879 } else if (this.previousVerticalX_
>= 0) {
1880 // Determine the maximum highlight circle size.
1881 var maxCircleSize
= 0;
1882 var labels
= this.attr_('labels');
1883 for (i
= 1; i
< labels
.length
; i
++) {
1884 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1885 if (r
> maxCircleSize
) maxCircleSize
= r
;
1887 var px
= this.previousVerticalX_
;
1888 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1889 2 * maxCircleSize
+ 2, this.height_
);
1892 if (this.isUsingExcanvas_
&& this.currentZoomRectArgs_
) {
1893 Dygraph
.prototype.drawZoomRect_
.apply(this, this.currentZoomRectArgs_
);
1896 if (this.selPoints_
.length
> 0) {
1897 // Draw colored circles over the center of each selected point
1898 var canvasx
= this.selPoints_
[0].canvasx
;
1900 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
1901 var pt
= this.selPoints_
[i
];
1902 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1904 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1905 var callback
= this.attr_("drawHighlightPointCallback", pt
.name
);
1906 var color
= this.plotter_
.colors
[pt
.name
];
1908 callback
= Dygraph
.Circles
.DEFAULT
;
1910 ctx
.lineWidth
= this.attr_('strokeWidth', pt
.name
);
1911 ctx
.strokeStyle
= color
;
1912 ctx
.fillStyle
= color
;
1913 callback(this.g
, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
1918 this.previousVerticalX_
= canvasx
;
1923 * Manually set the selected points and display information about them in the
1924 * legend. The selection can be cleared using clearSelection() and queried
1925 * using getSelection().
1926 * @param { Integer } row number that should be highlighted (i.e. appear with
1927 * hover dots on the chart). Set to false to clear any selection.
1928 * @param { seriesName } optional series name to highlight that series with the
1929 * the highlightSeriesOpts setting.
1930 * @param { locked } optional If true, keep seriesName selected when mousing
1931 * over the graph, disabling closest-series highlighting. Call clearSelection()
1934 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
1935 // Extract the points we've selected
1936 this.selPoints_
= [];
1938 if (row
!== false) {
1939 row
-= this.getLeftBoundary_();
1942 var changed
= false;
1943 if (row
!== false && row
>= 0) {
1944 if (row
!= this.lastRow_
) changed
= true;
1945 this.lastRow_
= row
;
1946 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
1947 var set
= this.layout_
.datasets
[setIdx
];
1948 if (row
< set
.length
) {
1949 var point
= this.layout_
.points
[setIdx
][row
];
1951 if (this.attr_("stackedGraph")) {
1952 point
= this.layout_
.unstackPointAtIndex(setIdx
, row
);
1955 if (!(point
.yval
=== null)) this.selPoints_
.push(point
);
1959 if (this.lastRow_
>= 0) changed
= true;
1963 if (this.selPoints_
.length
) {
1964 this.lastx_
= this.selPoints_
[0].xval
;
1969 if (opt_seriesName
!== undefined
) {
1970 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
1971 this.highlightSet_
= opt_seriesName
;
1974 if (opt_locked
!== undefined
) {
1975 this.lockedSet_
= opt_locked
;
1979 this.updateSelection_(undefined
);
1985 * The mouse has left the canvas. Clear out whatever artifacts remain
1986 * @param {Object} event the mouseout event from the browser.
1989 Dygraph
.prototype.mouseOut_
= function(event
) {
1990 if (this.attr_("unhighlightCallback")) {
1991 this.attr_("unhighlightCallback")(event
);
1994 if (this.attr_("hideOverlayOnMouseOut") && !this.lockedSet_
) {
1995 this.clearSelection();
2000 * Clears the current selection (i.e. points that were highlighted by moving
2001 * the mouse over the chart).
2003 Dygraph
.prototype.clearSelection
= function() {
2004 this.cascadeEvents_('deselect', {});
2006 this.lockedSet_
= false;
2007 // Get rid of the overlay data
2008 if (this.fadeLevel
) {
2009 this.animateSelection_(-1);
2012 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2014 this.selPoints_
= [];
2017 this.highlightSet_
= null;
2021 * Returns the number of the currently selected row. To get data for this row,
2022 * you can use the getValue method.
2023 * @return { Integer } row number, or -1 if nothing is selected
2025 Dygraph
.prototype.getSelection
= function() {
2026 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2030 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2031 var points
= this.layout_
.points
[setIdx
];
2032 for (var row
= 0; row
< points
.length
; row
++) {
2033 if (points
[row
].x
== this.selPoints_
[0].x
) {
2034 return row
+ this.getLeftBoundary_();
2042 * Returns the name of the currently-highlighted series.
2043 * Only available when the highlightSeriesOpts option is in use.
2045 Dygraph
.prototype.getHighlightSeries
= function() {
2046 return this.highlightSet_
;
2050 * Fires when there's data available to be graphed.
2051 * @param {String} data Raw CSV data to be plotted
2054 Dygraph
.prototype.loadedEvent_
= function(data
) {
2055 this.rawData_
= this.parseCSV_(data
);
2060 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2063 Dygraph
.prototype.addXTicks_
= function() {
2064 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2066 if (this.dateWindow_
) {
2067 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2069 range
= this.fullXRange_();
2072 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2073 var xTicks
= xAxisOptionsView('ticker')(
2076 this.width_
, // TODO(danvk): should be area.width
2079 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2080 // console.log(msg);
2081 this.layout_
.setXTicks(xTicks
);
2086 * Computes the range of the data series (including confidence intervals).
2087 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2088 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2089 * @return [low, high]
2091 Dygraph
.prototype.extremeValues_
= function(series
) {
2092 var minY
= null, maxY
= null, j
, y
;
2094 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2096 // With custom bars, maxY is the max of the high values.
2097 for (j
= 0; j
< series
.length
; j
++) {
2098 y
= series
[j
][1][0];
2100 var low
= y
- series
[j
][1][1];
2101 var high
= y
+ series
[j
][1][2];
2102 if (low
> y
) low
= y
; // this can happen with custom bars,
2103 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2104 if (maxY
=== null || high
> maxY
) {
2107 if (minY
=== null || low
< minY
) {
2112 for (j
= 0; j
< series
.length
; j
++) {
2114 if (y
=== null || isNaN(y
)) continue;
2115 if (maxY
=== null || y
> maxY
) {
2118 if (minY
=== null || y
< minY
) {
2124 return [minY
, maxY
];
2129 * This function is called once when the chart's data is changed or the options
2130 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2131 * idea is that values derived from the chart's data can be computed here,
2132 * rather than every time the chart is drawn. This includes things like the
2133 * number of axes, rolling averages, etc.
2135 Dygraph
.prototype.predraw_
= function() {
2136 var start
= new Date();
2138 // TODO(danvk): move more computations out of drawGraph_ and into here.
2139 this.computeYAxes_();
2141 // Create a new plotter.
2142 if (this.plotter_
) {
2143 this.cascadeEvents_('clearChart');
2144 this.plotter_
.clear();
2146 this.plotter_
= new DygraphCanvasRenderer(this,
2151 // The roller sits in the bottom left corner of the chart. We don't know where
2152 // this will be until the options are available, so it's positioned here.
2153 this.createRollInterface_();
2155 this.cascadeEvents_('predraw');
2157 if (this.rangeSelector_
) {
2158 this.rangeSelector_
.renderStaticLayer();
2161 // Convert the raw data (a 2D array) into the internal format and compute
2162 // rolling averages.
2163 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2164 for (var i
= 1; i
< this.numColumns(); i
++) {
2165 var logScale
= this.attr_('logscale', i
); // TODO(klausw): this looks wrong
2166 var series
= this.extractSeries_(this.rawData_
, i
, logScale
);
2167 series
= this.rollingAverage(series
, this.rollPeriod_
);
2168 this.rolledSeries_
.push(series
);
2171 // If the data or options have changed, then we'd better redraw.
2174 // This is used to determine whether to do various animations.
2175 var end
= new Date();
2176 this.drawingTimeMs_
= (end
- start
);
2180 * Loop over all fields and create datasets, calculating extreme y-values for
2181 * each series and extreme x-indices as we go.
2183 * dateWindow is passed in as an explicit parameter so that we can compute
2184 * extreme values "speculatively", i.e. without actually setting state on the
2187 * TODO(danvk): make this more of a true function
2188 * @return [ datasets, seriesExtremes, boundaryIds ]
2191 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2192 var boundaryIds
= [];
2193 var cumulative_y
= []; // For stacked series.
2195 var extremes
= {}; // series name -> [low, high]
2198 // Loop over the fields (series). Go from the last to the first,
2199 // because if they're stacked that's how we accumulate the values.
2200 var num_series
= rolledSeries
.length
- 1;
2201 for (i
= num_series
; i
>= 1; i
--) {
2202 if (!this.visibility()[i
- 1]) continue;
2204 // Note: this copy _is_ necessary at the moment.
2205 // If you remove it, it breaks zooming with error bars on.
2206 // TODO(danvk): investigate further & write a test for this.
2208 for (j
= 0; j
< rolledSeries
[i
].length
; j
++) {
2209 series
.push(rolledSeries
[i
][j
]);
2212 // Prune down to the desired range, if necessary (for zooming)
2213 // Because there can be lines going to points outside of the visible area,
2214 // we actually prune to visible points, plus one on either side.
2215 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2217 var low
= dateWindow
[0];
2218 var high
= dateWindow
[1];
2220 // TODO(danvk): do binary search instead of linear search.
2221 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2222 var firstIdx
= null, lastIdx
= null;
2223 for (k
= 0; k
< series
.length
; k
++) {
2224 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2227 if (series
[k
][0] <= high
) {
2231 if (firstIdx
=== null) firstIdx
= 0;
2232 if (firstIdx
> 0) firstIdx
--;
2233 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2234 if (lastIdx
< series
.length
- 1) lastIdx
++;
2235 boundaryIds
[i
-1] = [firstIdx
, lastIdx
];
2236 for (k
= firstIdx
; k
<= lastIdx
; k
++) {
2237 pruned
.push(series
[k
]);
2241 boundaryIds
[i
-1] = [0, series
.length
-1];
2244 var seriesExtremes
= this.extremeValues_(series
);
2247 for (j
=0; j
<series
.length
; j
++) {
2248 series
[j
] = [series
[j
][0],
2253 } else if (this.attr_("stackedGraph")) {
2254 var l
= series
.length
;
2256 for (j
= 0; j
< l
; j
++) {
2257 // If one data set has a NaN, let all subsequent stacked
2258 // sets inherit the NaN -- only start at 0 for the first set.
2259 var x
= series
[j
][0];
2260 if (cumulative_y
[x
] === undefined
) {
2261 cumulative_y
[x
] = 0;
2264 actual_y
= series
[j
][1];
2265 if (actual_y
=== null) {
2266 series
[j
] = [x
, null];
2270 cumulative_y
[x
] += actual_y
;
2272 series
[j
] = [x
, cumulative_y
[x
]];
2274 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2275 seriesExtremes
[1] = cumulative_y
[x
];
2277 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2278 seriesExtremes
[0] = cumulative_y
[x
];
2283 var seriesName
= this.attr_("labels")[i
];
2284 extremes
[seriesName
] = seriesExtremes
;
2285 datasets
[i
] = series
;
2288 // For stacked graphs, a NaN value for any point in the sum should create a
2289 // clean gap in the graph. Back-propagate NaNs to all points at this X value.
2290 if (this.attr_("stackedGraph")) {
2291 for (k
= datasets
.length
- 1; k
>= 0; --k
) {
2292 // Use the first nonempty dataset to get X values.
2293 if (!datasets
[k
]) continue;
2294 for (j
= 0; j
< datasets
[k
].length
; j
++) {
2295 var x
= datasets
[k
][j
][0];
2296 if (isNaN(cumulative_y
[x
])) {
2297 // Set all Y values to NaN at that X value.
2298 for (i
= datasets
.length
- 1; i
>= 0; i
--) {
2299 if (!datasets
[i
]) continue;
2300 datasets
[i
][j
][1] = NaN
;
2308 return [ datasets
, extremes
, boundaryIds
];
2312 * Update the graph with new data. This method is called when the viewing area
2313 * has changed. If the underlying data or options have changed, predraw_ will
2314 * be called before drawGraph_ is called.
2318 Dygraph
.prototype.drawGraph_
= function() {
2319 var start
= new Date();
2321 // This is used to set the second parameter to drawCallback, below.
2322 var is_initial_draw
= this.is_initial_draw_
;
2323 this.is_initial_draw_
= false;
2325 this.layout_
.removeAllDatasets();
2327 this.attrs_
.pointSize
= 0.5 * this.attr_('highlightCircleSize');
2329 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2330 var datasets
= packed
[0];
2331 var extremes
= packed
[1];
2332 this.boundaryIds_
= packed
[2];
2334 this.setIndexByName_
= {};
2335 var labels
= this.attr_("labels");
2336 if (labels
.length
> 0) {
2337 this.setIndexByName_
[labels
[0]] = 0;
2340 for (var i
= 1; i
< datasets
.length
; i
++) {
2341 this.setIndexByName_
[labels
[i
]] = i
;
2342 if (!this.visibility()[i
- 1]) continue;
2343 this.layout_
.addDataset(labels
[i
], datasets
[i
]);
2344 this.datasetIndex_
[i
] = dataIdx
++;
2347 this.computeYAxisRanges_(extremes
);
2348 this.layout_
.setYAxes(this.axes_
);
2352 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2353 var tmp_zoomed_x
= this.zoomed_x_
;
2354 // Tell PlotKit to use this new data and render itself
2355 this.layout_
.setDateWindow(this.dateWindow_
);
2356 this.zoomed_x_
= tmp_zoomed_x
;
2357 this.layout_
.evaluateWithError();
2358 this.renderGraph_(is_initial_draw
);
2360 if (this.attr_("timingName")) {
2361 var end
= new Date();
2363 console
.log(this.attr_("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2369 * This does the work of drawing the chart. It assumes that the layout and axis
2370 * scales have already been set (e.g. by predraw_).
2374 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2375 this.cascadeEvents_('clearChart');
2376 this.plotter_
.clear();
2378 if (this.attr_('underlayCallback')) {
2379 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2380 // users who expect a deprecated form of this callback.
2381 this.attr_('underlayCallback')(
2382 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2386 canvas
: this.hidden_
,
2387 drawingContext
: this.hidden_ctx_
2389 this.cascadeEvents_('willDrawChart', e
);
2390 this.plotter_
.render();
2391 this.cascadeEvents_('didDrawChart', e
);
2393 // TODO(danvk): is this a performance bottleneck when panning?
2394 // The interaction canvas should already be empty in that situation.
2395 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2396 this.canvas_
.height
);
2398 // Generate a static legend before any particular point is selected.
2400 if (this.rangeSelector_
) {
2401 this.rangeSelector_
.renderInteractiveLayer();
2403 if (this.attr_("drawCallback") !== null) {
2404 this.attr_("drawCallback")(this, is_initial_draw
);
2410 * Determine properties of the y-axes which are independent of the data
2411 * currently being displayed. This includes things like the number of axes and
2412 * the style of the axes. It does not include the range of each axis and its
2414 * This fills in this.axes_ and this.seriesToAxisMap_.
2415 * axes_ = [ { options } ]
2416 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2417 * indices are into the axes_ array.
2419 Dygraph
.prototype.computeYAxes_
= function() {
2420 // Preserve valueWindow settings if they exist, and if the user hasn't
2421 // specified a new valueRange.
2422 var i
, valueWindows
, seriesName
, axis
, index
, opts
, v
;
2423 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2425 for (index
= 0; index
< this.axes_
.length
; index
++) {
2426 valueWindows
.push(this.axes_
[index
].valueWindow
);
2430 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2431 this.seriesToAxisMap_
= {};
2433 // Get a list of series names.
2434 var labels
= this.attr_("labels");
2436 for (i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2438 // all options which could be applied per-axis:
2446 'axisLabelFontSize',
2451 // Copy global axis options over to the first axis.
2452 for (i
= 0; i
< axisOptions
.length
; i
++) {
2453 var k
= axisOptions
[i
];
2455 if (v
) this.axes_
[0][k
] = v
;
2458 // Go through once and add all the axes.
2459 for (seriesName
in series
) {
2460 if (!series
.hasOwnProperty(seriesName
)) continue;
2461 axis
= this.attr_("axis", seriesName
);
2462 if (axis
=== null) {
2463 this.seriesToAxisMap_
[seriesName
] = 0;
2466 if (typeof(axis
) == 'object') {
2467 // Add a new axis, making a copy of its per-axis options.
2469 Dygraph
.update(opts
, this.axes_
[0]);
2470 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2471 var yAxisId
= this.axes_
.length
;
2472 opts
.yAxisId
= yAxisId
;
2474 Dygraph
.update(opts
, axis
);
2475 this.axes_
.push(opts
);
2476 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2480 // Go through one more time and assign series to an axis defined by another
2481 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2482 for (seriesName
in series
) {
2483 if (!series
.hasOwnProperty(seriesName
)) continue;
2484 axis
= this.attr_("axis", seriesName
);
2485 if (typeof(axis
) == 'string') {
2486 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2487 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2488 "series " + axis
+ ", which does not define its own axis.");
2491 var idx
= this.seriesToAxisMap_
[axis
];
2492 this.seriesToAxisMap_
[seriesName
] = idx
;
2496 if (valueWindows
!== undefined
) {
2497 // Restore valueWindow settings.
2498 for (index
= 0; index
< valueWindows
.length
; index
++) {
2499 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2504 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2506 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2507 v
= opts("valueRange");
2508 if (v
) this.axes_
[axis
].valueRange
= v
;
2509 } else { // To keep old behavior
2510 var axes
= this.user_attrs_
.axes
;
2511 if (axes
&& axes
.y2
) {
2512 v
= axes
.y2
.valueRange
;
2513 if (v
) this.axes_
[axis
].valueRange
= v
;
2521 * Returns the number of y-axes on the chart.
2522 * @return {Number} the number of axes.
2524 Dygraph
.prototype.numAxes
= function() {
2526 for (var series
in this.seriesToAxisMap_
) {
2527 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2528 var idx
= this.seriesToAxisMap_
[series
];
2529 if (idx
> last_axis
) last_axis
= idx
;
2531 return 1 + last_axis
;
2536 * Returns axis properties for the given series.
2537 * @param { String } setName The name of the series for which to get axis
2538 * properties, e.g. 'Y1'.
2539 * @return { Object } The axis properties.
2541 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2542 // TODO(danvk): handle errors.
2543 return this.axes_
[this.seriesToAxisMap_
[series
]];
2548 * Determine the value range and tick marks for each axis.
2549 * @param {Object} extremes A mapping from seriesName -> [low, high]
2550 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2552 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2553 // Build a map from axis number -> [list of series names]
2554 var seriesForAxis
= [], series
;
2555 for (series
in this.seriesToAxisMap_
) {
2556 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2557 var idx
= this.seriesToAxisMap_
[series
];
2558 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2559 seriesForAxis
[idx
].push(series
);
2562 // Compute extreme values, a span and tick marks for each axis.
2563 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2564 var axis
= this.axes_
[i
];
2566 if (!seriesForAxis
[i
]) {
2567 // If no series are defined or visible then use a reasonable default
2568 axis
.extremeRange
= [0, 1];
2570 // Calculate the extremes of extremes.
2571 series
= seriesForAxis
[i
];
2572 var minY
= Infinity
; // extremes[series[0]][0];
2573 var maxY
= -Infinity
; // extremes[series[0]][1];
2574 var extremeMinY
, extremeMaxY
;
2576 for (var j
= 0; j
< series
.length
; j
++) {
2577 // this skips invisible series
2578 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2580 // Only use valid extremes to stop null data series' from corrupting the scale.
2581 extremeMinY
= extremes
[series
[j
]][0];
2582 if (extremeMinY
!== null) {
2583 minY
= Math
.min(extremeMinY
, minY
);
2585 extremeMaxY
= extremes
[series
[j
]][1];
2586 if (extremeMaxY
!== null) {
2587 maxY
= Math
.max(extremeMaxY
, maxY
);
2590 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2592 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2593 if (minY
== Infinity
) minY
= 0;
2594 if (maxY
== -Infinity
) maxY
= 1;
2596 // Add some padding and round up to an integer to be human-friendly.
2597 var span
= maxY
- minY
;
2598 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2599 if (span
=== 0) { span
= maxY
; }
2601 var maxAxisY
, minAxisY
;
2602 if (axis
.logscale
) {
2603 maxAxisY
= maxY
+ 0.1 * span
;
2606 maxAxisY
= maxY
+ 0.1 * span
;
2607 minAxisY
= minY
- 0.1 * span
;
2609 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2610 if (!this.attr_("avoidMinZero")) {
2611 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2612 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2615 if (this.attr_("includeZero")) {
2616 if (maxY
< 0) maxAxisY
= 0;
2617 if (minY
> 0) minAxisY
= 0;
2620 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2622 if (axis
.valueWindow
) {
2623 // This is only set if the user has zoomed on the y-axis. It is never set
2624 // by a user. It takes precedence over axis.valueRange because, if you set
2625 // valueRange, you'd still expect to be able to pan.
2626 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2627 } else if (axis
.valueRange
) {
2628 // This is a user-set value range for this axis.
2629 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2631 axis
.computedValueRange
= axis
.extremeRange
;
2634 // Add ticks. By default, all axes inherit the tick positions of the
2635 // primary axis. However, if an axis is specifically marked as having
2636 // independent ticks, then that is permissible as well.
2637 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2638 var ticker
= opts('ticker');
2639 if (i
=== 0 || axis
.independentTicks
) {
2640 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2641 axis
.computedValueRange
[1],
2642 this.height_
, // TODO(danvk): should be area.height
2646 var p_axis
= this.axes_
[0];
2647 var p_ticks
= p_axis
.ticks
;
2648 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2649 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2650 var tick_values
= [];
2651 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2652 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2653 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2654 tick_values
.push(y_val
);
2657 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2658 axis
.computedValueRange
[1],
2659 this.height_
, // TODO(danvk): should be area.height
2668 * Extracts one series from the raw data (a 2D array) into an array of (date,
2671 * This is where undesirable points (i.e. negative values on log scales and
2672 * missing values through which we wish to connect lines) are dropped.
2673 * TODO(danvk): the "missing values" bit above doesn't seem right.
2677 Dygraph
.prototype.extractSeries_
= function(rawData
, i
, logScale
) {
2678 // TODO(danvk): pre-allocate series here.
2680 for (var j
= 0; j
< rawData
.length
; j
++) {
2681 var x
= rawData
[j
][0];
2682 var point
= rawData
[j
][i
];
2684 // On the log scale, points less than zero do not exist.
2685 // This will create a gap in the chart.
2690 series
.push([x
, point
]);
2697 * Calculates the rolling average of a data set.
2698 * If originalData is [label, val], rolls the average of those.
2699 * If originalData is [label, [, it's interpreted as [value, stddev]
2700 * and the roll is returned in the same form, with appropriately reduced
2701 * stddev for each value.
2702 * Note that this is where fractional input (i.e. '5/10') is converted into
2704 * @param {Array} originalData The data in the appropriate format (see above)
2705 * @param {Number} rollPeriod The number of points over which to average the
2708 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2709 if (originalData
.length
< 2)
2710 return originalData
;
2711 rollPeriod
= Math
.min(rollPeriod
, originalData
.length
);
2712 var rollingData
= [];
2713 var sigma
= this.attr_("sigma");
2715 var low
, high
, i
, j
, y
, sum
, num_ok
, stddev
;
2716 if (this.fractions_
) {
2718 var den
= 0; // numerator/denominator
2720 for (i
= 0; i
< originalData
.length
; i
++) {
2721 num
+= originalData
[i
][1][0];
2722 den
+= originalData
[i
][1][1];
2723 if (i
- rollPeriod
>= 0) {
2724 num
-= originalData
[i
- rollPeriod
][1][0];
2725 den
-= originalData
[i
- rollPeriod
][1][1];
2728 var date
= originalData
[i
][0];
2729 var value
= den
? num
/ den
: 0.0;
2730 if (this.attr_("errorBars")) {
2731 if (this.attr_("wilsonInterval")) {
2732 // For more details on this confidence interval, see:
2733 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2735 var p
= value
< 0 ? 0 : value
, n
= den
;
2736 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2737 var denom
= 1 + sigma
* sigma
/ den
;
2738 low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2739 high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2740 rollingData
[i
] = [date
,
2741 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2743 rollingData
[i
] = [date
, [0, 0, 0]];
2746 stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2747 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2750 rollingData
[i
] = [date
, mult
* value
];
2753 } else if (this.attr_("customBars")) {
2758 for (i
= 0; i
< originalData
.length
; i
++) {
2759 var data
= originalData
[i
][1];
2761 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2763 if (y
!== null && !isNaN(y
)) {
2769 if (i
- rollPeriod
>= 0) {
2770 var prev
= originalData
[i
- rollPeriod
];
2771 if (prev
[1][1] !== null && !isNaN(prev
[1][1])) {
2779 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2780 1.0 * (mid
- low
) / count
,
2781 1.0 * (high
- mid
) / count
]];
2783 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2787 // Calculate the rolling average for the first rollPeriod - 1 points where
2788 // there is not enough data to roll over the full number of points
2789 if (!this.attr_("errorBars")){
2790 if (rollPeriod
== 1) {
2791 return originalData
;
2794 for (i
= 0; i
< originalData
.length
; i
++) {
2797 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2798 y
= originalData
[j
][1];
2799 if (y
=== null || isNaN(y
)) continue;
2801 sum
+= originalData
[j
][1];
2804 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2806 rollingData
[i
] = [originalData
[i
][0], null];
2811 for (i
= 0; i
< originalData
.length
; i
++) {
2815 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2816 y
= originalData
[j
][1][0];
2817 if (y
=== null || isNaN(y
)) continue;
2819 sum
+= originalData
[j
][1][0];
2820 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2823 stddev
= Math
.sqrt(variance
) / num_ok
;
2824 rollingData
[i
] = [originalData
[i
][0],
2825 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2827 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2837 * Detects the type of the str (date or numeric) and sets the various
2838 * formatting attributes in this.attrs_ based on this type.
2839 * @param {String} str An x value.
2842 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2844 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2845 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
2846 str
.indexOf('/') >= 0 ||
2847 isNaN(parseFloat(str
))) {
2849 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2850 // TODO(danvk): remove support for this format.
2855 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2856 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
2857 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
2858 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2860 /** @private (shut up, jsdoc!) */
2861 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2862 // TODO(danvk): use Dygraph.numberValueFormatter here?
2863 /** @private (shut up, jsdoc!) */
2864 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2865 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
2866 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
2871 * Parses the value as a floating point number. This is like the parseFloat()
2872 * built-in, but with a few differences:
2873 * - the empty string is parsed as null, rather than NaN.
2874 * - if the string cannot be parsed at all, an error is logged.
2875 * If the string can't be parsed, this method returns null.
2876 * @param {String} x The string to be parsed
2877 * @param {Number} opt_line_no The line number from which the string comes.
2878 * @param {String} opt_line The text of the line from which the string comes.
2882 // Parse the x as a float or return null if it's not a number.
2883 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
2884 var val
= parseFloat(x
);
2885 if (!isNaN(val
)) return val
;
2887 // Try to figure out what happeend.
2888 // If the value is the empty string, parse it as null.
2889 if (/^ *$/.test(x
)) return null;
2891 // If it was actually "NaN", return it as NaN.
2892 if (/^ *nan *$/i.test(x
)) return NaN
;
2894 // Looks like a parsing error.
2895 var msg
= "Unable to parse '" + x
+ "' as a number";
2896 if (opt_line
!== null && opt_line_no
!== null) {
2897 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
2906 * Parses a string in a special csv format. We expect a csv file where each
2907 * line is a date point, and the first field in each line is the date string.
2908 * We also expect that all remaining fields represent series.
2909 * if the errorBars attribute is set, then interpret the fields as:
2910 * date, series1, stddev1, series2, stddev2, ...
2911 * @param {[Object]} data See above.
2913 * @return [Object] An array with one entry for each row. These entries
2914 * are an array of cells in that row. The first entry is the parsed x-value for
2915 * the row. The second, third, etc. are the y-values. These can take on one of
2916 * three forms, depending on the CSV and constructor parameters:
2918 * 2. [ value, stddev ]
2919 * 3. [ low value, center value, high value ]
2921 Dygraph
.prototype.parseCSV_
= function(data
) {
2923 var lines
= data
.split("\n");
2926 // Use the default delimiter or fall back to a tab if that makes sense.
2927 var delim
= this.attr_('delimiter');
2928 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2933 if (!('labels' in this.user_attrs_
)) {
2934 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2936 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
2941 var defaultParserSet
= false; // attempt to auto-detect x value type
2942 var expectedCols
= this.attr_("labels").length
;
2943 var outOfOrder
= false;
2944 for (var i
= start
; i
< lines
.length
; i
++) {
2945 var line
= lines
[i
];
2947 if (line
.length
=== 0) continue; // skip blank lines
2948 if (line
[0] == '#') continue; // skip comment lines
2949 var inFields
= line
.split(delim
);
2950 if (inFields
.length
< 2) continue;
2953 if (!defaultParserSet
) {
2954 this.detectTypeFromString_(inFields
[0]);
2955 xParser
= this.attr_("xValueParser");
2956 defaultParserSet
= true;
2958 fields
[0] = xParser(inFields
[0], this);
2960 // If fractions are expected, parse the numbers as "A/B
"
2961 if (this.fractions_) {
2962 for (j = 1; j < inFields.length; j++) {
2963 // TODO(danvk): figure out an appropriate way to flag parse errors.
2964 vals = inFields[j].split("/");
2965 if (vals.length != 2) {
2966 this.error('Expected fractional "num
/den
" values in CSV data ' +
2967 "but found a value
'" + inFields[j] + "' on line
" +
2968 (1 + i) + " ('" + line + "') which is not of
this form
.");
2971 fields[j] = [this.parseFloat_(vals[0], i, line),
2972 this.parseFloat_(vals[1], i, line)];
2975 } else if (this.attr_("errorBars
")) {
2976 // If there are error bars, values are (value, stddev) pairs
2977 if (inFields.length % 2 != 1) {
2978 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
2979 'but line ' + (1 + i) + ' has an odd number of values (' +
2980 (inFields.length - 1) + "): '" + line + "'");
2982 for (j = 1; j < inFields.length; j += 2) {
2983 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
2984 this.parseFloat_(inFields[j + 1], i, line)];
2986 } else if (this.attr_("customBars
")) {
2987 // Bars are a low;center;high tuple
2988 for (j = 1; j < inFields.length; j++) {
2989 var val = inFields[j];
2990 if (/^ *$/.test(val)) {
2991 fields[j] = [null, null, null];
2993 vals = val.split(";");
2994 if (vals.length == 3) {
2995 fields[j] = [ this.parseFloat_(vals[0], i, line),
2996 this.parseFloat_(vals[1], i, line),
2997 this.parseFloat_(vals[2], i, line) ];
2999 this.warn('When using customBars, values must be either blank ' +
3000 'or "low
;center
;high
" tuples (got "' + val +
3001 '" on line ' + (1+i));
3006 // Values are just numbers
3007 for (j = 1; j < inFields.length; j++) {
3008 fields[j] = this.parseFloat_(inFields[j], i, line);
3011 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3015 if (fields.length != expectedCols) {
3016 this.error("Number of columns
in line
" + i + " (" + fields.length +
3017 ") does not agree
with number of
labels (" + expectedCols +
3021 // If the user specified the 'labels' option and none of the cells of the
3022 // first row parsed correctly, then they probably double-specified the
3023 // labels. We go with the values set in the option, discard this row and
3024 // log a warning to the JS console.
3025 if (i === 0 && this.attr_('labels')) {
3026 var all_null = true;
3027 for (j = 0; all_null && j < fields.length; j++) {
3028 if (fields[j]) all_null = false;
3031 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3032 "CSV
data ('" + line + "') appears to also contain labels
. " +
3033 "Will drop the CSV labels and
use the option labels
.");
3041 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3042 ret.sort(function(a,b) { return a[0] - b[0]; });
3050 * The user has provided their data as a pre-packaged JS array. If the x values
3051 * are numeric, this is the same as dygraphs' internal format. If the x values
3052 * are dates, we need to convert them from Date objects to ms since epoch.
3053 * @param {[Object]} data
3054 * @return {[Object]} data with numeric x values.
3056 Dygraph.prototype.parseArray_ = function(data) {
3057 // Peek at the first x value to see if it's numeric.
3058 if (data.length === 0) {
3059 this.error("Can
't plot empty data set");
3062 if (data[0].length === 0) {
3063 this.error("Data set cannot contain an empty row");
3068 if (this.attr_("labels") === null) {
3069 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3070 "in the options parameter");
3071 this.attrs_.labels = [ "X" ];
3072 for (i = 1; i < data[0].length; i++) {
3073 this.attrs_.labels.push("Y" + i);
3076 var num_labels = this.attr_("labels");
3077 if (num_labels.length != data[0].length) {
3078 this.error("Mismatch between number of labels (" + num_labels +
3079 ") and number of columns in array (" + data[0].length + ")");
3084 if (Dygraph.isDateLike(data[0][0])) {
3085 // Some intelligent defaults for a date x-axis.
3086 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
3087 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
3088 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3090 // Assume they're all dates
.
3091 var parsedData
= Dygraph
.clone(data
);
3092 for (i
= 0; i
< data
.length
; i
++) {
3093 if (parsedData
[i
].length
=== 0) {
3094 this.error("Row " + (1 + i
) + " of data is empty");
3097 if (parsedData
[i
][0] === null ||
3098 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3099 isNaN(parsedData
[i
][0].getTime())) {
3100 this.error("x value in row " + (1 + i
) + " is not a Date");
3103 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3107 // Some intelligent defaults for a numeric x-axis.
3108 /** @private (shut up, jsdoc!) */
3109 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3110 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3111 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3117 * Parses a DataTable object from gviz.
3118 * The data is expected to have a first column that is either a date or a
3119 * number. All subsequent columns must be numbers. If there is a clear mismatch
3120 * between this.xValueParser_ and the type of the first column, it will be
3121 * fixed. Fills out rawData_.
3122 * @param {[Object]} data See above.
3125 Dygraph
.prototype.parseDataTable_
= function(data
) {
3126 var shortTextForAnnotationNum
= function(num
) {
3127 // converts [0-9]+ [A-Z][a-z]*
3128 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3129 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3130 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3131 num
= Math
.floor(num
/ 26);
3133 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3134 num
= Math
.floor((num
- 1) / 26);
3139 var cols
= data
.getNumberOfColumns();
3140 var rows
= data
.getNumberOfRows();
3142 var indepType
= data
.getColumnType(0);
3143 if (indepType
== 'date' || indepType
== 'datetime') {
3144 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3145 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
3146 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3147 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3148 } else if (indepType
== 'number') {
3149 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3150 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3151 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3152 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3154 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3155 "column 1 of DataTable input (Got '" + indepType
+ "')");
3159 // Array of the column indices which contain data (and not annotations).
3161 var annotationCols
= {}; // data index -> [annotation cols]
3162 var hasAnnotations
= false;
3164 for (i
= 1; i
< cols
; i
++) {
3165 var type
= data
.getColumnType(i
);
3166 if (type
== 'number') {
3168 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3169 // This is OK -- it's an annotation column.
3170 var dataIdx
= colIdx
[colIdx
.length
- 1];
3171 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3172 annotationCols
[dataIdx
] = [i
];
3174 annotationCols
[dataIdx
].push(i
);
3176 hasAnnotations
= true;
3178 this.error("Only 'number' is supported as a dependent type with Gviz." +
3179 " 'string' is only supported if displayAnnotations is true");
3183 // Read column labels
3184 // TODO(danvk): add support back for errorBars
3185 var labels
= [data
.getColumnLabel(0)];
3186 for (i
= 0; i
< colIdx
.length
; i
++) {
3187 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3188 if (this.attr_("errorBars")) i
+= 1;
3190 this.attrs_
.labels
= labels
;
3191 cols
= labels
.length
;
3194 var outOfOrder
= false;
3195 var annotations
= [];
3196 for (i
= 0; i
< rows
; i
++) {
3198 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3199 data
.getValue(i
, 0) === null) {
3200 this.warn("Ignoring row " + i
+
3201 " of DataTable because of undefined or null first column.");
3205 if (indepType
== 'date' || indepType
== 'datetime') {
3206 row
.push(data
.getValue(i
, 0).getTime());
3208 row
.push(data
.getValue(i
, 0));
3210 if (!this.attr_("errorBars")) {
3211 for (j
= 0; j
< colIdx
.length
; j
++) {
3212 var col
= colIdx
[j
];
3213 row
.push(data
.getValue(i
, col
));
3214 if (hasAnnotations
&&
3215 annotationCols
.hasOwnProperty(col
) &&
3216 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3218 ann
.series
= data
.getColumnLabel(col
);
3220 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3222 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3223 if (k
) ann
.text
+= "\n";
3224 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3226 annotations
.push(ann
);
3230 // Strip out infinities, which give dygraphs problems later on.
3231 for (j
= 0; j
< row
.length
; j
++) {
3232 if (!isFinite(row
[j
])) row
[j
] = null;
3235 for (j
= 0; j
< cols
- 1; j
++) {
3236 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3239 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3246 this.warn("DataTable is out of order; order it correctly to speed loading.");
3247 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3249 this.rawData_
= ret
;
3251 if (annotations
.length
> 0) {
3252 this.setAnnotations(annotations
, true);
3257 * Get the CSV data. If it's in a function, call that function. If it's in a
3258 * file, do an XMLHttpRequest to get it.
3261 Dygraph
.prototype.start_
= function() {
3262 var data
= this.file_
;
3264 // Functions can return references of all other types.
3265 if (typeof data
== 'function') {
3269 if (Dygraph
.isArrayLike(data
)) {
3270 this.rawData_
= this.parseArray_(data
);
3272 } else if (typeof data
== 'object' &&
3273 typeof data
.getColumnRange
== 'function') {
3274 // must be a DataTable from gviz.
3275 this.parseDataTable_(data
);
3277 } else if (typeof data
== 'string') {
3278 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3279 if (data
.indexOf('\n') >= 0) {
3280 this.loadedEvent_(data
);
3282 var req
= new XMLHttpRequest();
3284 req
.onreadystatechange
= function () {
3285 if (req
.readyState
== 4) {
3286 if (req
.status
=== 200 || // Normal http
3287 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3288 caller
.loadedEvent_(req
.responseText
);
3293 req
.open("GET", data
, true);
3297 this.error("Unknown data format: " + (typeof data
));
3302 * Changes various properties of the graph. These can include:
3304 * <li>file: changes the source data for the graph</li>
3305 * <li>errorBars: changes whether the data contains stddev</li>
3308 * There's a huge variety of options that can be passed to this method. For a
3309 * full list, see http://dygraphs.com/options.html.
3311 * @param {Object} attrs The new properties and values
3312 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3313 * call to updateOptions(). If you know better, you can pass true to explicitly
3314 * block the redraw. This can be useful for chaining updateOptions() calls,
3315 * avoiding the occasional infinite loop and preventing redraws when it's not
3316 * necessary (e.g. when updating a callback).
3318 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3319 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3321 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
3322 var file
= input_attrs
.file
;
3323 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
3325 // TODO(danvk): this is a mess. Move these options into attr_.
3326 if ('rollPeriod' in attrs
) {
3327 this.rollPeriod_
= attrs
.rollPeriod
;
3329 if ('dateWindow' in attrs
) {
3330 this.dateWindow_
= attrs
.dateWindow
;
3331 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3332 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3335 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3336 this.zoomed_y_
= (attrs
.valueRange
!== null);
3339 // TODO(danvk): validate per-series options.
3344 // highlightCircleSize
3346 // Check if this set options will require new points.
3347 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3349 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3353 if (!block_redraw
) this.start_();
3355 if (!block_redraw
) {
3356 if (requiresNewPoints
) {
3359 this.renderGraph_(false);
3366 * Returns a copy of the options with deprecated names converted into current
3367 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3368 * interested in that, they should save a copy before calling this.
3371 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3373 for (var k
in attrs
) {
3374 if (k
== 'file') continue;
3375 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3378 var set
= function(axis
, opt
, value
) {
3379 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3380 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3381 my_attrs
.axes
[axis
][opt
] = value
;
3383 var map
= function(opt
, axis
, new_opt
) {
3384 if (typeof(attrs
[opt
]) != 'undefined') {
3385 set(axis
, new_opt
, attrs
[opt
]);
3386 delete my_attrs
[opt
];
3390 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3391 map('xValueFormatter', 'x', 'valueFormatter');
3392 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3393 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3394 map('xTicker', 'x', 'ticker');
3395 map('yValueFormatter', 'y', 'valueFormatter');
3396 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3397 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3398 map('yTicker', 'y', 'ticker');
3403 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3404 * containing div (which has presumably changed size since the dygraph was
3405 * instantiated. If the width/height are specified, the div will be resized.
3407 * This is far more efficient than destroying and re-instantiating a
3408 * Dygraph, since it doesn't have to reparse the underlying data.
3410 * @param {Number} [width] Width (in pixels)
3411 * @param {Number} [height] Height (in pixels)
3413 Dygraph
.prototype.resize
= function(width
, height
) {
3414 if (this.resize_lock
) {
3417 this.resize_lock
= true;
3419 if ((width
=== null) != (height
=== null)) {
3420 this.warn("Dygraph.resize() should be called with zero parameters or " +
3421 "two non-NULL parameters. Pretending it was zero.");
3422 width
= height
= null;
3425 var old_width
= this.width_
;
3426 var old_height
= this.height_
;
3429 this.maindiv_
.style
.width
= width
+ "px";
3430 this.maindiv_
.style
.height
= height
+ "px";
3431 this.width_
= width
;
3432 this.height_
= height
;
3434 this.width_
= this.maindiv_
.clientWidth
;
3435 this.height_
= this.maindiv_
.clientHeight
;
3438 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3439 // TODO(danvk): there should be a clear() method.
3440 this.maindiv_
.innerHTML
= "";
3441 this.roller_
= null;
3442 this.attrs_
.labelsDiv
= null;
3443 this.createInterface_();
3444 if (this.annotations_
.length
) {
3445 // createInterface_ reset the layout, so we need to do this.
3446 this.layout_
.setAnnotations(this.annotations_
);
3451 this.resize_lock
= false;
3455 * Adjusts the number of points in the rolling average. Updates the graph to
3456 * reflect the new averaging period.
3457 * @param {Number} length Number of points over which to average the data.
3459 Dygraph
.prototype.adjustRoll
= function(length
) {
3460 this.rollPeriod_
= length
;
3465 * Returns a boolean array of visibility statuses.
3467 Dygraph
.prototype.visibility
= function() {
3468 // Do lazy-initialization, so that this happens after we know the number of
3470 if (!this.attr_("visibility")) {
3471 this.attrs_
.visibility
= [];
3473 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3474 while (this.attr_("visibility").length
< this.numColumns() - 1) {
3475 this.attrs_
.visibility
.push(true);
3477 return this.attr_("visibility");
3481 * Changes the visiblity of a series.
3483 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3484 var x
= this.visibility();
3485 if (num
< 0 || num
>= x
.length
) {
3486 this.warn("invalid series number in setVisibility: " + num
);
3494 * How large of an area will the dygraph render itself in?
3495 * This is used for testing.
3496 * @return A {width: w, height: h} object.
3499 Dygraph
.prototype.size
= function() {
3500 return { width
: this.width_
, height
: this.height_
};
3504 * Update the list of annotations and redraw the chart.
3505 * See dygraphs.com/annotations.html for more info on how to use annotations.
3506 * @param ann {Array} An array of annotation objects.
3507 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3509 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3510 // Only add the annotation CSS rule once we know it will be used.
3511 Dygraph
.addAnnotationRule();
3512 this.annotations_
= ann
;
3513 this.layout_
.setAnnotations(this.annotations_
);
3514 if (!suppressDraw
) {
3520 * Return the list of annotations.
3522 Dygraph
.prototype.annotations
= function() {
3523 return this.annotations_
;
3527 * Get the list of label names for this graph. The first column is the
3528 * x-axis, so the data series names start at index 1.
3530 Dygraph
.prototype.getLabels
= function() {
3531 return this.attr_("labels").slice();
3535 * Get the index of a series (column) given its name. The first column is the
3536 * x-axis, so the data series start with index 1.
3538 Dygraph
.prototype.indexFromSetName
= function(name
) {
3539 return this.setIndexByName_
[name
];
3543 * Get the internal dataset index given its name. These are numbered starting from 0,
3544 * and only count visible sets.
3547 Dygraph
.prototype.datasetIndexFromSetName_
= function(name
) {
3548 return this.datasetIndex_
[this.indexFromSetName(name
)];
3553 * Adds a default style for the annotation CSS classes to the document. This is
3554 * only executed when annotations are actually used. It is designed to only be
3555 * called once -- all calls after the first will return immediately.
3557 Dygraph
.addAnnotationRule
= function() {
3558 // TODO(danvk): move this function into plugins/annotations.js
?
3559 if (Dygraph
.addedAnnotationCSS
) return;
3561 var rule
= "border: 1px solid black; " +
3562 "background-color: white; " +
3563 "text-align: center;";
3565 var styleSheetElement
= document
.createElement("style");
3566 styleSheetElement
.type
= "text/css";
3567 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3569 // Find the first style sheet that we can access.
3570 // We may not add a rule to a style sheet from another domain for security
3571 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3572 // adds its own style sheets from google.com.
3573 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3574 if (document
.styleSheets
[i
].disabled
) continue;
3575 var mysheet
= document
.styleSheets
[i
];
3577 if (mysheet
.insertRule
) { // Firefox
3578 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3579 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3580 } else if (mysheet
.addRule
) { // IE
3581 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3583 Dygraph
.addedAnnotationCSS
= true;
3586 // Was likely a security exception.
3590 this.warn("Unable to add default annotation CSS rule; display may be off.");
3593 // Older pages may still use this name.
3594 var DateGraph
= Dygraph
;