3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
8 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
9 * string. Dygraph can handle multiple series with or without error bars. The
10 * date/value ranges will be automatically set. Dygraph uses the
11 * <canvas> tag, so it only works in FF1.5+.
12 * @author danvdk@gmail.com (Dan Vanderkam)
15 <div id="graphdiv" style="width:800px; height:500px;"></div>
16 <script type="text/javascript">
17 new Dygraph(document.getElementById("graphdiv"),
18 "datafile.csv", // CSV file with headers
22 The CSV file is of the form
24 Date,SeriesA,SeriesB,SeriesC
28 If the 'errorBars' option is set in the constructor, the input should be of
30 Date,SeriesA,SeriesB,...
31 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
32 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
34 If the 'fractions' option is set, the input should be of the form:
36 Date,SeriesA,SeriesB,...
37 YYYYMMDD,A1/B1,A2/B2,...
38 YYYYMMDD,A1/B1,A2/B2,...
40 And error bars will be calculated automatically using a binomial distribution.
42 For further documentation and examples, see http://dygraphs.com/
46 /*jshint globalstrict: true */
47 /*global DygraphRangeSelector:false, DygraphLayout:false, DygraphCanvasRenderer:false, G_vmlCanvasManager:false */
51 * Creates an interactive, zoomable chart.
54 * @param {div | String} div A div or the id of a div into which to construct
56 * @param {String | Function} file A file containing CSV data or a function
57 * that returns this data. The most basic expected format for each line is
58 * "YYYY/MM/DD,val1,val2,...". For more information, see
59 * http://dygraphs.com/data.html.
60 * @param {Object} attrs Various other attributes, e.g. errorBars determines
61 * whether the input data contains error ranges. For a complete list of
62 * options, see http://dygraphs.com/options.html.
64 var Dygraph
= function(div
, data
, opts
, opt_fourth_param
) {
65 if (opt_fourth_param
!== undefined
) {
66 // Old versions of dygraphs took in the series labels as a constructor
67 // parameter. This doesn't make sense anymore, but it's easy to continue
68 // to support this usage.
69 this.warn("Using deprecated four-argument dygraph constructor");
70 this.__old_init__(div
, data
, opts
, opt_fourth_param
);
72 this.__init__(div
, data
, opts
);
76 Dygraph
.NAME
= "Dygraph";
77 Dygraph
.VERSION
= "1.2";
78 Dygraph
.__repr__
= function() {
79 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
83 * Returns information about the Dygraph class.
85 Dygraph
.toString
= function() {
86 return this.__repr__();
89 // Various default values
90 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
91 Dygraph
.DEFAULT_WIDTH
= 480;
92 Dygraph
.DEFAULT_HEIGHT
= 320;
94 Dygraph
.ANIMATION_STEPS
= 10;
95 Dygraph
.ANIMATION_DURATION
= 200;
97 // These are defined before DEFAULT_ATTRS so that it can refer to them.
100 * Return a string version of a number. This respects the digitsAfterDecimal
101 * and maxNumberWidth options.
102 * @param {Number} x The number to be formatted
103 * @param {Dygraph} opts An options view
104 * @param {String} name The name of the point's data series
105 * @param {Dygraph} g The dygraph object
107 Dygraph
.numberValueFormatter
= function(x
, opts
, pt
, g
) {
108 var sigFigs
= opts('sigFigs');
110 if (sigFigs
!== null) {
111 // User has opted for a fixed number of significant figures.
112 return Dygraph
.floatFormat(x
, sigFigs
);
115 var digits
= opts('digitsAfterDecimal');
116 var maxNumberWidth
= opts('maxNumberWidth');
118 // switch to scientific notation if we underflow or overflow fixed display.
120 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
121 Math
.abs(x
) < Math
.pow(10, -digits
))) {
122 return x
.toExponential(digits
);
124 return '' + Dygraph
.round_(x
, digits
);
129 * variant for use as an axisLabelFormatter.
132 Dygraph
.numberAxisLabelFormatter
= function(x
, granularity
, opts
, g
) {
133 return Dygraph
.numberValueFormatter(x
, opts
, g
);
137 * Convert a JS date (millis since epoch) to YYYY/MM/DD
138 * @param {Number} date The JavaScript date (ms since epoch)
139 * @return {String} A date of the form "YYYY/MM/DD"
142 Dygraph
.dateString_
= function(date
) {
143 var zeropad
= Dygraph
.zeropad
;
144 var d
= new Date(date
);
147 var year
= "" + d
.getFullYear();
148 // Get a 0 padded month string
149 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
150 // Get a 0 padded day string
151 var day
= zeropad(d
.getDate());
154 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
155 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
157 return year
+ "/" + month + "/" + day
+ ret
;
161 * Convert a JS date to a string appropriate to display on an axis that
162 * is displaying values at the stated granularity.
163 * @param {Date} date The date to format
164 * @param {Number} granularity One of the Dygraph granularity constants
165 * @return {String} The formatted date
168 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
169 if (granularity
>= Dygraph
.DECADAL
) {
170 return date
.strftime('%Y');
171 } else if (granularity
>= Dygraph
.MONTHLY
) {
172 return date
.strftime('%b %y');
174 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
175 if (frac
=== 0 || granularity
>= Dygraph
.DAILY
) {
176 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
178 return Dygraph
.hmsString_(date
.getTime());
184 * Standard plotters. These may be used by clients.
185 * Available plotters are:
186 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
187 * - Dygraph.Plotters.errorPlotter: draws error bars
188 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
190 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
191 * This causes all the lines to be drawn over all the fills/error bars.
193 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
196 // Default attribute values.
197 Dygraph
.DEFAULT_ATTRS
= {
198 highlightCircleSize
: 3,
199 highlightSeriesOpts
: null,
200 highlightSeriesBackgroundAlpha
: 0.5,
204 // TODO(danvk): move defaults from createStatusMessage_ here.
206 labelsSeparateLines
: false,
207 labelsShowZeroValues
: true,
210 showLabelsOnHighlight
: true,
212 digitsAfterDecimal
: 2,
217 strokeBorderWidth
: 0,
218 strokeBorderColor
: "white",
221 axisLabelFontSize
: 14,
227 xValueParser
: Dygraph
.dateParser
,
234 wilsonInterval
: true, // only relevant if fractions is true
238 connectSeparatedPoints
: false,
241 hideOverlayOnMouseOut
: true,
243 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
244 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
248 drawAxesAtZero
: false,
250 // Sizes of the various chart labels.
257 axisLineColor
: "black",
260 axisLabelColor
: "black",
261 axisLabelFont
: "Arial", // TODO(danvk): is this implemented?
265 gridLineColor
: "rgb(128,128,128)",
267 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
268 animatedZooms
: false, // (for now)
270 // Range selector options
271 showRangeSelector
: false,
272 rangeSelectorHeight
: 40,
273 rangeSelectorPlotStrokeColor
: "#808FAB",
274 rangeSelectorPlotFillColor
: "#A7B1C4",
276 // The ordering here ensures that central lines always appear above any
277 // fill bars/error bars
.
279 Dygraph
.Plotters
.fillPlotter
,
280 Dygraph
.Plotters
.errorPlotter
,
281 Dygraph
.Plotters
.linePlotter
288 axisLabelFormatter
: Dygraph
.dateAxisFormatter
,
289 valueFormatter
: Dygraph
.dateString_
,
290 ticker
: null // will be set in dygraph-tickers.js
294 valueFormatter
: Dygraph
.numberValueFormatter
,
295 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
296 ticker
: null // will be set in dygraph-tickers.js
300 valueFormatter
: Dygraph
.numberValueFormatter
,
301 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
302 ticker
: null // will be set in dygraph-tickers.js
307 // Directions for panning and zooming. Use bit operations when combined
308 // values are possible.
309 Dygraph
.HORIZONTAL
= 1;
310 Dygraph
.VERTICAL
= 2;
312 // Installed plugins, in order of precedence (most-general to most-specific).
313 // Plugins are installed after they are defined, in plugins/install.js
.
317 // Used for initializing annotation CSS rules only once.
318 Dygraph
.addedAnnotationCSS
= false;
320 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
321 // Labels is no longer a constructor parameter, since it's typically set
322 // directly from the data source. It also conains a name for the x-axis,
323 // which the previous constructor form did not.
324 if (labels
!== null) {
325 var new_labels
= ["Date"];
326 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
327 Dygraph
.update(attrs
, { 'labels': new_labels
});
329 this.__init__(div
, file
, attrs
);
333 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
334 * and context <canvas> inside of it. See the constructor for details.
336 * @param {Element} div the Element to render the graph into.
337 * @param {String | Function} file Source data
338 * @param {Object} attrs Miscellaneous other options
341 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
342 // Hack for IE: if we're using excanvas and the document hasn't finished
343 // loading yet (and hence may not have initialized whatever it needs to
344 // initialize), then keep calling this routine periodically until it has.
345 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
346 typeof(G_vmlCanvasManager
) != 'undefined' &&
347 document
.readyState
!= 'complete') {
349 setTimeout(function() { self
.__init__(div
, file
, attrs
); }, 100);
353 // Support two-argument constructor
354 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
356 attrs
= Dygraph
.mapLegacyOptions_(attrs
);
359 Dygraph
.error("Constructing dygraph with a non-existent div!");
363 this.isUsingExcanvas_
= typeof(G_vmlCanvasManager
) != 'undefined';
365 // Copy the important bits into the object
366 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
369 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
370 this.previousVerticalX_
= -1;
371 this.fractions_
= attrs
.fractions
|| false;
372 this.dateWindow_
= attrs
.dateWindow
|| null;
374 this.is_initial_draw_
= true;
375 this.annotations_
= [];
377 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
378 this.zoomed_x_
= false;
379 this.zoomed_y_
= false;
381 // Clear the div. This ensure that, if multiple dygraphs are passed the same
382 // div, then only one will be drawn.
385 // For historical reasons, the 'width' and 'height' options trump all CSS
386 // rules _except_ for an explicit 'width' or 'height' on the div.
387 // As an added convenience, if the div has zero height (like <div></div> does
388 // without any styles), then we use a default height/width
.
389 if (div
.style
.width
=== '' && attrs
.width
) {
390 div
.style
.width
= attrs
.width
+ "px";
392 if (div
.style
.height
=== '' && attrs
.height
) {
393 div
.style
.height
= attrs
.height
+ "px";
395 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
396 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
397 if (div
.style
.width
=== '') {
398 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
401 // these will be zero if the dygraph's div is hidden.
402 this.width_
= div
.clientWidth
;
403 this.height_
= div
.clientHeight
;
405 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
406 if (attrs
.stackedGraph
) {
407 attrs
.fillGraph
= true;
408 // TODO(nikhilk): Add any other stackedGraph checks here.
411 // These two options have a bad interaction. See issue 359.
412 if (attrs
.showRangeSelector
&& attrs
.animatedZooms
) {
413 this.warn('You should not set animatedZooms=true when using the range selector.');
414 attrs
.animatedZooms
= false;
417 // Dygraphs has many options, some of which interact with one another.
418 // To keep track of everything, we maintain two sets of options:
420 // this.user_attrs_ only options explicitly set by the user.
421 // this.attrs_ defaults, options derived from user_attrs_, data.
423 // Options are then accessed this.attr_('attr'), which first looks at
424 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
425 // defaults without overriding behavior that the user specifically asks for.
426 this.user_attrs_
= {};
427 Dygraph
.update(this.user_attrs_
, attrs
);
429 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
431 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
433 this.boundaryIds_
= [];
434 this.setIndexByName_
= {};
435 this.datasetIndex_
= [];
437 this.registeredEvents_
= [];
438 this.eventListeners_
= {};
440 this.attributes_
= new DygraphOptions(this);
442 // Create the containing DIV and other interactive elements
443 this.createInterface_();
447 for (var i
= 0; i
< Dygraph
.PLUGINS
.length
; i
++) {
448 var Plugin
= Dygraph
.PLUGINS
[i
];
449 var pluginInstance
= new Plugin();
451 plugin
: pluginInstance
,
457 var handlers
= pluginInstance
.activate(this);
458 for (var eventName
in handlers
) {
459 // TODO(danvk): validate eventName.
460 pluginDict
.events
[eventName
] = handlers
[eventName
];
463 this.plugins_
.push(pluginDict
);
466 // At this point, plugins can no longer register event handlers.
467 // Construct a map from event -> ordered list of [callback, plugin].
468 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
469 var plugin_dict
= this.plugins_
[i
];
470 for (var eventName
in plugin_dict
.events
) {
471 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
472 var callback
= plugin_dict
.events
[eventName
];
474 var pair
= [plugin_dict
.plugin
, callback
];
475 if (!(eventName
in this.eventListeners_
)) {
476 this.eventListeners_
[eventName
] = [pair
];
478 this.eventListeners_
[eventName
].push(pair
);
487 * Triggers a cascade of events to the various plugins which are interested in them.
488 * Returns true if the "default behavior" should be performed, i.e. if none of
489 * the event listeners called event.preventDefault().
492 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
493 if (!(name
in this.eventListeners_
)) return true;
495 // QUESTION: can we use objects & prototypes to speed this up?
499 defaultPrevented
: false,
500 preventDefault
: function() {
501 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
502 e
.defaultPrevented
= true;
504 propagationStopped
: false,
505 stopPropagation
: function() {
506 e
.propagationStopped
= true;
509 Dygraph
.update(e
, extra_props
);
511 var callback_plugin_pairs
= this.eventListeners_
[name
];
512 if (callback_plugin_pairs
) {
513 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
514 var plugin
= callback_plugin_pairs
[i
][0];
515 var callback
= callback_plugin_pairs
[i
][1];
516 callback
.call(plugin
, e
);
517 if (e
.propagationStopped
) break;
520 return e
.defaultPrevented
;
524 * Returns the zoomed status of the chart for one or both axes.
526 * Axis is an optional parameter. Can be set to 'x' or 'y'.
528 * The zoomed status for an axis is set whenever a user zooms using the mouse
529 * or when the dateWindow or valueRange are updated (unless the
530 * isZoomedIgnoreProgrammaticZoom option is also specified).
532 Dygraph
.prototype.isZoomed
= function(axis
) {
533 if (axis
=== null || axis
=== undefined
) {
534 return this.zoomed_x_
|| this.zoomed_y_
;
536 if (axis
=== 'x') return this.zoomed_x_
;
537 if (axis
=== 'y') return this.zoomed_y_
;
538 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
542 * Returns information about the Dygraph object, including its containing ID.
544 Dygraph
.prototype.toString
= function() {
545 var maindiv
= this.maindiv_
;
546 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
547 return "[Dygraph " + id
+ "]";
552 * Returns the value of an option. This may be set by the user (either in the
553 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
555 * @param { String } name The name of the option, e.g. 'rollPeriod'.
556 * @param { String } [seriesName] The name of the series to which the option
557 * will be applied. If no per-series value of this option is available, then
558 * the global value is returned. This is optional.
559 * @return { ... } The value of the option.
561 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
562 // <REMOVE_FOR_COMBINED>
563 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
564 this.error('Must include options reference JS for testing');
565 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
566 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
567 'in the Dygraphs.OPTIONS_REFERENCE listing.');
568 // Only log this error once.
569 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
571 // </REMOVE_FOR_COMBINED
>
573 // Building an array which we peruse in backwards order to find the correct value.
574 // Options are checked in this order:
575 // series, axis, user attrs, global attrs.
576 // TODO(konigsberg): Can this be made faster by starting with the series and working outward,
577 // rather than building an array?
580 sources
.push(this.attrs_
);
581 if (this.user_attrs_
) {
582 sources
.push(this.user_attrs_
);
584 if (this.user_attrs_
.hasOwnProperty(seriesName
)) {
585 sources
.push(this.user_attrs_
[seriesName
]);
588 // TODO(konigsberg): This special case ought to be documented.
589 if (seriesName
=== this.highlightSet_
&&
590 this.user_attrs_
.hasOwnProperty('highlightSeriesOpts')) {
591 sources
.push(this.user_attrs_
.highlightSeriesOpts
);
597 for (var i
= sources
.length
- 1; i
>= 0; --i
) {
598 var source
= sources
[i
];
599 if (source
.hasOwnProperty(name
)) {
605 var computedValue
= seriesName
? this.attributes_
.findForSeries(name
, seriesName
) : this.attributes_
.find(name
);
606 if (ret
!== computedValue
) {
607 console
.log("Mismatch", name
, seriesName
, ret
, computedValue
);
610 var USE_NEW_VALUE
= true;
611 return USE_NEW_VALUE
? computedValue
: ret
;
615 * Returns the current value for an option, as set in the constructor or via
616 * updateOptions. You may pass in an (optional) series name to get per-series
617 * values for the option.
619 * All values returned by this method should be considered immutable. If you
620 * modify them, there is no guarantee that the changes will be honored or that
621 * dygraphs will remain in a consistent state. If you want to modify an option,
622 * use updateOptions() instead.
624 * @param { String } name The name of the option (e.g. 'strokeWidth')
625 * @param { String } [opt_seriesName] Series name to get per-series values.
626 * @return { ... } The value of the option.
628 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
629 return this.attr_(name
, opt_seriesName
);
634 * @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2')
635 * @return { ... } A function mapping string -> option value
637 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
639 return function(opt
) {
640 var axis_opts
= self
.user_attrs_
.axes
;
641 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
][opt
]) {
642 return axis_opts
[axis
][opt
];
644 // user-specified attributes always trump defaults, even if they're less
646 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
647 return self
.user_attrs_
[opt
];
650 axis_opts
= self
.attrs_
.axes
;
651 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
][opt
]) {
652 return axis_opts
[axis
][opt
];
654 // check old-style axis options
655 // TODO(danvk): add a deprecation warning if either of these match.
656 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
657 return self
.axes_
[0][opt
];
658 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
659 return self
.axes_
[1][opt
];
661 return self
.attr_(opt
);
666 * Returns the current rolling period, as set by the user or an option.
667 * @return {Number} The number of points in the rolling window
669 Dygraph
.prototype.rollPeriod
= function() {
670 return this.rollPeriod_
;
674 * Returns the currently-visible x-range. This can be affected by zooming,
675 * panning or a call to updateOptions.
676 * Returns a two-element array: [left, right].
677 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
679 Dygraph
.prototype.xAxisRange
= function() {
680 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
684 * Returns the lower- and upper-bound x-axis values of the
687 Dygraph
.prototype.xAxisExtremes
= function() {
688 var left
= this.rawData_
[0][0];
689 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
690 return [left
, right
];
694 * Returns the currently-visible y-range for an axis. This can be affected by
695 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
696 * called with no arguments, returns the range of the first axis.
697 * Returns a two-element array: [bottom, top].
699 Dygraph
.prototype.yAxisRange
= function(idx
) {
700 if (typeof(idx
) == "undefined") idx
= 0;
701 if (idx
< 0 || idx
>= this.axes_
.length
) {
704 var axis
= this.axes_
[idx
];
705 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
709 * Returns the currently-visible y-ranges for each axis. This can be affected by
710 * zooming, panning, calls to updateOptions, etc.
711 * Returns an array of [bottom, top] pairs, one for each y-axis.
713 Dygraph
.prototype.yAxisRanges
= function() {
715 for (var i
= 0; i
< this.axes_
.length
; i
++) {
716 ret
.push(this.yAxisRange(i
));
721 // TODO(danvk): use these functions throughout dygraphs.
723 * Convert from data coordinates to canvas/div X/Y coordinates.
724 * If specified, do this conversion for the coordinate system of a particular
725 * axis. Uses the first axis by default.
726 * Returns a two-element array: [X, Y]
728 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
729 * instead of toDomCoords(null, y, axis).
731 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
732 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
736 * Convert from data x coordinates to canvas/div X coordinate.
737 * If specified, do this conversion for the coordinate system of a particular
739 * Returns a single value or null if x is null.
741 Dygraph
.prototype.toDomXCoord
= function(x
) {
746 var area
= this.plotter_
.area
;
747 var xRange
= this.xAxisRange();
748 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
752 * Convert from data x coordinates to canvas/div Y coordinate and optional
753 * axis. Uses the first axis by default.
755 * returns a single value or null if y is null.
757 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
758 var pct
= this.toPercentYCoord(y
, axis
);
763 var area
= this.plotter_
.area
;
764 return area
.y
+ pct
* area
.h
;
768 * Convert from canvas/div coords to data coordinates.
769 * If specified, do this conversion for the coordinate system of a particular
770 * axis. Uses the first axis by default.
771 * Returns a two-element array: [X, Y].
773 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
774 * instead of toDataCoords(null, y, axis).
776 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
777 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
781 * Convert from canvas/div x coordinate to data coordinate.
783 * If x is null, this returns null.
785 Dygraph
.prototype.toDataXCoord
= function(x
) {
790 var area
= this.plotter_
.area
;
791 var xRange
= this.xAxisRange();
792 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
796 * Convert from canvas/div y coord to value.
798 * If y is null, this returns null.
799 * if axis is null, this uses the first axis.
801 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
806 var area
= this.plotter_
.area
;
807 var yRange
= this.yAxisRange(axis
);
809 if (typeof(axis
) == "undefined") axis
= 0;
810 if (!this.axes_
[axis
].logscale
) {
811 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
813 // Computing the inverse of toDomCoord.
814 var pct
= (y
- area
.y
) / area
.h
;
816 // Computing the inverse of toPercentYCoord. The function was arrived at with
817 // the following steps:
819 // Original calcuation:
820 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
822 // Move denominator to both sides:
823 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
825 // subtract logr1, and take the negative value.
826 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
828 // Swap both sides of the equation, and we can compute the log of the
829 // return value. Which means we just need to use that as the exponent in
831 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
833 var logr1
= Dygraph
.log10(yRange
[1]);
834 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
835 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
841 * Converts a y for an axis to a percentage from the top to the
842 * bottom of the drawing area.
844 * If the coordinate represents a value visible on the canvas, then
845 * the value will be between 0 and 1, where 0 is the top of the canvas.
846 * However, this method will return values outside the range, as
847 * values can fall outside the canvas.
849 * If y is null, this returns null.
850 * if axis is null, this uses the first axis.
852 * @param { Number } y The data y-coordinate.
853 * @param { Number } [axis] The axis number on which the data coordinate lives.
854 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
856 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
860 if (typeof(axis
) == "undefined") axis
= 0;
862 var yRange
= this.yAxisRange(axis
);
865 if (!this.axes_
[axis
].logscale
) {
866 // yRange[1] - y is unit distance from the bottom.
867 // yRange[1] - yRange[0] is the scale of the range.
868 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
869 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
871 var logr1
= Dygraph
.log10(yRange
[1]);
872 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
878 * Converts an x value to a percentage from the left to the right of
881 * If the coordinate represents a value visible on the canvas, then
882 * the value will be between 0 and 1, where 0 is the left of the canvas.
883 * However, this method will return values outside the range, as
884 * values can fall outside the canvas.
886 * If x is null, this returns null.
887 * @param { Number } x The data x-coordinate.
888 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
890 Dygraph
.prototype.toPercentXCoord
= function(x
) {
895 var xRange
= this.xAxisRange();
896 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
900 * Returns the number of columns (including the independent variable).
901 * @return { Integer } The number of columns.
903 Dygraph
.prototype.numColumns
= function() {
904 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
908 * Returns the number of rows (excluding any header/label row).
909 * @return { Integer } The number of rows, less any header.
911 Dygraph
.prototype.numRows
= function() {
912 return this.rawData_
.length
;
916 * Returns the full range of the x-axis, as determined by the most extreme
917 * values in the data set. Not affected by zooming, visibility, etc.
918 * TODO(danvk): merge w/ xAxisExtremes
919 * @return { Array<Number> } A [low, high] pair
922 Dygraph
.prototype.fullXRange_
= function() {
923 if (this.numRows() > 0) {
924 return [this.rawData_
[0][0], this.rawData_
[this.numRows() - 1][0]];
931 * Returns the value in the given row and column. If the row and column exceed
932 * the bounds on the data, returns null. Also returns null if the value is
934 * @param { Number} row The row number of the data (0-based). Row 0 is the
935 * first row of data, not a header row.
936 * @param { Number} col The column number of the data (0-based)
937 * @return { Number } The value in the specified cell or null if the row/col
940 Dygraph
.prototype.getValue
= function(row
, col
) {
941 if (row
< 0 || row
> this.rawData_
.length
) return null;
942 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
944 return this.rawData_
[row
][col
];
948 * Generates interface elements for the Dygraph: a containing div, a div to
949 * display the current point, and a textbox to adjust the rolling average
950 * period. Also creates the Renderer/Layout elements.
953 Dygraph
.prototype.createInterface_
= function() {
954 // Create the all-enclosing graph div
955 var enclosing
= this.maindiv_
;
957 this.graphDiv
= document
.createElement("div");
958 this.graphDiv
.style
.width
= this.width_
+ "px";
959 this.graphDiv
.style
.height
= this.height_
+ "px";
960 enclosing
.appendChild(this.graphDiv
);
962 // Create the canvas for interactive parts of the chart.
963 this.canvas_
= Dygraph
.createCanvas();
964 this.canvas_
.style
.position
= "absolute";
965 this.canvas_
.width
= this.width_
;
966 this.canvas_
.height
= this.height_
;
967 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
968 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
970 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
972 // ... and for static parts of the chart.
973 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
974 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
976 if (this.attr_('showRangeSelector')) {
977 // The range selector must be created here so that its canvases and contexts get created here.
978 // For some reason, if the canvases and contexts don't get created here, things don't work in IE.
979 this.rangeSelector_
= new DygraphRangeSelector(this);
982 // The interactive parts of the graph are drawn on top of the chart.
983 this.graphDiv
.appendChild(this.hidden_
);
984 this.graphDiv
.appendChild(this.canvas_
);
985 this.mouseEventElement_
= this.createMouseEventElement_();
987 // Create the grapher
988 this.layout_
= new DygraphLayout(this);
990 if (this.rangeSelector_
) {
991 // This needs to happen after the graph canvases are added to the div and the layout object is created.
992 this.rangeSelector_
.addToGraph(this.graphDiv
, this.layout_
);
997 this.mouseMoveHandler
= function(e
) {
998 dygraph
.mouseMove_(e
);
1000 this.addEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler
);
1002 this.mouseOutHandler
= function(e
) {
1003 dygraph
.mouseOut_(e
);
1005 this.addEvent(this.mouseEventElement_
, 'mouseout', this.mouseOutHandler
);
1007 this.createDragInterface_();
1009 this.resizeHandler
= function(e
) {
1013 // Update when the window is resized.
1014 // TODO(danvk): drop frames depending on complexity of the chart.
1015 this.addEvent(window
, 'resize', this.resizeHandler
);
1019 * Detach DOM elements in the dygraph and null out all data references.
1020 * Calling this when you're done with a dygraph can dramatically reduce memory
1021 * usage. See, e.g., the tests/perf.html example.
1023 Dygraph
.prototype.destroy
= function() {
1024 var removeRecursive
= function(node
) {
1025 while (node
.hasChildNodes()) {
1026 removeRecursive(node
.firstChild
);
1027 node
.removeChild(node
.firstChild
);
1031 for (var idx
= 0; idx
< this.registeredEvents_
.length
; idx
++) {
1032 var reg
= this.registeredEvents_
[idx
];
1033 Dygraph
.removeEvent(reg
.elem
, reg
.type
, reg
.fn
);
1035 this.registeredEvents_
= [];
1037 // remove mouse event handlers (This may not be necessary anymore)
1038 Dygraph
.removeEvent(this.mouseEventElement_
, 'mouseout', this.mouseOutHandler
);
1039 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler
);
1040 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseUpHandler_
);
1041 removeRecursive(this.maindiv_
);
1043 var nullOut
= function(obj
) {
1044 for (var n
in obj
) {
1045 if (typeof(obj
[n
]) === 'object') {
1050 // remove event handlers
1051 Dygraph
.removeEvent(window
,'resize',this.resizeHandler
);
1052 this.resizeHandler
= null;
1053 // These may not all be necessary, but it can't hurt...
1054 nullOut(this.layout_
);
1055 nullOut(this.plotter_
);
1060 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1061 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1062 * or the zoom rectangles) is done on this.canvas_.
1063 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1064 * @return {Object} The newly-created canvas
1067 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1068 var h
= Dygraph
.createCanvas();
1069 h
.style
.position
= "absolute";
1070 // TODO(danvk): h should be offset from canvas. canvas needs to include
1071 // some extra area to make it easier to zoom in on the far left and far
1072 // right. h needs to be precisely the plot area, so that clipping occurs.
1073 h
.style
.top
= canvas
.style
.top
;
1074 h
.style
.left
= canvas
.style
.left
;
1075 h
.width
= this.width_
;
1076 h
.height
= this.height_
;
1077 h
.style
.width
= this.width_
+ "px"; // for IE
1078 h
.style
.height
= this.height_
+ "px"; // for IE
1083 * Creates an overlay element used to handle mouse events.
1084 * @return {Object} The mouse event element.
1087 Dygraph
.prototype.createMouseEventElement_
= function() {
1088 if (this.isUsingExcanvas_
) {
1089 var elem
= document
.createElement("div");
1090 elem
.style
.position
= 'absolute';
1091 elem
.style
.backgroundColor
= 'white';
1092 elem
.style
.filter
= 'alpha(opacity=0)';
1093 elem
.style
.width
= this.width_
+ "px";
1094 elem
.style
.height
= this.height_
+ "px";
1095 this.graphDiv
.appendChild(elem
);
1098 return this.canvas_
;
1103 * Generate a set of distinct colors for the data series. This is done with a
1104 * color wheel. Saturation/Value are customizable, and the hue is
1105 * equally-spaced around the color wheel. If a custom set of colors is
1106 * specified, that is used instead.
1109 Dygraph
.prototype.setColors_
= function() {
1110 var labels
= this.getLabels();
1111 var num
= labels
.length
- 1;
1113 this.colorsMap_
= {};
1114 var colors
= this.attr_('colors');
1117 var sat
= this.attr_('colorSaturation') || 1.0;
1118 var val
= this.attr_('colorValue') || 0.5;
1119 var half
= Math
.ceil(num
/ 2);
1120 for (i
= 1; i
<= num
; i
++) {
1121 if (!this.visibility()[i
-1]) continue;
1122 // alternate colors for high contrast.
1123 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
1124 var hue
= (1.0 * idx
/ (1 + num
));
1125 var colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1126 this.colors_
.push(colorStr
);
1127 this.colorsMap_
[labels
[i
]] = colorStr
;
1130 for (i
= 0; i
< num
; i
++) {
1131 if (!this.visibility()[i
]) continue;
1132 var colorStr
= colors
[i
% colors
.length
];
1133 this.colors_
.push(colorStr
);
1134 this.colorsMap_
[labels
[1 + i
]] = colorStr
;
1140 * Return the list of colors. This is either the list of colors passed in the
1141 * attributes or the autogenerated list of rgb(r,g,b) strings.
1142 * This does not return colors for invisible series.
1143 * @return {Array<string>} The list of colors.
1145 Dygraph
.prototype.getColors
= function() {
1146 return this.colors_
;
1150 * Returns a few attributes of a series, i.e. its color, its visibility, which
1151 * axis it's assigned to, and its column in the original data.
1152 * Returns null if the series does not exist.
1153 * Otherwise, returns an object with column, visibility, color and axis properties.
1154 * The "axis" property will be set to 1 for y1 and 2 for y2.
1155 * The "column" property can be fed back into getValue(row, column) to get
1156 * values for this series.
1158 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1160 var labels
= this.getLabels();
1161 for (var i
= 1; i
< labels
.length
; i
++) {
1162 if (labels
[i
] == series_name
) {
1167 if (idx
== -1) return null;
1172 visible
: this.visibility()[idx
- 1],
1173 color
: this.colorsMap_
[series_name
],
1174 axis
: 1 + this.seriesToAxisMap_
[series_name
]
1179 * Create the text box to adjust the averaging period
1182 Dygraph
.prototype.createRollInterface_
= function() {
1183 // Create a roller if one doesn't exist already.
1184 if (!this.roller_
) {
1185 this.roller_
= document
.createElement("input");
1186 this.roller_
.type
= "text";
1187 this.roller_
.style
.display
= "none";
1188 this.graphDiv
.appendChild(this.roller_
);
1191 var display
= this.attr_('showRoller') ? 'block' : 'none';
1193 var area
= this.plotter_
.area
;
1194 var textAttr
= { "position": "absolute",
1196 "top": (area
.y
+ area
.h
- 25) + "px",
1197 "left": (area
.x
+ 1) + "px",
1200 this.roller_
.size
= "2";
1201 this.roller_
.value
= this.rollPeriod_
;
1202 for (var name
in textAttr
) {
1203 if (textAttr
.hasOwnProperty(name
)) {
1204 this.roller_
.style
[name
] = textAttr
[name
];
1209 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1214 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1215 * canvas (i.e. DOM Coords).
1217 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1218 return Dygraph
.pageX(e
) - context
.px
;
1223 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1224 * canvas (i.e. DOM Coords).
1226 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1227 return Dygraph
.pageY(e
) - context
.py
;
1231 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1235 Dygraph
.prototype.createDragInterface_
= function() {
1237 // Tracks whether the mouse is down right now
1239 isPanning
: false, // is this drag part of a pan?
1240 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1241 dragStartX
: null, // pixel coordinates
1242 dragStartY
: null, // pixel coordinates
1243 dragEndX
: null, // pixel coordinates
1244 dragEndY
: null, // pixel coordinates
1245 dragDirection
: null,
1246 prevEndX
: null, // pixel coordinates
1247 prevEndY
: null, // pixel coordinates
1248 prevDragDirection
: null,
1249 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1251 // The value on the left side of the graph when a pan operation starts.
1252 initialLeftmostDate
: null,
1254 // The number of units each pixel spans. (This won't be valid for log
1256 xUnitsPerPixel
: null,
1258 // TODO(danvk): update this comment
1259 // The range in second/value units that the viewport encompasses during a
1260 // panning operation.
1263 // Top-left corner of the canvas, in DOM coords
1264 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1268 // Values for use with panEdgeFraction, which limit how far outside the
1269 // graph's data boundaries it can be panned.
1270 boundedDates
: null, // [minDate, maxDate]
1271 boundedValues
: null, // [[minValue, maxValue] ...]
1273 // We cover iframes during mouse interactions. See comments in
1274 // dygraph-utils.js for more info on why this is a good idea.
1275 tarp
: new Dygraph
.IFrameTarp(),
1277 // contextB is the same thing as this context object but renamed.
1278 initializeMouseDown
: function(event
, g
, contextB
) {
1279 // prevents mouse drags from selecting page text.
1280 if (event
.preventDefault
) {
1281 event
.preventDefault(); // Firefox, Chrome, etc.
1283 event
.returnValue
= false; // IE
1284 event
.cancelBubble
= true;
1287 contextB
.px
= Dygraph
.findPosX(g
.canvas_
);
1288 contextB
.py
= Dygraph
.findPosY(g
.canvas_
);
1289 contextB
.dragStartX
= g
.dragGetX_(event
, contextB
);
1290 contextB
.dragStartY
= g
.dragGetY_(event
, contextB
);
1291 contextB
.cancelNextDblclick
= false;
1292 contextB
.tarp
.cover();
1296 var interactionModel
= this.attr_("interactionModel");
1298 // Self is the graph.
1301 // Function that binds the graph and context to the handler.
1302 var bindHandler
= function(handler
) {
1303 return function(event
) {
1304 handler(event
, self
, context
);
1308 for (var eventName
in interactionModel
) {
1309 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1310 this.addEvent(this.mouseEventElement_
, eventName
,
1311 bindHandler(interactionModel
[eventName
]));
1314 // If the user releases the mouse button during a drag, but not over the
1315 // canvas, then it doesn't count as a zooming action.
1316 this.mouseUpHandler_
= function(event
) {
1317 if (context
.isZooming
|| context
.isPanning
) {
1318 context
.isZooming
= false;
1319 context
.dragStartX
= null;
1320 context
.dragStartY
= null;
1323 if (context
.isPanning
) {
1324 context
.isPanning
= false;
1325 context
.draggingDate
= null;
1326 context
.dateRange
= null;
1327 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1328 delete self
.axes_
[i
].draggingValue
;
1329 delete self
.axes_
[i
].dragValueRange
;
1333 context
.tarp
.uncover();
1336 this.addEvent(document
, 'mouseup', this.mouseUpHandler_
);
1340 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1341 * up any previous zoom rectangles that were drawn. This could be optimized to
1342 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1345 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1346 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1347 * @param {Number} startX The X position where the drag started, in canvas
1349 * @param {Number} endX The current X position of the drag, in canvas coords.
1350 * @param {Number} startY The Y position where the drag started, in canvas
1352 * @param {Number} endY The current Y position of the drag, in canvas coords.
1353 * @param {Number} prevDirection the value of direction on the previous call to
1354 * this function. Used to avoid excess redrawing
1355 * @param {Number} prevEndX The value of endX on the previous call to this
1356 * function. Used to avoid excess redrawing
1357 * @param {Number} prevEndY The value of endY on the previous call to this
1358 * function. Used to avoid excess redrawing
1361 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1362 endY
, prevDirection
, prevEndX
,
1364 var ctx
= this.canvas_ctx_
;
1366 // Clean up from the previous rect if necessary
1367 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1368 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1369 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1370 } else if (prevDirection
== Dygraph
.VERTICAL
){
1371 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1372 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1375 // Draw a light-grey rectangle to show the new viewing area
1376 if (direction
== Dygraph
.HORIZONTAL
) {
1377 if (endX
&& startX
) {
1378 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1379 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1380 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1382 } else if (direction
== Dygraph
.VERTICAL
) {
1383 if (endY
&& startY
) {
1384 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1385 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1386 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1390 if (this.isUsingExcanvas_
) {
1391 this.currentZoomRectArgs_
= [direction
, startX
, endX
, startY
, endY
, 0, 0, 0];
1396 * Clear the zoom rectangle (and perform no zoom).
1399 Dygraph
.prototype.clearZoomRect_
= function() {
1400 this.currentZoomRectArgs_
= null;
1401 this.canvas_ctx_
.clearRect(0, 0, this.canvas_
.width
, this.canvas_
.height
);
1405 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1406 * the canvas. The exact zoom window may be slightly larger if there are no data
1407 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1408 * which accepts dates that match the raw data. This function redraws the graph.
1410 * @param {Number} lowX The leftmost pixel value that should be visible.
1411 * @param {Number} highX The rightmost pixel value that should be visible.
1414 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1415 this.currentZoomRectArgs_
= null;
1416 // Find the earliest and latest dates contained in this canvasx range.
1417 // Convert the call to date ranges of the raw data.
1418 var minDate
= this.toDataXCoord(lowX
);
1419 var maxDate
= this.toDataXCoord(highX
);
1420 this.doZoomXDates_(minDate
, maxDate
);
1424 * Transition function to use in animations. Returns values between 0.0
1425 * (totally old values) and 1.0 (totally new values) for each frame.
1428 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1430 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1434 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1435 * method with doZoomX which accepts pixel coordinates. This function redraws
1438 * @param {Number} minDate The minimum date that should be visible.
1439 * @param {Number} maxDate The maximum date that should be visible.
1442 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1443 // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation
1444 // can produce strange effects. Rather than the y-axis transitioning slowly
1445 // between values, it can jerk around.)
1446 var old_window
= this.xAxisRange();
1447 var new_window
= [minDate
, maxDate
];
1448 this.zoomed_x_
= true;
1450 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1451 if (that
.attr_("zoomCallback")) {
1452 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1458 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1459 * the canvas. This function redraws the graph.
1461 * @param {Number} lowY The topmost pixel value that should be visible.
1462 * @param {Number} highY The lowest pixel value that should be visible.
1465 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1466 this.currentZoomRectArgs_
= null;
1467 // Find the highest and lowest values in pixel range for each axis.
1468 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1469 // This is because pixels increase as you go down on the screen, whereas data
1470 // coordinates increase as you go up the screen.
1471 var oldValueRanges
= this.yAxisRanges();
1472 var newValueRanges
= [];
1473 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1474 var hi
= this.toDataYCoord(lowY
, i
);
1475 var low
= this.toDataYCoord(highY
, i
);
1476 newValueRanges
.push([low
, hi
]);
1479 this.zoomed_y_
= true;
1481 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1482 if (that
.attr_("zoomCallback")) {
1483 var xRange
= that
.xAxisRange();
1484 that
.attr_("zoomCallback")(xRange
[0], xRange
[1], that
.yAxisRanges());
1490 * Reset the zoom to the original view coordinates. This is the same as
1491 * double-clicking on the graph.
1495 Dygraph
.prototype.doUnzoom_
= function() {
1496 var dirty
= false, dirtyX
= false, dirtyY
= false;
1497 if (this.dateWindow_
!== null) {
1502 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1503 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1509 // Clear any selection, since it's likely to be drawn in the wrong place.
1510 this.clearSelection();
1513 this.zoomed_x_
= false;
1514 this.zoomed_y_
= false;
1516 var minDate
= this.rawData_
[0][0];
1517 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1519 // With only one frame, don't bother calculating extreme ranges.
1520 // TODO(danvk): merge this block w/ the code below
.
1521 if (!this.attr_("animatedZooms")) {
1522 this.dateWindow_
= null;
1523 for (i
= 0; i
< this.axes_
.length
; i
++) {
1524 if (this.axes_
[i
].valueWindow
!== null) {
1525 delete this.axes_
[i
].valueWindow
;
1529 if (this.attr_("zoomCallback")) {
1530 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1535 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1537 oldWindow
= this.xAxisRange();
1538 newWindow
= [minDate
, maxDate
];
1542 oldValueRanges
= this.yAxisRanges();
1543 // TODO(danvk): this is pretty inefficient
1544 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1545 var extremes
= packed
[1];
1547 // this has the side-effect of modifying this.axes_.
1548 // this doesn't make much sense in this context, but it's convenient (we
1549 // need this.axes_[*].extremeValues) and not harmful since we'll be
1550 // calling drawGraph_ shortly, which clobbers these values.
1551 this.computeYAxisRanges_(extremes
);
1553 newValueRanges
= [];
1554 for (i
= 0; i
< this.axes_
.length
; i
++) {
1555 var axis
= this.axes_
[i
];
1556 newValueRanges
.push((axis
.valueRange
!== null &&
1557 axis
.valueRange
!== undefined
) ?
1558 axis
.valueRange
: axis
.extremeRange
);
1563 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1565 that
.dateWindow_
= null;
1566 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1567 if (that
.axes_
[i
].valueWindow
!== null) {
1568 delete that
.axes_
[i
].valueWindow
;
1571 if (that
.attr_("zoomCallback")) {
1572 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1579 * Combined animation logic for all zoom functions.
1580 * either the x parameters or y parameters may be null.
1583 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1584 var steps
= this.attr_("animatedZooms") ? Dygraph
.ANIMATION_STEPS
: 1;
1587 var valueRanges
= [];
1590 if (oldXRange
!== null && newXRange
!== null) {
1591 for (step
= 1; step
<= steps
; step
++) {
1592 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1593 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1594 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1598 if (oldYRanges
!== null && newYRanges
!== null) {
1599 for (step
= 1; step
<= steps
; step
++) {
1600 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1602 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1603 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1604 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1606 valueRanges
[step
-1] = thisRange
;
1611 Dygraph
.repeatAndCleanup(function(step
) {
1612 if (valueRanges
.length
) {
1613 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1614 var w
= valueRanges
[step
][i
];
1615 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1618 if (windows
.length
) {
1619 that
.dateWindow_
= windows
[step
];
1622 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1626 * Get the current graph's area object.
1628 * Returns: {x, y, w, h}
1630 Dygraph
.prototype.getArea
= function() {
1631 return this.plotter_
.area
;
1635 * Convert a mouse event to DOM coordinates relative to the graph origin.
1637 * Returns a two-element array: [X, Y].
1639 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1640 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1641 var canvasy
= Dygraph
.pageY(event
) - Dygraph
.findPosY(this.mouseEventElement_
);
1642 return [canvasx
, canvasy
];
1646 * Given a canvas X coordinate, find the closest row.
1647 * @param {Number} domX graph-relative DOM X coordinate
1648 * Returns: row number, integer
1651 Dygraph
.prototype.findClosestRow
= function(domX
) {
1652 var minDistX
= Infinity
;
1653 var pointIdx
= -1, setIdx
= -1;
1654 var sets
= this.layout_
.points
;
1655 for (var i
= 0; i
< sets
.length
; i
++) {
1656 var points
= sets
[i
];
1657 var len
= points
.length
;
1658 for (var j
= 0; j
< len
; j
++) {
1659 var point
= points
[j
];
1660 if (!Dygraph
.isValidPoint(point
, true)) continue;
1661 var dist
= Math
.abs(point
.canvasx
- domX
);
1662 if (dist
< minDistX
) {
1670 // TODO(danvk): remove this function; it's trivial and has only one use.
1671 return this.idxToRow_(setIdx
, pointIdx
);
1675 * Given canvas X,Y coordinates, find the closest point.
1677 * This finds the individual data point across all visible series
1678 * that's closest to the supplied DOM coordinates using the standard
1679 * Euclidean X,Y distance.
1681 * @param {Number} domX graph-relative DOM X coordinate
1682 * @param {Number} domY graph-relative DOM Y coordinate
1683 * Returns: {row, seriesName, point}
1686 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1687 var minDist
= Infinity
;
1689 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
;
1690 for ( var setIdx
= this.layout_
.datasets
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1691 var points
= this.layout_
.points
[setIdx
];
1692 for (var i
= 0; i
< points
.length
; ++i
) {
1693 var point
= points
[i
];
1694 if (!Dygraph
.isValidPoint(point
)) continue;
1695 dx
= point
.canvasx
- domX
;
1696 dy
= point
.canvasy
- domY
;
1697 dist
= dx
* dx
+ dy
* dy
;
1698 if (dist
< minDist
) {
1700 closestPoint
= point
;
1701 closestSeries
= setIdx
;
1706 var name
= this.layout_
.setNames
[closestSeries
];
1708 row
: idx
+ this.getLeftBoundary_(),
1715 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1717 * This first finds the X data point closest to the supplied DOM X coordinate,
1718 * then finds the series which puts the Y coordinate on top of its filled area,
1719 * using linear interpolation between adjacent point pairs.
1721 * @param {Number} domX graph-relative DOM X coordinate
1722 * @param {Number} domY graph-relative DOM Y coordinate
1723 * Returns: {row, seriesName, point}
1726 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1727 var row
= this.findClosestRow(domX
);
1728 var boundary
= this.getLeftBoundary_();
1729 var rowIdx
= row
- boundary
;
1730 var sets
= this.layout_
.points
;
1731 var closestPoint
, closestSeries
;
1732 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
1733 var points
= this.layout_
.points
[setIdx
];
1734 if (rowIdx
>= points
.length
) continue;
1735 var p1
= points
[rowIdx
];
1736 if (!Dygraph
.isValidPoint(p1
)) continue;
1737 var py
= p1
.canvasy
;
1738 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1739 // interpolate series Y value using next point
1740 var p2
= points
[rowIdx
+ 1];
1741 if (Dygraph
.isValidPoint(p2
)) {
1742 var dx
= p2
.canvasx
- p1
.canvasx
;
1744 var r
= (domX
- p1
.canvasx
) / dx
;
1745 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1748 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1749 // interpolate series Y value using previous point
1750 var p0
= points
[rowIdx
- 1];
1751 if (Dygraph
.isValidPoint(p0
)) {
1752 var dx
= p1
.canvasx
- p0
.canvasx
;
1754 var r
= (p1
.canvasx
- domX
) / dx
;
1755 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1759 // Stop if the point (domX, py) is above this series' upper edge
1760 if (setIdx
=== 0 || py
< domY
) {
1762 closestSeries
= setIdx
;
1765 var name
= this.layout_
.setNames
[closestSeries
];
1774 * When the mouse moves in the canvas, display information about a nearby data
1775 * point and draw dots over those points in the data series. This function
1776 * takes care of cleanup of previously-drawn dots.
1777 * @param {Object} event The mousemove event from the browser.
1780 Dygraph
.prototype.mouseMove_
= function(event
) {
1781 // This prevents JS errors when mousing over the canvas before data loads.
1782 var points
= this.layout_
.points
;
1783 if (points
=== undefined
|| points
=== null) return;
1785 var canvasCoords
= this.eventToDomCoords(event
);
1786 var canvasx
= canvasCoords
[0];
1787 var canvasy
= canvasCoords
[1];
1789 var highlightSeriesOpts
= this.attr_("highlightSeriesOpts");
1790 var selectionChanged
= false;
1791 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1793 if (this.attr_("stackedGraph")) {
1794 closest
= this.findStackedPoint(canvasx
, canvasy
);
1796 closest
= this.findClosestPoint(canvasx
, canvasy
);
1798 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1800 var idx
= this.findClosestRow(canvasx
);
1801 selectionChanged
= this.setSelection(idx
);
1804 var callback
= this.attr_("highlightCallback");
1805 if (callback
&& selectionChanged
) {
1806 callback(event
, this.lastx_
, this.selPoints_
, this.lastRow_
, this.highlightSet_
);
1811 * Fetch left offset from first defined boundaryIds record (see bug #236).
1814 Dygraph
.prototype.getLeftBoundary_
= function() {
1815 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
1816 if (this.boundaryIds_
[i
] !== undefined
) {
1817 return this.boundaryIds_
[i
][0];
1824 * Transforms layout_.points index into data row number.
1825 * @param int layout_.points index
1826 * @return int row number, or -1 if none could be found.
1829 Dygraph
.prototype.idxToRow_
= function(setIdx
, rowIdx
) {
1830 if (rowIdx
< 0) return -1;
1832 var boundary
= this.getLeftBoundary_();
1833 return boundary
+ rowIdx
;
1834 // for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
1835 // var set = this.layout_.datasets[setIdx];
1836 // if (idx < set.length) {
1837 // return boundary + idx;
1839 // idx -= set.length;
1844 Dygraph
.prototype.animateSelection_
= function(direction
) {
1845 var totalSteps
= 10;
1847 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
1848 if (this.animateId
=== undefined
) this.animateId
= 0;
1849 var start
= this.fadeLevel
;
1850 var steps
= direction
< 0 ? start
: totalSteps
- start
;
1852 if (this.fadeLevel
) {
1853 this.updateSelection_(1.0);
1858 var thisId
= ++this.animateId
;
1860 Dygraph
.repeatAndCleanup(
1862 // ignore simultaneous animations
1863 if (that
.animateId
!= thisId
) return;
1865 that
.fadeLevel
+= direction
;
1866 if (that
.fadeLevel
=== 0) {
1867 that
.clearSelection();
1869 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
1872 steps
, millis
, function() {});
1876 * Draw dots over the selectied points in the data series. This function
1877 * takes care of cleanup of previously-drawn dots.
1880 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
1881 var defaultPrevented
= this.cascadeEvents_('select', {
1882 selectedX
: this.lastx_
,
1883 selectedPoints
: this.selPoints_
1885 // TODO(danvk): use defaultPrevented here?
1887 // Clear the previously drawn vertical, if there is one
1889 var ctx
= this.canvas_ctx_
;
1890 if (this.attr_('highlightSeriesOpts')) {
1891 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1892 var alpha
= 1.0 - this.attr_('highlightSeriesBackgroundAlpha');
1894 // Activating background fade includes an animation effect for a gradual
1895 // fade. TODO(klausw): make this independently configurable if it causes
1896 // issues? Use a shared preference to control animations?
1897 var animateBackgroundFade
= true;
1898 if (animateBackgroundFade
) {
1899 if (opt_animFraction
=== undefined
) {
1900 // start a new animation
1901 this.animateSelection_(1);
1904 alpha
*= opt_animFraction
;
1906 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
1907 ctx
.fillRect(0, 0, this.width_
, this.height_
);
1910 // Redraw only the highlighted series in the interactive canvas (not the
1911 // static plot canvas, which is where series are usually drawn).
1912 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
1913 } else if (this.previousVerticalX_
>= 0) {
1914 // Determine the maximum highlight circle size.
1915 var maxCircleSize
= 0;
1916 var labels
= this.attr_('labels');
1917 for (i
= 1; i
< labels
.length
; i
++) {
1918 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1919 if (r
> maxCircleSize
) maxCircleSize
= r
;
1921 var px
= this.previousVerticalX_
;
1922 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1923 2 * maxCircleSize
+ 2, this.height_
);
1926 if (this.isUsingExcanvas_
&& this.currentZoomRectArgs_
) {
1927 Dygraph
.prototype.drawZoomRect_
.apply(this, this.currentZoomRectArgs_
);
1930 if (this.selPoints_
.length
> 0) {
1931 // Draw colored circles over the center of each selected point
1932 var canvasx
= this.selPoints_
[0].canvasx
;
1934 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
1935 var pt
= this.selPoints_
[i
];
1936 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1938 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1939 var callback
= this.attr_("drawHighlightPointCallback", pt
.name
);
1940 var color
= this.plotter_
.colors
[pt
.name
];
1942 callback
= Dygraph
.Circles
.DEFAULT
;
1944 ctx
.lineWidth
= this.attr_('strokeWidth', pt
.name
);
1945 ctx
.strokeStyle
= color
;
1946 ctx
.fillStyle
= color
;
1947 callback(this.g
, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
1952 this.previousVerticalX_
= canvasx
;
1957 * Manually set the selected points and display information about them in the
1958 * legend. The selection can be cleared using clearSelection() and queried
1959 * using getSelection().
1960 * @param { Integer } row number that should be highlighted (i.e. appear with
1961 * hover dots on the chart). Set to false to clear any selection.
1962 * @param { seriesName } optional series name to highlight that series with the
1963 * the highlightSeriesOpts setting.
1964 * @param { locked } optional If true, keep seriesName selected when mousing
1965 * over the graph, disabling closest-series highlighting. Call clearSelection()
1968 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
1969 // Extract the points we've selected
1970 this.selPoints_
= [];
1972 if (row
!== false) {
1973 row
-= this.getLeftBoundary_();
1976 var changed
= false;
1977 if (row
!== false && row
>= 0) {
1978 if (row
!= this.lastRow_
) changed
= true;
1979 this.lastRow_
= row
;
1980 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
1981 var set
= this.layout_
.datasets
[setIdx
];
1982 if (row
< set
.length
) {
1983 var point
= this.layout_
.points
[setIdx
][row
];
1985 if (this.attr_("stackedGraph")) {
1986 point
= this.layout_
.unstackPointAtIndex(setIdx
, row
);
1989 if (point
.yval
!== null) this.selPoints_
.push(point
);
1993 if (this.lastRow_
>= 0) changed
= true;
1997 if (this.selPoints_
.length
) {
1998 this.lastx_
= this.selPoints_
[0].xval
;
2003 if (opt_seriesName
!== undefined
) {
2004 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
2005 this.highlightSet_
= opt_seriesName
;
2008 if (opt_locked
!== undefined
) {
2009 this.lockedSet_
= opt_locked
;
2013 this.updateSelection_(undefined
);
2019 * The mouse has left the canvas. Clear out whatever artifacts remain
2020 * @param {Object} event the mouseout event from the browser.
2023 Dygraph
.prototype.mouseOut_
= function(event
) {
2024 if (this.attr_("unhighlightCallback")) {
2025 this.attr_("unhighlightCallback")(event
);
2028 if (this.attr_("hideOverlayOnMouseOut") && !this.lockedSet_
) {
2029 this.clearSelection();
2034 * Clears the current selection (i.e. points that were highlighted by moving
2035 * the mouse over the chart).
2037 Dygraph
.prototype.clearSelection
= function() {
2038 this.cascadeEvents_('deselect', {});
2040 this.lockedSet_
= false;
2041 // Get rid of the overlay data
2042 if (this.fadeLevel
) {
2043 this.animateSelection_(-1);
2046 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2048 this.selPoints_
= [];
2051 this.highlightSet_
= null;
2055 * Returns the number of the currently selected row. To get data for this row,
2056 * you can use the getValue method.
2057 * @return { Integer } row number, or -1 if nothing is selected
2059 Dygraph
.prototype.getSelection
= function() {
2060 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2064 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2065 var points
= this.layout_
.points
[setIdx
];
2066 for (var row
= 0; row
< points
.length
; row
++) {
2067 if (points
[row
].x
== this.selPoints_
[0].x
) {
2068 return row
+ this.getLeftBoundary_();
2076 * Returns the name of the currently-highlighted series.
2077 * Only available when the highlightSeriesOpts option is in use.
2079 Dygraph
.prototype.getHighlightSeries
= function() {
2080 return this.highlightSet_
;
2084 * Returns true if the currently-highlighted series was locked
2085 * via setSelection(..., seriesName, true).
2087 Dygraph
.prototype.isSeriesLocked
= function() {
2088 return this.lockedSet_
;
2092 * Fires when there's data available to be graphed.
2093 * @param {String} data Raw CSV data to be plotted
2096 Dygraph
.prototype.loadedEvent_
= function(data
) {
2097 this.rawData_
= this.parseCSV_(data
);
2102 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2105 Dygraph
.prototype.addXTicks_
= function() {
2106 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2108 if (this.dateWindow_
) {
2109 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2111 range
= this.fullXRange_();
2114 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2115 var xTicks
= xAxisOptionsView('ticker')(
2118 this.width_
, // TODO(danvk): should be area.width
2121 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2122 // console.log(msg);
2123 this.layout_
.setXTicks(xTicks
);
2128 * Computes the range of the data series (including confidence intervals).
2129 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2130 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2131 * @return [low, high]
2133 Dygraph
.prototype.extremeValues_
= function(series
) {
2134 var minY
= null, maxY
= null, j
, y
;
2136 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2138 // With custom bars, maxY is the max of the high values.
2139 for (j
= 0; j
< series
.length
; j
++) {
2140 y
= series
[j
][1][0];
2141 if (y
=== null || isNaN(y
)) continue;
2142 var low
= y
- series
[j
][1][1];
2143 var high
= y
+ series
[j
][1][2];
2144 if (low
> y
) low
= y
; // this can happen with custom bars,
2145 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2146 if (maxY
=== null || high
> maxY
) {
2149 if (minY
=== null || low
< minY
) {
2154 for (j
= 0; j
< series
.length
; j
++) {
2156 if (y
=== null || isNaN(y
)) continue;
2157 if (maxY
=== null || y
> maxY
) {
2160 if (minY
=== null || y
< minY
) {
2166 return [minY
, maxY
];
2171 * This function is called once when the chart's data is changed or the options
2172 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2173 * idea is that values derived from the chart's data can be computed here,
2174 * rather than every time the chart is drawn. This includes things like the
2175 * number of axes, rolling averages, etc.
2177 Dygraph
.prototype.predraw_
= function() {
2178 var start
= new Date();
2180 // TODO(danvk): move more computations out of drawGraph_ and into here.
2181 this.computeYAxes_();
2183 // Create a new plotter.
2184 if (this.plotter_
) {
2185 this.cascadeEvents_('clearChart');
2186 this.plotter_
.clear();
2188 this.plotter_
= new DygraphCanvasRenderer(this,
2193 // The roller sits in the bottom left corner of the chart. We don't know where
2194 // this will be until the options are available, so it's positioned here.
2195 this.createRollInterface_();
2197 this.cascadeEvents_('predraw');
2199 if (this.rangeSelector_
) {
2200 this.rangeSelector_
.renderStaticLayer();
2203 // Convert the raw data (a 2D array) into the internal format and compute
2204 // rolling averages.
2205 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2206 for (var i
= 1; i
< this.numColumns(); i
++) {
2207 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2208 var logScale
= this.attr_('logscale');
2209 var series
= this.extractSeries_(this.rawData_
, i
, logScale
);
2210 series
= this.rollingAverage(series
, this.rollPeriod_
);
2211 this.rolledSeries_
.push(series
);
2214 // If the data or options have changed, then we'd better redraw.
2217 // This is used to determine whether to do various animations.
2218 var end
= new Date();
2219 this.drawingTimeMs_
= (end
- start
);
2223 * Loop over all fields and create datasets, calculating extreme y-values for
2224 * each series and extreme x-indices as we go.
2226 * dateWindow is passed in as an explicit parameter so that we can compute
2227 * extreme values "speculatively", i.e. without actually setting state on the
2230 * TODO(danvk): make this more of a true function
2231 * @return [ datasets, seriesExtremes, boundaryIds ]
2234 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2235 var boundaryIds
= [];
2236 var cumulative_y
= []; // For stacked series.
2238 var extremes
= {}; // series name -> [low, high]
2241 // Loop over the fields (series). Go from the last to the first,
2242 // because if they're stacked that's how we accumulate the values.
2243 var num_series
= rolledSeries
.length
- 1;
2244 for (i
= num_series
; i
>= 1; i
--) {
2245 if (!this.visibility()[i
- 1]) continue;
2247 // Note: this copy _is_ necessary at the moment.
2248 // If you remove it, it breaks zooming with error bars on.
2249 // TODO(danvk): investigate further & write a test for this.
2251 for (j
= 0; j
< rolledSeries
[i
].length
; j
++) {
2252 series
.push(rolledSeries
[i
][j
]);
2255 // Prune down to the desired range, if necessary (for zooming)
2256 // Because there can be lines going to points outside of the visible area,
2257 // we actually prune to visible points, plus one on either side.
2258 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2260 var low
= dateWindow
[0];
2261 var high
= dateWindow
[1];
2263 // TODO(danvk): do binary search instead of linear search.
2264 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2265 var firstIdx
= null, lastIdx
= null;
2266 for (k
= 0; k
< series
.length
; k
++) {
2267 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2270 if (series
[k
][0] <= high
) {
2274 if (firstIdx
=== null) firstIdx
= 0;
2275 if (firstIdx
> 0) firstIdx
--;
2276 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2277 if (lastIdx
< series
.length
- 1) lastIdx
++;
2278 boundaryIds
[i
-1] = [firstIdx
, lastIdx
];
2279 for (k
= firstIdx
; k
<= lastIdx
; k
++) {
2280 pruned
.push(series
[k
]);
2284 boundaryIds
[i
-1] = [0, series
.length
-1];
2287 var seriesExtremes
= this.extremeValues_(series
);
2290 for (j
=0; j
<series
.length
; j
++) {
2291 series
[j
] = [series
[j
][0],
2296 } else if (this.attr_("stackedGraph")) {
2297 var l
= series
.length
;
2299 for (j
= 0; j
< l
; j
++) {
2300 // If one data set has a NaN, let all subsequent stacked
2301 // sets inherit the NaN -- only start at 0 for the first set.
2302 var x
= series
[j
][0];
2303 if (cumulative_y
[x
] === undefined
) {
2304 cumulative_y
[x
] = 0;
2307 actual_y
= series
[j
][1];
2308 if (actual_y
=== null) {
2309 series
[j
] = [x
, null];
2313 cumulative_y
[x
] += actual_y
;
2315 series
[j
] = [x
, cumulative_y
[x
]];
2317 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2318 seriesExtremes
[1] = cumulative_y
[x
];
2320 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2321 seriesExtremes
[0] = cumulative_y
[x
];
2326 var seriesName
= this.attr_("labels")[i
];
2327 extremes
[seriesName
] = seriesExtremes
;
2328 datasets
[i
] = series
;
2331 // For stacked graphs, a NaN value for any point in the sum should create a
2332 // clean gap in the graph. Back-propagate NaNs to all points at this X value.
2333 if (this.attr_("stackedGraph")) {
2334 for (k
= datasets
.length
- 1; k
>= 0; --k
) {
2335 // Use the first nonempty dataset to get X values.
2336 if (!datasets
[k
]) continue;
2337 for (j
= 0; j
< datasets
[k
].length
; j
++) {
2338 var x
= datasets
[k
][j
][0];
2339 if (isNaN(cumulative_y
[x
])) {
2340 // Set all Y values to NaN at that X value.
2341 for (i
= datasets
.length
- 1; i
>= 0; i
--) {
2342 if (!datasets
[i
]) continue;
2343 datasets
[i
][j
][1] = NaN
;
2351 return [ datasets
, extremes
, boundaryIds
];
2355 * Update the graph with new data. This method is called when the viewing area
2356 * has changed. If the underlying data or options have changed, predraw_ will
2357 * be called before drawGraph_ is called.
2361 Dygraph
.prototype.drawGraph_
= function() {
2362 var start
= new Date();
2364 // This is used to set the second parameter to drawCallback, below.
2365 var is_initial_draw
= this.is_initial_draw_
;
2366 this.is_initial_draw_
= false;
2368 this.layout_
.removeAllDatasets();
2370 this.attrs_
.pointSize
= 0.5 * this.attr_('highlightCircleSize');
2372 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2373 var datasets
= packed
[0];
2374 var extremes
= packed
[1];
2375 this.boundaryIds_
= packed
[2];
2377 this.setIndexByName_
= {};
2378 var labels
= this.attr_("labels");
2379 if (labels
.length
> 0) {
2380 this.setIndexByName_
[labels
[0]] = 0;
2383 for (var i
= 1; i
< datasets
.length
; i
++) {
2384 this.setIndexByName_
[labels
[i
]] = i
;
2385 if (!this.visibility()[i
- 1]) continue;
2386 this.layout_
.addDataset(labels
[i
], datasets
[i
]);
2387 this.datasetIndex_
[i
] = dataIdx
++;
2390 this.computeYAxisRanges_(extremes
);
2391 this.layout_
.setYAxes(this.axes_
);
2395 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2396 var tmp_zoomed_x
= this.zoomed_x_
;
2397 // Tell PlotKit to use this new data and render itself
2398 this.layout_
.setDateWindow(this.dateWindow_
);
2399 this.zoomed_x_
= tmp_zoomed_x
;
2400 this.layout_
.evaluateWithError();
2401 this.renderGraph_(is_initial_draw
);
2403 if (this.attr_("timingName")) {
2404 var end
= new Date();
2406 console
.log(this.attr_("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2412 * This does the work of drawing the chart. It assumes that the layout and axis
2413 * scales have already been set (e.g. by predraw_).
2417 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2418 this.cascadeEvents_('clearChart');
2419 this.plotter_
.clear();
2421 if (this.attr_('underlayCallback')) {
2422 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2423 // users who expect a deprecated form of this callback.
2424 this.attr_('underlayCallback')(
2425 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2429 canvas
: this.hidden_
,
2430 drawingContext
: this.hidden_ctx_
2432 this.cascadeEvents_('willDrawChart', e
);
2433 this.plotter_
.render();
2434 this.cascadeEvents_('didDrawChart', e
);
2436 // TODO(danvk): is this a performance bottleneck when panning?
2437 // The interaction canvas should already be empty in that situation.
2438 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2439 this.canvas_
.height
);
2441 // Generate a static legend before any particular point is selected.
2443 if (this.rangeSelector_
) {
2444 this.rangeSelector_
.renderInteractiveLayer();
2446 if (this.attr_("drawCallback") !== null) {
2447 this.attr_("drawCallback")(this, is_initial_draw
);
2453 * Determine properties of the y-axes which are independent of the data
2454 * currently being displayed. This includes things like the number of axes and
2455 * the style of the axes. It does not include the range of each axis and its
2457 * This fills in this.axes_ and this.seriesToAxisMap_.
2458 * axes_ = [ { options } ]
2459 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2460 * indices are into the axes_ array.
2462 Dygraph
.prototype.computeYAxes_
= function() {
2463 // Preserve valueWindow settings if they exist, and if the user hasn't
2464 // specified a new valueRange.
2465 var i
, valueWindows
, seriesName
, axis
, index
, opts
, v
;
2466 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2468 for (index
= 0; index
< this.axes_
.length
; index
++) {
2469 valueWindows
.push(this.axes_
[index
].valueWindow
);
2473 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2474 this.seriesToAxisMap_
= {};
2476 // Get a list of series names.
2477 var labels
= this.attr_("labels");
2479 for (i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2481 // all options which could be applied per-axis:
2489 'axisLabelFontSize',
2494 // Copy global axis options over to the first axis.
2495 for (i
= 0; i
< axisOptions
.length
; i
++) {
2496 var k
= axisOptions
[i
];
2498 if (v
) this.axes_
[0][k
] = v
;
2501 // Go through once and add all the axes.
2502 for (seriesName
in series
) {
2503 if (!series
.hasOwnProperty(seriesName
)) continue;
2504 axis
= this.attr_("axis", seriesName
);
2505 if (axis
=== null) {
2506 this.seriesToAxisMap_
[seriesName
] = 0;
2509 if (typeof(axis
) == 'object') {
2510 // Add a new axis, making a copy of its per-axis options.
2512 Dygraph
.update(opts
, this.axes_
[0]);
2513 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2514 var yAxisId
= this.axes_
.length
;
2515 opts
.yAxisId
= yAxisId
;
2517 Dygraph
.update(opts
, axis
);
2518 this.axes_
.push(opts
);
2519 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2523 // Go through one more time and assign series to an axis defined by another
2524 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2525 for (seriesName
in series
) {
2526 if (!series
.hasOwnProperty(seriesName
)) continue;
2527 axis
= this.attr_("axis", seriesName
);
2528 if (typeof(axis
) == 'string') {
2529 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2530 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2531 "series " + axis
+ ", which does not define its own axis.");
2534 var idx
= this.seriesToAxisMap_
[axis
];
2535 this.seriesToAxisMap_
[seriesName
] = idx
;
2539 if (valueWindows
!== undefined
) {
2540 // Restore valueWindow settings.
2541 for (index
= 0; index
< valueWindows
.length
; index
++) {
2542 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2547 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2549 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2550 v
= opts("valueRange");
2551 if (v
) this.axes_
[axis
].valueRange
= v
;
2552 } else { // To keep old behavior
2553 var axes
= this.user_attrs_
.axes
;
2554 if (axes
&& axes
.y2
) {
2555 v
= axes
.y2
.valueRange
;
2556 if (v
) this.axes_
[axis
].valueRange
= v
;
2564 * Returns the number of y-axes on the chart.
2565 * @return {Number} the number of axes.
2567 Dygraph
.prototype.numAxes
= function() {
2569 for (var series
in this.seriesToAxisMap_
) {
2570 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2571 var idx
= this.seriesToAxisMap_
[series
];
2572 if (idx
> last_axis
) last_axis
= idx
;
2574 return 1 + last_axis
;
2579 * Returns axis properties for the given series.
2580 * @param { String } setName The name of the series for which to get axis
2581 * properties, e.g. 'Y1'.
2582 * @return { Object } The axis properties.
2584 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2585 // TODO(danvk): handle errors.
2586 return this.axes_
[this.seriesToAxisMap_
[series
]];
2591 * Determine the value range and tick marks for each axis.
2592 * @param {Object} extremes A mapping from seriesName -> [low, high]
2593 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2595 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2596 // Build a map from axis number -> [list of series names]
2597 var seriesForAxis
= [], series
;
2598 for (series
in this.seriesToAxisMap_
) {
2599 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2600 var idx
= this.seriesToAxisMap_
[series
];
2601 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2602 seriesForAxis
[idx
].push(series
);
2605 // Compute extreme values, a span and tick marks for each axis.
2606 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2607 var axis
= this.axes_
[i
];
2609 if (!seriesForAxis
[i
]) {
2610 // If no series are defined or visible then use a reasonable default
2611 axis
.extremeRange
= [0, 1];
2613 // Calculate the extremes of extremes.
2614 series
= seriesForAxis
[i
];
2615 var minY
= Infinity
; // extremes[series[0]][0];
2616 var maxY
= -Infinity
; // extremes[series[0]][1];
2617 var extremeMinY
, extremeMaxY
;
2619 for (var j
= 0; j
< series
.length
; j
++) {
2620 // this skips invisible series
2621 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2623 // Only use valid extremes to stop null data series' from corrupting the scale.
2624 extremeMinY
= extremes
[series
[j
]][0];
2625 if (extremeMinY
!== null) {
2626 minY
= Math
.min(extremeMinY
, minY
);
2628 extremeMaxY
= extremes
[series
[j
]][1];
2629 if (extremeMaxY
!== null) {
2630 maxY
= Math
.max(extremeMaxY
, maxY
);
2633 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2635 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2636 if (minY
== Infinity
) minY
= 0;
2637 if (maxY
== -Infinity
) maxY
= 1;
2639 // Add some padding and round up to an integer to be human-friendly.
2640 var span
= maxY
- minY
;
2641 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2642 if (span
=== 0) { span
= maxY
; }
2644 var maxAxisY
, minAxisY
;
2645 if (axis
.logscale
) {
2646 maxAxisY
= maxY
+ 0.1 * span
;
2649 maxAxisY
= maxY
+ 0.1 * span
;
2650 minAxisY
= minY
- 0.1 * span
;
2652 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2653 if (!this.attr_("avoidMinZero")) {
2654 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2655 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2658 if (this.attr_("includeZero")) {
2659 if (maxY
< 0) maxAxisY
= 0;
2660 if (minY
> 0) minAxisY
= 0;
2663 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2665 if (axis
.valueWindow
) {
2666 // This is only set if the user has zoomed on the y-axis. It is never set
2667 // by a user. It takes precedence over axis.valueRange because, if you set
2668 // valueRange, you'd still expect to be able to pan.
2669 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2670 } else if (axis
.valueRange
) {
2671 // This is a user-set value range for this axis.
2672 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2674 axis
.computedValueRange
= axis
.extremeRange
;
2677 // Add ticks. By default, all axes inherit the tick positions of the
2678 // primary axis. However, if an axis is specifically marked as having
2679 // independent ticks, then that is permissible as well.
2680 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2681 var ticker
= opts('ticker');
2682 if (i
=== 0 || axis
.independentTicks
) {
2683 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2684 axis
.computedValueRange
[1],
2685 this.height_
, // TODO(danvk): should be area.height
2689 var p_axis
= this.axes_
[0];
2690 var p_ticks
= p_axis
.ticks
;
2691 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2692 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2693 var tick_values
= [];
2694 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2695 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2696 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2697 tick_values
.push(y_val
);
2700 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2701 axis
.computedValueRange
[1],
2702 this.height_
, // TODO(danvk): should be area.height
2711 * Extracts one series from the raw data (a 2D array) into an array of (date,
2714 * This is where undesirable points (i.e. negative values on log scales and
2715 * missing values through which we wish to connect lines) are dropped.
2716 * TODO(danvk): the "missing values" bit above doesn't seem right.
2720 Dygraph
.prototype.extractSeries_
= function(rawData
, i
, logScale
) {
2721 // TODO(danvk): pre-allocate series here.
2723 for (var j
= 0; j
< rawData
.length
; j
++) {
2724 var x
= rawData
[j
][0];
2725 var point
= rawData
[j
][i
];
2727 // On the log scale, points less than zero do not exist.
2728 // This will create a gap in the chart.
2733 series
.push([x
, point
]);
2740 * Calculates the rolling average of a data set.
2741 * If originalData is [label, val], rolls the average of those.
2742 * If originalData is [label, [, it's interpreted as [value, stddev]
2743 * and the roll is returned in the same form, with appropriately reduced
2744 * stddev for each value.
2745 * Note that this is where fractional input (i.e. '5/10') is converted into
2747 * @param {Array} originalData The data in the appropriate format (see above)
2748 * @param {Number} rollPeriod The number of points over which to average the
2751 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2752 if (originalData
.length
< 2)
2753 return originalData
;
2754 rollPeriod
= Math
.min(rollPeriod
, originalData
.length
);
2755 var rollingData
= [];
2756 var sigma
= this.attr_("sigma");
2758 var low
, high
, i
, j
, y
, sum
, num_ok
, stddev
;
2759 if (this.fractions_
) {
2761 var den
= 0; // numerator/denominator
2763 for (i
= 0; i
< originalData
.length
; i
++) {
2764 num
+= originalData
[i
][1][0];
2765 den
+= originalData
[i
][1][1];
2766 if (i
- rollPeriod
>= 0) {
2767 num
-= originalData
[i
- rollPeriod
][1][0];
2768 den
-= originalData
[i
- rollPeriod
][1][1];
2771 var date
= originalData
[i
][0];
2772 var value
= den
? num
/ den
: 0.0;
2773 if (this.attr_("errorBars")) {
2774 if (this.attr_("wilsonInterval")) {
2775 // For more details on this confidence interval, see:
2776 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2778 var p
= value
< 0 ? 0 : value
, n
= den
;
2779 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2780 var denom
= 1 + sigma
* sigma
/ den
;
2781 low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2782 high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2783 rollingData
[i
] = [date
,
2784 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2786 rollingData
[i
] = [date
, [0, 0, 0]];
2789 stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2790 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2793 rollingData
[i
] = [date
, mult
* value
];
2796 } else if (this.attr_("customBars")) {
2801 for (i
= 0; i
< originalData
.length
; i
++) {
2802 var data
= originalData
[i
][1];
2804 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2806 if (y
!== null && !isNaN(y
)) {
2812 if (i
- rollPeriod
>= 0) {
2813 var prev
= originalData
[i
- rollPeriod
];
2814 if (prev
[1][1] !== null && !isNaN(prev
[1][1])) {
2822 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2823 1.0 * (mid
- low
) / count
,
2824 1.0 * (high
- mid
) / count
]];
2826 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2830 // Calculate the rolling average for the first rollPeriod - 1 points where
2831 // there is not enough data to roll over the full number of points
2832 if (!this.attr_("errorBars")){
2833 if (rollPeriod
== 1) {
2834 return originalData
;
2837 for (i
= 0; i
< originalData
.length
; i
++) {
2840 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2841 y
= originalData
[j
][1];
2842 if (y
=== null || isNaN(y
)) continue;
2844 sum
+= originalData
[j
][1];
2847 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2849 rollingData
[i
] = [originalData
[i
][0], null];
2854 for (i
= 0; i
< originalData
.length
; i
++) {
2858 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2859 y
= originalData
[j
][1][0];
2860 if (y
=== null || isNaN(y
)) continue;
2862 sum
+= originalData
[j
][1][0];
2863 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2866 stddev
= Math
.sqrt(variance
) / num_ok
;
2867 rollingData
[i
] = [originalData
[i
][0],
2868 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2870 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2880 * Detects the type of the str (date or numeric) and sets the various
2881 * formatting attributes in this.attrs_ based on this type.
2882 * @param {String} str An x value.
2885 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2887 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2888 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
2889 str
.indexOf('/') >= 0 ||
2890 isNaN(parseFloat(str
))) {
2892 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2893 // TODO(danvk): remove support for this format.
2898 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2899 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
2900 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
2901 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2903 /** @private (shut up, jsdoc!) */
2904 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2905 // TODO(danvk): use Dygraph.numberValueFormatter here?
2906 /** @private (shut up, jsdoc!) */
2907 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2908 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
2909 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
2914 * Parses the value as a floating point number. This is like the parseFloat()
2915 * built-in, but with a few differences:
2916 * - the empty string is parsed as null, rather than NaN.
2917 * - if the string cannot be parsed at all, an error is logged.
2918 * If the string can't be parsed, this method returns null.
2919 * @param {String} x The string to be parsed
2920 * @param {Number} opt_line_no The line number from which the string comes.
2921 * @param {String} opt_line The text of the line from which the string comes.
2925 // Parse the x as a float or return null if it's not a number.
2926 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
2927 var val
= parseFloat(x
);
2928 if (!isNaN(val
)) return val
;
2930 // Try to figure out what happeend.
2931 // If the value is the empty string, parse it as null.
2932 if (/^ *$/.test(x
)) return null;
2934 // If it was actually "NaN", return it as NaN.
2935 if (/^ *nan *$/i.test(x
)) return NaN
;
2937 // Looks like a parsing error.
2938 var msg
= "Unable to parse '" + x
+ "' as a number";
2939 if (opt_line
!== null && opt_line_no
!== null) {
2940 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
2949 * Parses a string in a special csv format. We expect a csv file where each
2950 * line is a date point, and the first field in each line is the date string.
2951 * We also expect that all remaining fields represent series.
2952 * if the errorBars attribute is set, then interpret the fields as:
2953 * date, series1, stddev1, series2, stddev2, ...
2954 * @param {[Object]} data See above.
2956 * @return [Object] An array with one entry for each row. These entries
2957 * are an array of cells in that row. The first entry is the parsed x-value for
2958 * the row. The second, third, etc. are the y-values. These can take on one of
2959 * three forms, depending on the CSV and constructor parameters:
2961 * 2. [ value, stddev ]
2962 * 3. [ low value, center value, high value ]
2964 Dygraph
.prototype.parseCSV_
= function(data
) {
2966 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
2967 var lines
= data
.split(line_delimiter
|| "\n");
2970 // Use the default delimiter or fall back to a tab if that makes sense.
2971 var delim
= this.attr_('delimiter');
2972 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2977 if (!('labels' in this.user_attrs_
)) {
2978 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2980 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
2981 this.attributes_
.reparseSeries();
2986 var defaultParserSet
= false; // attempt to auto-detect x value type
2987 var expectedCols
= this.attr_("labels").length
;
2988 var outOfOrder
= false;
2989 for (var i
= start
; i
< lines
.length
; i
++) {
2990 var line
= lines
[i
];
2992 if (line
.length
=== 0) continue; // skip blank lines
2993 if (line
[0] == '#') continue; // skip comment lines
2994 var inFields
= line
.split(delim
);
2995 if (inFields
.length
< 2) continue;
2998 if (!defaultParserSet
) {
2999 this.detectTypeFromString_(inFields
[0]);
3000 xParser
= this.attr_("xValueParser");
3001 defaultParserSet
= true;
3003 fields
[0] = xParser(inFields
[0], this);
3005 // If fractions are expected, parse the numbers as "A/B
"
3006 if (this.fractions_) {
3007 for (j = 1; j < inFields.length; j++) {
3008 // TODO(danvk): figure out an appropriate way to flag parse errors.
3009 vals = inFields[j].split("/");
3010 if (vals.length != 2) {
3011 this.error('Expected fractional "num
/den
" values in CSV data ' +
3012 "but found a value
'" + inFields[j] + "' on line
" +
3013 (1 + i) + " ('" + line + "') which is not of
this form
.");
3016 fields[j] = [this.parseFloat_(vals[0], i, line),
3017 this.parseFloat_(vals[1], i, line)];
3020 } else if (this.attr_("errorBars
")) {
3021 // If there are error bars, values are (value, stddev) pairs
3022 if (inFields.length % 2 != 1) {
3023 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3024 'but line ' + (1 + i) + ' has an odd number of values (' +
3025 (inFields.length - 1) + "): '" + line + "'");
3027 for (j = 1; j < inFields.length; j += 2) {
3028 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3029 this.parseFloat_(inFields[j + 1], i, line)];
3031 } else if (this.attr_("customBars
")) {
3032 // Bars are a low;center;high tuple
3033 for (j = 1; j < inFields.length; j++) {
3034 var val = inFields[j];
3035 if (/^ *$/.test(val)) {
3036 fields[j] = [null, null, null];
3038 vals = val.split(";");
3039 if (vals.length == 3) {
3040 fields[j] = [ this.parseFloat_(vals[0], i, line),
3041 this.parseFloat_(vals[1], i, line),
3042 this.parseFloat_(vals[2], i, line) ];
3044 this.warn('When using customBars, values must be either blank ' +
3045 'or "low
;center
;high
" tuples (got "' + val +
3046 '" on line ' + (1+i));
3051 // Values are just numbers
3052 for (j = 1; j < inFields.length; j++) {
3053 fields[j] = this.parseFloat_(inFields[j], i, line);
3056 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3060 if (fields.length != expectedCols) {
3061 this.error("Number of columns
in line
" + i + " (" + fields.length +
3062 ") does not agree
with number of
labels (" + expectedCols +
3066 // If the user specified the 'labels' option and none of the cells of the
3067 // first row parsed correctly, then they probably double-specified the
3068 // labels. We go with the values set in the option, discard this row and
3069 // log a warning to the JS console.
3070 if (i === 0 && this.attr_('labels')) {
3071 var all_null = true;
3072 for (j = 0; all_null && j < fields.length; j++) {
3073 if (fields[j]) all_null = false;
3076 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3077 "CSV
data ('" + line + "') appears to also contain labels
. " +
3078 "Will drop the CSV labels and
use the option labels
.");
3086 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3087 ret.sort(function(a,b) { return a[0] - b[0]; });
3095 * The user has provided their data as a pre-packaged JS array. If the x values
3096 * are numeric, this is the same as dygraphs' internal format. If the x values
3097 * are dates, we need to convert them from Date objects to ms since epoch.
3098 * @param {[Object]} data
3099 * @return {[Object]} data with numeric x values.
3101 Dygraph.prototype.parseArray_ = function(data) {
3102 // Peek at the first x value to see if it's numeric.
3103 if (data.length === 0) {
3104 this.error("Can
't plot empty data set");
3107 if (data[0].length === 0) {
3108 this.error("Data set cannot contain an empty row");
3113 if (this.attr_("labels") === null) {
3114 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3115 "in the options parameter");
3116 this.attrs_.labels = [ "X" ];
3117 for (i = 1; i < data[0].length; i++) {
3118 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
3120 this.attributes_.reparseSeries();
3122 var num_labels = this.attr_("labels");
3123 if (num_labels.length != data[0].length) {
3124 this.error("Mismatch between number of labels (" + num_labels +
3125 ") and number of columns in array (" + data[0].length + ")");
3130 if (Dygraph.isDateLike(data[0][0])) {
3131 // Some intelligent defaults for a date x-axis.
3132 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
3133 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
3134 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3136 // Assume they're all dates
.
3137 var parsedData
= Dygraph
.clone(data
);
3138 for (i
= 0; i
< data
.length
; i
++) {
3139 if (parsedData
[i
].length
=== 0) {
3140 this.error("Row " + (1 + i
) + " of data is empty");
3143 if (parsedData
[i
][0] === null ||
3144 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3145 isNaN(parsedData
[i
][0].getTime())) {
3146 this.error("x value in row " + (1 + i
) + " is not a Date");
3149 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3153 // Some intelligent defaults for a numeric x-axis.
3154 /** @private (shut up, jsdoc!) */
3155 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3156 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3157 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3163 * Parses a DataTable object from gviz.
3164 * The data is expected to have a first column that is either a date or a
3165 * number. All subsequent columns must be numbers. If there is a clear mismatch
3166 * between this.xValueParser_ and the type of the first column, it will be
3167 * fixed. Fills out rawData_.
3168 * @param {[Object]} data See above.
3171 Dygraph
.prototype.parseDataTable_
= function(data
) {
3172 var shortTextForAnnotationNum
= function(num
) {
3173 // converts [0-9]+ [A-Z][a-z]*
3174 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3175 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3176 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3177 num
= Math
.floor(num
/ 26);
3179 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3180 num
= Math
.floor((num
- 1) / 26);
3185 var cols
= data
.getNumberOfColumns();
3186 var rows
= data
.getNumberOfRows();
3188 var indepType
= data
.getColumnType(0);
3189 if (indepType
== 'date' || indepType
== 'datetime') {
3190 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3191 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
3192 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3193 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3194 } else if (indepType
== 'number') {
3195 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3196 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3197 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3198 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3200 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3201 "column 1 of DataTable input (Got '" + indepType
+ "')");
3205 // Array of the column indices which contain data (and not annotations).
3207 var annotationCols
= {}; // data index -> [annotation cols]
3208 var hasAnnotations
= false;
3210 for (i
= 1; i
< cols
; i
++) {
3211 var type
= data
.getColumnType(i
);
3212 if (type
== 'number') {
3214 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3215 // This is OK -- it's an annotation column.
3216 var dataIdx
= colIdx
[colIdx
.length
- 1];
3217 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3218 annotationCols
[dataIdx
] = [i
];
3220 annotationCols
[dataIdx
].push(i
);
3222 hasAnnotations
= true;
3224 this.error("Only 'number' is supported as a dependent type with Gviz." +
3225 " 'string' is only supported if displayAnnotations is true");
3229 // Read column labels
3230 // TODO(danvk): add support back for errorBars
3231 var labels
= [data
.getColumnLabel(0)];
3232 for (i
= 0; i
< colIdx
.length
; i
++) {
3233 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3234 if (this.attr_("errorBars")) i
+= 1;
3236 this.attrs_
.labels
= labels
;
3237 cols
= labels
.length
;
3240 var outOfOrder
= false;
3241 var annotations
= [];
3242 for (i
= 0; i
< rows
; i
++) {
3244 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3245 data
.getValue(i
, 0) === null) {
3246 this.warn("Ignoring row " + i
+
3247 " of DataTable because of undefined or null first column.");
3251 if (indepType
== 'date' || indepType
== 'datetime') {
3252 row
.push(data
.getValue(i
, 0).getTime());
3254 row
.push(data
.getValue(i
, 0));
3256 if (!this.attr_("errorBars")) {
3257 for (j
= 0; j
< colIdx
.length
; j
++) {
3258 var col
= colIdx
[j
];
3259 row
.push(data
.getValue(i
, col
));
3260 if (hasAnnotations
&&
3261 annotationCols
.hasOwnProperty(col
) &&
3262 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3264 ann
.series
= data
.getColumnLabel(col
);
3266 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3268 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3269 if (k
) ann
.text
+= "\n";
3270 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3272 annotations
.push(ann
);
3276 // Strip out infinities, which give dygraphs problems later on.
3277 for (j
= 0; j
< row
.length
; j
++) {
3278 if (!isFinite(row
[j
])) row
[j
] = null;
3281 for (j
= 0; j
< cols
- 1; j
++) {
3282 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3285 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3292 this.warn("DataTable is out of order; order it correctly to speed loading.");
3293 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3295 this.rawData_
= ret
;
3297 if (annotations
.length
> 0) {
3298 this.setAnnotations(annotations
, true);
3303 * Get the CSV data. If it's in a function, call that function. If it's in a
3304 * file, do an XMLHttpRequest to get it.
3307 Dygraph
.prototype.start_
= function() {
3308 var data
= this.file_
;
3310 // Functions can return references of all other types.
3311 if (typeof data
== 'function') {
3315 if (Dygraph
.isArrayLike(data
)) {
3316 this.rawData_
= this.parseArray_(data
);
3318 } else if (typeof data
== 'object' &&
3319 typeof data
.getColumnRange
== 'function') {
3320 // must be a DataTable from gviz.
3321 this.parseDataTable_(data
);
3323 } else if (typeof data
== 'string') {
3324 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3325 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3326 if (line_delimiter
) {
3327 this.loadedEvent_(data
);
3329 var req
= new XMLHttpRequest();
3331 req
.onreadystatechange
= function () {
3332 if (req
.readyState
== 4) {
3333 if (req
.status
=== 200 || // Normal http
3334 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3335 caller
.loadedEvent_(req
.responseText
);
3340 req
.open("GET", data
, true);
3344 this.error("Unknown data format: " + (typeof data
));
3349 * Changes various properties of the graph. These can include:
3351 * <li>file: changes the source data for the graph</li>
3352 * <li>errorBars: changes whether the data contains stddev</li>
3355 * There's a huge variety of options that can be passed to this method. For a
3356 * full list, see http://dygraphs.com/options.html.
3358 * @param {Object} attrs The new properties and values
3359 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3360 * call to updateOptions(). If you know better, you can pass true to explicitly
3361 * block the redraw. This can be useful for chaining updateOptions() calls,
3362 * avoiding the occasional infinite loop and preventing redraws when it's not
3363 * necessary (e.g. when updating a callback).
3365 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3366 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3368 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
3369 var file
= input_attrs
.file
;
3370 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
3372 // TODO(danvk): this is a mess. Move these options into attr_.
3373 if ('rollPeriod' in attrs
) {
3374 this.rollPeriod_
= attrs
.rollPeriod
;
3376 if ('dateWindow' in attrs
) {
3377 this.dateWindow_
= attrs
.dateWindow
;
3378 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3379 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3382 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3383 this.zoomed_y_
= (attrs
.valueRange
!== null);
3386 // TODO(danvk): validate per-series options.
3391 // highlightCircleSize
3393 // Check if this set options will require new points.
3394 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3396 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3400 if (!block_redraw
) this.start_();
3402 if (!block_redraw
) {
3403 if (requiresNewPoints
) {
3406 this.renderGraph_(false);
3413 * Returns a copy of the options with deprecated names converted into current
3414 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3415 * interested in that, they should save a copy before calling this.
3418 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3420 for (var k
in attrs
) {
3421 if (k
== 'file') continue;
3422 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3425 var set
= function(axis
, opt
, value
) {
3426 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3427 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3428 my_attrs
.axes
[axis
][opt
] = value
;
3430 var map
= function(opt
, axis
, new_opt
) {
3431 if (typeof(attrs
[opt
]) != 'undefined') {
3432 set(axis
, new_opt
, attrs
[opt
]);
3433 delete my_attrs
[opt
];
3437 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3438 map('xValueFormatter', 'x', 'valueFormatter');
3439 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3440 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3441 map('xTicker', 'x', 'ticker');
3442 map('yValueFormatter', 'y', 'valueFormatter');
3443 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3444 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3445 map('yTicker', 'y', 'ticker');
3450 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3451 * containing div (which has presumably changed size since the dygraph was
3452 * instantiated. If the width/height are specified, the div will be resized.
3454 * This is far more efficient than destroying and re-instantiating a
3455 * Dygraph, since it doesn't have to reparse the underlying data.
3457 * @param {Number} [width] Width (in pixels)
3458 * @param {Number} [height] Height (in pixels)
3460 Dygraph
.prototype.resize
= function(width
, height
) {
3461 if (this.resize_lock
) {
3464 this.resize_lock
= true;
3466 if ((width
=== null) != (height
=== null)) {
3467 this.warn("Dygraph.resize() should be called with zero parameters or " +
3468 "two non-NULL parameters. Pretending it was zero.");
3469 width
= height
= null;
3472 var old_width
= this.width_
;
3473 var old_height
= this.height_
;
3476 this.maindiv_
.style
.width
= width
+ "px";
3477 this.maindiv_
.style
.height
= height
+ "px";
3478 this.width_
= width
;
3479 this.height_
= height
;
3481 this.width_
= this.maindiv_
.clientWidth
;
3482 this.height_
= this.maindiv_
.clientHeight
;
3485 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3486 // TODO(danvk): there should be a clear() method.
3487 this.maindiv_
.innerHTML
= "";
3488 this.roller_
= null;
3489 this.attrs_
.labelsDiv
= null;
3490 this.createInterface_();
3491 if (this.annotations_
.length
) {
3492 // createInterface_ reset the layout, so we need to do this.
3493 this.layout_
.setAnnotations(this.annotations_
);
3498 this.resize_lock
= false;
3502 * Adjusts the number of points in the rolling average. Updates the graph to
3503 * reflect the new averaging period.
3504 * @param {Number} length Number of points over which to average the data.
3506 Dygraph
.prototype.adjustRoll
= function(length
) {
3507 this.rollPeriod_
= length
;
3512 * Returns a boolean array of visibility statuses.
3514 Dygraph
.prototype.visibility
= function() {
3515 // Do lazy-initialization, so that this happens after we know the number of
3517 if (!this.attr_("visibility")) {
3518 this.attrs_
.visibility
= [];
3520 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3521 while (this.attr_("visibility").length
< this.numColumns() - 1) {
3522 this.attrs_
.visibility
.push(true);
3524 return this.attr_("visibility");
3528 * Changes the visiblity of a series.
3530 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3531 var x
= this.visibility();
3532 if (num
< 0 || num
>= x
.length
) {
3533 this.warn("invalid series number in setVisibility: " + num
);
3541 * How large of an area will the dygraph render itself in?
3542 * This is used for testing.
3543 * @return A {width: w, height: h} object.
3546 Dygraph
.prototype.size
= function() {
3547 return { width
: this.width_
, height
: this.height_
};
3551 * Update the list of annotations and redraw the chart.
3552 * See dygraphs.com/annotations.html for more info on how to use annotations.
3553 * @param ann {Array} An array of annotation objects.
3554 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3556 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3557 // Only add the annotation CSS rule once we know it will be used.
3558 Dygraph
.addAnnotationRule();
3559 this.annotations_
= ann
;
3560 this.layout_
.setAnnotations(this.annotations_
);
3561 if (!suppressDraw
) {
3567 * Return the list of annotations.
3569 Dygraph
.prototype.annotations
= function() {
3570 return this.annotations_
;
3574 * Get the list of label names for this graph. The first column is the
3575 * x-axis, so the data series names start at index 1.
3577 Dygraph
.prototype.getLabels
= function() {
3578 return this.attr_("labels").slice();
3582 * Get the index of a series (column) given its name. The first column is the
3583 * x-axis, so the data series start with index 1.
3585 Dygraph
.prototype.indexFromSetName
= function(name
) {
3586 return this.setIndexByName_
[name
];
3590 * Get the internal dataset index given its name. These are numbered starting from 0,
3591 * and only count visible sets.
3594 Dygraph
.prototype.datasetIndexFromSetName_
= function(name
) {
3595 return this.datasetIndex_
[this.indexFromSetName(name
)];
3600 * Adds a default style for the annotation CSS classes to the document. This is
3601 * only executed when annotations are actually used. It is designed to only be
3602 * called once -- all calls after the first will return immediately.
3604 Dygraph
.addAnnotationRule
= function() {
3605 // TODO(danvk): move this function into plugins/annotations.js
?
3606 if (Dygraph
.addedAnnotationCSS
) return;
3608 var rule
= "border: 1px solid black; " +
3609 "background-color: white; " +
3610 "text-align: center;";
3612 var styleSheetElement
= document
.createElement("style");
3613 styleSheetElement
.type
= "text/css";
3614 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3616 // Find the first style sheet that we can access.
3617 // We may not add a rule to a style sheet from another domain for security
3618 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3619 // adds its own style sheets from google.com.
3620 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3621 if (document
.styleSheets
[i
].disabled
) continue;
3622 var mysheet
= document
.styleSheets
[i
];
3624 if (mysheet
.insertRule
) { // Firefox
3625 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3626 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3627 } else if (mysheet
.addRule
) { // IE
3628 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3630 Dygraph
.addedAnnotationCSS
= true;
3633 // Was likely a security exception.
3637 this.warn("Unable to add default annotation CSS rule; display may be off.");
3640 // Older pages may still use this name.
3641 var DateGraph
= Dygraph
;