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/
45 import DygraphLayout from
'./dygraph-layout';
46 import DygraphCanvasRenderer from
'./dygraph-canvas';
47 import DygraphOptions from
'./dygraph-options';
48 import DygraphInteraction from
'./dygraph-interaction-model';
49 import * as DygraphTickers from
'./dygraph-tickers';
50 import * as utils from
'./dygraph-utils';
51 import DEFAULT_ATTRS from
'./dygraph-default-attrs';
52 import OPTIONS_REFERENCE from
'./dygraph-options-reference';
53 import IFrameTarp from
'./iframe-tarp';
55 import DefaultHandler from
'./datahandler/default';
56 import ErrorBarsHandler from
'./datahandler/bars-error';
57 import CustomBarsHandler from
'./datahandler/bars-custom';
58 import DefaultFractionHandler from
'./datahandler/default-fractions';
59 import FractionsBarsHandler from
'./datahandler/bars-fractions';
60 import BarsHandler from
'./datahandler/bars';
62 import AnnotationsPlugin from
'./plugins/annotations';
63 import AxesPlugin from
'./plugins/axes';
64 import ChartLabelsPlugin from
'./plugins/chart-labels';
65 import GridPlugin from
'./plugins/grid';
66 import LegendPlugin from
'./plugins/legend';
67 import RangeSelectorPlugin from
'./plugins/range-selector';
69 import GVizChart from
'./dygraph-gviz';
74 * Creates an interactive, zoomable chart.
77 * @param {div | String} div A div or the id of a div into which to construct
79 * @param {String | Function} file A file containing CSV data or a function
80 * that returns this data. The most basic expected format for each line is
81 * "YYYY/MM/DD,val1,val2,...". For more information, see
82 * http://dygraphs.com/data.html.
83 * @param {Object} attrs Various other attributes, e.g. errorBars determines
84 * whether the input data contains error ranges. For a complete list of
85 * options, see http://dygraphs.com/options.html.
87 var Dygraph
= function(div
, data
, opts
) {
88 this.__init__(div
, data
, opts
);
91 Dygraph
.NAME
= "Dygraph";
92 Dygraph
.VERSION
= "2.1.0";
94 // Various default values
95 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
96 Dygraph
.DEFAULT_WIDTH
= 480;
97 Dygraph
.DEFAULT_HEIGHT
= 320;
99 // For max 60 Hz. animation:
100 Dygraph
.ANIMATION_STEPS
= 12;
101 Dygraph
.ANIMATION_DURATION
= 200;
104 * Standard plotters. These may be used by clients.
105 * Available plotters are:
106 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
107 * - Dygraph.Plotters.errorPlotter: draws error bars
108 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
110 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
111 * This causes all the lines to be drawn over all the fills/error bars.
113 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
116 // Used for initializing annotation CSS rules only once.
117 Dygraph
.addedAnnotationCSS
= false;
120 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
121 * and context <canvas> inside of it. See the constructor for details.
123 * @param {Element} div the Element to render the graph into.
124 * @param {string | Function} file Source data
125 * @param {Object} attrs Miscellaneous other options
128 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
129 this.is_initial_draw_
= true;
132 // Support two-argument constructor
133 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
135 attrs
= Dygraph
.copyUserAttrs_(attrs
);
137 if (typeof(div
) == 'string') {
138 div
= document
.getElementById(div
);
142 throw new Error('Constructing dygraph with a non-existent div!');
145 // Copy the important bits into the object
146 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
149 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
150 this.previousVerticalX_
= -1;
151 this.fractions_
= attrs
.fractions
|| false;
152 this.dateWindow_
= attrs
.dateWindow
|| null;
154 this.annotations_
= [];
156 // Clear the div. This ensure that, if multiple dygraphs are passed the same
157 // div, then only one will be drawn.
160 // For historical reasons, the 'width' and 'height' options trump all CSS
161 // rules _except_ for an explicit 'width' or 'height' on the div.
162 // As an added convenience, if the div has zero height (like <div></div> does
163 // without any styles), then we use a default height/width
.
164 if (div
.style
.width
=== '' && attrs
.width
) {
165 div
.style
.width
= attrs
.width
+ "px";
167 if (div
.style
.height
=== '' && attrs
.height
) {
168 div
.style
.height
= attrs
.height
+ "px";
170 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
171 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
172 if (div
.style
.width
=== '') {
173 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
176 // These will be zero if the dygraph's div is hidden. In that case,
177 // use the user-specified attributes if present. If not, use zero
178 // and assume the user will call resize to fix things later.
179 this.width_
= div
.clientWidth
|| attrs
.width
|| 0;
180 this.height_
= div
.clientHeight
|| attrs
.height
|| 0;
182 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
183 if (attrs
.stackedGraph
) {
184 attrs
.fillGraph
= true;
185 // TODO(nikhilk): Add any other stackedGraph checks here.
188 // DEPRECATION WARNING: All option processing should be moved from
189 // attrs_ and user_attrs_ to options_, which holds all this information.
191 // Dygraphs has many options, some of which interact with one another.
192 // To keep track of everything, we maintain two sets of options:
194 // this.user_attrs_ only options explicitly set by the user.
195 // this.attrs_ defaults, options derived from user_attrs_, data.
197 // Options are then accessed this.attr_('attr'), which first looks at
198 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
199 // defaults without overriding behavior that the user specifically asks for.
200 this.user_attrs_
= {};
201 utils
.update(this.user_attrs_
, attrs
);
203 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
205 utils
.updateDeep(this.attrs_
, DEFAULT_ATTRS
);
207 this.boundaryIds_
= [];
208 this.setIndexByName_
= {};
209 this.datasetIndex_
= [];
211 this.registeredEvents_
= [];
212 this.eventListeners_
= {};
214 this.attributes_
= new DygraphOptions(this);
216 // Create the containing DIV and other interactive elements
217 this.createInterface_();
221 var plugins
= Dygraph
.PLUGINS
.concat(this.getOption('plugins'));
222 for (var i
= 0; i
< plugins
.length
; i
++) {
223 // the plugins option may contain either plugin classes or instances.
224 // Plugin instances contain an activate method.
225 var Plugin
= plugins
[i
]; // either a constructor or an instance.
227 if (typeof(Plugin
.activate
) !== 'undefined') {
228 pluginInstance
= Plugin
;
230 pluginInstance
= new Plugin();
234 plugin
: pluginInstance
,
240 var handlers
= pluginInstance
.activate(this);
241 for (var eventName
in handlers
) {
242 if (!handlers
.hasOwnProperty(eventName
)) continue;
243 // TODO(danvk): validate eventName.
244 pluginDict
.events
[eventName
] = handlers
[eventName
];
247 this.plugins_
.push(pluginDict
);
250 // At this point, plugins can no longer register event handlers.
251 // Construct a map from event -> ordered list of [callback, plugin].
252 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
253 var plugin_dict
= this.plugins_
[i
];
254 for (var eventName
in plugin_dict
.events
) {
255 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
256 var callback
= plugin_dict
.events
[eventName
];
258 var pair
= [plugin_dict
.plugin
, callback
];
259 if (!(eventName
in this.eventListeners_
)) {
260 this.eventListeners_
[eventName
] = [pair
];
262 this.eventListeners_
[eventName
].push(pair
);
267 this.createDragInterface_();
273 * Triggers a cascade of events to the various plugins which are interested in them.
274 * Returns true if the "default behavior" should be prevented, i.e. if one
275 * of the event listeners called event.preventDefault().
278 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
279 if (!(name
in this.eventListeners_
)) return false;
281 // QUESTION: can we use objects & prototypes to speed this up?
285 defaultPrevented
: false,
286 preventDefault
: function() {
287 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
288 e
.defaultPrevented
= true;
290 propagationStopped
: false,
291 stopPropagation
: function() {
292 e
.propagationStopped
= true;
295 utils
.update(e
, extra_props
);
297 var callback_plugin_pairs
= this.eventListeners_
[name
];
298 if (callback_plugin_pairs
) {
299 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
300 var plugin
= callback_plugin_pairs
[i
][0];
301 var callback
= callback_plugin_pairs
[i
][1];
302 callback
.call(plugin
, e
);
303 if (e
.propagationStopped
) break;
306 return e
.defaultPrevented
;
310 * Fetch a plugin instance of a particular class. Only for testing.
312 * @param {!Class} type The type of the plugin.
313 * @return {Object} Instance of the plugin, or null if there is none.
315 Dygraph
.prototype.getPluginInstance_
= function(type
) {
316 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
317 var p
= this.plugins_
[i
];
318 if (p
.plugin
instanceof type
) {
326 * Returns the zoomed status of the chart for one or both axes.
328 * Axis is an optional parameter. Can be set to 'x' or 'y'.
330 * The zoomed status for an axis is set whenever a user zooms using the mouse
331 * or when the dateWindow or valueRange are updated. Double-clicking or calling
332 * resetZoom() resets the zoom status for the chart.
334 Dygraph
.prototype.isZoomed
= function(axis
) {
335 const isZoomedX
= !!this.dateWindow_
;
336 if (axis
=== 'x') return isZoomedX
;
338 const isZoomedY
= this.axes_
.map(axis
=> !!axis
.valueRange
).indexOf(true) >= 0;
339 if (axis
=== null || axis
=== undefined
) {
340 return isZoomedX
|| isZoomedY
;
342 if (axis
=== 'y') return isZoomedY
;
344 throw new Error(`axis parameter is
[${axis
}] must be
null, 'x' or
'y'.`);
348 * Returns information about the Dygraph object, including its containing ID.
350 Dygraph
.prototype.toString
= function() {
351 var maindiv
= this.maindiv_
;
352 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
353 return "[Dygraph " + id
+ "]";
358 * Returns the value of an option. This may be set by the user (either in the
359 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
361 * @param {string} name The name of the option, e.g. 'rollPeriod'.
362 * @param {string} [seriesName] The name of the series to which the option
363 * will be applied. If no per-series value of this option is available, then
364 * the global value is returned. This is optional.
365 * @return { ... } The value of the option.
367 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
368 // For "production" code, this gets removed by uglifyjs.
369 if (typeof(process
) !== 'undefined') {
370 if (process
.env
.NODE_ENV
!= 'production') {
371 if (typeof(OPTIONS_REFERENCE
) === 'undefined') {
372 console
.error('Must include options reference JS for testing');
373 } else if (!OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
374 console
.error('Dygraphs is using property ' + name
+ ', which has no ' +
375 'entry in the Dygraphs.OPTIONS_REFERENCE listing.');
376 // Only log this error once.
377 OPTIONS_REFERENCE
[name
] = true;
381 return seriesName
? this.attributes_
.getForSeries(name
, seriesName
) : this.attributes_
.get(name
);
385 * Returns the current value for an option, as set in the constructor or via
386 * updateOptions. You may pass in an (optional) series name to get per-series
387 * values for the option.
389 * All values returned by this method should be considered immutable. If you
390 * modify them, there is no guarantee that the changes will be honored or that
391 * dygraphs will remain in a consistent state. If you want to modify an option,
392 * use updateOptions() instead.
394 * @param {string} name The name of the option (e.g. 'strokeWidth')
395 * @param {string=} opt_seriesName Series name to get per-series values.
396 * @return {*} The value of the option.
398 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
399 return this.attr_(name
, opt_seriesName
);
403 * Like getOption(), but specifically returns a number.
404 * This is a convenience function for working with the Closure Compiler.
405 * @param {string} name The name of the option (e.g. 'strokeWidth')
406 * @param {string=} opt_seriesName Series name to get per-series values.
407 * @return {number} The value of the option.
410 Dygraph
.prototype.getNumericOption
= function(name
, opt_seriesName
) {
411 return /** @type{number} */(this.getOption(name
, opt_seriesName
));
415 * Like getOption(), but specifically returns a string.
416 * This is a convenience function for working with the Closure Compiler.
417 * @param {string} name The name of the option (e.g. 'strokeWidth')
418 * @param {string=} opt_seriesName Series name to get per-series values.
419 * @return {string} The value of the option.
422 Dygraph
.prototype.getStringOption
= function(name
, opt_seriesName
) {
423 return /** @type{string} */(this.getOption(name
, opt_seriesName
));
427 * Like getOption(), but specifically returns a boolean.
428 * This is a convenience function for working with the Closure Compiler.
429 * @param {string} name The name of the option (e.g. 'strokeWidth')
430 * @param {string=} opt_seriesName Series name to get per-series values.
431 * @return {boolean} The value of the option.
434 Dygraph
.prototype.getBooleanOption
= function(name
, opt_seriesName
) {
435 return /** @type{boolean} */(this.getOption(name
, opt_seriesName
));
439 * Like getOption(), but specifically returns a function.
440 * This is a convenience function for working with the Closure Compiler.
441 * @param {string} name The name of the option (e.g. 'strokeWidth')
442 * @param {string=} opt_seriesName Series name to get per-series values.
443 * @return {function(...)} The value of the option.
446 Dygraph
.prototype.getFunctionOption
= function(name
, opt_seriesName
) {
447 return /** @type{function(...)} */(this.getOption(name
, opt_seriesName
));
450 Dygraph
.prototype.getOptionForAxis
= function(name
, axis
) {
451 return this.attributes_
.getForAxis(name
, axis
);
456 * @param {string} axis The name of the axis (i.e. 'x', 'y' or 'y2')
457 * @return { ... } A function mapping string -> option value
459 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
461 return function(opt
) {
462 var axis_opts
= self
.user_attrs_
.axes
;
463 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
464 return axis_opts
[axis
][opt
];
467 // I don't like that this is in a second spot.
468 if (axis
=== 'x' && opt
=== 'logscale') {
469 // return the default value.
470 // TODO(konigsberg): pull the default from a global default.
474 // user-specified attributes always trump defaults, even if they're less
476 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
477 return self
.user_attrs_
[opt
];
480 axis_opts
= self
.attrs_
.axes
;
481 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
482 return axis_opts
[axis
][opt
];
484 // check old-style axis options
485 // TODO(danvk): add a deprecation warning if either of these match.
486 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
487 return self
.axes_
[0][opt
];
488 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
489 return self
.axes_
[1][opt
];
491 return self
.attr_(opt
);
496 * Returns the current rolling period, as set by the user or an option.
497 * @return {number} The number of points in the rolling window
499 Dygraph
.prototype.rollPeriod
= function() {
500 return this.rollPeriod_
;
504 * Returns the currently-visible x-range. This can be affected by zooming,
505 * panning or a call to updateOptions.
506 * Returns a two-element array: [left, right].
507 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
509 Dygraph
.prototype.xAxisRange
= function() {
510 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
514 * Returns the lower- and upper-bound x-axis values of the data set.
516 Dygraph
.prototype.xAxisExtremes
= function() {
517 var pad
= this.getNumericOption('xRangePad') / this.plotter_
.area
.w
;
518 if (this.numRows() === 0) {
519 return [0 - pad
, 1 + pad
];
521 var left
= this.rawData_
[0][0];
522 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
524 // Must keep this in sync with dygraph-layout _evaluateLimits()
525 var range
= right
- left
;
527 right
+= range
* pad
;
529 return [left
, right
];
533 * Returns the lower- and upper-bound y-axis values for each axis. These are
534 * the ranges you'll get if you double-click to zoom out or call resetZoom().
535 * The return value is an array of [low, high] tuples, one for each y-axis.
537 Dygraph
.prototype.yAxisExtremes
= function() {
538 // TODO(danvk): this is pretty inefficient
539 const packed
= this.gatherDatasets_(this.rolledSeries_
, null);
540 const { extremes
} = packed
;
541 const saveAxes
= this.axes_
;
542 this.computeYAxisRanges_(extremes
);
543 const newAxes
= this.axes_
;
544 this.axes_
= saveAxes
;
545 return newAxes
.map(axis
=> axis
.extremeRange
);
549 * Returns the currently-visible y-range for an axis. This can be affected by
550 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
551 * called with no arguments, returns the range of the first axis.
552 * Returns a two-element array: [bottom, top].
554 Dygraph
.prototype.yAxisRange
= function(idx
) {
555 if (typeof(idx
) == "undefined") idx
= 0;
556 if (idx
< 0 || idx
>= this.axes_
.length
) {
559 var axis
= this.axes_
[idx
];
560 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
564 * Returns the currently-visible y-ranges for each axis. This can be affected by
565 * zooming, panning, calls to updateOptions, etc.
566 * Returns an array of [bottom, top] pairs, one for each y-axis.
568 Dygraph
.prototype.yAxisRanges
= function() {
570 for (var i
= 0; i
< this.axes_
.length
; i
++) {
571 ret
.push(this.yAxisRange(i
));
576 // TODO(danvk): use these functions throughout dygraphs.
578 * Convert from data coordinates to canvas/div X/Y coordinates.
579 * If specified, do this conversion for the coordinate system of a particular
580 * axis. Uses the first axis by default.
581 * Returns a two-element array: [X, Y]
583 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
584 * instead of toDomCoords(null, y, axis).
586 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
587 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
591 * Convert from data x coordinates to canvas/div X coordinate.
592 * If specified, do this conversion for the coordinate system of a particular
594 * Returns a single value or null if x is null.
596 Dygraph
.prototype.toDomXCoord
= function(x
) {
601 var area
= this.plotter_
.area
;
602 var xRange
= this.xAxisRange();
603 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
607 * Convert from data x coordinates to canvas/div Y coordinate and optional
608 * axis. Uses the first axis by default.
610 * returns a single value or null if y is null.
612 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
613 var pct
= this.toPercentYCoord(y
, axis
);
618 var area
= this.plotter_
.area
;
619 return area
.y
+ pct
* area
.h
;
623 * Convert from canvas/div coords to data coordinates.
624 * If specified, do this conversion for the coordinate system of a particular
625 * axis. Uses the first axis by default.
626 * Returns a two-element array: [X, Y].
628 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
629 * instead of toDataCoords(null, y, axis).
631 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
632 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
636 * Convert from canvas/div x coordinate to data coordinate.
638 * If x is null, this returns null.
640 Dygraph
.prototype.toDataXCoord
= function(x
) {
645 var area
= this.plotter_
.area
;
646 var xRange
= this.xAxisRange();
648 if (!this.attributes_
.getForAxis("logscale", 'x')) {
649 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
651 var pct
= (x
- area
.x
) / area
.w
;
652 return utils
.logRangeFraction(xRange
[0], xRange
[1], pct
);
657 * Convert from canvas/div y coord to value.
659 * If y is null, this returns null.
660 * if axis is null, this uses the first axis.
662 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
667 var area
= this.plotter_
.area
;
668 var yRange
= this.yAxisRange(axis
);
670 if (typeof(axis
) == "undefined") axis
= 0;
671 if (!this.attributes_
.getForAxis("logscale", axis
)) {
672 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
674 // Computing the inverse of toDomCoord.
675 var pct
= (y
- area
.y
) / area
.h
;
676 // Note reversed yRange, y1 is on top with pct==0.
677 return utils
.logRangeFraction(yRange
[1], yRange
[0], pct
);
682 * Converts a y for an axis to a percentage from the top to the
683 * bottom of the drawing area.
685 * If the coordinate represents a value visible on the canvas, then
686 * the value will be between 0 and 1, where 0 is the top of the canvas.
687 * However, this method will return values outside the range, as
688 * values can fall outside the canvas.
690 * If y is null, this returns null.
691 * if axis is null, this uses the first axis.
693 * @param {number} y The data y-coordinate.
694 * @param {number} [axis] The axis number on which the data coordinate lives.
695 * @return {number} A fraction in [0, 1] where 0 = the top edge.
697 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
701 if (typeof(axis
) == "undefined") axis
= 0;
703 var yRange
= this.yAxisRange(axis
);
706 var logscale
= this.attributes_
.getForAxis("logscale", axis
);
708 var logr0
= utils
.log10(yRange
[0]);
709 var logr1
= utils
.log10(yRange
[1]);
710 pct
= (logr1
- utils
.log10(y
)) / (logr1
- logr0
);
712 // yRange[1] - y is unit distance from the bottom.
713 // yRange[1] - yRange[0] is the scale of the range.
714 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
715 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
721 * Converts an x value to a percentage from the left to the right of
724 * If the coordinate represents a value visible on the canvas, then
725 * the value will be between 0 and 1, where 0 is the left of the canvas.
726 * However, this method will return values outside the range, as
727 * values can fall outside the canvas.
729 * If x is null, this returns null.
730 * @param {number} x The data x-coordinate.
731 * @return {number} A fraction in [0, 1] where 0 = the left edge.
733 Dygraph
.prototype.toPercentXCoord
= function(x
) {
738 var xRange
= this.xAxisRange();
740 var logscale
= this.attributes_
.getForAxis("logscale", 'x') ;
741 if (logscale
=== true) { // logscale can be null so we test for true explicitly.
742 var logr0
= utils
.log10(xRange
[0]);
743 var logr1
= utils
.log10(xRange
[1]);
744 pct
= (utils
.log10(x
) - logr0
) / (logr1
- logr0
);
746 // x - xRange[0] is unit distance from the left.
747 // xRange[1] - xRange[0] is the scale of the range.
748 // The full expression below is the % from the left.
749 pct
= (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
755 * Returns the number of columns (including the independent variable).
756 * @return {number} The number of columns.
758 Dygraph
.prototype.numColumns
= function() {
759 if (!this.rawData_
) return 0;
760 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
764 * Returns the number of rows (excluding any header/label row).
765 * @return {number} The number of rows, less any header.
767 Dygraph
.prototype.numRows
= function() {
768 if (!this.rawData_
) return 0;
769 return this.rawData_
.length
;
773 * Returns the value in the given row and column. If the row and column exceed
774 * the bounds on the data, returns null. Also returns null if the value is
776 * @param {number} row The row number of the data (0-based). Row 0 is the
777 * first row of data, not a header row.
778 * @param {number} col The column number of the data (0-based)
779 * @return {number} The value in the specified cell or null if the row/col
782 Dygraph
.prototype.getValue
= function(row
, col
) {
783 if (row
< 0 || row
> this.rawData_
.length
) return null;
784 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
786 return this.rawData_
[row
][col
];
790 * Generates interface elements for the Dygraph: a containing div, a div to
791 * display the current point, and a textbox to adjust the rolling average
792 * period. Also creates the Renderer/Layout elements.
795 Dygraph
.prototype.createInterface_
= function() {
796 // Create the all-enclosing graph div
797 var enclosing
= this.maindiv_
;
799 this.graphDiv
= document
.createElement("div");
801 // TODO(danvk): any other styles that are useful to set here?
802 this.graphDiv
.style
.textAlign
= 'left'; // This is a CSS "reset"
803 this.graphDiv
.style
.position
= 'relative';
804 enclosing
.appendChild(this.graphDiv
);
806 // Create the canvas for interactive parts of the chart.
807 this.canvas_
= utils
.createCanvas();
808 this.canvas_
.style
.position
= "absolute";
810 // ... and for static parts of the chart.
811 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
813 this.canvas_ctx_
= utils
.getContext(this.canvas_
);
814 this.hidden_ctx_
= utils
.getContext(this.hidden_
);
816 this.resizeElements_();
818 // The interactive parts of the graph are drawn on top of the chart.
819 this.graphDiv
.appendChild(this.hidden_
);
820 this.graphDiv
.appendChild(this.canvas_
);
821 this.mouseEventElement_
= this.createMouseEventElement_();
823 // Create the grapher
824 this.layout_
= new DygraphLayout(this);
828 this.mouseMoveHandler_
= function(e
) {
829 dygraph
.mouseMove_(e
);
832 this.mouseOutHandler_
= function(e
) {
833 // The mouse has left the chart if:
834 // 1. e.target is inside the chart
835 // 2. e.relatedTarget is outside the chart
836 var target
= e
.target
|| e
.fromElement
;
837 var relatedTarget
= e
.relatedTarget
|| e
.toElement
;
838 if (utils
.isNodeContainedBy(target
, dygraph
.graphDiv
) &&
839 !utils
.isNodeContainedBy(relatedTarget
, dygraph
.graphDiv
)) {
840 dygraph
.mouseOut_(e
);
844 this.addAndTrackEvent(window
, 'mouseout', this.mouseOutHandler_
);
845 this.addAndTrackEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
847 // Don't recreate and register the resize handler on subsequent calls.
848 // This happens when the graph is resized.
849 if (!this.resizeHandler_
) {
850 this.resizeHandler_
= function(e
) {
854 // Update when the window is resized.
855 // TODO(danvk): drop frames depending on complexity of the chart.
856 this.addAndTrackEvent(window
, 'resize', this.resizeHandler_
);
860 Dygraph
.prototype.resizeElements_
= function() {
861 this.graphDiv
.style
.width
= this.width_
+ "px";
862 this.graphDiv
.style
.height
= this.height_
+ "px";
864 var pixelRatioOption
= this.getNumericOption('pixelRatio')
866 var canvasScale
= pixelRatioOption
|| utils
.getContextPixelRatio(this.canvas_ctx_
);
867 this.canvas_
.width
= this.width_
* canvasScale
;
868 this.canvas_
.height
= this.height_
* canvasScale
;
869 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
870 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
871 if (canvasScale
!== 1) {
872 this.canvas_ctx_
.scale(canvasScale
, canvasScale
);
875 var hiddenScale
= pixelRatioOption
|| utils
.getContextPixelRatio(this.hidden_ctx_
);
876 this.hidden_
.width
= this.width_
* hiddenScale
;
877 this.hidden_
.height
= this.height_
* hiddenScale
;
878 this.hidden_
.style
.width
= this.width_
+ "px"; // for IE
879 this.hidden_
.style
.height
= this.height_
+ "px"; // for IE
880 if (hiddenScale
!== 1) {
881 this.hidden_ctx_
.scale(hiddenScale
, hiddenScale
);
886 * Detach DOM elements in the dygraph and null out all data references.
887 * Calling this when you're done with a dygraph can dramatically reduce memory
888 * usage. See, e.g., the tests/perf.html example.
890 Dygraph
.prototype.destroy
= function() {
891 this.canvas_ctx_
.restore();
892 this.hidden_ctx_
.restore();
894 // Destroy any plugins, in the reverse order that they were registered.
895 for (var i
= this.plugins_
.length
- 1; i
>= 0; i
--) {
896 var p
= this.plugins_
.pop();
897 if (p
.plugin
.destroy
) p
.plugin
.destroy();
900 var removeRecursive
= function(node
) {
901 while (node
.hasChildNodes()) {
902 removeRecursive(node
.firstChild
);
903 node
.removeChild(node
.firstChild
);
907 this.removeTrackedEvents_();
909 // remove mouse event handlers (This may not be necessary anymore)
910 utils
.removeEvent(window
, 'mouseout', this.mouseOutHandler_
);
911 utils
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
913 // remove window handlers
914 utils
.removeEvent(window
,'resize', this.resizeHandler_
);
915 this.resizeHandler_
= null;
917 removeRecursive(this.maindiv_
);
919 var nullOut
= function(obj
) {
921 if (typeof(obj
[n
]) === 'object') {
926 // These may not all be necessary, but it can't hurt...
927 nullOut(this.layout_
);
928 nullOut(this.plotter_
);
933 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
934 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
935 * or the zoom rectangles) is done on this.canvas_.
936 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
937 * @return {Object} The newly-created canvas
940 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
941 var h
= utils
.createCanvas();
942 h
.style
.position
= "absolute";
943 // TODO(danvk): h should be offset from canvas. canvas needs to include
944 // some extra area to make it easier to zoom in on the far left and far
945 // right. h needs to be precisely the plot area, so that clipping occurs.
946 h
.style
.top
= canvas
.style
.top
;
947 h
.style
.left
= canvas
.style
.left
;
948 h
.width
= this.width_
;
949 h
.height
= this.height_
;
950 h
.style
.width
= this.width_
+ "px"; // for IE
951 h
.style
.height
= this.height_
+ "px"; // for IE
956 * Creates an overlay element used to handle mouse events.
957 * @return {Object} The mouse event element.
960 Dygraph
.prototype.createMouseEventElement_
= function() {
965 * Generate a set of distinct colors for the data series. This is done with a
966 * color wheel. Saturation/Value are customizable, and the hue is
967 * equally-spaced around the color wheel. If a custom set of colors is
968 * specified, that is used instead.
971 Dygraph
.prototype.setColors_
= function() {
972 var labels
= this.getLabels();
973 var num
= labels
.length
- 1;
975 this.colorsMap_
= {};
977 // These are used for when no custom colors are specified.
978 var sat
= this.getNumericOption('colorSaturation') || 1.0;
979 var val
= this.getNumericOption('colorValue') || 0.5;
980 var half
= Math
.ceil(num
/ 2);
982 var colors
= this.getOption('colors');
983 var visibility
= this.visibility();
984 for (var i
= 0; i
< num
; i
++) {
985 if (!visibility
[i
]) {
988 var label
= labels
[i
+ 1];
989 var colorStr
= this.attributes_
.getForSeries('color', label
);
992 colorStr
= colors
[i
% colors
.length
];
994 // alternate colors for high contrast.
995 var idx
= i
% 2 ? (half
+ (i
+ 1)/ 2) : Math.ceil((i + 1) / 2);
996 var hue
= (1.0 * idx
/ (1 + num
));
997 colorStr
= utils
.hsvToRGB(hue
, sat
, val
);
1000 this.colors_
.push(colorStr
);
1001 this.colorsMap_
[label
] = colorStr
;
1006 * Return the list of colors. This is either the list of colors passed in the
1007 * attributes or the autogenerated list of rgb(r,g,b) strings.
1008 * This does not return colors for invisible series.
1009 * @return {Array.<string>} The list of colors.
1011 Dygraph
.prototype.getColors
= function() {
1012 return this.colors_
;
1016 * Returns a few attributes of a series, i.e. its color, its visibility, which
1017 * axis it's assigned to, and its column in the original data.
1018 * Returns null if the series does not exist.
1019 * Otherwise, returns an object with column, visibility, color and axis properties.
1020 * The "axis" property will be set to 1 for y1 and 2 for y2.
1021 * The "column" property can be fed back into getValue(row, column) to get
1022 * values for this series.
1024 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1026 var labels
= this.getLabels();
1027 for (var i
= 1; i
< labels
.length
; i
++) {
1028 if (labels
[i
] == series_name
) {
1033 if (idx
== -1) return null;
1038 visible
: this.visibility()[idx
- 1],
1039 color
: this.colorsMap_
[series_name
],
1040 axis
: 1 + this.attributes_
.axisForSeries(series_name
)
1045 * Create the text box to adjust the averaging period
1048 Dygraph
.prototype.createRollInterface_
= function() {
1049 // Create a roller if one doesn't exist already.
1050 var roller
= this.roller_
;
1052 this.roller_
= roller
= document
.createElement("input");
1053 roller
.type
= "text";
1054 roller
.style
.display
= "none";
1055 roller
.className
= 'dygraph-roller';
1056 this.graphDiv
.appendChild(roller
);
1059 var display
= this.getBooleanOption('showRoller') ? 'block' : 'none';
1061 var area
= this.getArea();
1063 "top": (area
.y
+ area
.h
- 25) + "px",
1064 "left": (area
.x
+ 1) + "px",
1068 roller
.value
= this.rollPeriod_
;
1069 utils
.update(roller
.style
, textAttr
);
1071 roller
.onchange
= () => this.adjustRoll(roller
.value
);
1075 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1079 Dygraph
.prototype.createDragInterface_
= function() {
1081 // Tracks whether the mouse is down right now
1083 isPanning
: false, // is this drag part of a pan?
1084 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1085 dragStartX
: null, // pixel coordinates
1086 dragStartY
: null, // pixel coordinates
1087 dragEndX
: null, // pixel coordinates
1088 dragEndY
: null, // pixel coordinates
1089 dragDirection
: null,
1090 prevEndX
: null, // pixel coordinates
1091 prevEndY
: null, // pixel coordinates
1092 prevDragDirection
: null,
1093 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1095 // The value on the left side of the graph when a pan operation starts.
1096 initialLeftmostDate
: null,
1098 // The number of units each pixel spans. (This won't be valid for log
1100 xUnitsPerPixel
: null,
1102 // TODO(danvk): update this comment
1103 // The range in second/value units that the viewport encompasses during a
1104 // panning operation.
1107 // Top-left corner of the canvas, in DOM coords
1108 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1112 // Values for use with panEdgeFraction, which limit how far outside the
1113 // graph's data boundaries it can be panned.
1114 boundedDates
: null, // [minDate, maxDate]
1115 boundedValues
: null, // [[minValue, maxValue] ...]
1117 // We cover iframes during mouse interactions. See comments in
1118 // dygraph-utils.js for more info on why this is a good idea.
1119 tarp
: new IFrameTarp(),
1121 // contextB is the same thing as this context object but renamed.
1122 initializeMouseDown
: function(event
, g
, contextB
) {
1123 // prevents mouse drags from selecting page text.
1124 if (event
.preventDefault
) {
1125 event
.preventDefault(); // Firefox, Chrome, etc.
1127 event
.returnValue
= false; // IE
1128 event
.cancelBubble
= true;
1131 var canvasPos
= utils
.findPos(g
.canvas_
);
1132 contextB
.px
= canvasPos
.x
;
1133 contextB
.py
= canvasPos
.y
;
1134 contextB
.dragStartX
= utils
.dragGetX_(event
, contextB
);
1135 contextB
.dragStartY
= utils
.dragGetY_(event
, contextB
);
1136 contextB
.cancelNextDblclick
= false;
1137 contextB
.tarp
.cover();
1139 destroy
: function() {
1141 if (context
.isZooming
|| context
.isPanning
) {
1142 context
.isZooming
= false;
1143 context
.dragStartX
= null;
1144 context
.dragStartY
= null;
1147 if (context
.isPanning
) {
1148 context
.isPanning
= false;
1149 context
.draggingDate
= null;
1150 context
.dateRange
= null;
1151 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1152 delete self
.axes_
[i
].draggingValue
;
1153 delete self
.axes_
[i
].dragValueRange
;
1157 context
.tarp
.uncover();
1161 var interactionModel
= this.getOption("interactionModel");
1163 // Self is the graph.
1166 // Function that binds the graph and context to the handler.
1167 var bindHandler
= function(handler
) {
1168 return function(event
) {
1169 handler(event
, self
, context
);
1173 for (var eventName
in interactionModel
) {
1174 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1175 this.addAndTrackEvent(this.mouseEventElement_
, eventName
,
1176 bindHandler(interactionModel
[eventName
]));
1179 // If the user releases the mouse button during a drag, but not over the
1180 // canvas, then it doesn't count as a zooming action.
1181 if (!interactionModel
.willDestroyContextMyself
) {
1182 var mouseUpHandler
= function(event
) {
1186 this.addAndTrackEvent(document
, 'mouseup', mouseUpHandler
);
1191 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1192 * up any previous zoom rectangles that were drawn. This could be optimized to
1193 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1196 * @param {number} direction the direction of the zoom rectangle. Acceptable
1197 * values are utils.HORIZONTAL and utils.VERTICAL.
1198 * @param {number} startX The X position where the drag started, in canvas
1200 * @param {number} endX The current X position of the drag, in canvas coords.
1201 * @param {number} startY The Y position where the drag started, in canvas
1203 * @param {number} endY The current Y position of the drag, in canvas coords.
1204 * @param {number} prevDirection the value of direction on the previous call to
1205 * this function. Used to avoid excess redrawing
1206 * @param {number} prevEndX The value of endX on the previous call to this
1207 * function. Used to avoid excess redrawing
1208 * @param {number} prevEndY The value of endY on the previous call to this
1209 * function. Used to avoid excess redrawing
1212 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1213 endY
, prevDirection
, prevEndX
,
1215 var ctx
= this.canvas_ctx_
;
1217 // Clean up from the previous rect if necessary
1218 if (prevDirection
== utils
.HORIZONTAL
) {
1219 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1220 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1221 } else if (prevDirection
== utils
.VERTICAL
) {
1222 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1223 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1226 // Draw a light-grey rectangle to show the new viewing area
1227 if (direction
== utils
.HORIZONTAL
) {
1228 if (endX
&& startX
) {
1229 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1230 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1231 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1233 } else if (direction
== utils
.VERTICAL
) {
1234 if (endY
&& startY
) {
1235 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1236 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1237 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1243 * Clear the zoom rectangle (and perform no zoom).
1246 Dygraph
.prototype.clearZoomRect_
= function() {
1247 this.currentZoomRectArgs_
= null;
1248 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1252 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1253 * the canvas. The exact zoom window may be slightly larger if there are no data
1254 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1255 * which accepts dates that match the raw data. This function redraws the graph.
1257 * @param {number} lowX The leftmost pixel value that should be visible.
1258 * @param {number} highX The rightmost pixel value that should be visible.
1261 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1262 this.currentZoomRectArgs_
= null;
1263 // Find the earliest and latest dates contained in this canvasx range.
1264 // Convert the call to date ranges of the raw data.
1265 var minDate
= this.toDataXCoord(lowX
);
1266 var maxDate
= this.toDataXCoord(highX
);
1267 this.doZoomXDates_(minDate
, maxDate
);
1271 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1272 * method with doZoomX which accepts pixel coordinates. This function redraws
1275 * @param {number} minDate The minimum date that should be visible.
1276 * @param {number} maxDate The maximum date that should be visible.
1279 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1280 // TODO(danvk): when xAxisRange is null (i.e. "fit to data", the animation
1281 // can produce strange effects. Rather than the x-axis transitioning slowly
1282 // between values, it can jerk around.)
1283 var old_window
= this.xAxisRange();
1284 var new_window
= [minDate
, maxDate
];
1285 const zoomCallback
= this.getFunctionOption('zoomCallback');
1286 this.doAnimatedZoom(old_window
, new_window
, null, null, () => {
1288 zoomCallback
.call(this, minDate
, maxDate
, this.yAxisRanges());
1294 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1295 * the canvas. This function redraws the graph.
1297 * @param {number} lowY The topmost pixel value that should be visible.
1298 * @param {number} highY The lowest pixel value that should be visible.
1301 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1302 this.currentZoomRectArgs_
= null;
1303 // Find the highest and lowest values in pixel range for each axis.
1304 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1305 // This is because pixels increase as you go down on the screen, whereas data
1306 // coordinates increase as you go up the screen.
1307 var oldValueRanges
= this.yAxisRanges();
1308 var newValueRanges
= [];
1309 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1310 var hi
= this.toDataYCoord(lowY
, i
);
1311 var low
= this.toDataYCoord(highY
, i
);
1312 newValueRanges
.push([low
, hi
]);
1315 const zoomCallback
= this.getFunctionOption('zoomCallback');
1316 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, () => {
1318 const [minX
, maxX
] = this.xAxisRange();
1319 zoomCallback
.call(this, minX
, maxX
, this.yAxisRanges());
1325 * Transition function to use in animations. Returns values between 0.0
1326 * (totally old values) and 1.0 (totally new values) for each frame.
1329 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1331 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1335 * Reset the zoom to the original view coordinates. This is the same as
1336 * double-clicking on the graph.
1338 Dygraph
.prototype.resetZoom
= function() {
1339 const dirtyX
= this.isZoomed('x');
1340 const dirtyY
= this.isZoomed('y');
1341 const dirty
= dirtyX
|| dirtyY
;
1343 // Clear any selection, since it's likely to be drawn in the wrong place.
1344 this.clearSelection();
1348 // Calculate extremes to avoid lack of padding on reset.
1349 const [minDate
, maxDate
] = this.xAxisExtremes();
1351 const animatedZooms
= this.getBooleanOption('animatedZooms');
1352 const zoomCallback
= this.getFunctionOption('zoomCallback');
1354 // TODO(danvk): merge this block w/ the code below
.
1355 // TODO(danvk): factor out a generic, public zoomTo method.
1356 if (!animatedZooms
) {
1357 this.dateWindow_
= null;
1358 this.axes_
.forEach(axis
=> {
1359 if (axis
.valueRange
) delete axis
.valueRange
;
1364 zoomCallback
.call(this, minDate
, maxDate
, this.yAxisRanges());
1369 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1371 oldWindow
= this.xAxisRange();
1372 newWindow
= [minDate
, maxDate
];
1376 oldValueRanges
= this.yAxisRanges();
1377 newValueRanges
= this.yAxisExtremes();
1380 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1382 this.dateWindow_
= null;
1383 this.axes_
.forEach(axis
=> {
1384 if (axis
.valueRange
) delete axis
.valueRange
;
1387 zoomCallback
.call(this, minDate
, maxDate
, this.yAxisRanges());
1393 * Combined animation logic for all zoom functions.
1394 * either the x parameters or y parameters may be null.
1397 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1398 var steps
= this.getBooleanOption("animatedZooms") ?
1399 Dygraph
.ANIMATION_STEPS
: 1;
1402 var valueRanges
= [];
1405 if (oldXRange
!== null && newXRange
!== null) {
1406 for (step
= 1; step
<= steps
; step
++) {
1407 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1408 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1409 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1413 if (oldYRanges
!== null && newYRanges
!== null) {
1414 for (step
= 1; step
<= steps
; step
++) {
1415 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1417 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1418 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1419 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1421 valueRanges
[step
-1] = thisRange
;
1425 utils
.repeatAndCleanup(step
=> {
1426 if (valueRanges
.length
) {
1427 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1428 var w
= valueRanges
[step
][i
];
1429 this.axes_
[i
].valueRange
= [w
[0], w
[1]];
1432 if (windows
.length
) {
1433 this.dateWindow_
= windows
[step
];
1436 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1440 * Get the current graph's area object.
1442 * Returns: {x, y, w, h}
1444 Dygraph
.prototype.getArea
= function() {
1445 return this.plotter_
.area
;
1449 * Convert a mouse event to DOM coordinates relative to the graph origin.
1451 * Returns a two-element array: [X, Y].
1453 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1454 if (event
.offsetX
&& event
.offsetY
) {
1455 return [ event
.offsetX
, event
.offsetY
];
1457 var eventElementPos
= utils
.findPos(this.mouseEventElement_
);
1458 var canvasx
= utils
.pageX(event
) - eventElementPos
.x
;
1459 var canvasy
= utils
.pageY(event
) - eventElementPos
.y
;
1460 return [canvasx
, canvasy
];
1465 * Given a canvas X coordinate, find the closest row.
1466 * @param {number} domX graph-relative DOM X coordinate
1467 * Returns {number} row number.
1470 Dygraph
.prototype.findClosestRow
= function(domX
) {
1471 var minDistX
= Infinity
;
1472 var closestRow
= -1;
1473 var sets
= this.layout_
.points
;
1474 for (var i
= 0; i
< sets
.length
; i
++) {
1475 var points
= sets
[i
];
1476 var len
= points
.length
;
1477 for (var j
= 0; j
< len
; j
++) {
1478 var point
= points
[j
];
1479 if (!utils
.isValidPoint(point
, true)) continue;
1480 var dist
= Math
.abs(point
.canvasx
- domX
);
1481 if (dist
< minDistX
) {
1483 closestRow
= point
.idx
;
1492 * Given canvas X,Y coordinates, find the closest point.
1494 * This finds the individual data point across all visible series
1495 * that's closest to the supplied DOM coordinates using the standard
1496 * Euclidean X,Y distance.
1498 * @param {number} domX graph-relative DOM X coordinate
1499 * @param {number} domY graph-relative DOM Y coordinate
1500 * Returns: {row, seriesName, point}
1503 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1504 var minDist
= Infinity
;
1505 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
, closestRow
;
1506 for ( var setIdx
= this.layout_
.points
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1507 var points
= this.layout_
.points
[setIdx
];
1508 for (var i
= 0; i
< points
.length
; ++i
) {
1510 if (!utils
.isValidPoint(point
)) continue;
1511 dx
= point
.canvasx
- domX
;
1512 dy
= point
.canvasy
- domY
;
1513 dist
= dx
* dx
+ dy
* dy
;
1514 if (dist
< minDist
) {
1516 closestPoint
= point
;
1517 closestSeries
= setIdx
;
1518 closestRow
= point
.idx
;
1522 var name
= this.layout_
.setNames
[closestSeries
];
1531 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1533 * This first finds the X data point closest to the supplied DOM X coordinate,
1534 * then finds the series which puts the Y coordinate on top of its filled area,
1535 * using linear interpolation between adjacent point pairs.
1537 * @param {number} domX graph-relative DOM X coordinate
1538 * @param {number} domY graph-relative DOM Y coordinate
1539 * Returns: {row, seriesName, point}
1542 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1543 var row
= this.findClosestRow(domX
);
1544 var closestPoint
, closestSeries
;
1545 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
1546 var boundary
= this.getLeftBoundary_(setIdx
);
1547 var rowIdx
= row
- boundary
;
1548 var points
= this.layout_
.points
[setIdx
];
1549 if (rowIdx
>= points
.length
) continue;
1550 var p1
= points
[rowIdx
];
1551 if (!utils
.isValidPoint(p1
)) continue;
1552 var py
= p1
.canvasy
;
1553 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1554 // interpolate series Y value using next point
1555 var p2
= points
[rowIdx
+ 1];
1556 if (utils
.isValidPoint(p2
)) {
1557 var dx
= p2
.canvasx
- p1
.canvasx
;
1559 var r
= (domX
- p1
.canvasx
) / dx
;
1560 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1563 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1564 // interpolate series Y value using previous point
1565 var p0
= points
[rowIdx
- 1];
1566 if (utils
.isValidPoint(p0
)) {
1567 var dx
= p1
.canvasx
- p0
.canvasx
;
1569 var r
= (p1
.canvasx
- domX
) / dx
;
1570 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1574 // Stop if the point (domX, py) is above this series' upper edge
1575 if (setIdx
=== 0 || py
< domY
) {
1577 closestSeries
= setIdx
;
1580 var name
= this.layout_
.setNames
[closestSeries
];
1589 * When the mouse moves in the canvas, display information about a nearby data
1590 * point and draw dots over those points in the data series. This function
1591 * takes care of cleanup of previously-drawn dots.
1592 * @param {Object} event The mousemove event from the browser.
1595 Dygraph
.prototype.mouseMove_
= function(event
) {
1596 // This prevents JS errors when mousing over the canvas before data loads.
1597 var points
= this.layout_
.points
;
1598 if (points
=== undefined
|| points
=== null) return;
1600 var canvasCoords
= this.eventToDomCoords(event
);
1601 var canvasx
= canvasCoords
[0];
1602 var canvasy
= canvasCoords
[1];
1604 var highlightSeriesOpts
= this.getOption("highlightSeriesOpts");
1605 var selectionChanged
= false;
1606 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1608 if (this.getBooleanOption("stackedGraph")) {
1609 closest
= this.findStackedPoint(canvasx
, canvasy
);
1611 closest
= this.findClosestPoint(canvasx
, canvasy
);
1613 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1615 var idx
= this.findClosestRow(canvasx
);
1616 selectionChanged
= this.setSelection(idx
);
1619 var callback
= this.getFunctionOption("highlightCallback");
1620 if (callback
&& selectionChanged
) {
1621 callback
.call(this, event
,
1625 this.highlightSet_
);
1630 * Fetch left offset from the specified set index or if not passed, the
1631 * first defined boundaryIds record (see bug #236).
1634 Dygraph
.prototype.getLeftBoundary_
= function(setIdx
) {
1635 if (this.boundaryIds_
[setIdx
]) {
1636 return this.boundaryIds_
[setIdx
][0];
1638 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
1639 if (this.boundaryIds_
[i
] !== undefined
) {
1640 return this.boundaryIds_
[i
][0];
1647 Dygraph
.prototype.animateSelection_
= function(direction
) {
1648 var totalSteps
= 10;
1650 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
1651 if (this.animateId
=== undefined
) this.animateId
= 0;
1652 var start
= this.fadeLevel
;
1653 var steps
= direction
< 0 ? start
: totalSteps
- start
;
1655 if (this.fadeLevel
) {
1656 this.updateSelection_(1.0);
1661 var thisId
= ++this.animateId
;
1663 var cleanupIfClearing
= function() {
1664 // if we haven't reached fadeLevel 0 in the max frame time,
1665 // ensure that the clear happens and just go to 0
1666 if (that
.fadeLevel
!== 0 && direction
< 0) {
1668 that
.clearSelection();
1671 utils
.repeatAndCleanup(
1673 // ignore simultaneous animations
1674 if (that
.animateId
!= thisId
) return;
1676 that
.fadeLevel
+= direction
;
1677 if (that
.fadeLevel
=== 0) {
1678 that
.clearSelection();
1680 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
1683 steps
, millis
, cleanupIfClearing
);
1687 * Draw dots over the selectied points in the data series. This function
1688 * takes care of cleanup of previously-drawn dots.
1691 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
1692 /*var defaultPrevented = */
1693 this.cascadeEvents_('select', {
1694 selectedRow
: this.lastRow_
=== -1 ? undefined
: this.lastRow_
,
1695 selectedX
: this.lastx_
=== -1 ? undefined
: this.lastx_
,
1696 selectedPoints
: this.selPoints_
1698 // TODO(danvk): use defaultPrevented here?
1700 // Clear the previously drawn vertical, if there is one
1702 var ctx
= this.canvas_ctx_
;
1703 if (this.getOption('highlightSeriesOpts')) {
1704 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1705 var alpha
= 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha');
1706 var backgroundColor
= utils
.toRGB_(this.getOption('highlightSeriesBackgroundColor'));
1709 // Activating background fade includes an animation effect for a gradual
1710 // fade. TODO(klausw): make this independently configurable if it causes
1711 // issues? Use a shared preference to control animations?
1712 var animateBackgroundFade
= true;
1713 if (animateBackgroundFade
) {
1714 if (opt_animFraction
=== undefined
) {
1715 // start a new animation
1716 this.animateSelection_(1);
1719 alpha
*= opt_animFraction
;
1721 ctx
.fillStyle
= 'rgba(' + backgroundColor
.r
+ ',' + backgroundColor
.g
+ ',' + backgroundColor
.b
+ ',' + alpha
+ ')';
1722 ctx
.fillRect(0, 0, this.width_
, this.height_
);
1725 // Redraw only the highlighted series in the interactive canvas (not the
1726 // static plot canvas, which is where series are usually drawn).
1727 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
1728 } else if (this.previousVerticalX_
>= 0) {
1729 // Determine the maximum highlight circle size.
1730 var maxCircleSize
= 0;
1731 var labels
= this.attr_('labels');
1732 for (i
= 1; i
< labels
.length
; i
++) {
1733 var r
= this.getNumericOption('highlightCircleSize', labels
[i
]);
1734 if (r
> maxCircleSize
) maxCircleSize
= r
;
1736 var px
= this.previousVerticalX_
;
1737 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1738 2 * maxCircleSize
+ 2, this.height_
);
1741 if (this.selPoints_
.length
> 0) {
1742 // Draw colored circles over the center of each selected point
1743 var canvasx
= this.selPoints_
[0].canvasx
;
1745 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
1746 var pt
= this.selPoints_
[i
];
1747 if (isNaN(pt
.canvasy
)) continue;
1749 var circleSize
= this.getNumericOption('highlightCircleSize', pt
.name
);
1750 var callback
= this.getFunctionOption("drawHighlightPointCallback", pt
.name
);
1751 var color
= this.plotter_
.colors
[pt
.name
];
1753 callback
= utils
.Circles
.DEFAULT
;
1755 ctx
.lineWidth
= this.getNumericOption('strokeWidth', pt
.name
);
1756 ctx
.strokeStyle
= color
;
1757 ctx
.fillStyle
= color
;
1758 callback
.call(this, this, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
1759 color
, circleSize
, pt
.idx
);
1763 this.previousVerticalX_
= canvasx
;
1768 * Manually set the selected points and display information about them in the
1769 * legend. The selection can be cleared using clearSelection() and queried
1770 * using getSelection().
1772 * To set a selected series but not a selected point, call setSelection with
1773 * row=false and the selected series name.
1775 * @param {number} row Row number that should be highlighted (i.e. appear with
1776 * hover dots on the chart).
1777 * @param {seriesName} optional series name to highlight that series with the
1778 * the highlightSeriesOpts setting.
1779 * @param { locked } optional If true, keep seriesName selected when mousing
1780 * over the graph, disabling closest-series highlighting. Call clearSelection()
1783 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
1784 // Extract the points we've selected
1785 this.selPoints_
= [];
1787 var changed
= false;
1788 if (row
!== false && row
>= 0) {
1789 if (row
!= this.lastRow_
) changed
= true;
1790 this.lastRow_
= row
;
1791 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
1792 var points
= this.layout_
.points
[setIdx
];
1793 // Check if the point at the appropriate index is the point we're looking
1794 // for. If it is, just use it, otherwise search the array for a point
1795 // in the proper place.
1796 var setRow
= row
- this.getLeftBoundary_(setIdx
);
1797 if (setRow
>= 0 && setRow
< points
.length
&& points
[setRow
].idx
== row
) {
1798 var point
= points
[setRow
];
1799 if (point
.yval
!== null) this.selPoints_
.push(point
);
1801 for (var pointIdx
= 0; pointIdx
< points
.length
; ++pointIdx
) {
1802 var point
= points
[pointIdx
];
1803 if (point
.idx
== row
) {
1804 if (point
.yval
!== null) {
1805 this.selPoints_
.push(point
);
1813 if (this.lastRow_
>= 0) changed
= true;
1817 if (this.selPoints_
.length
) {
1818 this.lastx_
= this.selPoints_
[0].xval
;
1823 if (opt_seriesName
!== undefined
) {
1824 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
1825 this.highlightSet_
= opt_seriesName
;
1828 if (opt_locked
!== undefined
) {
1829 this.lockedSet_
= opt_locked
;
1833 this.updateSelection_(undefined
);
1839 * The mouse has left the canvas. Clear out whatever artifacts remain
1840 * @param {Object} event the mouseout event from the browser.
1843 Dygraph
.prototype.mouseOut_
= function(event
) {
1844 if (this.getFunctionOption("unhighlightCallback")) {
1845 this.getFunctionOption("unhighlightCallback").call(this, event
);
1848 if (this.getBooleanOption("hideOverlayOnMouseOut") && !this.lockedSet_
) {
1849 this.clearSelection();
1854 * Clears the current selection (i.e. points that were highlighted by moving
1855 * the mouse over the chart).
1857 Dygraph
.prototype.clearSelection
= function() {
1858 this.cascadeEvents_('deselect', {});
1860 this.lockedSet_
= false;
1861 // Get rid of the overlay data
1862 if (this.fadeLevel
) {
1863 this.animateSelection_(-1);
1866 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1868 this.selPoints_
= [];
1871 this.highlightSet_
= null;
1875 * Returns the number of the currently selected row. To get data for this row,
1876 * you can use the getValue method.
1877 * @return {number} row number, or -1 if nothing is selected
1879 Dygraph
.prototype.getSelection
= function() {
1880 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1884 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
1885 var points
= this.layout_
.points
[setIdx
];
1886 for (var row
= 0; row
< points
.length
; row
++) {
1887 if (points
[row
].x
== this.selPoints_
[0].x
) {
1888 return points
[row
].idx
;
1896 * Returns the name of the currently-highlighted series.
1897 * Only available when the highlightSeriesOpts option is in use.
1899 Dygraph
.prototype.getHighlightSeries
= function() {
1900 return this.highlightSet_
;
1904 * Returns true if the currently-highlighted series was locked
1905 * via setSelection(..., seriesName, true).
1907 Dygraph
.prototype.isSeriesLocked
= function() {
1908 return this.lockedSet_
;
1912 * Fires when there's data available to be graphed.
1913 * @param {string} data Raw CSV data to be plotted
1916 Dygraph
.prototype.loadedEvent_
= function(data
) {
1917 this.rawData_
= this.parseCSV_(data
);
1918 this.cascadeDataDidUpdateEvent_();
1923 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1926 Dygraph
.prototype.addXTicks_
= function() {
1927 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1929 if (this.dateWindow_
) {
1930 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1932 range
= this.xAxisExtremes();
1935 var xAxisOptionsView
= this.optionsViewForAxis_('x');
1936 var xTicks
= xAxisOptionsView('ticker')(
1939 this.plotter_
.area
.w
, // TODO(danvk): should be area.width
1942 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
1943 // console.log(msg);
1944 this.layout_
.setXTicks(xTicks
);
1948 * Returns the correct handler class for the currently set options.
1951 Dygraph
.prototype.getHandlerClass_
= function() {
1953 if (this.attr_('dataHandler')) {
1954 handlerClass
= this.attr_('dataHandler');
1955 } else if (this.fractions_
) {
1956 if (this.getBooleanOption('errorBars')) {
1957 handlerClass
= FractionsBarsHandler
;
1959 handlerClass
= DefaultFractionHandler
;
1961 } else if (this.getBooleanOption('customBars')) {
1962 handlerClass
= CustomBarsHandler
;
1963 } else if (this.getBooleanOption('errorBars')) {
1964 handlerClass
= ErrorBarsHandler
;
1966 handlerClass
= DefaultHandler
;
1968 return handlerClass
;
1973 * This function is called once when the chart's data is changed or the options
1974 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1975 * idea is that values derived from the chart's data can be computed here,
1976 * rather than every time the chart is drawn. This includes things like the
1977 * number of axes, rolling averages, etc.
1979 Dygraph
.prototype.predraw_
= function() {
1980 var start
= new Date();
1982 // Create the correct dataHandler
1983 this.dataHandler_
= new (this.getHandlerClass_())();
1985 this.layout_
.computePlotArea();
1987 // TODO(danvk): move more computations out of drawGraph_ and into here.
1988 this.computeYAxes_();
1990 if (!this.is_initial_draw_
) {
1991 this.canvas_ctx_
.restore();
1992 this.hidden_ctx_
.restore();
1995 this.canvas_ctx_
.save();
1996 this.hidden_ctx_
.save();
1998 // Create a new plotter.
1999 this.plotter_
= new DygraphCanvasRenderer(this,
2004 // The roller sits in the bottom left corner of the chart. We don't know where
2005 // this will be until the options are available, so it's positioned here.
2006 this.createRollInterface_();
2008 this.cascadeEvents_('predraw');
2010 // Convert the raw data (a 2D array) into the internal format and compute
2011 // rolling averages.
2012 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2013 for (var i
= 1; i
< this.numColumns(); i
++) {
2014 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2015 var series
= this.dataHandler_
.extractSeries(this.rawData_
, i
, this.attributes_
);
2016 if (this.rollPeriod_
> 1) {
2017 series
= this.dataHandler_
.rollingAverage(series
, this.rollPeriod_
, this.attributes_
);
2020 this.rolledSeries_
.push(series
);
2023 // If the data or options have changed, then we'd better redraw.
2026 // This is used to determine whether to do various animations.
2027 var end
= new Date();
2028 this.drawingTimeMs_
= (end
- start
);
2034 * xval_* and yval_* are the original unscaled data values,
2035 * while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
2036 * yval_stacked is the cumulative Y value used for stacking graphs,
2037 * and bottom/top/minus/plus are used for error bar graphs.
2044 * y_bottom: ?number,
2046 * y_stacked: ?number,
2048 * yval_minus: ?number,
2050 * yval_plus: ?number,
2054 Dygraph
.PointType
= undefined
;
2057 * Calculates point stacking for stackedGraph=true.
2059 * For stacking purposes, interpolate or extend neighboring data across
2060 * NaN values based on stackedGraphNaNFill settings. This is for display
2061 * only, the underlying data value as shown in the legend remains NaN.
2063 * @param {Array.<Dygraph.PointType>} points Point array for a single series.
2064 * Updates each Point's yval_stacked property.
2065 * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y
2066 * values for the series seen so far. Index is the row number. Updated
2067 * based on the current series's values.
2068 * @param {Array.<number>} seriesExtremes Min and max values, updated
2069 * to reflect the stacked values.
2070 * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or
2074 Dygraph
.stackPoints_
= function(
2075 points
, cumulativeYval
, seriesExtremes
, fillMethod
) {
2076 var lastXval
= null;
2077 var prevPoint
= null;
2078 var nextPoint
= null;
2079 var nextPointIdx
= -1;
2081 // Find the next stackable point starting from the given index.
2082 var updateNextPoint
= function(idx
) {
2083 // If we've previously found a non-NaN point and haven't gone past it yet,
2085 if (nextPointIdx
>= idx
) return;
2087 // We haven't found a non-NaN point yet or have moved past it,
2088 // look towards the right to find a non-NaN point.
2089 for (var j
= idx
; j
< points
.length
; ++j
) {
2090 // Clear out a previously-found point (if any) since it's no longer
2091 // valid, we shouldn't use it for interpolation anymore.
2093 if (!isNaN(points
[j
].yval
) && points
[j
].yval
!== null) {
2095 nextPoint
= points
[j
];
2101 for (var i
= 0; i
< points
.length
; ++i
) {
2102 var point
= points
[i
];
2103 var xval
= point
.xval
;
2104 if (cumulativeYval
[xval
] === undefined
) {
2105 cumulativeYval
[xval
] = 0;
2108 var actualYval
= point
.yval
;
2109 if (isNaN(actualYval
) || actualYval
=== null) {
2110 if(fillMethod
== 'none') {
2113 // Interpolate/extend
for stacking purposes
if possible
.
2115 if (prevPoint
&& nextPoint
&& fillMethod
!= 'none') {
2116 // Use linear interpolation between prevPoint and nextPoint.
2117 actualYval
= prevPoint
.yval
+ (nextPoint
.yval
- prevPoint
.yval
) *
2118 ((xval
- prevPoint
.xval
) / (nextPoint
.xval
- prevPoint
.xval
));
2119 } else if (prevPoint
&& fillMethod
== 'all') {
2120 actualYval
= prevPoint
.yval
;
2121 } else if (nextPoint
&& fillMethod
== 'all') {
2122 actualYval
= nextPoint
.yval
;
2131 var stackedYval
= cumulativeYval
[xval
];
2132 if (lastXval
!= xval
) {
2133 // If an x-value is repeated, we ignore the duplicates.
2134 stackedYval
+= actualYval
;
2135 cumulativeYval
[xval
] = stackedYval
;
2139 point
.yval_stacked
= stackedYval
;
2141 if (stackedYval
> seriesExtremes
[1]) {
2142 seriesExtremes
[1] = stackedYval
;
2144 if (stackedYval
< seriesExtremes
[0]) {
2145 seriesExtremes
[0] = stackedYval
;
2152 * Loop over all fields and create datasets, calculating extreme y-values for
2153 * each series and extreme x-indices as we go.
2155 * dateWindow is passed in as an explicit parameter so that we can compute
2156 * extreme values "speculatively", i.e. without actually setting state on the
2159 * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2160 * rolledSeries[seriesIndex][row] = raw point, where
2161 * seriesIndex is the column number starting with 1, and
2162 * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2163 * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2165 * points: Array.<Array.<Dygraph.PointType>>,
2166 * seriesExtremes: Array.<Array.<number>>,
2167 * boundaryIds: Array.<number>}}
2170 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2171 var boundaryIds
= [];
2173 var cumulativeYval
= []; // For stacked series.
2174 var extremes
= {}; // series name -> [low, high]
2175 var seriesIdx
, sampleIdx
;
2176 var firstIdx
, lastIdx
;
2179 // Loop over the fields (series). Go from the last to the first,
2180 // because if they're stacked that's how we accumulate the values.
2181 var num_series
= rolledSeries
.length
- 1;
2183 for (seriesIdx
= num_series
; seriesIdx
>= 1; seriesIdx
--) {
2184 if (!this.visibility()[seriesIdx
- 1]) continue;
2186 // Prune down to the desired range, if necessary (for zooming)
2187 // Because there can be lines going to points outside of the visible area,
2188 // we actually prune to visible points, plus one on either side.
2190 series
= rolledSeries
[seriesIdx
];
2191 var low
= dateWindow
[0];
2192 var high
= dateWindow
[1];
2194 // TODO(danvk): do binary search instead of linear search.
2195 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2198 for (sampleIdx
= 0; sampleIdx
< series
.length
; sampleIdx
++) {
2199 if (series
[sampleIdx
][0] >= low
&& firstIdx
=== null) {
2200 firstIdx
= sampleIdx
;
2202 if (series
[sampleIdx
][0] <= high
) {
2203 lastIdx
= sampleIdx
;
2207 if (firstIdx
=== null) firstIdx
= 0;
2208 var correctedFirstIdx
= firstIdx
;
2209 var isInvalidValue
= true;
2210 while (isInvalidValue
&& correctedFirstIdx
> 0) {
2211 correctedFirstIdx
--;
2212 // check if the y value is null.
2213 isInvalidValue
= series
[correctedFirstIdx
][1] === null;
2216 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2217 var correctedLastIdx
= lastIdx
;
2218 isInvalidValue
= true;
2219 while (isInvalidValue
&& correctedLastIdx
< series
.length
- 1) {
2221 isInvalidValue
= series
[correctedLastIdx
][1] === null;
2224 if (correctedFirstIdx
!==firstIdx
) {
2225 firstIdx
= correctedFirstIdx
;
2227 if (correctedLastIdx
!== lastIdx
) {
2228 lastIdx
= correctedLastIdx
;
2231 boundaryIds
[seriesIdx
-1] = [firstIdx
, lastIdx
];
2233 // .slice's end is exclusive, we want to include lastIdx.
2234 series
= series
.slice(firstIdx
, lastIdx
+ 1);
2236 series
= rolledSeries
[seriesIdx
];
2237 boundaryIds
[seriesIdx
-1] = [0, series
.length
-1];
2240 var seriesName
= this.attr_("labels")[seriesIdx
];
2241 var seriesExtremes
= this.dataHandler_
.getExtremeYValues(series
,
2242 dateWindow
, this.getBooleanOption("stepPlot",seriesName
));
2244 var seriesPoints
= this.dataHandler_
.seriesToPoints(series
,
2245 seriesName
, boundaryIds
[seriesIdx
-1][0]);
2247 if (this.getBooleanOption("stackedGraph")) {
2248 axisIdx
= this.attributes_
.axisForSeries(seriesName
);
2249 if (cumulativeYval
[axisIdx
] === undefined
) {
2250 cumulativeYval
[axisIdx
] = [];
2252 Dygraph
.stackPoints_(seriesPoints
, cumulativeYval
[axisIdx
], seriesExtremes
,
2253 this.getBooleanOption("stackedGraphNaNFill"));
2256 extremes
[seriesName
] = seriesExtremes
;
2257 points
[seriesIdx
] = seriesPoints
;
2260 return { points
: points
, extremes
: extremes
, boundaryIds
: boundaryIds
};
2264 * Update the graph with new data. This method is called when the viewing area
2265 * has changed. If the underlying data or options have changed, predraw_ will
2266 * be called before drawGraph_ is called.
2270 Dygraph
.prototype.drawGraph_
= function() {
2271 var start
= new Date();
2273 // This is used to set the second parameter to drawCallback, below.
2274 var is_initial_draw
= this.is_initial_draw_
;
2275 this.is_initial_draw_
= false;
2277 this.layout_
.removeAllDatasets();
2279 this.attrs_
.pointSize
= 0.5 * this.getNumericOption('highlightCircleSize');
2281 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2282 var points
= packed
.points
;
2283 var extremes
= packed
.extremes
;
2284 this.boundaryIds_
= packed
.boundaryIds
;
2286 this.setIndexByName_
= {};
2287 var labels
= this.attr_("labels");
2289 for (var i
= 1; i
< points
.length
; i
++) {
2290 if (!this.visibility()[i
- 1]) continue;
2291 this.layout_
.addDataset(labels
[i
], points
[i
]);
2292 this.datasetIndex_
[i
] = dataIdx
++;
2294 for (var i
= 0; i
< labels
.length
; i
++) {
2295 this.setIndexByName_
[labels
[i
]] = i
;
2298 this.computeYAxisRanges_(extremes
);
2299 this.layout_
.setYAxes(this.axes_
);
2303 // Tell PlotKit to use this new data and render itself
2304 this.layout_
.evaluate();
2305 this.renderGraph_(is_initial_draw
);
2307 if (this.getStringOption("timingName")) {
2308 var end
= new Date();
2309 console
.log(this.getStringOption("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2314 * This does the work of drawing the chart. It assumes that the layout and axis
2315 * scales have already been set (e.g. by predraw_).
2319 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2320 this.cascadeEvents_('clearChart');
2321 this.plotter_
.clear();
2323 const underlayCallback
= this.getFunctionOption('underlayCallback');
2324 if (underlayCallback
) {
2325 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2326 // users who expect a deprecated form of this callback.
2327 underlayCallback
.call(this,
2328 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2332 canvas
: this.hidden_
,
2333 drawingContext
: this.hidden_ctx_
2335 this.cascadeEvents_('willDrawChart', e
);
2336 this.plotter_
.render();
2337 this.cascadeEvents_('didDrawChart', e
);
2338 this.lastRow_
= -1; // because plugins/legend.js clears the legend
2340 // TODO(danvk): is this a performance bottleneck when panning?
2341 // The interaction canvas should already be empty in that situation.
2342 this.canvas_
.getContext('2d').clearRect(0, 0, this.width_
, this.height_
);
2344 const drawCallback
= this.getFunctionOption("drawCallback");
2345 if (drawCallback
!== null) {
2346 drawCallback
.call(this, this, is_initial_draw
);
2348 if (is_initial_draw
) {
2349 this.readyFired_
= true;
2350 while (this.readyFns_
.length
> 0) {
2351 var fn
= this.readyFns_
.pop();
2359 * Determine properties of the y-axes which are independent of the data
2360 * currently being displayed. This includes things like the number of axes and
2361 * the style of the axes. It does not include the range of each axis and its
2363 * This fills in this.axes_.
2364 * axes_ = [ { options } ]
2365 * indices are into the axes_ array.
2367 Dygraph
.prototype.computeYAxes_
= function() {
2368 var axis
, index
, opts
, v
;
2370 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2371 // data computation as well as options storage.
2372 // Go through once and add all the axes.
2375 for (axis
= 0; axis
< this.attributes_
.numAxes(); axis
++) {
2376 // Add a new axis, making a copy of its per-axis options.
2377 opts
= { g
: this };
2378 utils
.update(opts
, this.attributes_
.axisOptions(axis
));
2379 this.axes_
[axis
] = opts
;
2382 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2384 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2385 v
= opts("valueRange");
2386 if (v
) this.axes_
[axis
].valueRange
= v
;
2387 } else { // To keep old behavior
2388 var axes
= this.user_attrs_
.axes
;
2389 if (axes
&& axes
.y2
) {
2390 v
= axes
.y2
.valueRange
;
2391 if (v
) this.axes_
[axis
].valueRange
= v
;
2398 * Returns the number of y-axes on the chart.
2399 * @return {number} the number of axes.
2401 Dygraph
.prototype.numAxes
= function() {
2402 return this.attributes_
.numAxes();
2407 * Returns axis properties for the given series.
2408 * @param {string} setName The name of the series for which to get axis
2409 * properties, e.g. 'Y1'.
2410 * @return {Object} The axis properties.
2412 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2413 // TODO(danvk): handle errors.
2414 return this.axes_
[this.attributes_
.axisForSeries(series
)];
2419 * Determine the value range and tick marks for each axis.
2420 * @param {Object} extremes A mapping from seriesName -> [low, high]
2421 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2423 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2424 var isNullUndefinedOrNaN
= function(num
) {
2425 return isNaN(parseFloat(num
));
2427 var numAxes
= this.attributes_
.numAxes();
2428 var ypadCompat
, span
, series
, ypad
;
2432 // Compute extreme values, a span and tick marks for each axis.
2433 for (var i
= 0; i
< numAxes
; i
++) {
2434 var axis
= this.axes_
[i
];
2435 var logscale
= this.attributes_
.getForAxis("logscale", i
);
2436 var includeZero
= this.attributes_
.getForAxis("includeZero", i
);
2437 var independentTicks
= this.attributes_
.getForAxis("independentTicks", i
);
2438 series
= this.attributes_
.seriesForAxis(i
);
2440 // Add some padding. This supports two Y padding operation modes:
2442 // - backwards compatible (yRangePad not set):
2443 // 10% padding for automatic Y ranges, but not for user-supplied
2444 // ranges, and move a close-to-zero edge to zero, since drawing at the edge
2445 // results in invisible lines. Unfortunately lines drawn at the edge of a
2446 // user-supplied range will still be invisible. If logscale is
2447 // set, add a variable amount of padding at the top but
2448 // none at the bottom.
2450 // - new-style (yRangePad set by the user):
2451 // always add the specified Y padding.
2454 ypad
= 0.1; // add 10%
2455 const yRangePad
= this.getNumericOption('yRangePad');
2456 if (yRangePad
!== null) {
2458 // Convert pixel padding to ratio
2459 ypad
= yRangePad
/ this.plotter_
.area
.h
;
2462 if (series
.length
=== 0) {
2463 // If no series are defined or visible then use a reasonable default
2464 axis
.extremeRange
= [0, 1];
2466 // Calculate the extremes of extremes.
2467 var minY
= Infinity
; // extremes[series[0]][0];
2468 var maxY
= -Infinity
; // extremes[series[0]][1];
2469 var extremeMinY
, extremeMaxY
;
2471 for (var j
= 0; j
< series
.length
; j
++) {
2472 // this skips invisible series
2473 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2475 // Only use valid extremes to stop null data series' from corrupting the scale.
2476 extremeMinY
= extremes
[series
[j
]][0];
2477 if (extremeMinY
!== null) {
2478 minY
= Math
.min(extremeMinY
, minY
);
2480 extremeMaxY
= extremes
[series
[j
]][1];
2481 if (extremeMaxY
!== null) {
2482 maxY
= Math
.max(extremeMaxY
, maxY
);
2486 // Include zero if requested by the user.
2487 if (includeZero
&& !logscale
) {
2488 if (minY
> 0) minY
= 0;
2489 if (maxY
< 0) maxY
= 0;
2492 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2493 if (minY
== Infinity
) minY
= 0;
2494 if (maxY
== -Infinity
) maxY
= 1;
2497 // special case: if we have no sense of scale, center on the sole value.
2500 span
= Math
.abs(maxY
);
2502 // ... and if the sole value is zero, use range 0-1.
2508 var maxAxisY
= maxY
, minAxisY
= minY
;
2511 maxAxisY
= maxY
+ ypad
* span
;
2514 maxAxisY
= maxY
+ ypad
* span
;
2515 minAxisY
= minY
- ypad
* span
;
2517 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2519 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2520 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2523 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2525 if (axis
.valueRange
) {
2526 // This is a user-set value range for this axis.
2527 var y0
= isNullUndefinedOrNaN(axis
.valueRange
[0]) ? axis
.extremeRange
[0] : axis
.valueRange
[0];
2528 var y1
= isNullUndefinedOrNaN(axis
.valueRange
[1]) ? axis
.extremeRange
[1] : axis
.valueRange
[1];
2529 axis
.computedValueRange
= [y0
, y1
];
2531 axis
.computedValueRange
= axis
.extremeRange
;
2534 // When using yRangePad, adjust the upper/lower bounds to add
2535 // padding unless the user has zoomed/panned the Y axis range
.
2537 y0
= axis
.computedValueRange
[0];
2538 y1
= axis
.computedValueRange
[1];
2539 var y0pct
= ypad
/ (2 * ypad
- 1);
2540 var y1pct
= (ypad
- 1) / (2 * ypad
- 1);
2541 axis
.computedValueRange
[0] = utils
.logRangeFraction(y0
, y1
, y0pct
);
2542 axis
.computedValueRange
[1] = utils
.logRangeFraction(y0
, y1
, y1pct
);
2544 y0
= axis
.computedValueRange
[0];
2545 y1
= axis
.computedValueRange
[1];
2547 axis
.computedValueRange
[0] = y0
- span
* ypad
;
2548 axis
.computedValueRange
[1] = y1
+ span
* ypad
;
2553 if (independentTicks
) {
2554 axis
.independentTicks
= independentTicks
;
2555 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2556 var ticker
= opts('ticker');
2557 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2558 axis
.computedValueRange
[1],
2559 this.plotter_
.area
.h
,
2562 // Define the first independent axis as primary axis.
2563 if (!p_axis
) p_axis
= axis
;
2566 if (p_axis
=== undefined
) {
2567 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
2569 // Add ticks. By default, all axes inherit the tick positions of the
2570 // primary axis. However, if an axis is specifically marked as having
2571 // independent ticks, then that is permissible as well.
2572 for (var i
= 0; i
< numAxes
; i
++) {
2573 var axis
= this.axes_
[i
];
2575 if (!axis
.independentTicks
) {
2576 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2577 var ticker
= opts('ticker');
2578 var p_ticks
= p_axis
.ticks
;
2579 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2580 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2581 var tick_values
= [];
2582 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2583 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2584 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2585 tick_values
.push(y_val
);
2588 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2589 axis
.computedValueRange
[1],
2590 this.plotter_
.area
.h
,
2599 * Detects the type of the str (date or numeric) and sets the various
2600 * formatting attributes in this.attrs_ based on this type.
2601 * @param {string} str An x value.
2604 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2606 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2607 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
2608 str
.indexOf('/') >= 0 ||
2609 isNaN(parseFloat(str
))) {
2611 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2612 // TODO(danvk): remove support for this format.
2616 this.setXAxisOptions_(isDate
);
2619 Dygraph
.prototype.setXAxisOptions_
= function(isDate
) {
2621 this.attrs_
.xValueParser
= utils
.dateParser
;
2622 this.attrs_
.axes
.x
.valueFormatter
= utils
.dateValueFormatter
;
2623 this.attrs_
.axes
.x
.ticker
= DygraphTickers
.dateTicker
;
2624 this.attrs_
.axes
.x
.axisLabelFormatter
= utils
.dateAxisLabelFormatter
;
2626 /** @private (shut up, jsdoc!) */
2627 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2628 // TODO(danvk): use Dygraph.numberValueFormatter here?
2629 /** @private (shut up, jsdoc!) */
2630 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2631 this.attrs_
.axes
.x
.ticker
= DygraphTickers
.numericTicks
;
2632 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
2638 * Parses a string in a special csv format. We expect a csv file where each
2639 * line is a date point, and the first field in each line is the date string.
2640 * We also expect that all remaining fields represent series.
2641 * if the errorBars attribute is set, then interpret the fields as:
2642 * date, series1, stddev1, series2, stddev2, ...
2643 * @param {[Object]} data See above.
2645 * @return [Object] An array with one entry for each row. These entries
2646 * are an array of cells in that row. The first entry is the parsed x-value for
2647 * the row. The second, third, etc. are the y-values. These can take on one of
2648 * three forms, depending on the CSV and constructor parameters:
2650 * 2. [ value, stddev ]
2651 * 3. [ low value, center value, high value ]
2653 Dygraph
.prototype.parseCSV_
= function(data
) {
2655 var line_delimiter
= utils
.detectLineDelimiter(data
);
2656 var lines
= data
.split(line_delimiter
|| "\n");
2659 // Use the default delimiter or fall back to a tab if that makes sense.
2660 var delim
= this.getStringOption('delimiter');
2661 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2666 if (!('labels' in this.user_attrs_
)) {
2667 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2669 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
2670 this.attributes_
.reparseSeries();
2675 var defaultParserSet
= false; // attempt to auto-detect x value type
2676 var expectedCols
= this.attr_("labels").length
;
2677 var outOfOrder
= false;
2678 for (var i
= start
; i
< lines
.length
; i
++) {
2679 var line
= lines
[i
];
2681 if (line
.length
=== 0) continue; // skip blank lines
2682 if (line
[0] == '#') continue; // skip comment lines
2683 var inFields
= line
.split(delim
);
2684 if (inFields
.length
< 2) continue;
2687 if (!defaultParserSet
) {
2688 this.detectTypeFromString_(inFields
[0]);
2689 xParser
= this.getFunctionOption("xValueParser");
2690 defaultParserSet
= true;
2692 fields
[0] = xParser(inFields
[0], this);
2694 // If fractions are expected, parse the numbers as "A/B
"
2695 if (this.fractions_) {
2696 for (j = 1; j < inFields.length; j++) {
2697 // TODO(danvk): figure out an appropriate way to flag parse errors.
2698 vals = inFields[j].split("/");
2699 if (vals.length != 2) {
2700 console.error('Expected fractional "num
/den
" values in CSV data ' +
2701 "but found a value
'" + inFields[j] + "' on line
" +
2702 (1 + i) + " ('" + line + "') which is not of
this form
.");
2705 fields[j] = [utils.parseFloat_(vals[0], i, line),
2706 utils.parseFloat_(vals[1], i, line)];
2709 } else if (this.getBooleanOption("errorBars
")) {
2710 // If there are error bars, values are (value, stddev) pairs
2711 if (inFields.length % 2 != 1) {
2712 console.error('Expected alternating (value, stdev.) pairs in CSV data ' +
2713 'but line ' + (1 + i) + ' has an odd number of values (' +
2714 (inFields.length - 1) + "): '" + line + "'");
2716 for (j = 1; j < inFields.length; j += 2) {
2717 fields[(j + 1) / 2] = [utils.parseFloat_(inFields[j], i, line),
2718 utils.parseFloat_(inFields[j + 1], i, line)];
2720 } else if (this.getBooleanOption("customBars
")) {
2721 // Bars are a low;center;high tuple
2722 for (j = 1; j < inFields.length; j++) {
2723 var val = inFields[j];
2724 if (/^ *$/.test(val)) {
2725 fields[j] = [null, null, null];
2727 vals = val.split(";");
2728 if (vals.length == 3) {
2729 fields[j] = [ utils.parseFloat_(vals[0], i, line),
2730 utils.parseFloat_(vals[1], i, line),
2731 utils.parseFloat_(vals[2], i, line) ];
2733 console.warn('When using customBars, values must be either blank ' +
2734 'or "low
;center
;high
" tuples (got "' + val +
2735 '" on line ' + (1+i));
2740 // Values are just numbers
2741 for (j = 1; j < inFields.length; j++) {
2742 fields[j] = utils.parseFloat_(inFields[j], i, line);
2745 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2749 if (fields.length != expectedCols) {
2750 console.error("Number of columns
in line
" + i + " (" + fields.length +
2751 ") does not agree
with number of
labels (" + expectedCols +
2755 // If the user specified the 'labels' option and none of the cells of the
2756 // first row parsed correctly, then they probably double-specified the
2757 // labels. We go with the values set in the option, discard this row and
2758 // log a warning to the JS console.
2759 if (i === 0 && this.attr_('labels')) {
2760 var all_null = true;
2761 for (j = 0; all_null && j < fields.length; j++) {
2762 if (fields[j]) all_null = false;
2765 console.warn("The dygraphs
'labels' option is set
, but the first row
" +
2766 "of CSV
data ('" + line + "') appears to also contain
" +
2767 "labels
. Will drop the CSV labels and
use the option
" +
2776 console.warn("CSV is out of order
; order it correctly to speed loading
.");
2777 ret.sort(function(a,b) { return a[0] - b[0]; });
2783 // In native format, all values must be dates or numbers.
2784 // This check isn't perfect but will catch most mistaken uses of strings.
2785 function validateNativeFormat(data) {
2786 const firstRow = data[0];
2787 const firstX = firstRow[0];
2788 if (typeof firstX !== 'number' && !utils.isDateLike(firstX)) {
2789 throw new Error(`Expected number or date but got ${typeof firstX}: ${firstX}.`);
2791 for (let i = 1; i < firstRow.length; i++) {
2792 const val = firstRow[i];
2793 if (val === null || val === undefined) continue;
2794 if (typeof val === 'number') continue;
2795 if (utils.isArrayLike(val)) continue; // e.g. error bars or custom bars.
2796 throw new Error(`Expected number or array but got ${typeof val}: ${val}.`);
2801 * The user has provided their data as a pre-packaged JS array. If the x values
2802 * are numeric, this is the same as dygraphs' internal format. If the x values
2803 * are dates, we need to convert them from Date objects to ms since epoch.
2804 * @param {!Array} data
2805 * @return {Object} data with numeric x values.
2808 Dygraph.prototype.parseArray_ = function(data) {
2809 // Peek at the first x value to see if it's numeric.
2810 if (data.length === 0) {
2811 console.error("Can
't plot empty data set");
2814 if (data[0].length === 0) {
2815 console.error("Data set cannot contain an empty row");
2819 validateNativeFormat(data);
2822 if (this.attr_("labels") === null) {
2823 console.warn("Using default labels. Set labels explicitly via 'labels
' " +
2824 "in the options parameter");
2825 this.attrs_.labels = [ "X" ];
2826 for (i = 1; i < data[0].length; i++) {
2827 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
2829 this.attributes_.reparseSeries();
2831 var num_labels = this.attr_("labels");
2832 if (num_labels.length != data[0].length) {
2833 console.error("Mismatch between number of labels (" + num_labels + ")" +
2834 " and number of columns in array (" + data[0].length + ")");
2839 if (utils.isDateLike(data[0][0])) {
2840 // Some intelligent defaults for a date x-axis.
2841 this.attrs_.axes.x.valueFormatter = utils.dateValueFormatter;
2842 this.attrs_.axes.x.ticker = DygraphTickers.dateTicker;
2843 this.attrs_.axes.x.axisLabelFormatter = utils.dateAxisLabelFormatter;
2845 // Assume they're all dates
.
2846 var parsedData
= utils
.clone(data
);
2847 for (i
= 0; i
< data
.length
; i
++) {
2848 if (parsedData
[i
].length
=== 0) {
2849 console
.error("Row " + (1 + i
) + " of data is empty");
2852 if (parsedData
[i
][0] === null ||
2853 typeof(parsedData
[i
][0].getTime
) != 'function' ||
2854 isNaN(parsedData
[i
][0].getTime())) {
2855 console
.error("x value in row " + (1 + i
) + " is not a Date");
2858 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2862 // Some intelligent defaults for a numeric x-axis.
2863 /** @private (shut up, jsdoc!) */
2864 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2865 this.attrs_
.axes
.x
.ticker
= DygraphTickers
.numericTicks
;
2866 this.attrs_
.axes
.x
.axisLabelFormatter
= utils
.numberAxisLabelFormatter
;
2872 * Parses a DataTable object from gviz.
2873 * The data is expected to have a first column that is either a date or a
2874 * number. All subsequent columns must be numbers. If there is a clear mismatch
2875 * between this.xValueParser_ and the type of the first column, it will be
2876 * fixed. Fills out rawData_.
2877 * @param {!google.visualization.DataTable} data See above.
2880 Dygraph
.prototype.parseDataTable_
= function(data
) {
2881 var shortTextForAnnotationNum
= function(num
) {
2882 // converts [0-9]+ [A-Z][a-z]*
2883 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
2884 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
2885 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
2886 num
= Math
.floor(num
/ 26);
2888 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
2889 num
= Math
.floor((num
- 1) / 26);
2894 var cols
= data
.getNumberOfColumns();
2895 var rows
= data
.getNumberOfRows();
2897 var indepType
= data
.getColumnType(0);
2898 if (indepType
== 'date' || indepType
== 'datetime') {
2899 this.attrs_
.xValueParser
= utils
.dateParser
;
2900 this.attrs_
.axes
.x
.valueFormatter
= utils
.dateValueFormatter
;
2901 this.attrs_
.axes
.x
.ticker
= DygraphTickers
.dateTicker
;
2902 this.attrs_
.axes
.x
.axisLabelFormatter
= utils
.dateAxisLabelFormatter
;
2903 } else if (indepType
== 'number') {
2904 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2905 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2906 this.attrs_
.axes
.x
.ticker
= DygraphTickers
.numericTicks
;
2907 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
2910 "only 'date', 'datetime' and 'number' types are supported " +
2911 "for column 1 of DataTable input (Got '" + indepType
+ "')");
2914 // Array of the column indices which contain data (and not annotations).
2916 var annotationCols
= {}; // data index -> [annotation cols]
2917 var hasAnnotations
= false;
2919 for (i
= 1; i
< cols
; i
++) {
2920 var type
= data
.getColumnType(i
);
2921 if (type
== 'number') {
2923 } else if (type
== 'string' && this.getBooleanOption('displayAnnotations')) {
2924 // This is OK -- it's an annotation column.
2925 var dataIdx
= colIdx
[colIdx
.length
- 1];
2926 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2927 annotationCols
[dataIdx
] = [i
];
2929 annotationCols
[dataIdx
].push(i
);
2931 hasAnnotations
= true;
2934 "Only 'number' is supported as a dependent type with Gviz." +
2935 " 'string' is only supported if displayAnnotations is true");
2939 // Read column labels
2940 // TODO(danvk): add support back for errorBars
2941 var labels
= [data
.getColumnLabel(0)];
2942 for (i
= 0; i
< colIdx
.length
; i
++) {
2943 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2944 if (this.getBooleanOption("errorBars")) i
+= 1;
2946 this.attrs_
.labels
= labels
;
2947 cols
= labels
.length
;
2950 var outOfOrder
= false;
2951 var annotations
= [];
2952 for (i
= 0; i
< rows
; i
++) {
2954 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2955 data
.getValue(i
, 0) === null) {
2956 console
.warn("Ignoring row " + i
+
2957 " of DataTable because of undefined or null first column.");
2961 if (indepType
== 'date' || indepType
== 'datetime') {
2962 row
.push(data
.getValue(i
, 0).getTime());
2964 row
.push(data
.getValue(i
, 0));
2966 if (!this.getBooleanOption("errorBars")) {
2967 for (j
= 0; j
< colIdx
.length
; j
++) {
2968 var col
= colIdx
[j
];
2969 row
.push(data
.getValue(i
, col
));
2970 if (hasAnnotations
&&
2971 annotationCols
.hasOwnProperty(col
) &&
2972 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
2974 ann
.series
= data
.getColumnLabel(col
);
2976 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
2978 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2979 if (k
) ann
.text
+= "\n";
2980 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2982 annotations
.push(ann
);
2986 // Strip out infinities, which give dygraphs problems later on.
2987 for (j
= 0; j
< row
.length
; j
++) {
2988 if (!isFinite(row
[j
])) row
[j
] = null;
2991 for (j
= 0; j
< cols
- 1; j
++) {
2992 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2995 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3002 console
.warn("DataTable is out of order; order it correctly to speed loading.");
3003 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3005 this.rawData_
= ret
;
3007 if (annotations
.length
> 0) {
3008 this.setAnnotations(annotations
, true);
3010 this.attributes_
.reparseSeries();
3014 * Signals to plugins that the chart data has updated.
3015 * This happens after the data has updated but before the chart has redrawn.
3018 Dygraph
.prototype.cascadeDataDidUpdateEvent_
= function() {
3019 // TODO(danvk): there are some issues checking xAxisRange() and using
3020 // toDomCoords from handlers of this event. The visible range should be set
3021 // when the chart is drawn, not derived from the data.
3022 this.cascadeEvents_('dataDidUpdate', {});
3026 * Get the CSV data. If it's in a function, call that function. If it's in a
3027 * file, do an XMLHttpRequest to get it.
3030 Dygraph
.prototype.start_
= function() {
3031 var data
= this.file_
;
3033 // Functions can return references of all other types.
3034 if (typeof data
== 'function') {
3038 if (utils
.isArrayLike(data
)) {
3039 this.rawData_
= this.parseArray_(data
);
3040 this.cascadeDataDidUpdateEvent_();
3042 } else if (typeof data
== 'object' &&
3043 typeof data
.getColumnRange
== 'function') {
3044 // must be a DataTable from gviz.
3045 this.parseDataTable_(data
);
3046 this.cascadeDataDidUpdateEvent_();
3048 } else if (typeof data
== 'string') {
3049 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3050 var line_delimiter
= utils
.detectLineDelimiter(data
);
3051 if (line_delimiter
) {
3052 this.loadedEvent_(data
);
3056 if (window
.XMLHttpRequest
) {
3057 // Firefox, Opera, IE7, and other browsers will use the native object
3058 req
= new XMLHttpRequest();
3060 // IE 5 and 6 will use the ActiveX control
3061 req
= new ActiveXObject("Microsoft.XMLHTTP");
3065 req
.onreadystatechange
= function () {
3066 if (req
.readyState
== 4) {
3067 if (req
.status
=== 200 || // Normal http
3068 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3069 caller
.loadedEvent_(req
.responseText
);
3074 req
.open("GET", data
, true);
3078 console
.error("Unknown data format: " + (typeof data
));
3083 * Changes various properties of the graph. These can include:
3085 * <li>file: changes the source data for the graph</li>
3086 * <li>errorBars: changes whether the data contains stddev</li>
3089 * There's a huge variety of options that can be passed to this method. For a
3090 * full list, see http://dygraphs.com/options.html.
3092 * @param {Object} input_attrs The new properties and values
3093 * @param {boolean} block_redraw Usually the chart is redrawn after every
3094 * call to updateOptions(). If you know better, you can pass true to
3095 * explicitly block the redraw. This can be useful for chaining
3096 * updateOptions() calls, avoiding the occasional infinite loop and
3097 * preventing redraws when it's not necessary (e.g. when updating a
3100 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3101 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3103 // copyUserAttrs_ drops the "file" parameter as a convenience to us.
3104 var file
= input_attrs
.file
;
3105 var attrs
= Dygraph
.copyUserAttrs_(input_attrs
);
3106 var prevNumAxes
= this.attributes_
.numAxes();
3108 // TODO(danvk): this is a mess. Move these options into attr_.
3109 if ('rollPeriod' in attrs
) {
3110 this.rollPeriod_
= attrs
.rollPeriod
;
3112 if ('dateWindow' in attrs
) {
3113 this.dateWindow_
= attrs
.dateWindow
;
3116 // TODO(danvk): validate per-series options.
3121 // highlightCircleSize
3123 // Check if this set options will require new points.
3124 var requiresNewPoints
= utils
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3126 utils
.updateDeep(this.user_attrs_
, attrs
);
3128 this.attributes_
.reparseSeries();
3130 if (prevNumAxes
< this.attributes_
.numAxes()) this.plotter_
.clear();
3132 // This event indicates that the data is about to change, but hasn't yet.
3133 // TODO(danvk): support cancellation of the update via this event.
3134 this.cascadeEvents_('dataWillUpdate', {});
3137 if (!block_redraw
) this.start_();
3139 if (!block_redraw
) {
3140 if (requiresNewPoints
) {
3143 this.renderGraph_(false);
3150 * Make a copy of input attributes, removing file as a convenience.
3153 Dygraph
.copyUserAttrs_
= function(attrs
) {
3155 for (var k
in attrs
) {
3156 if (!attrs
.hasOwnProperty(k
)) continue;
3157 if (k
== 'file') continue;
3158 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3164 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3165 * containing div (which has presumably changed size since the dygraph was
3166 * instantiated. If the width/height are specified, the div will be resized.
3168 * This is far more efficient than destroying and re-instantiating a
3169 * Dygraph, since it doesn't have to reparse the underlying data.
3171 * @param {number} width Width (in pixels)
3172 * @param {number} height Height (in pixels)
3174 Dygraph
.prototype.resize
= function(width
, height
) {
3175 if (this.resize_lock
) {
3178 this.resize_lock
= true;
3180 if ((width
=== null) != (height
=== null)) {
3181 console
.warn("Dygraph.resize() should be called with zero parameters or " +
3182 "two non-NULL parameters. Pretending it was zero.");
3183 width
= height
= null;
3186 var old_width
= this.width_
;
3187 var old_height
= this.height_
;
3190 this.maindiv_
.style
.width
= width
+ "px";
3191 this.maindiv_
.style
.height
= height
+ "px";
3192 this.width_
= width
;
3193 this.height_
= height
;
3195 this.width_
= this.maindiv_
.clientWidth
;
3196 this.height_
= this.maindiv_
.clientHeight
;
3199 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3200 // Resizing a canvas erases it, even when the size doesn't change, so
3201 // any resize needs to be followed by a redraw.
3202 this.resizeElements_();
3206 this.resize_lock
= false;
3210 * Adjusts the number of points in the rolling average. Updates the graph to
3211 * reflect the new averaging period.
3212 * @param {number} length Number of points over which to average the data.
3214 Dygraph
.prototype.adjustRoll
= function(length
) {
3215 this.rollPeriod_
= length
;
3220 * Returns a boolean array of visibility statuses.
3222 Dygraph
.prototype.visibility
= function() {
3223 // Do lazy-initialization, so that this happens after we know the number of
3225 if (!this.getOption("visibility")) {
3226 this.attrs_
.visibility
= [];
3228 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3229 while (this.getOption("visibility").length
< this.numColumns() - 1) {
3230 this.attrs_
.visibility
.push(true);
3232 return this.getOption("visibility");
3236 * Changes the visibility of one or more series.
3238 * @param {number|number[]|object} num the series index or an array of series indices
3239 * or a boolean array of visibility states by index
3240 * or an object mapping series numbers, as keys, to
3241 * visibility state (boolean values)
3242 * @param {boolean} value the visibility state expressed as a boolean
3244 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3245 var x
= this.visibility();
3246 var numIsObject
= false;
3248 if (!Array
.isArray(num
)) {
3249 if (num
!== null && typeof num
=== 'object') {
3257 for (var i
in num
) {
3258 if (num
.hasOwnProperty(i
)) {
3259 if (i
< 0 || i
>= x
.length
) {
3260 console
.warn("Invalid series number in setVisibility: " + i
);
3267 for (var i
= 0; i
< num
.length
; i
++) {
3268 if (typeof num
[i
] === 'boolean') {
3269 if (i
>= x
.length
) {
3270 console
.warn("Invalid series number in setVisibility: " + i
);
3275 if (num
[i
] < 0 || num
[i
] >= x
.length
) {
3276 console
.warn("Invalid series number in setVisibility: " + num
[i
]);
3288 * How large of an area will the dygraph render itself in?
3289 * This is used for testing.
3290 * @return A {width: w, height: h} object.
3293 Dygraph
.prototype.size
= function() {
3294 return { width
: this.width_
, height
: this.height_
};
3298 * Update the list of annotations and redraw the chart.
3299 * See dygraphs.com/annotations.html for more info on how to use annotations.
3300 * @param ann {Array} An array of annotation objects.
3301 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3303 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3304 // Only add the annotation CSS rule once we know it will be used.
3305 this.annotations_
= ann
;
3306 if (!this.layout_
) {
3307 console
.warn("Tried to setAnnotations before dygraph was ready. " +
3308 "Try setting them in a ready() block. See " +
3309 "dygraphs.com/tests/annotation.html");
3313 this.layout_
.setAnnotations(this.annotations_
);
3314 if (!suppressDraw
) {
3320 * Return the list of annotations.
3322 Dygraph
.prototype.annotations
= function() {
3323 return this.annotations_
;
3327 * Get the list of label names for this graph. The first column is the
3328 * x-axis, so the data series names start at index 1.
3330 * Returns null when labels have not yet been defined.
3332 Dygraph
.prototype.getLabels
= function() {
3333 var labels
= this.attr_("labels");
3334 return labels
? labels
.slice() : null;
3338 * Get the index of a series (column) given its name. The first column is the
3339 * x-axis, so the data series start with index 1.
3341 Dygraph
.prototype.indexFromSetName
= function(name
) {
3342 return this.setIndexByName_
[name
];
3346 * Find the row number corresponding to the given x-value.
3347 * Returns null if there is no such x-value in the data.
3348 * If there are multiple rows with the same x-value, this will return the
3350 * @param {number} xVal The x-value to look for (e.g. millis since epoch).
3351 * @return {?number} The row number, which you can pass to getValue(), or null.
3353 Dygraph
.prototype.getRowForX
= function(xVal
) {
3355 high
= this.numRows() - 1;
3357 while (low
<= high
) {
3358 var idx
= (high
+ low
) >> 1;
3359 var x
= this.getValue(idx
, 0);
3362 } else if (x
> xVal
) {
3364 } else if (low
!= idx
) { // equal, but there may be an earlier match.
3375 * Trigger a callback when the dygraph has drawn itself and is ready to be
3376 * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3377 * data (i.e. a URL is passed as the data source) and the chart is drawn
3378 * asynchronously. If the chart has already drawn, the callback will fire
3381 * This is a good place to call setAnnotation().
3383 * @param {function(!Dygraph)} callback The callback to trigger when the chart
3386 Dygraph
.prototype.ready
= function(callback
) {
3387 if (this.is_initial_draw_
) {
3388 this.readyFns_
.push(callback
);
3390 callback
.call(this, this);
3395 * Add an event handler. This event handler is kept until the graph is
3396 * destroyed with a call to graph.destroy().
3398 * @param {!Node} elem The element to add the event to.
3399 * @param {string} type The type of the event, e.g. 'click' or 'mousemove'.
3400 * @param {function(Event):(boolean|undefined)} fn The function to call
3401 * on the event. The function takes one parameter: the event object.
3404 Dygraph
.prototype.addAndTrackEvent
= function(elem
, type
, fn
) {
3405 utils
.addEvent(elem
, type
, fn
);
3406 this.registeredEvents_
.push({elem
, type
, fn
});
3409 Dygraph
.prototype.removeTrackedEvents_
= function() {
3410 if (this.registeredEvents_
) {
3411 for (var idx
= 0; idx
< this.registeredEvents_
.length
; idx
++) {
3412 var reg
= this.registeredEvents_
[idx
];
3413 utils
.removeEvent(reg
.elem
, reg
.type
, reg
.fn
);
3417 this.registeredEvents_
= [];
3421 // Installed plugins, in order of precedence (most-general to most-specific).
3425 RangeSelectorPlugin
, // Has to be before ChartLabels so that its callbacks are called after ChartLabels' callbacks.
3431 // There are many symbols which have historically been available through the
3432 // Dygraph class. These are exported here for backwards compatibility.
3433 Dygraph
.GVizChart
= GVizChart
;
3434 Dygraph
.DASHED_LINE
= utils
.DASHED_LINE
;
3435 Dygraph
.DOT_DASH_LINE
= utils
.DOT_DASH_LINE
;
3436 Dygraph
.dateAxisLabelFormatter
= utils
.dateAxisLabelFormatter
;
3437 Dygraph
.toRGB_
= utils
.toRGB_
;
3438 Dygraph
.findPos
= utils
.findPos
;
3439 Dygraph
.pageX
= utils
.pageX
;
3440 Dygraph
.pageY
= utils
.pageY
;
3441 Dygraph
.dateString_
= utils
.dateString_
;
3442 Dygraph
.defaultInteractionModel
= DygraphInteraction
.defaultModel
;
3443 Dygraph
.nonInteractiveModel
= Dygraph
.nonInteractiveModel_
= DygraphInteraction
.nonInteractiveModel_
;
3444 Dygraph
.Circles
= utils
.Circles
;
3447 Legend
: LegendPlugin
,
3449 Annotations
: AnnotationsPlugin
,
3450 ChartLabels
: ChartLabelsPlugin
,
3452 RangeSelector
: RangeSelectorPlugin
3455 Dygraph
.DataHandlers
= {
3459 DefaultFractionHandler
,
3461 FractionsBarsHandler
3464 Dygraph
.startPan
= DygraphInteraction
.startPan
;
3465 Dygraph
.startZoom
= DygraphInteraction
.startZoom
;
3466 Dygraph
.movePan
= DygraphInteraction
.movePan
;
3467 Dygraph
.moveZoom
= DygraphInteraction
.moveZoom
;
3468 Dygraph
.endPan
= DygraphInteraction
.endPan
;
3469 Dygraph
.endZoom
= DygraphInteraction
.endZoom
;
3471 Dygraph
.numericLinearTicks
= DygraphTickers
.numericLinearTicks
;
3472 Dygraph
.numericTicks
= DygraphTickers
.numericTicks
;
3473 Dygraph
.dateTicker
= DygraphTickers
.dateTicker
;
3474 Dygraph
.Granularity
= DygraphTickers
.Granularity
;
3475 Dygraph
.getDateAxis
= DygraphTickers
.getDateAxis
;
3476 Dygraph
.floatFormat
= utils
.floatFormat
;
3478 export default Dygraph
;