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