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
);
358 if (typeof(div
) == 'string') {
359 div
= document
.getElementById(div
);
363 Dygraph
.error("Constructing dygraph with a non-existent div!");
367 this.isUsingExcanvas_
= typeof(G_vmlCanvasManager
) != 'undefined';
369 // Copy the important bits into the object
370 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
373 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
374 this.previousVerticalX_
= -1;
375 this.fractions_
= attrs
.fractions
|| false;
376 this.dateWindow_
= attrs
.dateWindow
|| null;
378 this.is_initial_draw_
= true;
379 this.annotations_
= [];
381 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
382 this.zoomed_x_
= false;
383 this.zoomed_y_
= false;
385 // Clear the div. This ensure that, if multiple dygraphs are passed the same
386 // div, then only one will be drawn.
389 // For historical reasons, the 'width' and 'height' options trump all CSS
390 // rules _except_ for an explicit 'width' or 'height' on the div.
391 // As an added convenience, if the div has zero height (like <div></div> does
392 // without any styles), then we use a default height/width
.
393 if (div
.style
.width
=== '' && attrs
.width
) {
394 div
.style
.width
= attrs
.width
+ "px";
396 if (div
.style
.height
=== '' && attrs
.height
) {
397 div
.style
.height
= attrs
.height
+ "px";
399 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
400 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
401 if (div
.style
.width
=== '') {
402 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
405 // these will be zero if the dygraph's div is hidden.
406 this.width_
= div
.clientWidth
;
407 this.height_
= div
.clientHeight
;
409 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
410 if (attrs
.stackedGraph
) {
411 attrs
.fillGraph
= true;
412 // TODO(nikhilk): Add any other stackedGraph checks here.
415 // These two options have a bad interaction. See issue 359.
416 if (attrs
.showRangeSelector
&& attrs
.animatedZooms
) {
417 this.warn('You should not set animatedZooms=true when using the range selector.');
418 attrs
.animatedZooms
= false;
421 // Dygraphs has many options, some of which interact with one another.
422 // To keep track of everything, we maintain two sets of options:
424 // this.user_attrs_ only options explicitly set by the user.
425 // this.attrs_ defaults, options derived from user_attrs_, data.
427 // Options are then accessed this.attr_('attr'), which first looks at
428 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
429 // defaults without overriding behavior that the user specifically asks for.
430 this.user_attrs_
= {};
431 Dygraph
.update(this.user_attrs_
, attrs
);
433 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
435 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
437 this.boundaryIds_
= [];
438 this.setIndexByName_
= {};
439 this.datasetIndex_
= [];
441 this.registeredEvents_
= [];
442 this.eventListeners_
= {};
444 this.attributes_
= new DygraphOptions(this);
446 // Create the containing DIV and other interactive elements
447 this.createInterface_();
451 for (var i
= 0; i
< Dygraph
.PLUGINS
.length
; i
++) {
452 var Plugin
= Dygraph
.PLUGINS
[i
];
453 var pluginInstance
= new Plugin();
455 plugin
: pluginInstance
,
461 var handlers
= pluginInstance
.activate(this);
462 for (var eventName
in handlers
) {
463 // TODO(danvk): validate eventName.
464 pluginDict
.events
[eventName
] = handlers
[eventName
];
467 this.plugins_
.push(pluginDict
);
470 // At this point, plugins can no longer register event handlers.
471 // Construct a map from event -> ordered list of [callback, plugin].
472 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
473 var plugin_dict
= this.plugins_
[i
];
474 for (var eventName
in plugin_dict
.events
) {
475 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
476 var callback
= plugin_dict
.events
[eventName
];
478 var pair
= [plugin_dict
.plugin
, callback
];
479 if (!(eventName
in this.eventListeners_
)) {
480 this.eventListeners_
[eventName
] = [pair
];
482 this.eventListeners_
[eventName
].push(pair
);
491 * Triggers a cascade of events to the various plugins which are interested in them.
492 * Returns true if the "default behavior" should be performed, i.e. if none of
493 * the event listeners called event.preventDefault().
496 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
497 if (!(name
in this.eventListeners_
)) return true;
499 // QUESTION: can we use objects & prototypes to speed this up?
503 defaultPrevented
: false,
504 preventDefault
: function() {
505 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
506 e
.defaultPrevented
= true;
508 propagationStopped
: false,
509 stopPropagation
: function() {
510 e
.propagationStopped
= true;
513 Dygraph
.update(e
, extra_props
);
515 var callback_plugin_pairs
= this.eventListeners_
[name
];
516 if (callback_plugin_pairs
) {
517 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
518 var plugin
= callback_plugin_pairs
[i
][0];
519 var callback
= callback_plugin_pairs
[i
][1];
520 callback
.call(plugin
, e
);
521 if (e
.propagationStopped
) break;
524 return e
.defaultPrevented
;
528 * Returns the zoomed status of the chart for one or both axes.
530 * Axis is an optional parameter. Can be set to 'x' or 'y'.
532 * The zoomed status for an axis is set whenever a user zooms using the mouse
533 * or when the dateWindow or valueRange are updated (unless the
534 * isZoomedIgnoreProgrammaticZoom option is also specified).
536 Dygraph
.prototype.isZoomed
= function(axis
) {
537 if (axis
=== null || axis
=== undefined
) {
538 return this.zoomed_x_
|| this.zoomed_y_
;
540 if (axis
=== 'x') return this.zoomed_x_
;
541 if (axis
=== 'y') return this.zoomed_y_
;
542 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
546 * Returns information about the Dygraph object, including its containing ID.
548 Dygraph
.prototype.toString
= function() {
549 var maindiv
= this.maindiv_
;
550 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
551 return "[Dygraph " + id
+ "]";
556 * Returns the value of an option. This may be set by the user (either in the
557 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
559 * @param { String } name The name of the option, e.g. 'rollPeriod'.
560 * @param { String } [seriesName] The name of the series to which the option
561 * will be applied. If no per-series value of this option is available, then
562 * the global value is returned. This is optional.
563 * @return { ... } The value of the option.
565 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
566 // <REMOVE_FOR_COMBINED>
567 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
568 this.error('Must include options reference JS for testing');
569 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
570 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
571 'in the Dygraphs.OPTIONS_REFERENCE listing.');
572 // Only log this error once.
573 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
575 // </REMOVE_FOR_COMBINED
>
576 return seriesName
? this.attributes_
.getForSeries(name
, seriesName
) : this.attributes_
.get(name
);
580 * Returns the current value for an option, as set in the constructor or via
581 * updateOptions. You may pass in an (optional) series name to get per-series
582 * values for the option.
584 * All values returned by this method should be considered immutable. If you
585 * modify them, there is no guarantee that the changes will be honored or that
586 * dygraphs will remain in a consistent state. If you want to modify an option,
587 * use updateOptions() instead.
589 * @param { String } name The name of the option (e.g. 'strokeWidth')
590 * @param { String } [opt_seriesName] Series name to get per-series values.
591 * @return { ... } The value of the option.
593 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
594 return this.attr_(name
, opt_seriesName
);
599 * @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2')
600 * @return { ... } A function mapping string -> option value
602 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
604 return function(opt
) {
605 var axis_opts
= self
.user_attrs_
.axes
;
606 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
][opt
]) {
607 return axis_opts
[axis
][opt
];
609 // user-specified attributes always trump defaults, even if they're less
611 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
612 return self
.user_attrs_
[opt
];
615 axis_opts
= self
.attrs_
.axes
;
616 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
][opt
]) {
617 return axis_opts
[axis
][opt
];
619 // check old-style axis options
620 // TODO(danvk): add a deprecation warning if either of these match.
621 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
622 return self
.axes_
[0][opt
];
623 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
624 return self
.axes_
[1][opt
];
626 return self
.attr_(opt
);
631 * Returns the current rolling period, as set by the user or an option.
632 * @return {Number} The number of points in the rolling window
634 Dygraph
.prototype.rollPeriod
= function() {
635 return this.rollPeriod_
;
639 * Returns the currently-visible x-range. This can be affected by zooming,
640 * panning or a call to updateOptions.
641 * Returns a two-element array: [left, right].
642 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
644 Dygraph
.prototype.xAxisRange
= function() {
645 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
649 * Returns the lower- and upper-bound x-axis values of the
652 Dygraph
.prototype.xAxisExtremes
= function() {
653 var left
= this.rawData_
[0][0];
654 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
655 return [left
, right
];
659 * Returns the currently-visible y-range for an axis. This can be affected by
660 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
661 * called with no arguments, returns the range of the first axis.
662 * Returns a two-element array: [bottom, top].
664 Dygraph
.prototype.yAxisRange
= function(idx
) {
665 if (typeof(idx
) == "undefined") idx
= 0;
666 if (idx
< 0 || idx
>= this.axes_
.length
) {
669 var axis
= this.axes_
[idx
];
670 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
674 * Returns the currently-visible y-ranges for each axis. This can be affected by
675 * zooming, panning, calls to updateOptions, etc.
676 * Returns an array of [bottom, top] pairs, one for each y-axis.
678 Dygraph
.prototype.yAxisRanges
= function() {
680 for (var i
= 0; i
< this.axes_
.length
; i
++) {
681 ret
.push(this.yAxisRange(i
));
686 // TODO(danvk): use these functions throughout dygraphs.
688 * Convert from data coordinates to canvas/div X/Y coordinates.
689 * If specified, do this conversion for the coordinate system of a particular
690 * axis. Uses the first axis by default.
691 * Returns a two-element array: [X, Y]
693 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
694 * instead of toDomCoords(null, y, axis).
696 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
697 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
701 * Convert from data x coordinates to canvas/div X coordinate.
702 * If specified, do this conversion for the coordinate system of a particular
704 * Returns a single value or null if x is null.
706 Dygraph
.prototype.toDomXCoord
= function(x
) {
711 var area
= this.plotter_
.area
;
712 var xRange
= this.xAxisRange();
713 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
717 * Convert from data x coordinates to canvas/div Y coordinate and optional
718 * axis. Uses the first axis by default.
720 * returns a single value or null if y is null.
722 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
723 var pct
= this.toPercentYCoord(y
, axis
);
728 var area
= this.plotter_
.area
;
729 return area
.y
+ pct
* area
.h
;
733 * Convert from canvas/div coords to data coordinates.
734 * If specified, do this conversion for the coordinate system of a particular
735 * axis. Uses the first axis by default.
736 * Returns a two-element array: [X, Y].
738 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
739 * instead of toDataCoords(null, y, axis).
741 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
742 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
746 * Convert from canvas/div x coordinate to data coordinate.
748 * If x is null, this returns null.
750 Dygraph
.prototype.toDataXCoord
= function(x
) {
755 var area
= this.plotter_
.area
;
756 var xRange
= this.xAxisRange();
757 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
761 * Convert from canvas/div y coord to value.
763 * If y is null, this returns null.
764 * if axis is null, this uses the first axis.
766 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
771 var area
= this.plotter_
.area
;
772 var yRange
= this.yAxisRange(axis
);
774 if (typeof(axis
) == "undefined") axis
= 0;
775 if (!this.axes_
[axis
].logscale
) {
776 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
778 // Computing the inverse of toDomCoord.
779 var pct
= (y
- area
.y
) / area
.h
;
781 // Computing the inverse of toPercentYCoord. The function was arrived at with
782 // the following steps:
784 // Original calcuation:
785 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
787 // Move denominator to both sides:
788 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
790 // subtract logr1, and take the negative value.
791 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
793 // Swap both sides of the equation, and we can compute the log of the
794 // return value. Which means we just need to use that as the exponent in
796 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
798 var logr1
= Dygraph
.log10(yRange
[1]);
799 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
800 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
806 * Converts a y for an axis to a percentage from the top to the
807 * bottom of the drawing area.
809 * If the coordinate represents a value visible on the canvas, then
810 * the value will be between 0 and 1, where 0 is the top of the canvas.
811 * However, this method will return values outside the range, as
812 * values can fall outside the canvas.
814 * If y is null, this returns null.
815 * if axis is null, this uses the first axis.
817 * @param { Number } y The data y-coordinate.
818 * @param { Number } [axis] The axis number on which the data coordinate lives.
819 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
821 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
825 if (typeof(axis
) == "undefined") axis
= 0;
827 var yRange
= this.yAxisRange(axis
);
830 if (!this.axes_
[axis
].logscale
) {
831 // yRange[1] - y is unit distance from the bottom.
832 // yRange[1] - yRange[0] is the scale of the range.
833 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
834 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
836 var logr1
= Dygraph
.log10(yRange
[1]);
837 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
843 * Converts an x value to a percentage from the left to the right of
846 * If the coordinate represents a value visible on the canvas, then
847 * the value will be between 0 and 1, where 0 is the left of the canvas.
848 * However, this method will return values outside the range, as
849 * values can fall outside the canvas.
851 * If x is null, this returns null.
852 * @param { Number } x The data x-coordinate.
853 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
855 Dygraph
.prototype.toPercentXCoord
= function(x
) {
860 var xRange
= this.xAxisRange();
861 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
865 * Returns the number of columns (including the independent variable).
866 * @return { Integer } The number of columns.
868 Dygraph
.prototype.numColumns
= function() {
869 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
873 * Returns the number of rows (excluding any header/label row).
874 * @return { Integer } The number of rows, less any header.
876 Dygraph
.prototype.numRows
= function() {
877 return this.rawData_
.length
;
881 * Returns the full range of the x-axis, as determined by the most extreme
882 * values in the data set. Not affected by zooming, visibility, etc.
883 * TODO(danvk): merge w/ xAxisExtremes
884 * @return { Array<Number> } A [low, high] pair
887 Dygraph
.prototype.fullXRange_
= function() {
888 if (this.numRows() > 0) {
889 return [this.rawData_
[0][0], this.rawData_
[this.numRows() - 1][0]];
896 * Returns the value in the given row and column. If the row and column exceed
897 * the bounds on the data, returns null. Also returns null if the value is
899 * @param { Number} row The row number of the data (0-based). Row 0 is the
900 * first row of data, not a header row.
901 * @param { Number} col The column number of the data (0-based)
902 * @return { Number } The value in the specified cell or null if the row/col
905 Dygraph
.prototype.getValue
= function(row
, col
) {
906 if (row
< 0 || row
> this.rawData_
.length
) return null;
907 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
909 return this.rawData_
[row
][col
];
913 * Generates interface elements for the Dygraph: a containing div, a div to
914 * display the current point, and a textbox to adjust the rolling average
915 * period. Also creates the Renderer/Layout elements.
918 Dygraph
.prototype.createInterface_
= function() {
919 // Create the all-enclosing graph div
920 var enclosing
= this.maindiv_
;
922 this.graphDiv
= document
.createElement("div");
923 this.graphDiv
.style
.width
= this.width_
+ "px";
924 this.graphDiv
.style
.height
= this.height_
+ "px";
925 enclosing
.appendChild(this.graphDiv
);
927 // Create the canvas for interactive parts of the chart.
928 this.canvas_
= Dygraph
.createCanvas();
929 this.canvas_
.style
.position
= "absolute";
930 this.canvas_
.width
= this.width_
;
931 this.canvas_
.height
= this.height_
;
932 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
933 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
935 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
937 // ... and for static parts of the chart.
938 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
939 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
941 if (this.attr_('showRangeSelector')) {
942 // The range selector must be created here so that its canvases and contexts get created here.
943 // For some reason, if the canvases and contexts don't get created here, things don't work in IE.
944 this.rangeSelector_
= new DygraphRangeSelector(this);
947 // The interactive parts of the graph are drawn on top of the chart.
948 this.graphDiv
.appendChild(this.hidden_
);
949 this.graphDiv
.appendChild(this.canvas_
);
950 this.mouseEventElement_
= this.createMouseEventElement_();
952 // Create the grapher
953 this.layout_
= new DygraphLayout(this);
955 if (this.rangeSelector_
) {
956 // This needs to happen after the graph canvases are added to the div and the layout object is created.
957 this.rangeSelector_
.addToGraph(this.graphDiv
, this.layout_
);
962 this.mouseMoveHandler
= function(e
) {
963 dygraph
.mouseMove_(e
);
965 this.addEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler
);
967 this.mouseOutHandler
= function(e
) {
968 dygraph
.mouseOut_(e
);
970 this.addEvent(this.mouseEventElement_
, 'mouseout', this.mouseOutHandler
);
972 this.createDragInterface_();
974 this.resizeHandler
= function(e
) {
978 // Update when the window is resized.
979 // TODO(danvk): drop frames depending on complexity of the chart.
980 this.addEvent(window
, 'resize', this.resizeHandler
);
984 * Detach DOM elements in the dygraph and null out all data references.
985 * Calling this when you're done with a dygraph can dramatically reduce memory
986 * usage. See, e.g., the tests/perf.html example.
988 Dygraph
.prototype.destroy
= function() {
989 var removeRecursive
= function(node
) {
990 while (node
.hasChildNodes()) {
991 removeRecursive(node
.firstChild
);
992 node
.removeChild(node
.firstChild
);
996 for (var idx
= 0; idx
< this.registeredEvents_
.length
; idx
++) {
997 var reg
= this.registeredEvents_
[idx
];
998 Dygraph
.removeEvent(reg
.elem
, reg
.type
, reg
.fn
);
1000 this.registeredEvents_
= [];
1002 // remove mouse event handlers (This may not be necessary anymore)
1003 Dygraph
.removeEvent(this.mouseEventElement_
, 'mouseout', this.mouseOutHandler
);
1004 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler
);
1005 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseUpHandler_
);
1006 removeRecursive(this.maindiv_
);
1008 var nullOut
= function(obj
) {
1009 for (var n
in obj
) {
1010 if (typeof(obj
[n
]) === 'object') {
1015 // remove event handlers
1016 Dygraph
.removeEvent(window
,'resize',this.resizeHandler
);
1017 this.resizeHandler
= null;
1018 // These may not all be necessary, but it can't hurt...
1019 nullOut(this.layout_
);
1020 nullOut(this.plotter_
);
1025 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1026 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1027 * or the zoom rectangles) is done on this.canvas_.
1028 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1029 * @return {Object} The newly-created canvas
1032 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1033 var h
= Dygraph
.createCanvas();
1034 h
.style
.position
= "absolute";
1035 // TODO(danvk): h should be offset from canvas. canvas needs to include
1036 // some extra area to make it easier to zoom in on the far left and far
1037 // right. h needs to be precisely the plot area, so that clipping occurs.
1038 h
.style
.top
= canvas
.style
.top
;
1039 h
.style
.left
= canvas
.style
.left
;
1040 h
.width
= this.width_
;
1041 h
.height
= this.height_
;
1042 h
.style
.width
= this.width_
+ "px"; // for IE
1043 h
.style
.height
= this.height_
+ "px"; // for IE
1048 * Creates an overlay element used to handle mouse events.
1049 * @return {Object} The mouse event element.
1052 Dygraph
.prototype.createMouseEventElement_
= function() {
1053 if (this.isUsingExcanvas_
) {
1054 var elem
= document
.createElement("div");
1055 elem
.style
.position
= 'absolute';
1056 elem
.style
.backgroundColor
= 'white';
1057 elem
.style
.filter
= 'alpha(opacity=0)';
1058 elem
.style
.width
= this.width_
+ "px";
1059 elem
.style
.height
= this.height_
+ "px";
1060 this.graphDiv
.appendChild(elem
);
1063 return this.canvas_
;
1068 * Generate a set of distinct colors for the data series. This is done with a
1069 * color wheel. Saturation/Value are customizable, and the hue is
1070 * equally-spaced around the color wheel. If a custom set of colors is
1071 * specified, that is used instead.
1074 Dygraph
.prototype.setColors_
= function() {
1075 var labels
= this.getLabels();
1076 var num
= labels
.length
- 1;
1078 this.colorsMap_
= {};
1079 var colors
= this.attr_('colors');
1082 var sat
= this.attr_('colorSaturation') || 1.0;
1083 var val
= this.attr_('colorValue') || 0.5;
1084 var half
= Math
.ceil(num
/ 2);
1085 for (i
= 1; i
<= num
; i
++) {
1086 if (!this.visibility()[i
-1]) continue;
1087 // alternate colors for high contrast.
1088 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
1089 var hue
= (1.0 * idx
/ (1 + num
));
1090 var colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1091 this.colors_
.push(colorStr
);
1092 this.colorsMap_
[labels
[i
]] = colorStr
;
1095 for (i
= 0; i
< num
; i
++) {
1096 if (!this.visibility()[i
]) continue;
1097 var colorStr
= colors
[i
% colors
.length
];
1098 this.colors_
.push(colorStr
);
1099 this.colorsMap_
[labels
[1 + i
]] = colorStr
;
1105 * Return the list of colors. This is either the list of colors passed in the
1106 * attributes or the autogenerated list of rgb(r,g,b) strings.
1107 * This does not return colors for invisible series.
1108 * @return {Array<string>} The list of colors.
1110 Dygraph
.prototype.getColors
= function() {
1111 return this.colors_
;
1115 * Returns a few attributes of a series, i.e. its color, its visibility, which
1116 * axis it's assigned to, and its column in the original data.
1117 * Returns null if the series does not exist.
1118 * Otherwise, returns an object with column, visibility, color and axis properties.
1119 * The "axis" property will be set to 1 for y1 and 2 for y2.
1120 * The "column" property can be fed back into getValue(row, column) to get
1121 * values for this series.
1123 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1125 var labels
= this.getLabels();
1126 for (var i
= 1; i
< labels
.length
; i
++) {
1127 if (labels
[i
] == series_name
) {
1132 if (idx
== -1) return null;
1137 visible
: this.visibility()[idx
- 1],
1138 color
: this.colorsMap_
[series_name
],
1139 axis
: 1 + this.attributes_
.axisForSeries(series_name
)
1144 * Create the text box to adjust the averaging period
1147 Dygraph
.prototype.createRollInterface_
= function() {
1148 // Create a roller if one doesn't exist already.
1149 if (!this.roller_
) {
1150 this.roller_
= document
.createElement("input");
1151 this.roller_
.type
= "text";
1152 this.roller_
.style
.display
= "none";
1153 this.graphDiv
.appendChild(this.roller_
);
1156 var display
= this.attr_('showRoller') ? 'block' : 'none';
1158 var area
= this.plotter_
.area
;
1159 var textAttr
= { "position": "absolute",
1161 "top": (area
.y
+ area
.h
- 25) + "px",
1162 "left": (area
.x
+ 1) + "px",
1165 this.roller_
.size
= "2";
1166 this.roller_
.value
= this.rollPeriod_
;
1167 for (var name
in textAttr
) {
1168 if (textAttr
.hasOwnProperty(name
)) {
1169 this.roller_
.style
[name
] = textAttr
[name
];
1174 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1179 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1180 * canvas (i.e. DOM Coords).
1182 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1183 return Dygraph
.pageX(e
) - context
.px
;
1188 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1189 * canvas (i.e. DOM Coords).
1191 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1192 return Dygraph
.pageY(e
) - context
.py
;
1196 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1200 Dygraph
.prototype.createDragInterface_
= function() {
1202 // Tracks whether the mouse is down right now
1204 isPanning
: false, // is this drag part of a pan?
1205 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1206 dragStartX
: null, // pixel coordinates
1207 dragStartY
: null, // pixel coordinates
1208 dragEndX
: null, // pixel coordinates
1209 dragEndY
: null, // pixel coordinates
1210 dragDirection
: null,
1211 prevEndX
: null, // pixel coordinates
1212 prevEndY
: null, // pixel coordinates
1213 prevDragDirection
: null,
1214 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1216 // The value on the left side of the graph when a pan operation starts.
1217 initialLeftmostDate
: null,
1219 // The number of units each pixel spans. (This won't be valid for log
1221 xUnitsPerPixel
: null,
1223 // TODO(danvk): update this comment
1224 // The range in second/value units that the viewport encompasses during a
1225 // panning operation.
1228 // Top-left corner of the canvas, in DOM coords
1229 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1233 // Values for use with panEdgeFraction, which limit how far outside the
1234 // graph's data boundaries it can be panned.
1235 boundedDates
: null, // [minDate, maxDate]
1236 boundedValues
: null, // [[minValue, maxValue] ...]
1238 // We cover iframes during mouse interactions. See comments in
1239 // dygraph-utils.js for more info on why this is a good idea.
1240 tarp
: new Dygraph
.IFrameTarp(),
1242 // contextB is the same thing as this context object but renamed.
1243 initializeMouseDown
: function(event
, g
, contextB
) {
1244 // prevents mouse drags from selecting page text.
1245 if (event
.preventDefault
) {
1246 event
.preventDefault(); // Firefox, Chrome, etc.
1248 event
.returnValue
= false; // IE
1249 event
.cancelBubble
= true;
1252 contextB
.px
= Dygraph
.findPosX(g
.canvas_
);
1253 contextB
.py
= Dygraph
.findPosY(g
.canvas_
);
1254 contextB
.dragStartX
= g
.dragGetX_(event
, contextB
);
1255 contextB
.dragStartY
= g
.dragGetY_(event
, contextB
);
1256 contextB
.cancelNextDblclick
= false;
1257 contextB
.tarp
.cover();
1261 var interactionModel
= this.attr_("interactionModel");
1263 // Self is the graph.
1266 // Function that binds the graph and context to the handler.
1267 var bindHandler
= function(handler
) {
1268 return function(event
) {
1269 handler(event
, self
, context
);
1273 for (var eventName
in interactionModel
) {
1274 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1275 this.addEvent(this.mouseEventElement_
, eventName
,
1276 bindHandler(interactionModel
[eventName
]));
1279 // If the user releases the mouse button during a drag, but not over the
1280 // canvas, then it doesn't count as a zooming action.
1281 this.mouseUpHandler_
= function(event
) {
1282 if (context
.isZooming
|| context
.isPanning
) {
1283 context
.isZooming
= false;
1284 context
.dragStartX
= null;
1285 context
.dragStartY
= null;
1288 if (context
.isPanning
) {
1289 context
.isPanning
= false;
1290 context
.draggingDate
= null;
1291 context
.dateRange
= null;
1292 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1293 delete self
.axes_
[i
].draggingValue
;
1294 delete self
.axes_
[i
].dragValueRange
;
1298 context
.tarp
.uncover();
1301 this.addEvent(document
, 'mouseup', this.mouseUpHandler_
);
1305 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1306 * up any previous zoom rectangles that were drawn. This could be optimized to
1307 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1310 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1311 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1312 * @param {Number} startX The X position where the drag started, in canvas
1314 * @param {Number} endX The current X position of the drag, in canvas coords.
1315 * @param {Number} startY The Y position where the drag started, in canvas
1317 * @param {Number} endY The current Y position of the drag, in canvas coords.
1318 * @param {Number} prevDirection the value of direction on the previous call to
1319 * this function. Used to avoid excess redrawing
1320 * @param {Number} prevEndX The value of endX on the previous call to this
1321 * function. Used to avoid excess redrawing
1322 * @param {Number} prevEndY The value of endY on the previous call to this
1323 * function. Used to avoid excess redrawing
1326 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1327 endY
, prevDirection
, prevEndX
,
1329 var ctx
= this.canvas_ctx_
;
1331 // Clean up from the previous rect if necessary
1332 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1333 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1334 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1335 } else if (prevDirection
== Dygraph
.VERTICAL
){
1336 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1337 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1340 // Draw a light-grey rectangle to show the new viewing area
1341 if (direction
== Dygraph
.HORIZONTAL
) {
1342 if (endX
&& startX
) {
1343 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1344 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1345 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1347 } else if (direction
== Dygraph
.VERTICAL
) {
1348 if (endY
&& startY
) {
1349 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1350 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1351 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1355 if (this.isUsingExcanvas_
) {
1356 this.currentZoomRectArgs_
= [direction
, startX
, endX
, startY
, endY
, 0, 0, 0];
1361 * Clear the zoom rectangle (and perform no zoom).
1364 Dygraph
.prototype.clearZoomRect_
= function() {
1365 this.currentZoomRectArgs_
= null;
1366 this.canvas_ctx_
.clearRect(0, 0, this.canvas_
.width
, this.canvas_
.height
);
1370 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1371 * the canvas. The exact zoom window may be slightly larger if there are no data
1372 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1373 * which accepts dates that match the raw data. This function redraws the graph.
1375 * @param {Number} lowX The leftmost pixel value that should be visible.
1376 * @param {Number} highX The rightmost pixel value that should be visible.
1379 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1380 this.currentZoomRectArgs_
= null;
1381 // Find the earliest and latest dates contained in this canvasx range.
1382 // Convert the call to date ranges of the raw data.
1383 var minDate
= this.toDataXCoord(lowX
);
1384 var maxDate
= this.toDataXCoord(highX
);
1385 this.doZoomXDates_(minDate
, maxDate
);
1389 * Transition function to use in animations. Returns values between 0.0
1390 * (totally old values) and 1.0 (totally new values) for each frame.
1393 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1395 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1399 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1400 * method with doZoomX which accepts pixel coordinates. This function redraws
1403 * @param {Number} minDate The minimum date that should be visible.
1404 * @param {Number} maxDate The maximum date that should be visible.
1407 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1408 // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation
1409 // can produce strange effects. Rather than the y-axis transitioning slowly
1410 // between values, it can jerk around.)
1411 var old_window
= this.xAxisRange();
1412 var new_window
= [minDate
, maxDate
];
1413 this.zoomed_x_
= true;
1415 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1416 if (that
.attr_("zoomCallback")) {
1417 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1423 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1424 * the canvas. This function redraws the graph.
1426 * @param {Number} lowY The topmost pixel value that should be visible.
1427 * @param {Number} highY The lowest pixel value that should be visible.
1430 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1431 this.currentZoomRectArgs_
= null;
1432 // Find the highest and lowest values in pixel range for each axis.
1433 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1434 // This is because pixels increase as you go down on the screen, whereas data
1435 // coordinates increase as you go up the screen.
1436 var oldValueRanges
= this.yAxisRanges();
1437 var newValueRanges
= [];
1438 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1439 var hi
= this.toDataYCoord(lowY
, i
);
1440 var low
= this.toDataYCoord(highY
, i
);
1441 newValueRanges
.push([low
, hi
]);
1444 this.zoomed_y_
= true;
1446 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1447 if (that
.attr_("zoomCallback")) {
1448 var xRange
= that
.xAxisRange();
1449 that
.attr_("zoomCallback")(xRange
[0], xRange
[1], that
.yAxisRanges());
1455 * Reset the zoom to the original view coordinates. This is the same as
1456 * double-clicking on the graph.
1460 Dygraph
.prototype.doUnzoom_
= function() {
1461 var dirty
= false, dirtyX
= false, dirtyY
= false;
1462 if (this.dateWindow_
!== null) {
1467 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1468 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1474 // Clear any selection, since it's likely to be drawn in the wrong place.
1475 this.clearSelection();
1478 this.zoomed_x_
= false;
1479 this.zoomed_y_
= false;
1481 var minDate
= this.rawData_
[0][0];
1482 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1484 // With only one frame, don't bother calculating extreme ranges.
1485 // TODO(danvk): merge this block w/ the code below
.
1486 if (!this.attr_("animatedZooms")) {
1487 this.dateWindow_
= null;
1488 for (i
= 0; i
< this.axes_
.length
; i
++) {
1489 if (this.axes_
[i
].valueWindow
!== null) {
1490 delete this.axes_
[i
].valueWindow
;
1494 if (this.attr_("zoomCallback")) {
1495 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1500 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1502 oldWindow
= this.xAxisRange();
1503 newWindow
= [minDate
, maxDate
];
1507 oldValueRanges
= this.yAxisRanges();
1508 // TODO(danvk): this is pretty inefficient
1509 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1510 var extremes
= packed
[1];
1512 // this has the side-effect of modifying this.axes_.
1513 // this doesn't make much sense in this context, but it's convenient (we
1514 // need this.axes_[*].extremeValues) and not harmful since we'll be
1515 // calling drawGraph_ shortly, which clobbers these values.
1516 this.computeYAxisRanges_(extremes
);
1518 newValueRanges
= [];
1519 for (i
= 0; i
< this.axes_
.length
; i
++) {
1520 var axis
= this.axes_
[i
];
1521 newValueRanges
.push((axis
.valueRange
!== null &&
1522 axis
.valueRange
!== undefined
) ?
1523 axis
.valueRange
: axis
.extremeRange
);
1528 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1530 that
.dateWindow_
= null;
1531 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1532 if (that
.axes_
[i
].valueWindow
!== null) {
1533 delete that
.axes_
[i
].valueWindow
;
1536 if (that
.attr_("zoomCallback")) {
1537 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1544 * Combined animation logic for all zoom functions.
1545 * either the x parameters or y parameters may be null.
1548 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1549 var steps
= this.attr_("animatedZooms") ? Dygraph
.ANIMATION_STEPS
: 1;
1552 var valueRanges
= [];
1555 if (oldXRange
!== null && newXRange
!== null) {
1556 for (step
= 1; step
<= steps
; step
++) {
1557 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1558 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1559 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1563 if (oldYRanges
!== null && newYRanges
!== null) {
1564 for (step
= 1; step
<= steps
; step
++) {
1565 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1567 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1568 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1569 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1571 valueRanges
[step
-1] = thisRange
;
1576 Dygraph
.repeatAndCleanup(function(step
) {
1577 if (valueRanges
.length
) {
1578 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1579 var w
= valueRanges
[step
][i
];
1580 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1583 if (windows
.length
) {
1584 that
.dateWindow_
= windows
[step
];
1587 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1591 * Get the current graph's area object.
1593 * Returns: {x, y, w, h}
1595 Dygraph
.prototype.getArea
= function() {
1596 return this.plotter_
.area
;
1600 * Convert a mouse event to DOM coordinates relative to the graph origin.
1602 * Returns a two-element array: [X, Y].
1604 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1605 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1606 var canvasy
= Dygraph
.pageY(event
) - Dygraph
.findPosY(this.mouseEventElement_
);
1607 return [canvasx
, canvasy
];
1611 * Given a canvas X coordinate, find the closest row.
1612 * @param {Number} domX graph-relative DOM X coordinate
1613 * Returns: row number, integer
1616 Dygraph
.prototype.findClosestRow
= function(domX
) {
1617 var minDistX
= Infinity
;
1618 var pointIdx
= -1, setIdx
= -1;
1619 var sets
= this.layout_
.points
;
1620 for (var i
= 0; i
< sets
.length
; i
++) {
1621 var points
= sets
[i
];
1622 var len
= points
.length
;
1623 for (var j
= 0; j
< len
; j
++) {
1624 var point
= points
[j
];
1625 if (!Dygraph
.isValidPoint(point
, true)) continue;
1626 var dist
= Math
.abs(point
.canvasx
- domX
);
1627 if (dist
< minDistX
) {
1635 // TODO(danvk): remove this function; it's trivial and has only one use.
1636 return this.idxToRow_(setIdx
, pointIdx
);
1640 * Given canvas X,Y coordinates, find the closest point.
1642 * This finds the individual data point across all visible series
1643 * that's closest to the supplied DOM coordinates using the standard
1644 * Euclidean X,Y distance.
1646 * @param {Number} domX graph-relative DOM X coordinate
1647 * @param {Number} domY graph-relative DOM Y coordinate
1648 * Returns: {row, seriesName, point}
1651 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1652 var minDist
= Infinity
;
1654 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
;
1655 for ( var setIdx
= this.layout_
.datasets
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1656 var points
= this.layout_
.points
[setIdx
];
1657 for (var i
= 0; i
< points
.length
; ++i
) {
1658 var point
= points
[i
];
1659 if (!Dygraph
.isValidPoint(point
)) continue;
1660 dx
= point
.canvasx
- domX
;
1661 dy
= point
.canvasy
- domY
;
1662 dist
= dx
* dx
+ dy
* dy
;
1663 if (dist
< minDist
) {
1665 closestPoint
= point
;
1666 closestSeries
= setIdx
;
1671 var name
= this.layout_
.setNames
[closestSeries
];
1673 row
: idx
+ this.getLeftBoundary_(),
1680 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1682 * This first finds the X data point closest to the supplied DOM X coordinate,
1683 * then finds the series which puts the Y coordinate on top of its filled area,
1684 * using linear interpolation between adjacent point pairs.
1686 * @param {Number} domX graph-relative DOM X coordinate
1687 * @param {Number} domY graph-relative DOM Y coordinate
1688 * Returns: {row, seriesName, point}
1691 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1692 var row
= this.findClosestRow(domX
);
1693 var boundary
= this.getLeftBoundary_();
1694 var rowIdx
= row
- boundary
;
1695 var sets
= this.layout_
.points
;
1696 var closestPoint
, closestSeries
;
1697 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
1698 var points
= this.layout_
.points
[setIdx
];
1699 if (rowIdx
>= points
.length
) continue;
1700 var p1
= points
[rowIdx
];
1701 if (!Dygraph
.isValidPoint(p1
)) continue;
1702 var py
= p1
.canvasy
;
1703 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1704 // interpolate series Y value using next point
1705 var p2
= points
[rowIdx
+ 1];
1706 if (Dygraph
.isValidPoint(p2
)) {
1707 var dx
= p2
.canvasx
- p1
.canvasx
;
1709 var r
= (domX
- p1
.canvasx
) / dx
;
1710 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1713 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1714 // interpolate series Y value using previous point
1715 var p0
= points
[rowIdx
- 1];
1716 if (Dygraph
.isValidPoint(p0
)) {
1717 var dx
= p1
.canvasx
- p0
.canvasx
;
1719 var r
= (p1
.canvasx
- domX
) / dx
;
1720 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1724 // Stop if the point (domX, py) is above this series' upper edge
1725 if (setIdx
=== 0 || py
< domY
) {
1727 closestSeries
= setIdx
;
1730 var name
= this.layout_
.setNames
[closestSeries
];
1739 * When the mouse moves in the canvas, display information about a nearby data
1740 * point and draw dots over those points in the data series. This function
1741 * takes care of cleanup of previously-drawn dots.
1742 * @param {Object} event The mousemove event from the browser.
1745 Dygraph
.prototype.mouseMove_
= function(event
) {
1746 // This prevents JS errors when mousing over the canvas before data loads.
1747 var points
= this.layout_
.points
;
1748 if (points
=== undefined
|| points
=== null) return;
1750 var canvasCoords
= this.eventToDomCoords(event
);
1751 var canvasx
= canvasCoords
[0];
1752 var canvasy
= canvasCoords
[1];
1754 var highlightSeriesOpts
= this.attr_("highlightSeriesOpts");
1755 var selectionChanged
= false;
1756 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1758 if (this.attr_("stackedGraph")) {
1759 closest
= this.findStackedPoint(canvasx
, canvasy
);
1761 closest
= this.findClosestPoint(canvasx
, canvasy
);
1763 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1765 var idx
= this.findClosestRow(canvasx
);
1766 selectionChanged
= this.setSelection(idx
);
1769 var callback
= this.attr_("highlightCallback");
1770 if (callback
&& selectionChanged
) {
1771 callback(event
, this.lastx_
, this.selPoints_
, this.lastRow_
, this.highlightSet_
);
1776 * Fetch left offset from first defined boundaryIds record (see bug #236).
1779 Dygraph
.prototype.getLeftBoundary_
= function() {
1780 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
1781 if (this.boundaryIds_
[i
] !== undefined
) {
1782 return this.boundaryIds_
[i
][0];
1789 * Transforms layout_.points index into data row number.
1790 * @param int layout_.points index
1791 * @return int row number, or -1 if none could be found.
1794 Dygraph
.prototype.idxToRow_
= function(setIdx
, rowIdx
) {
1795 if (rowIdx
< 0) return -1;
1797 var boundary
= this.getLeftBoundary_();
1798 return boundary
+ rowIdx
;
1799 // for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
1800 // var set = this.layout_.datasets[setIdx];
1801 // if (idx < set.length) {
1802 // return boundary + idx;
1804 // idx -= set.length;
1809 Dygraph
.prototype.animateSelection_
= function(direction
) {
1810 var totalSteps
= 10;
1812 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
1813 if (this.animateId
=== undefined
) this.animateId
= 0;
1814 var start
= this.fadeLevel
;
1815 var steps
= direction
< 0 ? start
: totalSteps
- start
;
1817 if (this.fadeLevel
) {
1818 this.updateSelection_(1.0);
1823 var thisId
= ++this.animateId
;
1825 Dygraph
.repeatAndCleanup(
1827 // ignore simultaneous animations
1828 if (that
.animateId
!= thisId
) return;
1830 that
.fadeLevel
+= direction
;
1831 if (that
.fadeLevel
=== 0) {
1832 that
.clearSelection();
1834 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
1837 steps
, millis
, function() {});
1841 * Draw dots over the selectied points in the data series. This function
1842 * takes care of cleanup of previously-drawn dots.
1845 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
1846 var defaultPrevented
= this.cascadeEvents_('select', {
1847 selectedX
: this.lastx_
,
1848 selectedPoints
: this.selPoints_
1850 // TODO(danvk): use defaultPrevented here?
1852 // Clear the previously drawn vertical, if there is one
1854 var ctx
= this.canvas_ctx_
;
1855 if (this.attr_('highlightSeriesOpts')) {
1856 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1857 var alpha
= 1.0 - this.attr_('highlightSeriesBackgroundAlpha');
1859 // Activating background fade includes an animation effect for a gradual
1860 // fade. TODO(klausw): make this independently configurable if it causes
1861 // issues? Use a shared preference to control animations?
1862 var animateBackgroundFade
= true;
1863 if (animateBackgroundFade
) {
1864 if (opt_animFraction
=== undefined
) {
1865 // start a new animation
1866 this.animateSelection_(1);
1869 alpha
*= opt_animFraction
;
1871 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
1872 ctx
.fillRect(0, 0, this.width_
, this.height_
);
1875 // Redraw only the highlighted series in the interactive canvas (not the
1876 // static plot canvas, which is where series are usually drawn).
1877 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
1878 } else if (this.previousVerticalX_
>= 0) {
1879 // Determine the maximum highlight circle size.
1880 var maxCircleSize
= 0;
1881 var labels
= this.attr_('labels');
1882 for (i
= 1; i
< labels
.length
; i
++) {
1883 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1884 if (r
> maxCircleSize
) maxCircleSize
= r
;
1886 var px
= this.previousVerticalX_
;
1887 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1888 2 * maxCircleSize
+ 2, this.height_
);
1891 if (this.isUsingExcanvas_
&& this.currentZoomRectArgs_
) {
1892 Dygraph
.prototype.drawZoomRect_
.apply(this, this.currentZoomRectArgs_
);
1895 if (this.selPoints_
.length
> 0) {
1896 // Draw colored circles over the center of each selected point
1897 var canvasx
= this.selPoints_
[0].canvasx
;
1899 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
1900 var pt
= this.selPoints_
[i
];
1901 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1903 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1904 var callback
= this.attr_("drawHighlightPointCallback", pt
.name
);
1905 var color
= this.plotter_
.colors
[pt
.name
];
1907 callback
= Dygraph
.Circles
.DEFAULT
;
1909 ctx
.lineWidth
= this.attr_('strokeWidth', pt
.name
);
1910 ctx
.strokeStyle
= color
;
1911 ctx
.fillStyle
= color
;
1912 callback(this.g
, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
1917 this.previousVerticalX_
= canvasx
;
1922 * Manually set the selected points and display information about them in the
1923 * legend. The selection can be cleared using clearSelection() and queried
1924 * using getSelection().
1925 * @param { Integer } row number that should be highlighted (i.e. appear with
1926 * hover dots on the chart). Set to false to clear any selection.
1927 * @param { seriesName } optional series name to highlight that series with the
1928 * the highlightSeriesOpts setting.
1929 * @param { locked } optional If true, keep seriesName selected when mousing
1930 * over the graph, disabling closest-series highlighting. Call clearSelection()
1933 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
1934 // Extract the points we've selected
1935 this.selPoints_
= [];
1937 if (row
!== false) {
1938 row
-= this.getLeftBoundary_();
1941 var changed
= false;
1942 if (row
!== false && row
>= 0) {
1943 if (row
!= this.lastRow_
) changed
= true;
1944 this.lastRow_
= row
;
1945 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
1946 var set
= this.layout_
.datasets
[setIdx
];
1947 if (row
< set
.length
) {
1948 var point
= this.layout_
.points
[setIdx
][row
];
1950 if (this.attr_("stackedGraph")) {
1951 point
= this.layout_
.unstackPointAtIndex(setIdx
, row
);
1954 if (point
.yval
!== null) this.selPoints_
.push(point
);
1958 if (this.lastRow_
>= 0) changed
= true;
1962 if (this.selPoints_
.length
) {
1963 this.lastx_
= this.selPoints_
[0].xval
;
1968 if (opt_seriesName
!== undefined
) {
1969 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
1970 this.highlightSet_
= opt_seriesName
;
1973 if (opt_locked
!== undefined
) {
1974 this.lockedSet_
= opt_locked
;
1978 this.updateSelection_(undefined
);
1984 * The mouse has left the canvas. Clear out whatever artifacts remain
1985 * @param {Object} event the mouseout event from the browser.
1988 Dygraph
.prototype.mouseOut_
= function(event
) {
1989 if (this.attr_("unhighlightCallback")) {
1990 this.attr_("unhighlightCallback")(event
);
1993 if (this.attr_("hideOverlayOnMouseOut") && !this.lockedSet_
) {
1994 this.clearSelection();
1999 * Clears the current selection (i.e. points that were highlighted by moving
2000 * the mouse over the chart).
2002 Dygraph
.prototype.clearSelection
= function() {
2003 this.cascadeEvents_('deselect', {});
2005 this.lockedSet_
= false;
2006 // Get rid of the overlay data
2007 if (this.fadeLevel
) {
2008 this.animateSelection_(-1);
2011 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2013 this.selPoints_
= [];
2016 this.highlightSet_
= null;
2020 * Returns the number of the currently selected row. To get data for this row,
2021 * you can use the getValue method.
2022 * @return { Integer } row number, or -1 if nothing is selected
2024 Dygraph
.prototype.getSelection
= function() {
2025 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2029 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2030 var points
= this.layout_
.points
[setIdx
];
2031 for (var row
= 0; row
< points
.length
; row
++) {
2032 if (points
[row
].x
== this.selPoints_
[0].x
) {
2033 return row
+ this.getLeftBoundary_();
2041 * Returns the name of the currently-highlighted series.
2042 * Only available when the highlightSeriesOpts option is in use.
2044 Dygraph
.prototype.getHighlightSeries
= function() {
2045 return this.highlightSet_
;
2049 * Returns true if the currently-highlighted series was locked
2050 * via setSelection(..., seriesName, true).
2052 Dygraph
.prototype.isSeriesLocked
= function() {
2053 return this.lockedSet_
;
2057 * Fires when there's data available to be graphed.
2058 * @param {String} data Raw CSV data to be plotted
2061 Dygraph
.prototype.loadedEvent_
= function(data
) {
2062 this.rawData_
= this.parseCSV_(data
);
2067 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2070 Dygraph
.prototype.addXTicks_
= function() {
2071 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2073 if (this.dateWindow_
) {
2074 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2076 range
= this.fullXRange_();
2079 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2080 var xTicks
= xAxisOptionsView('ticker')(
2083 this.width_
, // TODO(danvk): should be area.width
2086 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2087 // console.log(msg);
2088 this.layout_
.setXTicks(xTicks
);
2093 * Computes the range of the data series (including confidence intervals).
2094 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2095 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2096 * @return [low, high]
2098 Dygraph
.prototype.extremeValues_
= function(series
) {
2099 var minY
= null, maxY
= null, j
, y
;
2101 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2103 // With custom bars, maxY is the max of the high values.
2104 for (j
= 0; j
< series
.length
; j
++) {
2105 y
= series
[j
][1][0];
2106 if (y
=== null || isNaN(y
)) continue;
2107 var low
= y
- series
[j
][1][1];
2108 var high
= y
+ series
[j
][1][2];
2109 if (low
> y
) low
= y
; // this can happen with custom bars,
2110 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2111 if (maxY
=== null || high
> maxY
) {
2114 if (minY
=== null || low
< minY
) {
2119 for (j
= 0; j
< series
.length
; j
++) {
2121 if (y
=== null || isNaN(y
)) continue;
2122 if (maxY
=== null || y
> maxY
) {
2125 if (minY
=== null || y
< minY
) {
2131 return [minY
, maxY
];
2136 * This function is called once when the chart's data is changed or the options
2137 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2138 * idea is that values derived from the chart's data can be computed here,
2139 * rather than every time the chart is drawn. This includes things like the
2140 * number of axes, rolling averages, etc.
2142 Dygraph
.prototype.predraw_
= function() {
2143 var start
= new Date();
2145 // TODO(danvk): move more computations out of drawGraph_ and into here.
2146 this.computeYAxes_();
2148 // Create a new plotter.
2149 if (this.plotter_
) {
2150 this.cascadeEvents_('clearChart');
2151 this.plotter_
.clear();
2153 this.plotter_
= new DygraphCanvasRenderer(this,
2158 // The roller sits in the bottom left corner of the chart. We don't know where
2159 // this will be until the options are available, so it's positioned here.
2160 this.createRollInterface_();
2162 this.cascadeEvents_('predraw');
2164 if (this.rangeSelector_
) {
2165 this.rangeSelector_
.renderStaticLayer();
2168 // Convert the raw data (a 2D array) into the internal format and compute
2169 // rolling averages.
2170 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2171 for (var i
= 1; i
< this.numColumns(); i
++) {
2172 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2173 var logScale
= this.attr_('logscale');
2174 var series
= this.extractSeries_(this.rawData_
, i
, logScale
);
2175 series
= this.rollingAverage(series
, this.rollPeriod_
);
2176 this.rolledSeries_
.push(series
);
2179 // If the data or options have changed, then we'd better redraw.
2182 // This is used to determine whether to do various animations.
2183 var end
= new Date();
2184 this.drawingTimeMs_
= (end
- start
);
2188 * Loop over all fields and create datasets, calculating extreme y-values for
2189 * each series and extreme x-indices as we go.
2191 * dateWindow is passed in as an explicit parameter so that we can compute
2192 * extreme values "speculatively", i.e. without actually setting state on the
2195 * TODO(danvk): make this more of a true function
2196 * @return [ datasets, seriesExtremes, boundaryIds ]
2199 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2200 var boundaryIds
= [];
2201 var cumulative_y
= []; // For stacked series.
2203 var extremes
= {}; // series name -> [low, high]
2206 // Loop over the fields (series). Go from the last to the first,
2207 // because if they're stacked that's how we accumulate the values.
2208 var num_series
= rolledSeries
.length
- 1;
2209 for (i
= num_series
; i
>= 1; i
--) {
2210 if (!this.visibility()[i
- 1]) continue;
2212 // Note: this copy _is_ necessary at the moment.
2213 // If you remove it, it breaks zooming with error bars on.
2214 // TODO(danvk): investigate further & write a test for this.
2216 for (j
= 0; j
< rolledSeries
[i
].length
; j
++) {
2217 series
.push(rolledSeries
[i
][j
]);
2220 // Prune down to the desired range, if necessary (for zooming)
2221 // Because there can be lines going to points outside of the visible area,
2222 // we actually prune to visible points, plus one on either side.
2223 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2225 var low
= dateWindow
[0];
2226 var high
= dateWindow
[1];
2228 // TODO(danvk): do binary search instead of linear search.
2229 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2230 var firstIdx
= null, lastIdx
= null;
2231 for (k
= 0; k
< series
.length
; k
++) {
2232 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2235 if (series
[k
][0] <= high
) {
2239 if (firstIdx
=== null) firstIdx
= 0;
2240 if (firstIdx
> 0) firstIdx
--;
2241 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2242 if (lastIdx
< series
.length
- 1) lastIdx
++;
2243 boundaryIds
[i
-1] = [firstIdx
, lastIdx
];
2244 for (k
= firstIdx
; k
<= lastIdx
; k
++) {
2245 pruned
.push(series
[k
]);
2249 boundaryIds
[i
-1] = [0, series
.length
-1];
2252 var seriesExtremes
= this.extremeValues_(series
);
2255 for (j
=0; j
<series
.length
; j
++) {
2256 series
[j
] = [series
[j
][0],
2261 } else if (this.attr_("stackedGraph")) {
2262 var l
= series
.length
;
2264 for (j
= 0; j
< l
; j
++) {
2265 // If one data set has a NaN, let all subsequent stacked
2266 // sets inherit the NaN -- only start at 0 for the first set.
2267 var x
= series
[j
][0];
2268 if (cumulative_y
[x
] === undefined
) {
2269 cumulative_y
[x
] = 0;
2272 actual_y
= series
[j
][1];
2273 if (actual_y
=== null) {
2274 series
[j
] = [x
, null];
2278 cumulative_y
[x
] += actual_y
;
2280 series
[j
] = [x
, cumulative_y
[x
]];
2282 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2283 seriesExtremes
[1] = cumulative_y
[x
];
2285 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2286 seriesExtremes
[0] = cumulative_y
[x
];
2291 var seriesName
= this.attr_("labels")[i
];
2292 extremes
[seriesName
] = seriesExtremes
;
2293 datasets
[i
] = series
;
2296 // For stacked graphs, a NaN value for any point in the sum should create a
2297 // clean gap in the graph. Back-propagate NaNs to all points at this X value.
2298 if (this.attr_("stackedGraph")) {
2299 for (k
= datasets
.length
- 1; k
>= 0; --k
) {
2300 // Use the first nonempty dataset to get X values.
2301 if (!datasets
[k
]) continue;
2302 for (j
= 0; j
< datasets
[k
].length
; j
++) {
2303 var x
= datasets
[k
][j
][0];
2304 if (isNaN(cumulative_y
[x
])) {
2305 // Set all Y values to NaN at that X value.
2306 for (i
= datasets
.length
- 1; i
>= 0; i
--) {
2307 if (!datasets
[i
]) continue;
2308 datasets
[i
][j
][1] = NaN
;
2316 return [ datasets
, extremes
, boundaryIds
];
2320 * Update the graph with new data. This method is called when the viewing area
2321 * has changed. If the underlying data or options have changed, predraw_ will
2322 * be called before drawGraph_ is called.
2326 Dygraph
.prototype.drawGraph_
= function() {
2327 var start
= new Date();
2329 // This is used to set the second parameter to drawCallback, below.
2330 var is_initial_draw
= this.is_initial_draw_
;
2331 this.is_initial_draw_
= false;
2333 this.layout_
.removeAllDatasets();
2335 this.attrs_
.pointSize
= 0.5 * this.attr_('highlightCircleSize');
2337 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2338 var datasets
= packed
[0];
2339 var extremes
= packed
[1];
2340 this.boundaryIds_
= packed
[2];
2342 this.setIndexByName_
= {};
2343 var labels
= this.attr_("labels");
2344 if (labels
.length
> 0) {
2345 this.setIndexByName_
[labels
[0]] = 0;
2348 for (var i
= 1; i
< datasets
.length
; i
++) {
2349 this.setIndexByName_
[labels
[i
]] = i
;
2350 if (!this.visibility()[i
- 1]) continue;
2351 this.layout_
.addDataset(labels
[i
], datasets
[i
]);
2352 this.datasetIndex_
[i
] = dataIdx
++;
2355 this.computeYAxisRanges_(extremes
);
2356 this.layout_
.setYAxes(this.axes_
);
2360 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2361 var tmp_zoomed_x
= this.zoomed_x_
;
2362 // Tell PlotKit to use this new data and render itself
2363 this.layout_
.setDateWindow(this.dateWindow_
);
2364 this.zoomed_x_
= tmp_zoomed_x
;
2365 this.layout_
.evaluateWithError();
2366 this.renderGraph_(is_initial_draw
);
2368 if (this.attr_("timingName")) {
2369 var end
= new Date();
2371 console
.log(this.attr_("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2377 * This does the work of drawing the chart. It assumes that the layout and axis
2378 * scales have already been set (e.g. by predraw_).
2382 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2383 this.cascadeEvents_('clearChart');
2384 this.plotter_
.clear();
2386 if (this.attr_('underlayCallback')) {
2387 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2388 // users who expect a deprecated form of this callback.
2389 this.attr_('underlayCallback')(
2390 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2394 canvas
: this.hidden_
,
2395 drawingContext
: this.hidden_ctx_
2397 this.cascadeEvents_('willDrawChart', e
);
2398 this.plotter_
.render();
2399 this.cascadeEvents_('didDrawChart', e
);
2401 // TODO(danvk): is this a performance bottleneck when panning?
2402 // The interaction canvas should already be empty in that situation.
2403 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2404 this.canvas_
.height
);
2406 // Generate a static legend before any particular point is selected.
2408 if (this.rangeSelector_
) {
2409 this.rangeSelector_
.renderInteractiveLayer();
2411 if (this.attr_("drawCallback") !== null) {
2412 this.attr_("drawCallback")(this, is_initial_draw
);
2418 * Determine properties of the y-axes which are independent of the data
2419 * currently being displayed. This includes things like the number of axes and
2420 * the style of the axes. It does not include the range of each axis and its
2422 * This fills in this.axes_.
2423 * axes_ = [ { options } ]
2424 * indices are into the axes_ array.
2426 Dygraph
.prototype.computeYAxes_
= function() {
2427 // Preserve valueWindow settings if they exist, and if the user hasn't
2428 // specified a new valueRange.
2429 var i
, valueWindows
, seriesName
, axis
, index
, opts
, v
;
2430 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2432 for (index
= 0; index
< this.axes_
.length
; index
++) {
2433 valueWindows
.push(this.axes_
[index
].valueWindow
);
2437 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2439 // Get a list of series names.
2440 var labels
= this.attr_("labels");
2442 for (i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2444 // all options which could be applied per-axis:
2452 'axisLabelFontSize',
2457 // Copy global axis options over to the first axis.
2458 for (i
= 0; i
< axisOptions
.length
; i
++) {
2459 var k
= axisOptions
[i
];
2461 if (v
) this.axes_
[0][k
] = v
;
2464 // Go through once and add all the axes.
2465 for (seriesName
in series
) {
2466 if (!series
.hasOwnProperty(seriesName
)) continue;
2467 axis
= this.attr_("axis", seriesName
);
2468 if (axis
=== null) {
2471 if (typeof(axis
) == 'object') {
2472 // Add a new axis, making a copy of its per-axis options.
2474 Dygraph
.update(opts
, this.axes_
[0]);
2475 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2476 var yAxisId
= this.axes_
.length
;
2477 opts
.yAxisId
= yAxisId
;
2479 Dygraph
.update(opts
, axis
);
2480 this.axes_
.push(opts
);
2484 if (valueWindows
!== undefined
) {
2485 // Restore valueWindow settings.
2486 for (index
= 0; index
< valueWindows
.length
; index
++) {
2487 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2492 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2494 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2495 v
= opts("valueRange");
2496 if (v
) this.axes_
[axis
].valueRange
= v
;
2497 } else { // To keep old behavior
2498 var axes
= this.user_attrs_
.axes
;
2499 if (axes
&& axes
.y2
) {
2500 v
= axes
.y2
.valueRange
;
2501 if (v
) this.axes_
[axis
].valueRange
= v
;
2509 * Returns the number of y-axes on the chart.
2510 * @return {Number} the number of axes.
2512 Dygraph
.prototype.numAxes
= function() {
2513 return this.attributes_
.numAxes();
2518 * Returns axis properties for the given series.
2519 * @param { String } setName The name of the series for which to get axis
2520 * properties, e.g. 'Y1'.
2521 * @return { Object } The axis properties.
2523 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2524 // TODO(danvk): handle errors.
2525 return this.axes_
[this.attributes_
.axisForSeries(series
)];
2530 * Determine the value range and tick marks for each axis.
2531 * @param {Object} extremes A mapping from seriesName -> [low, high]
2532 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2534 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2535 // Build a map from axis number -> [list of series names]
2536 var seriesForAxis
= [];
2538 var numAxes
= this.attributes_
.numAxes();
2539 for (var yAxis
= 0; yAxis
< numAxes
; yAxis
++) {
2540 seriesForAxis
[yAxis
] = this.attributes_
.seriesForAxis(yAxis
);
2543 // Compute extreme values, a span and tick marks for each axis.
2544 for (var i
= 0; i
< numAxes
; i
++) {
2545 var axis
= this.axes_
[i
];
2547 if (!seriesForAxis
[i
]) {
2548 // If no series are defined or visible then use a reasonable default
2549 axis
.extremeRange
= [0, 1];
2551 // Calculate the extremes of extremes.
2552 series
= seriesForAxis
[i
];
2553 var minY
= Infinity
; // extremes[series[0]][0];
2554 var maxY
= -Infinity
; // extremes[series[0]][1];
2555 var extremeMinY
, extremeMaxY
;
2557 for (var j
= 0; j
< series
.length
; j
++) {
2558 // this skips invisible series
2559 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2561 // Only use valid extremes to stop null data series' from corrupting the scale.
2562 extremeMinY
= extremes
[series
[j
]][0];
2563 if (extremeMinY
!== null) {
2564 minY
= Math
.min(extremeMinY
, minY
);
2566 extremeMaxY
= extremes
[series
[j
]][1];
2567 if (extremeMaxY
!== null) {
2568 maxY
= Math
.max(extremeMaxY
, maxY
);
2571 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2573 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2574 if (minY
== Infinity
) minY
= 0;
2575 if (maxY
== -Infinity
) maxY
= 1;
2577 // Add some padding and round up to an integer to be human-friendly.
2578 var span
= maxY
- minY
;
2579 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2580 if (span
=== 0) { span
= maxY
; }
2582 var maxAxisY
, minAxisY
;
2583 if (axis
.logscale
) {
2584 maxAxisY
= maxY
+ 0.1 * span
;
2587 maxAxisY
= maxY
+ 0.1 * span
;
2588 minAxisY
= minY
- 0.1 * span
;
2590 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2591 if (!this.attr_("avoidMinZero")) {
2592 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2593 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2596 if (this.attr_("includeZero")) {
2597 if (maxY
< 0) maxAxisY
= 0;
2598 if (minY
> 0) minAxisY
= 0;
2601 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2603 if (axis
.valueWindow
) {
2604 // This is only set if the user has zoomed on the y-axis. It is never set
2605 // by a user. It takes precedence over axis.valueRange because, if you set
2606 // valueRange, you'd still expect to be able to pan.
2607 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2608 } else if (axis
.valueRange
) {
2609 // This is a user-set value range for this axis.
2610 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2612 axis
.computedValueRange
= axis
.extremeRange
;
2615 // Add ticks. By default, all axes inherit the tick positions of the
2616 // primary axis. However, if an axis is specifically marked as having
2617 // independent ticks, then that is permissible as well.
2618 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2619 var ticker
= opts('ticker');
2620 if (i
=== 0 || axis
.independentTicks
) {
2621 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2622 axis
.computedValueRange
[1],
2623 this.height_
, // TODO(danvk): should be area.height
2627 var p_axis
= this.axes_
[0];
2628 var p_ticks
= p_axis
.ticks
;
2629 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2630 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2631 var tick_values
= [];
2632 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2633 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2634 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2635 tick_values
.push(y_val
);
2638 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2639 axis
.computedValueRange
[1],
2640 this.height_
, // TODO(danvk): should be area.height
2649 * Extracts one series from the raw data (a 2D array) into an array of (date,
2652 * This is where undesirable points (i.e. negative values on log scales and
2653 * missing values through which we wish to connect lines) are dropped.
2654 * TODO(danvk): the "missing values" bit above doesn't seem right.
2658 Dygraph
.prototype.extractSeries_
= function(rawData
, i
, logScale
) {
2659 // TODO(danvk): pre-allocate series here.
2661 for (var j
= 0; j
< rawData
.length
; j
++) {
2662 var x
= rawData
[j
][0];
2663 var point
= rawData
[j
][i
];
2665 // On the log scale, points less than zero do not exist.
2666 // This will create a gap in the chart.
2671 series
.push([x
, point
]);
2678 * Calculates the rolling average of a data set.
2679 * If originalData is [label, val], rolls the average of those.
2680 * If originalData is [label, [, it's interpreted as [value, stddev]
2681 * and the roll is returned in the same form, with appropriately reduced
2682 * stddev for each value.
2683 * Note that this is where fractional input (i.e. '5/10') is converted into
2685 * @param {Array} originalData The data in the appropriate format (see above)
2686 * @param {Number} rollPeriod The number of points over which to average the
2689 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2690 if (originalData
.length
< 2)
2691 return originalData
;
2692 rollPeriod
= Math
.min(rollPeriod
, originalData
.length
);
2693 var rollingData
= [];
2694 var sigma
= this.attr_("sigma");
2696 var low
, high
, i
, j
, y
, sum
, num_ok
, stddev
;
2697 if (this.fractions_
) {
2699 var den
= 0; // numerator/denominator
2701 for (i
= 0; i
< originalData
.length
; i
++) {
2702 num
+= originalData
[i
][1][0];
2703 den
+= originalData
[i
][1][1];
2704 if (i
- rollPeriod
>= 0) {
2705 num
-= originalData
[i
- rollPeriod
][1][0];
2706 den
-= originalData
[i
- rollPeriod
][1][1];
2709 var date
= originalData
[i
][0];
2710 var value
= den
? num
/ den
: 0.0;
2711 if (this.attr_("errorBars")) {
2712 if (this.attr_("wilsonInterval")) {
2713 // For more details on this confidence interval, see:
2714 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2716 var p
= value
< 0 ? 0 : value
, n
= den
;
2717 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2718 var denom
= 1 + sigma
* sigma
/ den
;
2719 low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2720 high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2721 rollingData
[i
] = [date
,
2722 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2724 rollingData
[i
] = [date
, [0, 0, 0]];
2727 stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2728 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2731 rollingData
[i
] = [date
, mult
* value
];
2734 } else if (this.attr_("customBars")) {
2739 for (i
= 0; i
< originalData
.length
; i
++) {
2740 var data
= originalData
[i
][1];
2742 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2744 if (y
!== null && !isNaN(y
)) {
2750 if (i
- rollPeriod
>= 0) {
2751 var prev
= originalData
[i
- rollPeriod
];
2752 if (prev
[1][1] !== null && !isNaN(prev
[1][1])) {
2760 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2761 1.0 * (mid
- low
) / count
,
2762 1.0 * (high
- mid
) / count
]];
2764 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2768 // Calculate the rolling average for the first rollPeriod - 1 points where
2769 // there is not enough data to roll over the full number of points
2770 if (!this.attr_("errorBars")){
2771 if (rollPeriod
== 1) {
2772 return originalData
;
2775 for (i
= 0; i
< originalData
.length
; i
++) {
2778 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2779 y
= originalData
[j
][1];
2780 if (y
=== null || isNaN(y
)) continue;
2782 sum
+= originalData
[j
][1];
2785 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2787 rollingData
[i
] = [originalData
[i
][0], null];
2792 for (i
= 0; i
< originalData
.length
; i
++) {
2796 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2797 y
= originalData
[j
][1][0];
2798 if (y
=== null || isNaN(y
)) continue;
2800 sum
+= originalData
[j
][1][0];
2801 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2804 stddev
= Math
.sqrt(variance
) / num_ok
;
2805 rollingData
[i
] = [originalData
[i
][0],
2806 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2808 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2818 * Detects the type of the str (date or numeric) and sets the various
2819 * formatting attributes in this.attrs_ based on this type.
2820 * @param {String} str An x value.
2823 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2825 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2826 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
2827 str
.indexOf('/') >= 0 ||
2828 isNaN(parseFloat(str
))) {
2830 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2831 // TODO(danvk): remove support for this format.
2836 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2837 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
2838 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
2839 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2841 /** @private (shut up, jsdoc!) */
2842 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2843 // TODO(danvk): use Dygraph.numberValueFormatter here?
2844 /** @private (shut up, jsdoc!) */
2845 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2846 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
2847 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
2852 * Parses the value as a floating point number. This is like the parseFloat()
2853 * built-in, but with a few differences:
2854 * - the empty string is parsed as null, rather than NaN.
2855 * - if the string cannot be parsed at all, an error is logged.
2856 * If the string can't be parsed, this method returns null.
2857 * @param {String} x The string to be parsed
2858 * @param {Number} opt_line_no The line number from which the string comes.
2859 * @param {String} opt_line The text of the line from which the string comes.
2863 // Parse the x as a float or return null if it's not a number.
2864 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
2865 var val
= parseFloat(x
);
2866 if (!isNaN(val
)) return val
;
2868 // Try to figure out what happeend.
2869 // If the value is the empty string, parse it as null.
2870 if (/^ *$/.test(x
)) return null;
2872 // If it was actually "NaN", return it as NaN.
2873 if (/^ *nan *$/i.test(x
)) return NaN
;
2875 // Looks like a parsing error.
2876 var msg
= "Unable to parse '" + x
+ "' as a number";
2877 if (opt_line
!== null && opt_line_no
!== null) {
2878 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
2887 * Parses a string in a special csv format. We expect a csv file where each
2888 * line is a date point, and the first field in each line is the date string.
2889 * We also expect that all remaining fields represent series.
2890 * if the errorBars attribute is set, then interpret the fields as:
2891 * date, series1, stddev1, series2, stddev2, ...
2892 * @param {[Object]} data See above.
2894 * @return [Object] An array with one entry for each row. These entries
2895 * are an array of cells in that row. The first entry is the parsed x-value for
2896 * the row. The second, third, etc. are the y-values. These can take on one of
2897 * three forms, depending on the CSV and constructor parameters:
2899 * 2. [ value, stddev ]
2900 * 3. [ low value, center value, high value ]
2902 Dygraph
.prototype.parseCSV_
= function(data
) {
2904 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
2905 var lines
= data
.split(line_delimiter
|| "\n");
2908 // Use the default delimiter or fall back to a tab if that makes sense.
2909 var delim
= this.attr_('delimiter');
2910 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2915 if (!('labels' in this.user_attrs_
)) {
2916 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2918 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
2919 this.attributes_
.reparseSeries();
2924 var defaultParserSet
= false; // attempt to auto-detect x value type
2925 var expectedCols
= this.attr_("labels").length
;
2926 var outOfOrder
= false;
2927 for (var i
= start
; i
< lines
.length
; i
++) {
2928 var line
= lines
[i
];
2930 if (line
.length
=== 0) continue; // skip blank lines
2931 if (line
[0] == '#') continue; // skip comment lines
2932 var inFields
= line
.split(delim
);
2933 if (inFields
.length
< 2) continue;
2936 if (!defaultParserSet
) {
2937 this.detectTypeFromString_(inFields
[0]);
2938 xParser
= this.attr_("xValueParser");
2939 defaultParserSet
= true;
2941 fields
[0] = xParser(inFields
[0], this);
2943 // If fractions are expected, parse the numbers as "A/B
"
2944 if (this.fractions_) {
2945 for (j = 1; j < inFields.length; j++) {
2946 // TODO(danvk): figure out an appropriate way to flag parse errors.
2947 vals = inFields[j].split("/");
2948 if (vals.length != 2) {
2949 this.error('Expected fractional "num
/den
" values in CSV data ' +
2950 "but found a value
'" + inFields[j] + "' on line
" +
2951 (1 + i) + " ('" + line + "') which is not of
this form
.");
2954 fields[j] = [this.parseFloat_(vals[0], i, line),
2955 this.parseFloat_(vals[1], i, line)];
2958 } else if (this.attr_("errorBars
")) {
2959 // If there are error bars, values are (value, stddev) pairs
2960 if (inFields.length % 2 != 1) {
2961 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
2962 'but line ' + (1 + i) + ' has an odd number of values (' +
2963 (inFields.length - 1) + "): '" + line + "'");
2965 for (j = 1; j < inFields.length; j += 2) {
2966 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
2967 this.parseFloat_(inFields[j + 1], i, line)];
2969 } else if (this.attr_("customBars
")) {
2970 // Bars are a low;center;high tuple
2971 for (j = 1; j < inFields.length; j++) {
2972 var val = inFields[j];
2973 if (/^ *$/.test(val)) {
2974 fields[j] = [null, null, null];
2976 vals = val.split(";");
2977 if (vals.length == 3) {
2978 fields[j] = [ this.parseFloat_(vals[0], i, line),
2979 this.parseFloat_(vals[1], i, line),
2980 this.parseFloat_(vals[2], i, line) ];
2982 this.warn('When using customBars, values must be either blank ' +
2983 'or "low
;center
;high
" tuples (got "' + val +
2984 '" on line ' + (1+i));
2989 // Values are just numbers
2990 for (j = 1; j < inFields.length; j++) {
2991 fields[j] = this.parseFloat_(inFields[j], i, line);
2994 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2998 if (fields.length != expectedCols) {
2999 this.error("Number of columns
in line
" + i + " (" + fields.length +
3000 ") does not agree
with number of
labels (" + expectedCols +
3004 // If the user specified the 'labels' option and none of the cells of the
3005 // first row parsed correctly, then they probably double-specified the
3006 // labels. We go with the values set in the option, discard this row and
3007 // log a warning to the JS console.
3008 if (i === 0 && this.attr_('labels')) {
3009 var all_null = true;
3010 for (j = 0; all_null && j < fields.length; j++) {
3011 if (fields[j]) all_null = false;
3014 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3015 "CSV
data ('" + line + "') appears to also contain labels
. " +
3016 "Will drop the CSV labels and
use the option labels
.");
3024 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3025 ret.sort(function(a,b) { return a[0] - b[0]; });
3033 * The user has provided their data as a pre-packaged JS array. If the x values
3034 * are numeric, this is the same as dygraphs' internal format. If the x values
3035 * are dates, we need to convert them from Date objects to ms since epoch.
3036 * @param {[Object]} data
3037 * @return {[Object]} data with numeric x values.
3039 Dygraph.prototype.parseArray_ = function(data) {
3040 // Peek at the first x value to see if it's numeric.
3041 if (data.length === 0) {
3042 this.error("Can
't plot empty data set");
3045 if (data[0].length === 0) {
3046 this.error("Data set cannot contain an empty row");
3051 if (this.attr_("labels") === null) {
3052 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3053 "in the options parameter");
3054 this.attrs_.labels = [ "X" ];
3055 for (i = 1; i < data[0].length; i++) {
3056 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
3058 this.attributes_.reparseSeries();
3060 var num_labels = this.attr_("labels");
3061 if (num_labels.length != data[0].length) {
3062 this.error("Mismatch between number of labels (" + num_labels +
3063 ") and number of columns in array (" + data[0].length + ")");
3068 if (Dygraph.isDateLike(data[0][0])) {
3069 // Some intelligent defaults for a date x-axis.
3070 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
3071 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
3072 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3074 // Assume they're all dates
.
3075 var parsedData
= Dygraph
.clone(data
);
3076 for (i
= 0; i
< data
.length
; i
++) {
3077 if (parsedData
[i
].length
=== 0) {
3078 this.error("Row " + (1 + i
) + " of data is empty");
3081 if (parsedData
[i
][0] === null ||
3082 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3083 isNaN(parsedData
[i
][0].getTime())) {
3084 this.error("x value in row " + (1 + i
) + " is not a Date");
3087 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3091 // Some intelligent defaults for a numeric x-axis.
3092 /** @private (shut up, jsdoc!) */
3093 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3094 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3095 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3101 * Parses a DataTable object from gviz.
3102 * The data is expected to have a first column that is either a date or a
3103 * number. All subsequent columns must be numbers. If there is a clear mismatch
3104 * between this.xValueParser_ and the type of the first column, it will be
3105 * fixed. Fills out rawData_.
3106 * @param {[Object]} data See above.
3109 Dygraph
.prototype.parseDataTable_
= function(data
) {
3110 var shortTextForAnnotationNum
= function(num
) {
3111 // converts [0-9]+ [A-Z][a-z]*
3112 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3113 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3114 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3115 num
= Math
.floor(num
/ 26);
3117 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3118 num
= Math
.floor((num
- 1) / 26);
3123 var cols
= data
.getNumberOfColumns();
3124 var rows
= data
.getNumberOfRows();
3126 var indepType
= data
.getColumnType(0);
3127 if (indepType
== 'date' || indepType
== 'datetime') {
3128 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3129 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
3130 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3131 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3132 } else if (indepType
== 'number') {
3133 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3134 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3135 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3136 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3138 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3139 "column 1 of DataTable input (Got '" + indepType
+ "')");
3143 // Array of the column indices which contain data (and not annotations).
3145 var annotationCols
= {}; // data index -> [annotation cols]
3146 var hasAnnotations
= false;
3148 for (i
= 1; i
< cols
; i
++) {
3149 var type
= data
.getColumnType(i
);
3150 if (type
== 'number') {
3152 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3153 // This is OK -- it's an annotation column.
3154 var dataIdx
= colIdx
[colIdx
.length
- 1];
3155 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3156 annotationCols
[dataIdx
] = [i
];
3158 annotationCols
[dataIdx
].push(i
);
3160 hasAnnotations
= true;
3162 this.error("Only 'number' is supported as a dependent type with Gviz." +
3163 " 'string' is only supported if displayAnnotations is true");
3167 // Read column labels
3168 // TODO(danvk): add support back for errorBars
3169 var labels
= [data
.getColumnLabel(0)];
3170 for (i
= 0; i
< colIdx
.length
; i
++) {
3171 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3172 if (this.attr_("errorBars")) i
+= 1;
3174 this.attrs_
.labels
= labels
;
3175 cols
= labels
.length
;
3178 var outOfOrder
= false;
3179 var annotations
= [];
3180 for (i
= 0; i
< rows
; i
++) {
3182 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3183 data
.getValue(i
, 0) === null) {
3184 this.warn("Ignoring row " + i
+
3185 " of DataTable because of undefined or null first column.");
3189 if (indepType
== 'date' || indepType
== 'datetime') {
3190 row
.push(data
.getValue(i
, 0).getTime());
3192 row
.push(data
.getValue(i
, 0));
3194 if (!this.attr_("errorBars")) {
3195 for (j
= 0; j
< colIdx
.length
; j
++) {
3196 var col
= colIdx
[j
];
3197 row
.push(data
.getValue(i
, col
));
3198 if (hasAnnotations
&&
3199 annotationCols
.hasOwnProperty(col
) &&
3200 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3202 ann
.series
= data
.getColumnLabel(col
);
3204 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3206 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3207 if (k
) ann
.text
+= "\n";
3208 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3210 annotations
.push(ann
);
3214 // Strip out infinities, which give dygraphs problems later on.
3215 for (j
= 0; j
< row
.length
; j
++) {
3216 if (!isFinite(row
[j
])) row
[j
] = null;
3219 for (j
= 0; j
< cols
- 1; j
++) {
3220 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3223 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3230 this.warn("DataTable is out of order; order it correctly to speed loading.");
3231 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3233 this.rawData_
= ret
;
3235 if (annotations
.length
> 0) {
3236 this.setAnnotations(annotations
, true);
3241 * Get the CSV data. If it's in a function, call that function. If it's in a
3242 * file, do an XMLHttpRequest to get it.
3245 Dygraph
.prototype.start_
= function() {
3246 var data
= this.file_
;
3248 // Functions can return references of all other types.
3249 if (typeof data
== 'function') {
3253 if (Dygraph
.isArrayLike(data
)) {
3254 this.rawData_
= this.parseArray_(data
);
3256 } else if (typeof data
== 'object' &&
3257 typeof data
.getColumnRange
== 'function') {
3258 // must be a DataTable from gviz.
3259 this.parseDataTable_(data
);
3261 } else if (typeof data
== 'string') {
3262 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3263 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3264 if (line_delimiter
) {
3265 this.loadedEvent_(data
);
3267 var req
= new XMLHttpRequest();
3269 req
.onreadystatechange
= function () {
3270 if (req
.readyState
== 4) {
3271 if (req
.status
=== 200 || // Normal http
3272 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3273 caller
.loadedEvent_(req
.responseText
);
3278 req
.open("GET", data
, true);
3282 this.error("Unknown data format: " + (typeof data
));
3287 * Changes various properties of the graph. These can include:
3289 * <li>file: changes the source data for the graph</li>
3290 * <li>errorBars: changes whether the data contains stddev</li>
3293 * There's a huge variety of options that can be passed to this method. For a
3294 * full list, see http://dygraphs.com/options.html.
3296 * @param {Object} attrs The new properties and values
3297 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3298 * call to updateOptions(). If you know better, you can pass true to explicitly
3299 * block the redraw. This can be useful for chaining updateOptions() calls,
3300 * avoiding the occasional infinite loop and preventing redraws when it's not
3301 * necessary (e.g. when updating a callback).
3303 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3304 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3306 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
3307 var file
= input_attrs
.file
;
3308 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
3310 // TODO(danvk): this is a mess. Move these options into attr_.
3311 if ('rollPeriod' in attrs
) {
3312 this.rollPeriod_
= attrs
.rollPeriod
;
3314 if ('dateWindow' in attrs
) {
3315 this.dateWindow_
= attrs
.dateWindow
;
3316 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3317 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3320 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3321 this.zoomed_y_
= (attrs
.valueRange
!== null);
3324 // TODO(danvk): validate per-series options.
3329 // highlightCircleSize
3331 // Check if this set options will require new points.
3332 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3334 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3338 if (!block_redraw
) this.start_();
3340 if (!block_redraw
) {
3341 if (requiresNewPoints
) {
3344 this.renderGraph_(false);
3351 * Returns a copy of the options with deprecated names converted into current
3352 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3353 * interested in that, they should save a copy before calling this.
3356 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3358 for (var k
in attrs
) {
3359 if (k
== 'file') continue;
3360 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3363 var set
= function(axis
, opt
, value
) {
3364 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3365 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3366 my_attrs
.axes
[axis
][opt
] = value
;
3368 var map
= function(opt
, axis
, new_opt
) {
3369 if (typeof(attrs
[opt
]) != 'undefined') {
3370 set(axis
, new_opt
, attrs
[opt
]);
3371 delete my_attrs
[opt
];
3375 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3376 map('xValueFormatter', 'x', 'valueFormatter');
3377 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3378 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3379 map('xTicker', 'x', 'ticker');
3380 map('yValueFormatter', 'y', 'valueFormatter');
3381 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3382 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3383 map('yTicker', 'y', 'ticker');
3388 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3389 * containing div (which has presumably changed size since the dygraph was
3390 * instantiated. If the width/height are specified, the div will be resized.
3392 * This is far more efficient than destroying and re-instantiating a
3393 * Dygraph, since it doesn't have to reparse the underlying data.
3395 * @param {Number} [width] Width (in pixels)
3396 * @param {Number} [height] Height (in pixels)
3398 Dygraph
.prototype.resize
= function(width
, height
) {
3399 if (this.resize_lock
) {
3402 this.resize_lock
= true;
3404 if ((width
=== null) != (height
=== null)) {
3405 this.warn("Dygraph.resize() should be called with zero parameters or " +
3406 "two non-NULL parameters. Pretending it was zero.");
3407 width
= height
= null;
3410 var old_width
= this.width_
;
3411 var old_height
= this.height_
;
3414 this.maindiv_
.style
.width
= width
+ "px";
3415 this.maindiv_
.style
.height
= height
+ "px";
3416 this.width_
= width
;
3417 this.height_
= height
;
3419 this.width_
= this.maindiv_
.clientWidth
;
3420 this.height_
= this.maindiv_
.clientHeight
;
3423 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3424 // TODO(danvk): there should be a clear() method.
3425 this.maindiv_
.innerHTML
= "";
3426 this.roller_
= null;
3427 this.attrs_
.labelsDiv
= null;
3428 this.createInterface_();
3429 if (this.annotations_
.length
) {
3430 // createInterface_ reset the layout, so we need to do this.
3431 this.layout_
.setAnnotations(this.annotations_
);
3436 this.resize_lock
= false;
3440 * Adjusts the number of points in the rolling average. Updates the graph to
3441 * reflect the new averaging period.
3442 * @param {Number} length Number of points over which to average the data.
3444 Dygraph
.prototype.adjustRoll
= function(length
) {
3445 this.rollPeriod_
= length
;
3450 * Returns a boolean array of visibility statuses.
3452 Dygraph
.prototype.visibility
= function() {
3453 // Do lazy-initialization, so that this happens after we know the number of
3455 if (!this.attr_("visibility")) {
3456 this.attrs_
.visibility
= [];
3458 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3459 while (this.attr_("visibility").length
< this.numColumns() - 1) {
3460 this.attrs_
.visibility
.push(true);
3462 return this.attr_("visibility");
3466 * Changes the visiblity of a series.
3468 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3469 var x
= this.visibility();
3470 if (num
< 0 || num
>= x
.length
) {
3471 this.warn("invalid series number in setVisibility: " + num
);
3479 * How large of an area will the dygraph render itself in?
3480 * This is used for testing.
3481 * @return A {width: w, height: h} object.
3484 Dygraph
.prototype.size
= function() {
3485 return { width
: this.width_
, height
: this.height_
};
3489 * Update the list of annotations and redraw the chart.
3490 * See dygraphs.com/annotations.html for more info on how to use annotations.
3491 * @param ann {Array} An array of annotation objects.
3492 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3494 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3495 // Only add the annotation CSS rule once we know it will be used.
3496 Dygraph
.addAnnotationRule();
3497 this.annotations_
= ann
;
3498 this.layout_
.setAnnotations(this.annotations_
);
3499 if (!suppressDraw
) {
3505 * Return the list of annotations.
3507 Dygraph
.prototype.annotations
= function() {
3508 return this.annotations_
;
3512 * Get the list of label names for this graph. The first column is the
3513 * x-axis, so the data series names start at index 1.
3515 Dygraph
.prototype.getLabels
= function() {
3516 return this.attr_("labels").slice();
3520 * Get the index of a series (column) given its name. The first column is the
3521 * x-axis, so the data series start with index 1.
3523 Dygraph
.prototype.indexFromSetName
= function(name
) {
3524 return this.setIndexByName_
[name
];
3528 * Get the internal dataset index given its name. These are numbered starting from 0,
3529 * and only count visible sets.
3532 Dygraph
.prototype.datasetIndexFromSetName_
= function(name
) {
3533 return this.datasetIndex_
[this.indexFromSetName(name
)];
3538 * Adds a default style for the annotation CSS classes to the document. This is
3539 * only executed when annotations are actually used. It is designed to only be
3540 * called once -- all calls after the first will return immediately.
3542 Dygraph
.addAnnotationRule
= function() {
3543 // TODO(danvk): move this function into plugins/annotations.js
?
3544 if (Dygraph
.addedAnnotationCSS
) return;
3546 var rule
= "border: 1px solid black; " +
3547 "background-color: white; " +
3548 "text-align: center;";
3550 var styleSheetElement
= document
.createElement("style");
3551 styleSheetElement
.type
= "text/css";
3552 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3554 // Find the first style sheet that we can access.
3555 // We may not add a rule to a style sheet from another domain for security
3556 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3557 // adds its own style sheets from google.com.
3558 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3559 if (document
.styleSheets
[i
].disabled
) continue;
3560 var mysheet
= document
.styleSheets
[i
];
3562 if (mysheet
.insertRule
) { // Firefox
3563 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3564 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3565 } else if (mysheet
.addRule
) { // IE
3566 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3568 Dygraph
.addedAnnotationCSS
= true;
3571 // Was likely a security exception.
3575 this.warn("Unable to add default annotation CSS rule; display may be off.");
3578 // Older pages may still use this name.
3579 var DateGraph
= Dygraph
;