3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
8 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
9 * string. Dygraph can handle multiple series with or without error bars. The
10 * date/value ranges will be automatically set. Dygraph uses the
11 * <canvas> tag, so it only works in FF1.5+.
12 * @author danvdk@gmail.com (Dan Vanderkam)
15 <div id="graphdiv" style="width:800px; height:500px;"></div>
16 <script type="text/javascript">
17 new Dygraph(document.getElementById("graphdiv"),
18 "datafile.csv", // CSV file with headers
22 The CSV file is of the form
24 Date,SeriesA,SeriesB,SeriesC
28 If the 'errorBars' option is set in the constructor, the input should be of
30 Date,SeriesA,SeriesB,...
31 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
32 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
34 If the 'fractions' option is set, the input should be of the form:
36 Date,SeriesA,SeriesB,...
37 YYYYMMDD,A1/B1,A2/B2,...
38 YYYYMMDD,A1/B1,A2/B2,...
40 And error bars will be calculated automatically using a binomial distribution.
42 For further documentation and examples, see http://dygraphs.com/
46 /*jshint globalstrict: true */
47 /*global DygraphRangeSelector:false, DygraphLayout:false, DygraphCanvasRenderer:false, G_vmlCanvasManager:false */
51 * Creates an interactive, zoomable chart.
54 * @param {div | String} div A div or the id of a div into which to construct
56 * @param {String | Function} file A file containing CSV data or a function
57 * that returns this data. The most basic expected format for each line is
58 * "YYYY/MM/DD,val1,val2,...". For more information, see
59 * http://dygraphs.com/data.html.
60 * @param {Object} attrs Various other attributes, e.g. errorBars determines
61 * whether the input data contains error ranges. For a complete list of
62 * options, see http://dygraphs.com/options.html.
64 var Dygraph
= function(div
, data
, opts
, opt_fourth_param
) {
65 if (opt_fourth_param
!== undefined
) {
66 // Old versions of dygraphs took in the series labels as a constructor
67 // parameter. This doesn't make sense anymore, but it's easy to continue
68 // to support this usage.
69 this.warn("Using deprecated four-argument dygraph constructor");
70 this.__old_init__(div
, data
, opts
, opt_fourth_param
);
72 this.__init__(div
, data
, opts
);
76 Dygraph
.NAME
= "Dygraph";
77 Dygraph
.VERSION
= "1.2";
78 Dygraph
.__repr__
= function() {
79 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
83 * Returns information about the Dygraph class.
85 Dygraph
.toString
= function() {
86 return this.__repr__();
89 // Various default values
90 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
91 Dygraph
.DEFAULT_WIDTH
= 480;
92 Dygraph
.DEFAULT_HEIGHT
= 320;
94 Dygraph
.ANIMATION_STEPS
= 10;
95 Dygraph
.ANIMATION_DURATION
= 200;
97 // These are defined before DEFAULT_ATTRS so that it can refer to them.
100 * Return a string version of a number. This respects the digitsAfterDecimal
101 * and maxNumberWidth options.
102 * @param {Number} x The number to be formatted
103 * @param {Dygraph} opts An options view
104 * @param {String} name The name of the point's data series
105 * @param {Dygraph} g The dygraph object
107 Dygraph
.numberValueFormatter
= function(x
, opts
, pt
, g
) {
108 var sigFigs
= opts('sigFigs');
110 if (sigFigs
!== null) {
111 // User has opted for a fixed number of significant figures.
112 return Dygraph
.floatFormat(x
, sigFigs
);
115 var digits
= opts('digitsAfterDecimal');
116 var maxNumberWidth
= opts('maxNumberWidth');
118 // switch to scientific notation if we underflow or overflow fixed display.
120 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
121 Math
.abs(x
) < Math
.pow(10, -digits
))) {
122 return x
.toExponential(digits
);
124 return '' + Dygraph
.round_(x
, digits
);
129 * variant for use as an axisLabelFormatter.
132 Dygraph
.numberAxisLabelFormatter
= function(x
, granularity
, opts
, g
) {
133 return Dygraph
.numberValueFormatter(x
, opts
, g
);
137 * Convert a JS date (millis since epoch) to YYYY/MM/DD
138 * @param {Number} date The JavaScript date (ms since epoch)
139 * @return {String} A date of the form "YYYY/MM/DD"
142 Dygraph
.dateString_
= function(date
) {
143 var zeropad
= Dygraph
.zeropad
;
144 var d
= new Date(date
);
147 var year
= "" + d
.getFullYear();
148 // Get a 0 padded month string
149 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
150 // Get a 0 padded day string
151 var day
= zeropad(d
.getDate());
154 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
155 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
157 return year
+ "/" + month + "/" + day
+ ret
;
161 * Convert a JS date to a string appropriate to display on an axis that
162 * is displaying values at the stated granularity.
163 * @param {Date} date The date to format
164 * @param {Number} granularity One of the Dygraph granularity constants
165 * @return {String} The formatted date
168 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
169 if (granularity
>= Dygraph
.DECADAL
) {
170 return date
.strftime('%Y');
171 } else if (granularity
>= Dygraph
.MONTHLY
) {
172 return date
.strftime('%b %y');
174 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
175 if (frac
=== 0 || granularity
>= Dygraph
.DAILY
) {
176 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
178 return Dygraph
.hmsString_(date
.getTime());
184 * Standard plotters. These may be used by clients.
185 * Available plotters are:
186 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
187 * - Dygraph.Plotters.errorPlotter: draws error bars
188 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
190 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
191 * This causes all the lines to be drawn over all the fills/error bars.
193 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
196 // Default attribute values.
197 Dygraph
.DEFAULT_ATTRS
= {
198 highlightCircleSize
: 3,
199 highlightSeriesOpts
: null,
200 highlightSeriesBackgroundAlpha
: 0.5,
204 // TODO(danvk): move defaults from createStatusMessage_ here.
206 labelsSeparateLines
: false,
207 labelsShowZeroValues
: true,
210 showLabelsOnHighlight
: true,
212 digitsAfterDecimal
: 2,
217 strokeBorderWidth
: 0,
218 strokeBorderColor
: "white",
221 axisLabelFontSize
: 14,
227 xValueParser
: Dygraph
.dateParser
,
234 wilsonInterval
: true, // only relevant if fractions is true
238 connectSeparatedPoints
: false,
241 hideOverlayOnMouseOut
: true,
243 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
244 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
248 drawAxesAtZero
: false,
250 // Sizes of the various chart labels.
257 axisLineColor
: "black",
260 axisLabelColor
: "black",
261 axisLabelFont
: "Arial", // TODO(danvk): is this implemented?
265 gridLineColor
: "rgb(128,128,128)",
267 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
268 animatedZooms
: false, // (for now)
270 // Range selector options
271 showRangeSelector
: false,
272 rangeSelectorHeight
: 40,
273 rangeSelectorPlotStrokeColor
: "#808FAB",
274 rangeSelectorPlotFillColor
: "#A7B1C4",
276 // The ordering here ensures that central lines always appear above any
277 // fill bars/error bars
.
279 Dygraph
.Plotters
.fillPlotter
,
280 Dygraph
.Plotters
.errorPlotter
,
281 Dygraph
.Plotters
.linePlotter
288 axisLabelFormatter
: Dygraph
.dateAxisFormatter
,
289 valueFormatter
: Dygraph
.dateString_
,
290 ticker
: null // will be set in dygraph-tickers.js
294 valueFormatter
: Dygraph
.numberValueFormatter
,
295 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
296 ticker
: null // will be set in dygraph-tickers.js
300 valueFormatter
: Dygraph
.numberValueFormatter
,
301 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
302 ticker
: null // will be set in dygraph-tickers.js
307 // Directions for panning and zooming. Use bit operations when combined
308 // values are possible.
309 Dygraph
.HORIZONTAL
= 1;
310 Dygraph
.VERTICAL
= 2;
312 // Installed plugins, in order of precedence (most-general to most-specific).
313 // Plugins are installed after they are defined, in plugins/install.js
.
317 // Used for initializing annotation CSS rules only once.
318 Dygraph
.addedAnnotationCSS
= false;
320 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
321 // Labels is no longer a constructor parameter, since it's typically set
322 // directly from the data source. It also conains a name for the x-axis,
323 // which the previous constructor form did not.
324 if (labels
!== null) {
325 var new_labels
= ["Date"];
326 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
327 Dygraph
.update(attrs
, { 'labels': new_labels
});
329 this.__init__(div
, file
, attrs
);
333 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
334 * and context <canvas> inside of it. See the constructor for details.
336 * @param {Element} div the Element to render the graph into.
337 * @param {String | Function} file Source data
338 * @param {Object} attrs Miscellaneous other options
341 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
342 // Hack for IE: if we're using excanvas and the document hasn't finished
343 // loading yet (and hence may not have initialized whatever it needs to
344 // initialize), then keep calling this routine periodically until it has.
345 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
346 typeof(G_vmlCanvasManager
) != 'undefined' &&
347 document
.readyState
!= 'complete') {
349 setTimeout(function() { self
.__init__(div
, file
, attrs
); }, 100);
353 // Support two-argument constructor
354 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
356 attrs
= Dygraph
.mapLegacyOptions_(attrs
);
358 if (typeof(div
) == 'string') {
359 div
= document
.getElementById(div
);
363 Dygraph
.error("Constructing dygraph with a non-existent div!");
367 this.isUsingExcanvas_
= typeof(G_vmlCanvasManager
) != 'undefined';
369 // Copy the important bits into the object
370 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
373 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
374 this.previousVerticalX_
= -1;
375 this.fractions_
= attrs
.fractions
|| false;
376 this.dateWindow_
= attrs
.dateWindow
|| null;
378 this.is_initial_draw_
= true;
379 this.annotations_
= [];
381 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
382 this.zoomed_x_
= false;
383 this.zoomed_y_
= false;
385 // Clear the div. This ensure that, if multiple dygraphs are passed the same
386 // div, then only one will be drawn.
389 // For historical reasons, the 'width' and 'height' options trump all CSS
390 // rules _except_ for an explicit 'width' or 'height' on the div.
391 // As an added convenience, if the div has zero height (like <div></div> does
392 // without any styles), then we use a default height/width
.
393 if (div
.style
.width
=== '' && attrs
.width
) {
394 div
.style
.width
= attrs
.width
+ "px";
396 if (div
.style
.height
=== '' && attrs
.height
) {
397 div
.style
.height
= attrs
.height
+ "px";
399 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
400 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
401 if (div
.style
.width
=== '') {
402 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
405 // these will be zero if the dygraph's div is hidden.
406 this.width_
= div
.clientWidth
;
407 this.height_
= div
.clientHeight
;
409 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
410 if (attrs
.stackedGraph
) {
411 attrs
.fillGraph
= true;
412 // TODO(nikhilk): Add any other stackedGraph checks here.
415 // These two options have a bad interaction. See issue 359.
416 if (attrs
.showRangeSelector
&& attrs
.animatedZooms
) {
417 this.warn('You should not set animatedZooms=true when using the range selector.');
418 attrs
.animatedZooms
= false;
421 // Dygraphs has many options, some of which interact with one another.
422 // To keep track of everything, we maintain two sets of options:
424 // this.user_attrs_ only options explicitly set by the user.
425 // this.attrs_ defaults, options derived from user_attrs_, data.
427 // Options are then accessed this.attr_('attr'), which first looks at
428 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
429 // defaults without overriding behavior that the user specifically asks for.
430 this.user_attrs_
= {};
431 Dygraph
.update(this.user_attrs_
, attrs
);
433 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
435 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
437 this.boundaryIds_
= [];
438 this.setIndexByName_
= {};
439 this.datasetIndex_
= [];
441 this.registeredEvents_
= [];
442 this.eventListeners_
= {};
444 this.attributes_
= new DygraphOptions(this);
446 // Create the containing DIV and other interactive elements
447 this.createInterface_();
451 for (var i
= 0; i
< Dygraph
.PLUGINS
.length
; i
++) {
452 var Plugin
= Dygraph
.PLUGINS
[i
];
453 var pluginInstance
= new Plugin();
455 plugin
: pluginInstance
,
461 var handlers
= pluginInstance
.activate(this);
462 for (var eventName
in handlers
) {
463 // TODO(danvk): validate eventName.
464 pluginDict
.events
[eventName
] = handlers
[eventName
];
467 this.plugins_
.push(pluginDict
);
470 // At this point, plugins can no longer register event handlers.
471 // Construct a map from event -> ordered list of [callback, plugin].
472 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
473 var plugin_dict
= this.plugins_
[i
];
474 for (var eventName
in plugin_dict
.events
) {
475 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
476 var callback
= plugin_dict
.events
[eventName
];
478 var pair
= [plugin_dict
.plugin
, callback
];
479 if (!(eventName
in this.eventListeners_
)) {
480 this.eventListeners_
[eventName
] = [pair
];
482 this.eventListeners_
[eventName
].push(pair
);
491 * Triggers a cascade of events to the various plugins which are interested in them.
492 * Returns true if the "default behavior" should be performed, i.e. if none of
493 * the event listeners called event.preventDefault().
496 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
497 if (!(name
in this.eventListeners_
)) return true;
499 // QUESTION: can we use objects & prototypes to speed this up?
503 defaultPrevented
: false,
504 preventDefault
: function() {
505 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
506 e
.defaultPrevented
= true;
508 propagationStopped
: false,
509 stopPropagation
: function() {
510 e
.propagationStopped
= true;
513 Dygraph
.update(e
, extra_props
);
515 var callback_plugin_pairs
= this.eventListeners_
[name
];
516 if (callback_plugin_pairs
) {
517 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
518 var plugin
= callback_plugin_pairs
[i
][0];
519 var callback
= callback_plugin_pairs
[i
][1];
520 callback
.call(plugin
, e
);
521 if (e
.propagationStopped
) break;
524 return e
.defaultPrevented
;
528 * Returns the zoomed status of the chart for one or both axes.
530 * Axis is an optional parameter. Can be set to 'x' or 'y'.
532 * The zoomed status for an axis is set whenever a user zooms using the mouse
533 * or when the dateWindow or valueRange are updated (unless the
534 * isZoomedIgnoreProgrammaticZoom option is also specified).
536 Dygraph
.prototype.isZoomed
= function(axis
) {
537 if (axis
=== null || axis
=== undefined
) {
538 return this.zoomed_x_
|| this.zoomed_y_
;
540 if (axis
=== 'x') return this.zoomed_x_
;
541 if (axis
=== 'y') return this.zoomed_y_
;
542 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
546 * Returns information about the Dygraph object, including its containing ID.
548 Dygraph
.prototype.toString
= function() {
549 var maindiv
= this.maindiv_
;
550 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
551 return "[Dygraph " + id
+ "]";
556 * Returns the value of an option. This may be set by the user (either in the
557 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
559 * @param { String } name The name of the option, e.g. 'rollPeriod'.
560 * @param { String } [seriesName] The name of the series to which the option
561 * will be applied. If no per-series value of this option is available, then
562 * the global value is returned. This is optional.
563 * @return { ... } The value of the option.
565 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
566 // <REMOVE_FOR_COMBINED>
567 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
568 this.error('Must include options reference JS for testing');
569 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
570 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
571 'in the Dygraphs.OPTIONS_REFERENCE listing.');
572 // Only log this error once.
573 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
575 // </REMOVE_FOR_COMBINED
>
577 // Building an array which we peruse in backwards order to find the correct value.
578 // Options are checked in this order:
579 // series, axis, user attrs, global attrs.
580 // TODO(konigsberg): Can this be made faster by starting with the series and working outward,
581 // rather than building an array?
584 sources
.push(this.attrs_
);
585 if (this.user_attrs_
) {
586 sources
.push(this.user_attrs_
);
588 if (this.user_attrs_
.hasOwnProperty(seriesName
)) {
589 sources
.push(this.user_attrs_
[seriesName
]);
592 // TODO(konigsberg): This special case ought to be documented.
593 if (seriesName
=== this.highlightSet_
&&
594 this.user_attrs_
.hasOwnProperty('highlightSeriesOpts')) {
595 sources
.push(this.user_attrs_
.highlightSeriesOpts
);
601 for (var i
= sources
.length
- 1; i
>= 0; --i
) {
602 var source
= sources
[i
];
603 if (source
.hasOwnProperty(name
)) {
609 var computedValue
= seriesName
? this.attributes_
.findForSeries(name
, seriesName
) : this.attributes_
.find(name
);
610 if (ret
!== computedValue
) {
611 console
.log("Mismatch", name
, seriesName
, ret
, computedValue
);
614 var USE_NEW_VALUE
= true;
615 return USE_NEW_VALUE
? computedValue
: ret
;
619 * Returns the current value for an option, as set in the constructor or via
620 * updateOptions. You may pass in an (optional) series name to get per-series
621 * values for the option.
623 * All values returned by this method should be considered immutable. If you
624 * modify them, there is no guarantee that the changes will be honored or that
625 * dygraphs will remain in a consistent state. If you want to modify an option,
626 * use updateOptions() instead.
628 * @param { String } name The name of the option (e.g. 'strokeWidth')
629 * @param { String } [opt_seriesName] Series name to get per-series values.
630 * @return { ... } The value of the option.
632 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
633 return this.attr_(name
, opt_seriesName
);
638 * @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2')
639 * @return { ... } A function mapping string -> option value
641 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
643 return function(opt
) {
644 var axis_opts
= self
.user_attrs_
.axes
;
645 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
][opt
]) {
646 return axis_opts
[axis
][opt
];
648 // user-specified attributes always trump defaults, even if they're less
650 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
651 return self
.user_attrs_
[opt
];
654 axis_opts
= self
.attrs_
.axes
;
655 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
][opt
]) {
656 return axis_opts
[axis
][opt
];
658 // check old-style axis options
659 // TODO(danvk): add a deprecation warning if either of these match.
660 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
661 return self
.axes_
[0][opt
];
662 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
663 return self
.axes_
[1][opt
];
665 return self
.attr_(opt
);
670 * Returns the current rolling period, as set by the user or an option.
671 * @return {Number} The number of points in the rolling window
673 Dygraph
.prototype.rollPeriod
= function() {
674 return this.rollPeriod_
;
678 * Returns the currently-visible x-range. This can be affected by zooming,
679 * panning or a call to updateOptions.
680 * Returns a two-element array: [left, right].
681 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
683 Dygraph
.prototype.xAxisRange
= function() {
684 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
688 * Returns the lower- and upper-bound x-axis values of the
691 Dygraph
.prototype.xAxisExtremes
= function() {
692 var left
= this.rawData_
[0][0];
693 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
694 return [left
, right
];
698 * Returns the currently-visible y-range for an axis. This can be affected by
699 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
700 * called with no arguments, returns the range of the first axis.
701 * Returns a two-element array: [bottom, top].
703 Dygraph
.prototype.yAxisRange
= function(idx
) {
704 if (typeof(idx
) == "undefined") idx
= 0;
705 if (idx
< 0 || idx
>= this.axes_
.length
) {
708 var axis
= this.axes_
[idx
];
709 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
713 * Returns the currently-visible y-ranges for each axis. This can be affected by
714 * zooming, panning, calls to updateOptions, etc.
715 * Returns an array of [bottom, top] pairs, one for each y-axis.
717 Dygraph
.prototype.yAxisRanges
= function() {
719 for (var i
= 0; i
< this.axes_
.length
; i
++) {
720 ret
.push(this.yAxisRange(i
));
725 // TODO(danvk): use these functions throughout dygraphs.
727 * Convert from data coordinates to canvas/div X/Y coordinates.
728 * If specified, do this conversion for the coordinate system of a particular
729 * axis. Uses the first axis by default.
730 * Returns a two-element array: [X, Y]
732 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
733 * instead of toDomCoords(null, y, axis).
735 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
736 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
740 * Convert from data x coordinates to canvas/div X coordinate.
741 * If specified, do this conversion for the coordinate system of a particular
743 * Returns a single value or null if x is null.
745 Dygraph
.prototype.toDomXCoord
= function(x
) {
750 var area
= this.plotter_
.area
;
751 var xRange
= this.xAxisRange();
752 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
756 * Convert from data x coordinates to canvas/div Y coordinate and optional
757 * axis. Uses the first axis by default.
759 * returns a single value or null if y is null.
761 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
762 var pct
= this.toPercentYCoord(y
, axis
);
767 var area
= this.plotter_
.area
;
768 return area
.y
+ pct
* area
.h
;
772 * Convert from canvas/div coords to data coordinates.
773 * If specified, do this conversion for the coordinate system of a particular
774 * axis. Uses the first axis by default.
775 * Returns a two-element array: [X, Y].
777 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
778 * instead of toDataCoords(null, y, axis).
780 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
781 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
785 * Convert from canvas/div x coordinate to data coordinate.
787 * If x is null, this returns null.
789 Dygraph
.prototype.toDataXCoord
= function(x
) {
794 var area
= this.plotter_
.area
;
795 var xRange
= this.xAxisRange();
796 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
800 * Convert from canvas/div y coord to value.
802 * If y is null, this returns null.
803 * if axis is null, this uses the first axis.
805 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
810 var area
= this.plotter_
.area
;
811 var yRange
= this.yAxisRange(axis
);
813 if (typeof(axis
) == "undefined") axis
= 0;
814 if (!this.axes_
[axis
].logscale
) {
815 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
817 // Computing the inverse of toDomCoord.
818 var pct
= (y
- area
.y
) / area
.h
;
820 // Computing the inverse of toPercentYCoord. The function was arrived at with
821 // the following steps:
823 // Original calcuation:
824 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
826 // Move denominator to both sides:
827 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
829 // subtract logr1, and take the negative value.
830 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
832 // Swap both sides of the equation, and we can compute the log of the
833 // return value. Which means we just need to use that as the exponent in
835 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
837 var logr1
= Dygraph
.log10(yRange
[1]);
838 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
839 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
845 * Converts a y for an axis to a percentage from the top to the
846 * bottom of the drawing area.
848 * If the coordinate represents a value visible on the canvas, then
849 * the value will be between 0 and 1, where 0 is the top of the canvas.
850 * However, this method will return values outside the range, as
851 * values can fall outside the canvas.
853 * If y is null, this returns null.
854 * if axis is null, this uses the first axis.
856 * @param { Number } y The data y-coordinate.
857 * @param { Number } [axis] The axis number on which the data coordinate lives.
858 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
860 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
864 if (typeof(axis
) == "undefined") axis
= 0;
866 var yRange
= this.yAxisRange(axis
);
869 if (!this.axes_
[axis
].logscale
) {
870 // yRange[1] - y is unit distance from the bottom.
871 // yRange[1] - yRange[0] is the scale of the range.
872 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
873 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
875 var logr1
= Dygraph
.log10(yRange
[1]);
876 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
882 * Converts an x value to a percentage from the left to the right of
885 * If the coordinate represents a value visible on the canvas, then
886 * the value will be between 0 and 1, where 0 is the left of the canvas.
887 * However, this method will return values outside the range, as
888 * values can fall outside the canvas.
890 * If x is null, this returns null.
891 * @param { Number } x The data x-coordinate.
892 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
894 Dygraph
.prototype.toPercentXCoord
= function(x
) {
899 var xRange
= this.xAxisRange();
900 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
904 * Returns the number of columns (including the independent variable).
905 * @return { Integer } The number of columns.
907 Dygraph
.prototype.numColumns
= function() {
908 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
912 * Returns the number of rows (excluding any header/label row).
913 * @return { Integer } The number of rows, less any header.
915 Dygraph
.prototype.numRows
= function() {
916 return this.rawData_
.length
;
920 * Returns the full range of the x-axis, as determined by the most extreme
921 * values in the data set. Not affected by zooming, visibility, etc.
922 * TODO(danvk): merge w/ xAxisExtremes
923 * @return { Array<Number> } A [low, high] pair
926 Dygraph
.prototype.fullXRange_
= function() {
927 if (this.numRows() > 0) {
928 return [this.rawData_
[0][0], this.rawData_
[this.numRows() - 1][0]];
935 * Returns the value in the given row and column. If the row and column exceed
936 * the bounds on the data, returns null. Also returns null if the value is
938 * @param { Number} row The row number of the data (0-based). Row 0 is the
939 * first row of data, not a header row.
940 * @param { Number} col The column number of the data (0-based)
941 * @return { Number } The value in the specified cell or null if the row/col
944 Dygraph
.prototype.getValue
= function(row
, col
) {
945 if (row
< 0 || row
> this.rawData_
.length
) return null;
946 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
948 return this.rawData_
[row
][col
];
952 * Generates interface elements for the Dygraph: a containing div, a div to
953 * display the current point, and a textbox to adjust the rolling average
954 * period. Also creates the Renderer/Layout elements.
957 Dygraph
.prototype.createInterface_
= function() {
958 // Create the all-enclosing graph div
959 var enclosing
= this.maindiv_
;
961 this.graphDiv
= document
.createElement("div");
962 this.graphDiv
.style
.width
= this.width_
+ "px";
963 this.graphDiv
.style
.height
= this.height_
+ "px";
964 enclosing
.appendChild(this.graphDiv
);
966 // Create the canvas for interactive parts of the chart.
967 this.canvas_
= Dygraph
.createCanvas();
968 this.canvas_
.style
.position
= "absolute";
969 this.canvas_
.width
= this.width_
;
970 this.canvas_
.height
= this.height_
;
971 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
972 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
974 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
976 // ... and for static parts of the chart.
977 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
978 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
980 if (this.attr_('showRangeSelector')) {
981 // The range selector must be created here so that its canvases and contexts get created here.
982 // For some reason, if the canvases and contexts don't get created here, things don't work in IE.
983 this.rangeSelector_
= new DygraphRangeSelector(this);
986 // The interactive parts of the graph are drawn on top of the chart.
987 this.graphDiv
.appendChild(this.hidden_
);
988 this.graphDiv
.appendChild(this.canvas_
);
989 this.mouseEventElement_
= this.createMouseEventElement_();
991 // Create the grapher
992 this.layout_
= new DygraphLayout(this);
994 if (this.rangeSelector_
) {
995 // This needs to happen after the graph canvases are added to the div and the layout object is created.
996 this.rangeSelector_
.addToGraph(this.graphDiv
, this.layout_
);
1001 this.mouseMoveHandler
= function(e
) {
1002 dygraph
.mouseMove_(e
);
1004 this.addEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler
);
1006 this.mouseOutHandler
= function(e
) {
1007 dygraph
.mouseOut_(e
);
1009 this.addEvent(this.mouseEventElement_
, 'mouseout', this.mouseOutHandler
);
1011 this.createDragInterface_();
1013 this.resizeHandler
= function(e
) {
1017 // Update when the window is resized.
1018 // TODO(danvk): drop frames depending on complexity of the chart.
1019 this.addEvent(window
, 'resize', this.resizeHandler
);
1023 * Detach DOM elements in the dygraph and null out all data references.
1024 * Calling this when you're done with a dygraph can dramatically reduce memory
1025 * usage. See, e.g., the tests/perf.html example.
1027 Dygraph
.prototype.destroy
= function() {
1028 var removeRecursive
= function(node
) {
1029 while (node
.hasChildNodes()) {
1030 removeRecursive(node
.firstChild
);
1031 node
.removeChild(node
.firstChild
);
1035 for (var idx
= 0; idx
< this.registeredEvents_
.length
; idx
++) {
1036 var reg
= this.registeredEvents_
[idx
];
1037 Dygraph
.removeEvent(reg
.elem
, reg
.type
, reg
.fn
);
1039 this.registeredEvents_
= [];
1041 // remove mouse event handlers (This may not be necessary anymore)
1042 Dygraph
.removeEvent(this.mouseEventElement_
, 'mouseout', this.mouseOutHandler
);
1043 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler
);
1044 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseUpHandler_
);
1045 removeRecursive(this.maindiv_
);
1047 var nullOut
= function(obj
) {
1048 for (var n
in obj
) {
1049 if (typeof(obj
[n
]) === 'object') {
1054 // remove event handlers
1055 Dygraph
.removeEvent(window
,'resize',this.resizeHandler
);
1056 this.resizeHandler
= null;
1057 // These may not all be necessary, but it can't hurt...
1058 nullOut(this.layout_
);
1059 nullOut(this.plotter_
);
1064 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1065 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1066 * or the zoom rectangles) is done on this.canvas_.
1067 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1068 * @return {Object} The newly-created canvas
1071 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1072 var h
= Dygraph
.createCanvas();
1073 h
.style
.position
= "absolute";
1074 // TODO(danvk): h should be offset from canvas. canvas needs to include
1075 // some extra area to make it easier to zoom in on the far left and far
1076 // right. h needs to be precisely the plot area, so that clipping occurs.
1077 h
.style
.top
= canvas
.style
.top
;
1078 h
.style
.left
= canvas
.style
.left
;
1079 h
.width
= this.width_
;
1080 h
.height
= this.height_
;
1081 h
.style
.width
= this.width_
+ "px"; // for IE
1082 h
.style
.height
= this.height_
+ "px"; // for IE
1087 * Creates an overlay element used to handle mouse events.
1088 * @return {Object} The mouse event element.
1091 Dygraph
.prototype.createMouseEventElement_
= function() {
1092 if (this.isUsingExcanvas_
) {
1093 var elem
= document
.createElement("div");
1094 elem
.style
.position
= 'absolute';
1095 elem
.style
.backgroundColor
= 'white';
1096 elem
.style
.filter
= 'alpha(opacity=0)';
1097 elem
.style
.width
= this.width_
+ "px";
1098 elem
.style
.height
= this.height_
+ "px";
1099 this.graphDiv
.appendChild(elem
);
1102 return this.canvas_
;
1107 * Generate a set of distinct colors for the data series. This is done with a
1108 * color wheel. Saturation/Value are customizable, and the hue is
1109 * equally-spaced around the color wheel. If a custom set of colors is
1110 * specified, that is used instead.
1113 Dygraph
.prototype.setColors_
= function() {
1114 var labels
= this.getLabels();
1115 var num
= labels
.length
- 1;
1117 this.colorsMap_
= {};
1118 var colors
= this.attr_('colors');
1121 var sat
= this.attr_('colorSaturation') || 1.0;
1122 var val
= this.attr_('colorValue') || 0.5;
1123 var half
= Math
.ceil(num
/ 2);
1124 for (i
= 1; i
<= num
; i
++) {
1125 if (!this.visibility()[i
-1]) continue;
1126 // alternate colors for high contrast.
1127 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
1128 var hue
= (1.0 * idx
/ (1 + num
));
1129 var colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1130 this.colors_
.push(colorStr
);
1131 this.colorsMap_
[labels
[i
]] = colorStr
;
1134 for (i
= 0; i
< num
; i
++) {
1135 if (!this.visibility()[i
]) continue;
1136 var colorStr
= colors
[i
% colors
.length
];
1137 this.colors_
.push(colorStr
);
1138 this.colorsMap_
[labels
[1 + i
]] = colorStr
;
1144 * Return the list of colors. This is either the list of colors passed in the
1145 * attributes or the autogenerated list of rgb(r,g,b) strings.
1146 * This does not return colors for invisible series.
1147 * @return {Array<string>} The list of colors.
1149 Dygraph
.prototype.getColors
= function() {
1150 return this.colors_
;
1154 * Returns a few attributes of a series, i.e. its color, its visibility, which
1155 * axis it's assigned to, and its column in the original data.
1156 * Returns null if the series does not exist.
1157 * Otherwise, returns an object with column, visibility, color and axis properties.
1158 * The "axis" property will be set to 1 for y1 and 2 for y2.
1159 * The "column" property can be fed back into getValue(row, column) to get
1160 * values for this series.
1162 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1164 var labels
= this.getLabels();
1165 for (var i
= 1; i
< labels
.length
; i
++) {
1166 if (labels
[i
] == series_name
) {
1171 if (idx
== -1) return null;
1176 visible
: this.visibility()[idx
- 1],
1177 color
: this.colorsMap_
[series_name
],
1178 axis
: 1 + this.seriesToAxisMap_
[series_name
]
1183 * Create the text box to adjust the averaging period
1186 Dygraph
.prototype.createRollInterface_
= function() {
1187 // Create a roller if one doesn't exist already.
1188 if (!this.roller_
) {
1189 this.roller_
= document
.createElement("input");
1190 this.roller_
.type
= "text";
1191 this.roller_
.style
.display
= "none";
1192 this.graphDiv
.appendChild(this.roller_
);
1195 var display
= this.attr_('showRoller') ? 'block' : 'none';
1197 var area
= this.plotter_
.area
;
1198 var textAttr
= { "position": "absolute",
1200 "top": (area
.y
+ area
.h
- 25) + "px",
1201 "left": (area
.x
+ 1) + "px",
1204 this.roller_
.size
= "2";
1205 this.roller_
.value
= this.rollPeriod_
;
1206 for (var name
in textAttr
) {
1207 if (textAttr
.hasOwnProperty(name
)) {
1208 this.roller_
.style
[name
] = textAttr
[name
];
1213 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1218 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1219 * canvas (i.e. DOM Coords).
1221 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1222 return Dygraph
.pageX(e
) - context
.px
;
1227 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1228 * canvas (i.e. DOM Coords).
1230 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1231 return Dygraph
.pageY(e
) - context
.py
;
1235 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1239 Dygraph
.prototype.createDragInterface_
= function() {
1241 // Tracks whether the mouse is down right now
1243 isPanning
: false, // is this drag part of a pan?
1244 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1245 dragStartX
: null, // pixel coordinates
1246 dragStartY
: null, // pixel coordinates
1247 dragEndX
: null, // pixel coordinates
1248 dragEndY
: null, // pixel coordinates
1249 dragDirection
: null,
1250 prevEndX
: null, // pixel coordinates
1251 prevEndY
: null, // pixel coordinates
1252 prevDragDirection
: null,
1253 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1255 // The value on the left side of the graph when a pan operation starts.
1256 initialLeftmostDate
: null,
1258 // The number of units each pixel spans. (This won't be valid for log
1260 xUnitsPerPixel
: null,
1262 // TODO(danvk): update this comment
1263 // The range in second/value units that the viewport encompasses during a
1264 // panning operation.
1267 // Top-left corner of the canvas, in DOM coords
1268 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1272 // Values for use with panEdgeFraction, which limit how far outside the
1273 // graph's data boundaries it can be panned.
1274 boundedDates
: null, // [minDate, maxDate]
1275 boundedValues
: null, // [[minValue, maxValue] ...]
1277 // We cover iframes during mouse interactions. See comments in
1278 // dygraph-utils.js for more info on why this is a good idea.
1279 tarp
: new Dygraph
.IFrameTarp(),
1281 // contextB is the same thing as this context object but renamed.
1282 initializeMouseDown
: function(event
, g
, contextB
) {
1283 // prevents mouse drags from selecting page text.
1284 if (event
.preventDefault
) {
1285 event
.preventDefault(); // Firefox, Chrome, etc.
1287 event
.returnValue
= false; // IE
1288 event
.cancelBubble
= true;
1291 contextB
.px
= Dygraph
.findPosX(g
.canvas_
);
1292 contextB
.py
= Dygraph
.findPosY(g
.canvas_
);
1293 contextB
.dragStartX
= g
.dragGetX_(event
, contextB
);
1294 contextB
.dragStartY
= g
.dragGetY_(event
, contextB
);
1295 contextB
.cancelNextDblclick
= false;
1296 contextB
.tarp
.cover();
1300 var interactionModel
= this.attr_("interactionModel");
1302 // Self is the graph.
1305 // Function that binds the graph and context to the handler.
1306 var bindHandler
= function(handler
) {
1307 return function(event
) {
1308 handler(event
, self
, context
);
1312 for (var eventName
in interactionModel
) {
1313 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1314 this.addEvent(this.mouseEventElement_
, eventName
,
1315 bindHandler(interactionModel
[eventName
]));
1318 // If the user releases the mouse button during a drag, but not over the
1319 // canvas, then it doesn't count as a zooming action.
1320 this.mouseUpHandler_
= function(event
) {
1321 if (context
.isZooming
|| context
.isPanning
) {
1322 context
.isZooming
= false;
1323 context
.dragStartX
= null;
1324 context
.dragStartY
= null;
1327 if (context
.isPanning
) {
1328 context
.isPanning
= false;
1329 context
.draggingDate
= null;
1330 context
.dateRange
= null;
1331 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1332 delete self
.axes_
[i
].draggingValue
;
1333 delete self
.axes_
[i
].dragValueRange
;
1337 context
.tarp
.uncover();
1340 this.addEvent(document
, 'mouseup', this.mouseUpHandler_
);
1344 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1345 * up any previous zoom rectangles that were drawn. This could be optimized to
1346 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1349 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1350 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1351 * @param {Number} startX The X position where the drag started, in canvas
1353 * @param {Number} endX The current X position of the drag, in canvas coords.
1354 * @param {Number} startY The Y position where the drag started, in canvas
1356 * @param {Number} endY The current Y position of the drag, in canvas coords.
1357 * @param {Number} prevDirection the value of direction on the previous call to
1358 * this function. Used to avoid excess redrawing
1359 * @param {Number} prevEndX The value of endX on the previous call to this
1360 * function. Used to avoid excess redrawing
1361 * @param {Number} prevEndY The value of endY on the previous call to this
1362 * function. Used to avoid excess redrawing
1365 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1366 endY
, prevDirection
, prevEndX
,
1368 var ctx
= this.canvas_ctx_
;
1370 // Clean up from the previous rect if necessary
1371 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1372 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1373 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1374 } else if (prevDirection
== Dygraph
.VERTICAL
){
1375 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1376 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1379 // Draw a light-grey rectangle to show the new viewing area
1380 if (direction
== Dygraph
.HORIZONTAL
) {
1381 if (endX
&& startX
) {
1382 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1383 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1384 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1386 } else if (direction
== Dygraph
.VERTICAL
) {
1387 if (endY
&& startY
) {
1388 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1389 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1390 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1394 if (this.isUsingExcanvas_
) {
1395 this.currentZoomRectArgs_
= [direction
, startX
, endX
, startY
, endY
, 0, 0, 0];
1400 * Clear the zoom rectangle (and perform no zoom).
1403 Dygraph
.prototype.clearZoomRect_
= function() {
1404 this.currentZoomRectArgs_
= null;
1405 this.canvas_ctx_
.clearRect(0, 0, this.canvas_
.width
, this.canvas_
.height
);
1409 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1410 * the canvas. The exact zoom window may be slightly larger if there are no data
1411 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1412 * which accepts dates that match the raw data. This function redraws the graph.
1414 * @param {Number} lowX The leftmost pixel value that should be visible.
1415 * @param {Number} highX The rightmost pixel value that should be visible.
1418 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1419 this.currentZoomRectArgs_
= null;
1420 // Find the earliest and latest dates contained in this canvasx range.
1421 // Convert the call to date ranges of the raw data.
1422 var minDate
= this.toDataXCoord(lowX
);
1423 var maxDate
= this.toDataXCoord(highX
);
1424 this.doZoomXDates_(minDate
, maxDate
);
1428 * Transition function to use in animations. Returns values between 0.0
1429 * (totally old values) and 1.0 (totally new values) for each frame.
1432 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1434 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1438 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1439 * method with doZoomX which accepts pixel coordinates. This function redraws
1442 * @param {Number} minDate The minimum date that should be visible.
1443 * @param {Number} maxDate The maximum date that should be visible.
1446 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1447 // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation
1448 // can produce strange effects. Rather than the y-axis transitioning slowly
1449 // between values, it can jerk around.)
1450 var old_window
= this.xAxisRange();
1451 var new_window
= [minDate
, maxDate
];
1452 this.zoomed_x_
= true;
1454 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1455 if (that
.attr_("zoomCallback")) {
1456 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1462 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1463 * the canvas. This function redraws the graph.
1465 * @param {Number} lowY The topmost pixel value that should be visible.
1466 * @param {Number} highY The lowest pixel value that should be visible.
1469 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1470 this.currentZoomRectArgs_
= null;
1471 // Find the highest and lowest values in pixel range for each axis.
1472 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1473 // This is because pixels increase as you go down on the screen, whereas data
1474 // coordinates increase as you go up the screen.
1475 var oldValueRanges
= this.yAxisRanges();
1476 var newValueRanges
= [];
1477 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1478 var hi
= this.toDataYCoord(lowY
, i
);
1479 var low
= this.toDataYCoord(highY
, i
);
1480 newValueRanges
.push([low
, hi
]);
1483 this.zoomed_y_
= true;
1485 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1486 if (that
.attr_("zoomCallback")) {
1487 var xRange
= that
.xAxisRange();
1488 that
.attr_("zoomCallback")(xRange
[0], xRange
[1], that
.yAxisRanges());
1494 * Reset the zoom to the original view coordinates. This is the same as
1495 * double-clicking on the graph.
1499 Dygraph
.prototype.doUnzoom_
= function() {
1500 var dirty
= false, dirtyX
= false, dirtyY
= false;
1501 if (this.dateWindow_
!== null) {
1506 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1507 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1513 // Clear any selection, since it's likely to be drawn in the wrong place.
1514 this.clearSelection();
1517 this.zoomed_x_
= false;
1518 this.zoomed_y_
= false;
1520 var minDate
= this.rawData_
[0][0];
1521 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1523 // With only one frame, don't bother calculating extreme ranges.
1524 // TODO(danvk): merge this block w/ the code below
.
1525 if (!this.attr_("animatedZooms")) {
1526 this.dateWindow_
= null;
1527 for (i
= 0; i
< this.axes_
.length
; i
++) {
1528 if (this.axes_
[i
].valueWindow
!== null) {
1529 delete this.axes_
[i
].valueWindow
;
1533 if (this.attr_("zoomCallback")) {
1534 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1539 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1541 oldWindow
= this.xAxisRange();
1542 newWindow
= [minDate
, maxDate
];
1546 oldValueRanges
= this.yAxisRanges();
1547 // TODO(danvk): this is pretty inefficient
1548 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1549 var extremes
= packed
[1];
1551 // this has the side-effect of modifying this.axes_.
1552 // this doesn't make much sense in this context, but it's convenient (we
1553 // need this.axes_[*].extremeValues) and not harmful since we'll be
1554 // calling drawGraph_ shortly, which clobbers these values.
1555 this.computeYAxisRanges_(extremes
);
1557 newValueRanges
= [];
1558 for (i
= 0; i
< this.axes_
.length
; i
++) {
1559 var axis
= this.axes_
[i
];
1560 newValueRanges
.push((axis
.valueRange
!== null &&
1561 axis
.valueRange
!== undefined
) ?
1562 axis
.valueRange
: axis
.extremeRange
);
1567 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1569 that
.dateWindow_
= null;
1570 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1571 if (that
.axes_
[i
].valueWindow
!== null) {
1572 delete that
.axes_
[i
].valueWindow
;
1575 if (that
.attr_("zoomCallback")) {
1576 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1583 * Combined animation logic for all zoom functions.
1584 * either the x parameters or y parameters may be null.
1587 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1588 var steps
= this.attr_("animatedZooms") ? Dygraph
.ANIMATION_STEPS
: 1;
1591 var valueRanges
= [];
1594 if (oldXRange
!== null && newXRange
!== null) {
1595 for (step
= 1; step
<= steps
; step
++) {
1596 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1597 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1598 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1602 if (oldYRanges
!== null && newYRanges
!== null) {
1603 for (step
= 1; step
<= steps
; step
++) {
1604 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1606 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1607 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1608 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1610 valueRanges
[step
-1] = thisRange
;
1615 Dygraph
.repeatAndCleanup(function(step
) {
1616 if (valueRanges
.length
) {
1617 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1618 var w
= valueRanges
[step
][i
];
1619 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1622 if (windows
.length
) {
1623 that
.dateWindow_
= windows
[step
];
1626 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1630 * Get the current graph's area object.
1632 * Returns: {x, y, w, h}
1634 Dygraph
.prototype.getArea
= function() {
1635 return this.plotter_
.area
;
1639 * Convert a mouse event to DOM coordinates relative to the graph origin.
1641 * Returns a two-element array: [X, Y].
1643 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1644 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1645 var canvasy
= Dygraph
.pageY(event
) - Dygraph
.findPosY(this.mouseEventElement_
);
1646 return [canvasx
, canvasy
];
1650 * Given a canvas X coordinate, find the closest row.
1651 * @param {Number} domX graph-relative DOM X coordinate
1652 * Returns: row number, integer
1655 Dygraph
.prototype.findClosestRow
= function(domX
) {
1656 var minDistX
= Infinity
;
1657 var pointIdx
= -1, setIdx
= -1;
1658 var sets
= this.layout_
.points
;
1659 for (var i
= 0; i
< sets
.length
; i
++) {
1660 var points
= sets
[i
];
1661 var len
= points
.length
;
1662 for (var j
= 0; j
< len
; j
++) {
1663 var point
= points
[j
];
1664 if (!Dygraph
.isValidPoint(point
, true)) continue;
1665 var dist
= Math
.abs(point
.canvasx
- domX
);
1666 if (dist
< minDistX
) {
1674 // TODO(danvk): remove this function; it's trivial and has only one use.
1675 return this.idxToRow_(setIdx
, pointIdx
);
1679 * Given canvas X,Y coordinates, find the closest point.
1681 * This finds the individual data point across all visible series
1682 * that's closest to the supplied DOM coordinates using the standard
1683 * Euclidean X,Y distance.
1685 * @param {Number} domX graph-relative DOM X coordinate
1686 * @param {Number} domY graph-relative DOM Y coordinate
1687 * Returns: {row, seriesName, point}
1690 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1691 var minDist
= Infinity
;
1693 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
;
1694 for ( var setIdx
= this.layout_
.datasets
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1695 var points
= this.layout_
.points
[setIdx
];
1696 for (var i
= 0; i
< points
.length
; ++i
) {
1697 var point
= points
[i
];
1698 if (!Dygraph
.isValidPoint(point
)) continue;
1699 dx
= point
.canvasx
- domX
;
1700 dy
= point
.canvasy
- domY
;
1701 dist
= dx
* dx
+ dy
* dy
;
1702 if (dist
< minDist
) {
1704 closestPoint
= point
;
1705 closestSeries
= setIdx
;
1710 var name
= this.layout_
.setNames
[closestSeries
];
1712 row
: idx
+ this.getLeftBoundary_(),
1719 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1721 * This first finds the X data point closest to the supplied DOM X coordinate,
1722 * then finds the series which puts the Y coordinate on top of its filled area,
1723 * using linear interpolation between adjacent point pairs.
1725 * @param {Number} domX graph-relative DOM X coordinate
1726 * @param {Number} domY graph-relative DOM Y coordinate
1727 * Returns: {row, seriesName, point}
1730 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1731 var row
= this.findClosestRow(domX
);
1732 var boundary
= this.getLeftBoundary_();
1733 var rowIdx
= row
- boundary
;
1734 var sets
= this.layout_
.points
;
1735 var closestPoint
, closestSeries
;
1736 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
1737 var points
= this.layout_
.points
[setIdx
];
1738 if (rowIdx
>= points
.length
) continue;
1739 var p1
= points
[rowIdx
];
1740 if (!Dygraph
.isValidPoint(p1
)) continue;
1741 var py
= p1
.canvasy
;
1742 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1743 // interpolate series Y value using next point
1744 var p2
= points
[rowIdx
+ 1];
1745 if (Dygraph
.isValidPoint(p2
)) {
1746 var dx
= p2
.canvasx
- p1
.canvasx
;
1748 var r
= (domX
- p1
.canvasx
) / dx
;
1749 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1752 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1753 // interpolate series Y value using previous point
1754 var p0
= points
[rowIdx
- 1];
1755 if (Dygraph
.isValidPoint(p0
)) {
1756 var dx
= p1
.canvasx
- p0
.canvasx
;
1758 var r
= (p1
.canvasx
- domX
) / dx
;
1759 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1763 // Stop if the point (domX, py) is above this series' upper edge
1764 if (setIdx
=== 0 || py
< domY
) {
1766 closestSeries
= setIdx
;
1769 var name
= this.layout_
.setNames
[closestSeries
];
1778 * When the mouse moves in the canvas, display information about a nearby data
1779 * point and draw dots over those points in the data series. This function
1780 * takes care of cleanup of previously-drawn dots.
1781 * @param {Object} event The mousemove event from the browser.
1784 Dygraph
.prototype.mouseMove_
= function(event
) {
1785 // This prevents JS errors when mousing over the canvas before data loads.
1786 var points
= this.layout_
.points
;
1787 if (points
=== undefined
|| points
=== null) return;
1789 var canvasCoords
= this.eventToDomCoords(event
);
1790 var canvasx
= canvasCoords
[0];
1791 var canvasy
= canvasCoords
[1];
1793 var highlightSeriesOpts
= this.attr_("highlightSeriesOpts");
1794 var selectionChanged
= false;
1795 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1797 if (this.attr_("stackedGraph")) {
1798 closest
= this.findStackedPoint(canvasx
, canvasy
);
1800 closest
= this.findClosestPoint(canvasx
, canvasy
);
1802 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1804 var idx
= this.findClosestRow(canvasx
);
1805 selectionChanged
= this.setSelection(idx
);
1808 var callback
= this.attr_("highlightCallback");
1809 if (callback
&& selectionChanged
) {
1810 callback(event
, this.lastx_
, this.selPoints_
, this.lastRow_
, this.highlightSet_
);
1815 * Fetch left offset from first defined boundaryIds record (see bug #236).
1818 Dygraph
.prototype.getLeftBoundary_
= function() {
1819 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
1820 if (this.boundaryIds_
[i
] !== undefined
) {
1821 return this.boundaryIds_
[i
][0];
1828 * Transforms layout_.points index into data row number.
1829 * @param int layout_.points index
1830 * @return int row number, or -1 if none could be found.
1833 Dygraph
.prototype.idxToRow_
= function(setIdx
, rowIdx
) {
1834 if (rowIdx
< 0) return -1;
1836 var boundary
= this.getLeftBoundary_();
1837 return boundary
+ rowIdx
;
1838 // for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
1839 // var set = this.layout_.datasets[setIdx];
1840 // if (idx < set.length) {
1841 // return boundary + idx;
1843 // idx -= set.length;
1848 Dygraph
.prototype.animateSelection_
= function(direction
) {
1849 var totalSteps
= 10;
1851 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
1852 if (this.animateId
=== undefined
) this.animateId
= 0;
1853 var start
= this.fadeLevel
;
1854 var steps
= direction
< 0 ? start
: totalSteps
- start
;
1856 if (this.fadeLevel
) {
1857 this.updateSelection_(1.0);
1862 var thisId
= ++this.animateId
;
1864 Dygraph
.repeatAndCleanup(
1866 // ignore simultaneous animations
1867 if (that
.animateId
!= thisId
) return;
1869 that
.fadeLevel
+= direction
;
1870 if (that
.fadeLevel
=== 0) {
1871 that
.clearSelection();
1873 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
1876 steps
, millis
, function() {});
1880 * Draw dots over the selectied points in the data series. This function
1881 * takes care of cleanup of previously-drawn dots.
1884 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
1885 var defaultPrevented
= this.cascadeEvents_('select', {
1886 selectedX
: this.lastx_
,
1887 selectedPoints
: this.selPoints_
1889 // TODO(danvk): use defaultPrevented here?
1891 // Clear the previously drawn vertical, if there is one
1893 var ctx
= this.canvas_ctx_
;
1894 if (this.attr_('highlightSeriesOpts')) {
1895 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1896 var alpha
= 1.0 - this.attr_('highlightSeriesBackgroundAlpha');
1898 // Activating background fade includes an animation effect for a gradual
1899 // fade. TODO(klausw): make this independently configurable if it causes
1900 // issues? Use a shared preference to control animations?
1901 var animateBackgroundFade
= true;
1902 if (animateBackgroundFade
) {
1903 if (opt_animFraction
=== undefined
) {
1904 // start a new animation
1905 this.animateSelection_(1);
1908 alpha
*= opt_animFraction
;
1910 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
1911 ctx
.fillRect(0, 0, this.width_
, this.height_
);
1914 // Redraw only the highlighted series in the interactive canvas (not the
1915 // static plot canvas, which is where series are usually drawn).
1916 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
1917 } else if (this.previousVerticalX_
>= 0) {
1918 // Determine the maximum highlight circle size.
1919 var maxCircleSize
= 0;
1920 var labels
= this.attr_('labels');
1921 for (i
= 1; i
< labels
.length
; i
++) {
1922 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1923 if (r
> maxCircleSize
) maxCircleSize
= r
;
1925 var px
= this.previousVerticalX_
;
1926 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1927 2 * maxCircleSize
+ 2, this.height_
);
1930 if (this.isUsingExcanvas_
&& this.currentZoomRectArgs_
) {
1931 Dygraph
.prototype.drawZoomRect_
.apply(this, this.currentZoomRectArgs_
);
1934 if (this.selPoints_
.length
> 0) {
1935 // Draw colored circles over the center of each selected point
1936 var canvasx
= this.selPoints_
[0].canvasx
;
1938 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
1939 var pt
= this.selPoints_
[i
];
1940 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1942 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1943 var callback
= this.attr_("drawHighlightPointCallback", pt
.name
);
1944 var color
= this.plotter_
.colors
[pt
.name
];
1946 callback
= Dygraph
.Circles
.DEFAULT
;
1948 ctx
.lineWidth
= this.attr_('strokeWidth', pt
.name
);
1949 ctx
.strokeStyle
= color
;
1950 ctx
.fillStyle
= color
;
1951 callback(this.g
, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
1956 this.previousVerticalX_
= canvasx
;
1961 * Manually set the selected points and display information about them in the
1962 * legend. The selection can be cleared using clearSelection() and queried
1963 * using getSelection().
1964 * @param { Integer } row number that should be highlighted (i.e. appear with
1965 * hover dots on the chart). Set to false to clear any selection.
1966 * @param { seriesName } optional series name to highlight that series with the
1967 * the highlightSeriesOpts setting.
1968 * @param { locked } optional If true, keep seriesName selected when mousing
1969 * over the graph, disabling closest-series highlighting. Call clearSelection()
1972 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
1973 // Extract the points we've selected
1974 this.selPoints_
= [];
1976 if (row
!== false) {
1977 row
-= this.getLeftBoundary_();
1980 var changed
= false;
1981 if (row
!== false && row
>= 0) {
1982 if (row
!= this.lastRow_
) changed
= true;
1983 this.lastRow_
= row
;
1984 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
1985 var set
= this.layout_
.datasets
[setIdx
];
1986 if (row
< set
.length
) {
1987 var point
= this.layout_
.points
[setIdx
][row
];
1989 if (this.attr_("stackedGraph")) {
1990 point
= this.layout_
.unstackPointAtIndex(setIdx
, row
);
1993 if (point
.yval
!== null) this.selPoints_
.push(point
);
1997 if (this.lastRow_
>= 0) changed
= true;
2001 if (this.selPoints_
.length
) {
2002 this.lastx_
= this.selPoints_
[0].xval
;
2007 if (opt_seriesName
!== undefined
) {
2008 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
2009 this.highlightSet_
= opt_seriesName
;
2012 if (opt_locked
!== undefined
) {
2013 this.lockedSet_
= opt_locked
;
2017 this.updateSelection_(undefined
);
2023 * The mouse has left the canvas. Clear out whatever artifacts remain
2024 * @param {Object} event the mouseout event from the browser.
2027 Dygraph
.prototype.mouseOut_
= function(event
) {
2028 if (this.attr_("unhighlightCallback")) {
2029 this.attr_("unhighlightCallback")(event
);
2032 if (this.attr_("hideOverlayOnMouseOut") && !this.lockedSet_
) {
2033 this.clearSelection();
2038 * Clears the current selection (i.e. points that were highlighted by moving
2039 * the mouse over the chart).
2041 Dygraph
.prototype.clearSelection
= function() {
2042 this.cascadeEvents_('deselect', {});
2044 this.lockedSet_
= false;
2045 // Get rid of the overlay data
2046 if (this.fadeLevel
) {
2047 this.animateSelection_(-1);
2050 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2052 this.selPoints_
= [];
2055 this.highlightSet_
= null;
2059 * Returns the number of the currently selected row. To get data for this row,
2060 * you can use the getValue method.
2061 * @return { Integer } row number, or -1 if nothing is selected
2063 Dygraph
.prototype.getSelection
= function() {
2064 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2068 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2069 var points
= this.layout_
.points
[setIdx
];
2070 for (var row
= 0; row
< points
.length
; row
++) {
2071 if (points
[row
].x
== this.selPoints_
[0].x
) {
2072 return row
+ this.getLeftBoundary_();
2080 * Returns the name of the currently-highlighted series.
2081 * Only available when the highlightSeriesOpts option is in use.
2083 Dygraph
.prototype.getHighlightSeries
= function() {
2084 return this.highlightSet_
;
2088 * Returns true if the currently-highlighted series was locked
2089 * via setSelection(..., seriesName, true).
2091 Dygraph
.prototype.isSeriesLocked
= function() {
2092 return this.lockedSet_
;
2096 * Fires when there's data available to be graphed.
2097 * @param {String} data Raw CSV data to be plotted
2100 Dygraph
.prototype.loadedEvent_
= function(data
) {
2101 this.rawData_
= this.parseCSV_(data
);
2106 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2109 Dygraph
.prototype.addXTicks_
= function() {
2110 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2112 if (this.dateWindow_
) {
2113 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2115 range
= this.fullXRange_();
2118 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2119 var xTicks
= xAxisOptionsView('ticker')(
2122 this.width_
, // TODO(danvk): should be area.width
2125 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2126 // console.log(msg);
2127 this.layout_
.setXTicks(xTicks
);
2132 * Computes the range of the data series (including confidence intervals).
2133 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2134 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2135 * @return [low, high]
2137 Dygraph
.prototype.extremeValues_
= function(series
) {
2138 var minY
= null, maxY
= null, j
, y
;
2140 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2142 // With custom bars, maxY is the max of the high values.
2143 for (j
= 0; j
< series
.length
; j
++) {
2144 y
= series
[j
][1][0];
2145 if (y
=== null || isNaN(y
)) continue;
2146 var low
= y
- series
[j
][1][1];
2147 var high
= y
+ series
[j
][1][2];
2148 if (low
> y
) low
= y
; // this can happen with custom bars,
2149 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2150 if (maxY
=== null || high
> maxY
) {
2153 if (minY
=== null || low
< minY
) {
2158 for (j
= 0; j
< series
.length
; j
++) {
2160 if (y
=== null || isNaN(y
)) continue;
2161 if (maxY
=== null || y
> maxY
) {
2164 if (minY
=== null || y
< minY
) {
2170 return [minY
, maxY
];
2175 * This function is called once when the chart's data is changed or the options
2176 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2177 * idea is that values derived from the chart's data can be computed here,
2178 * rather than every time the chart is drawn. This includes things like the
2179 * number of axes, rolling averages, etc.
2181 Dygraph
.prototype.predraw_
= function() {
2182 var start
= new Date();
2184 // TODO(danvk): move more computations out of drawGraph_ and into here.
2185 this.computeYAxes_();
2187 // Create a new plotter.
2188 if (this.plotter_
) {
2189 this.cascadeEvents_('clearChart');
2190 this.plotter_
.clear();
2192 this.plotter_
= new DygraphCanvasRenderer(this,
2197 // The roller sits in the bottom left corner of the chart. We don't know where
2198 // this will be until the options are available, so it's positioned here.
2199 this.createRollInterface_();
2201 this.cascadeEvents_('predraw');
2203 if (this.rangeSelector_
) {
2204 this.rangeSelector_
.renderStaticLayer();
2207 // Convert the raw data (a 2D array) into the internal format and compute
2208 // rolling averages.
2209 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2210 for (var i
= 1; i
< this.numColumns(); i
++) {
2211 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2212 var logScale
= this.attr_('logscale');
2213 var series
= this.extractSeries_(this.rawData_
, i
, logScale
);
2214 series
= this.rollingAverage(series
, this.rollPeriod_
);
2215 this.rolledSeries_
.push(series
);
2218 // If the data or options have changed, then we'd better redraw.
2221 // This is used to determine whether to do various animations.
2222 var end
= new Date();
2223 this.drawingTimeMs_
= (end
- start
);
2227 * Loop over all fields and create datasets, calculating extreme y-values for
2228 * each series and extreme x-indices as we go.
2230 * dateWindow is passed in as an explicit parameter so that we can compute
2231 * extreme values "speculatively", i.e. without actually setting state on the
2234 * TODO(danvk): make this more of a true function
2235 * @return [ datasets, seriesExtremes, boundaryIds ]
2238 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2239 var boundaryIds
= [];
2240 var cumulative_y
= []; // For stacked series.
2242 var extremes
= {}; // series name -> [low, high]
2245 // Loop over the fields (series). Go from the last to the first,
2246 // because if they're stacked that's how we accumulate the values.
2247 var num_series
= rolledSeries
.length
- 1;
2248 for (i
= num_series
; i
>= 1; i
--) {
2249 if (!this.visibility()[i
- 1]) continue;
2251 // Note: this copy _is_ necessary at the moment.
2252 // If you remove it, it breaks zooming with error bars on.
2253 // TODO(danvk): investigate further & write a test for this.
2255 for (j
= 0; j
< rolledSeries
[i
].length
; j
++) {
2256 series
.push(rolledSeries
[i
][j
]);
2259 // Prune down to the desired range, if necessary (for zooming)
2260 // Because there can be lines going to points outside of the visible area,
2261 // we actually prune to visible points, plus one on either side.
2262 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2264 var low
= dateWindow
[0];
2265 var high
= dateWindow
[1];
2267 // TODO(danvk): do binary search instead of linear search.
2268 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2269 var firstIdx
= null, lastIdx
= null;
2270 for (k
= 0; k
< series
.length
; k
++) {
2271 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2274 if (series
[k
][0] <= high
) {
2278 if (firstIdx
=== null) firstIdx
= 0;
2279 if (firstIdx
> 0) firstIdx
--;
2280 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2281 if (lastIdx
< series
.length
- 1) lastIdx
++;
2282 boundaryIds
[i
-1] = [firstIdx
, lastIdx
];
2283 for (k
= firstIdx
; k
<= lastIdx
; k
++) {
2284 pruned
.push(series
[k
]);
2288 boundaryIds
[i
-1] = [0, series
.length
-1];
2291 var seriesExtremes
= this.extremeValues_(series
);
2294 for (j
=0; j
<series
.length
; j
++) {
2295 series
[j
] = [series
[j
][0],
2300 } else if (this.attr_("stackedGraph")) {
2301 var l
= series
.length
;
2303 for (j
= 0; j
< l
; j
++) {
2304 // If one data set has a NaN, let all subsequent stacked
2305 // sets inherit the NaN -- only start at 0 for the first set.
2306 var x
= series
[j
][0];
2307 if (cumulative_y
[x
] === undefined
) {
2308 cumulative_y
[x
] = 0;
2311 actual_y
= series
[j
][1];
2312 if (actual_y
=== null) {
2313 series
[j
] = [x
, null];
2317 cumulative_y
[x
] += actual_y
;
2319 series
[j
] = [x
, cumulative_y
[x
]];
2321 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2322 seriesExtremes
[1] = cumulative_y
[x
];
2324 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2325 seriesExtremes
[0] = cumulative_y
[x
];
2330 var seriesName
= this.attr_("labels")[i
];
2331 extremes
[seriesName
] = seriesExtremes
;
2332 datasets
[i
] = series
;
2335 // For stacked graphs, a NaN value for any point in the sum should create a
2336 // clean gap in the graph. Back-propagate NaNs to all points at this X value.
2337 if (this.attr_("stackedGraph")) {
2338 for (k
= datasets
.length
- 1; k
>= 0; --k
) {
2339 // Use the first nonempty dataset to get X values.
2340 if (!datasets
[k
]) continue;
2341 for (j
= 0; j
< datasets
[k
].length
; j
++) {
2342 var x
= datasets
[k
][j
][0];
2343 if (isNaN(cumulative_y
[x
])) {
2344 // Set all Y values to NaN at that X value.
2345 for (i
= datasets
.length
- 1; i
>= 0; i
--) {
2346 if (!datasets
[i
]) continue;
2347 datasets
[i
][j
][1] = NaN
;
2355 return [ datasets
, extremes
, boundaryIds
];
2359 * Update the graph with new data. This method is called when the viewing area
2360 * has changed. If the underlying data or options have changed, predraw_ will
2361 * be called before drawGraph_ is called.
2365 Dygraph
.prototype.drawGraph_
= function() {
2366 var start
= new Date();
2368 // This is used to set the second parameter to drawCallback, below.
2369 var is_initial_draw
= this.is_initial_draw_
;
2370 this.is_initial_draw_
= false;
2372 this.layout_
.removeAllDatasets();
2374 this.attrs_
.pointSize
= 0.5 * this.attr_('highlightCircleSize');
2376 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2377 var datasets
= packed
[0];
2378 var extremes
= packed
[1];
2379 this.boundaryIds_
= packed
[2];
2381 this.setIndexByName_
= {};
2382 var labels
= this.attr_("labels");
2383 if (labels
.length
> 0) {
2384 this.setIndexByName_
[labels
[0]] = 0;
2387 for (var i
= 1; i
< datasets
.length
; i
++) {
2388 this.setIndexByName_
[labels
[i
]] = i
;
2389 if (!this.visibility()[i
- 1]) continue;
2390 this.layout_
.addDataset(labels
[i
], datasets
[i
]);
2391 this.datasetIndex_
[i
] = dataIdx
++;
2394 this.computeYAxisRanges_(extremes
);
2395 this.layout_
.setYAxes(this.axes_
);
2399 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2400 var tmp_zoomed_x
= this.zoomed_x_
;
2401 // Tell PlotKit to use this new data and render itself
2402 this.layout_
.setDateWindow(this.dateWindow_
);
2403 this.zoomed_x_
= tmp_zoomed_x
;
2404 this.layout_
.evaluateWithError();
2405 this.renderGraph_(is_initial_draw
);
2407 if (this.attr_("timingName")) {
2408 var end
= new Date();
2410 console
.log(this.attr_("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2416 * This does the work of drawing the chart. It assumes that the layout and axis
2417 * scales have already been set (e.g. by predraw_).
2421 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2422 this.cascadeEvents_('clearChart');
2423 this.plotter_
.clear();
2425 if (this.attr_('underlayCallback')) {
2426 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2427 // users who expect a deprecated form of this callback.
2428 this.attr_('underlayCallback')(
2429 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2433 canvas
: this.hidden_
,
2434 drawingContext
: this.hidden_ctx_
2436 this.cascadeEvents_('willDrawChart', e
);
2437 this.plotter_
.render();
2438 this.cascadeEvents_('didDrawChart', e
);
2440 // TODO(danvk): is this a performance bottleneck when panning?
2441 // The interaction canvas should already be empty in that situation.
2442 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2443 this.canvas_
.height
);
2445 // Generate a static legend before any particular point is selected.
2447 if (this.rangeSelector_
) {
2448 this.rangeSelector_
.renderInteractiveLayer();
2450 if (this.attr_("drawCallback") !== null) {
2451 this.attr_("drawCallback")(this, is_initial_draw
);
2457 * Determine properties of the y-axes which are independent of the data
2458 * currently being displayed. This includes things like the number of axes and
2459 * the style of the axes. It does not include the range of each axis and its
2461 * This fills in this.axes_ and this.seriesToAxisMap_.
2462 * axes_ = [ { options } ]
2463 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2464 * indices are into the axes_ array.
2466 Dygraph
.prototype.computeYAxes_
= function() {
2467 // Preserve valueWindow settings if they exist, and if the user hasn't
2468 // specified a new valueRange.
2469 var i
, valueWindows
, seriesName
, axis
, index
, opts
, v
;
2470 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2472 for (index
= 0; index
< this.axes_
.length
; index
++) {
2473 valueWindows
.push(this.axes_
[index
].valueWindow
);
2477 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2478 this.seriesToAxisMap_
= {};
2480 // Get a list of series names.
2481 var labels
= this.attr_("labels");
2483 for (i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2485 // all options which could be applied per-axis:
2493 'axisLabelFontSize',
2498 // Copy global axis options over to the first axis.
2499 for (i
= 0; i
< axisOptions
.length
; i
++) {
2500 var k
= axisOptions
[i
];
2502 if (v
) this.axes_
[0][k
] = v
;
2505 // Go through once and add all the axes.
2506 for (seriesName
in series
) {
2507 if (!series
.hasOwnProperty(seriesName
)) continue;
2508 axis
= this.attr_("axis", seriesName
);
2509 if (axis
=== null) {
2510 this.seriesToAxisMap_
[seriesName
] = 0;
2513 if (typeof(axis
) == 'object') {
2514 // Add a new axis, making a copy of its per-axis options.
2516 Dygraph
.update(opts
, this.axes_
[0]);
2517 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2518 var yAxisId
= this.axes_
.length
;
2519 opts
.yAxisId
= yAxisId
;
2521 Dygraph
.update(opts
, axis
);
2522 this.axes_
.push(opts
);
2523 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2527 // Go through one more time and assign series to an axis defined by another
2528 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2529 for (seriesName
in series
) {
2530 if (!series
.hasOwnProperty(seriesName
)) continue;
2531 axis
= this.attr_("axis", seriesName
);
2532 if (typeof(axis
) == 'string') {
2533 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2534 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2535 "series " + axis
+ ", which does not define its own axis.");
2538 var idx
= this.seriesToAxisMap_
[axis
];
2539 this.seriesToAxisMap_
[seriesName
] = idx
;
2543 if (valueWindows
!== undefined
) {
2544 // Restore valueWindow settings.
2545 for (index
= 0; index
< valueWindows
.length
; index
++) {
2546 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2551 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2553 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2554 v
= opts("valueRange");
2555 if (v
) this.axes_
[axis
].valueRange
= v
;
2556 } else { // To keep old behavior
2557 var axes
= this.user_attrs_
.axes
;
2558 if (axes
&& axes
.y2
) {
2559 v
= axes
.y2
.valueRange
;
2560 if (v
) this.axes_
[axis
].valueRange
= v
;
2568 * Returns the number of y-axes on the chart.
2569 * @return {Number} the number of axes.
2571 Dygraph
.prototype.numAxes
= function() {
2573 for (var series
in this.seriesToAxisMap_
) {
2574 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2575 var idx
= this.seriesToAxisMap_
[series
];
2576 if (idx
> last_axis
) last_axis
= idx
;
2578 return 1 + last_axis
;
2583 * Returns axis properties for the given series.
2584 * @param { String } setName The name of the series for which to get axis
2585 * properties, e.g. 'Y1'.
2586 * @return { Object } The axis properties.
2588 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2589 // TODO(danvk): handle errors.
2590 return this.axes_
[this.seriesToAxisMap_
[series
]];
2595 * Determine the value range and tick marks for each axis.
2596 * @param {Object} extremes A mapping from seriesName -> [low, high]
2597 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2599 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2600 // Build a map from axis number -> [list of series names]
2601 var seriesForAxis
= [], series
;
2602 for (series
in this.seriesToAxisMap_
) {
2603 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2604 var idx
= this.seriesToAxisMap_
[series
];
2605 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2606 seriesForAxis
[idx
].push(series
);
2609 // Compute extreme values, a span and tick marks for each axis.
2610 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2611 var axis
= this.axes_
[i
];
2613 if (!seriesForAxis
[i
]) {
2614 // If no series are defined or visible then use a reasonable default
2615 axis
.extremeRange
= [0, 1];
2617 // Calculate the extremes of extremes.
2618 series
= seriesForAxis
[i
];
2619 var minY
= Infinity
; // extremes[series[0]][0];
2620 var maxY
= -Infinity
; // extremes[series[0]][1];
2621 var extremeMinY
, extremeMaxY
;
2623 for (var j
= 0; j
< series
.length
; j
++) {
2624 // this skips invisible series
2625 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2627 // Only use valid extremes to stop null data series' from corrupting the scale.
2628 extremeMinY
= extremes
[series
[j
]][0];
2629 if (extremeMinY
!== null) {
2630 minY
= Math
.min(extremeMinY
, minY
);
2632 extremeMaxY
= extremes
[series
[j
]][1];
2633 if (extremeMaxY
!== null) {
2634 maxY
= Math
.max(extremeMaxY
, maxY
);
2637 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2639 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2640 if (minY
== Infinity
) minY
= 0;
2641 if (maxY
== -Infinity
) maxY
= 1;
2643 // Add some padding and round up to an integer to be human-friendly.
2644 var span
= maxY
- minY
;
2645 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2646 if (span
=== 0) { span
= maxY
; }
2648 var maxAxisY
, minAxisY
;
2649 if (axis
.logscale
) {
2650 maxAxisY
= maxY
+ 0.1 * span
;
2653 maxAxisY
= maxY
+ 0.1 * span
;
2654 minAxisY
= minY
- 0.1 * span
;
2656 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2657 if (!this.attr_("avoidMinZero")) {
2658 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2659 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2662 if (this.attr_("includeZero")) {
2663 if (maxY
< 0) maxAxisY
= 0;
2664 if (minY
> 0) minAxisY
= 0;
2667 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2669 if (axis
.valueWindow
) {
2670 // This is only set if the user has zoomed on the y-axis. It is never set
2671 // by a user. It takes precedence over axis.valueRange because, if you set
2672 // valueRange, you'd still expect to be able to pan.
2673 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2674 } else if (axis
.valueRange
) {
2675 // This is a user-set value range for this axis.
2676 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2678 axis
.computedValueRange
= axis
.extremeRange
;
2681 // Add ticks. By default, all axes inherit the tick positions of the
2682 // primary axis. However, if an axis is specifically marked as having
2683 // independent ticks, then that is permissible as well.
2684 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2685 var ticker
= opts('ticker');
2686 if (i
=== 0 || axis
.independentTicks
) {
2687 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2688 axis
.computedValueRange
[1],
2689 this.height_
, // TODO(danvk): should be area.height
2693 var p_axis
= this.axes_
[0];
2694 var p_ticks
= p_axis
.ticks
;
2695 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2696 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2697 var tick_values
= [];
2698 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2699 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2700 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2701 tick_values
.push(y_val
);
2704 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2705 axis
.computedValueRange
[1],
2706 this.height_
, // TODO(danvk): should be area.height
2715 * Extracts one series from the raw data (a 2D array) into an array of (date,
2718 * This is where undesirable points (i.e. negative values on log scales and
2719 * missing values through which we wish to connect lines) are dropped.
2720 * TODO(danvk): the "missing values" bit above doesn't seem right.
2724 Dygraph
.prototype.extractSeries_
= function(rawData
, i
, logScale
) {
2725 // TODO(danvk): pre-allocate series here.
2727 for (var j
= 0; j
< rawData
.length
; j
++) {
2728 var x
= rawData
[j
][0];
2729 var point
= rawData
[j
][i
];
2731 // On the log scale, points less than zero do not exist.
2732 // This will create a gap in the chart.
2737 series
.push([x
, point
]);
2744 * Calculates the rolling average of a data set.
2745 * If originalData is [label, val], rolls the average of those.
2746 * If originalData is [label, [, it's interpreted as [value, stddev]
2747 * and the roll is returned in the same form, with appropriately reduced
2748 * stddev for each value.
2749 * Note that this is where fractional input (i.e. '5/10') is converted into
2751 * @param {Array} originalData The data in the appropriate format (see above)
2752 * @param {Number} rollPeriod The number of points over which to average the
2755 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2756 if (originalData
.length
< 2)
2757 return originalData
;
2758 rollPeriod
= Math
.min(rollPeriod
, originalData
.length
);
2759 var rollingData
= [];
2760 var sigma
= this.attr_("sigma");
2762 var low
, high
, i
, j
, y
, sum
, num_ok
, stddev
;
2763 if (this.fractions_
) {
2765 var den
= 0; // numerator/denominator
2767 for (i
= 0; i
< originalData
.length
; i
++) {
2768 num
+= originalData
[i
][1][0];
2769 den
+= originalData
[i
][1][1];
2770 if (i
- rollPeriod
>= 0) {
2771 num
-= originalData
[i
- rollPeriod
][1][0];
2772 den
-= originalData
[i
- rollPeriod
][1][1];
2775 var date
= originalData
[i
][0];
2776 var value
= den
? num
/ den
: 0.0;
2777 if (this.attr_("errorBars")) {
2778 if (this.attr_("wilsonInterval")) {
2779 // For more details on this confidence interval, see:
2780 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2782 var p
= value
< 0 ? 0 : value
, n
= den
;
2783 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2784 var denom
= 1 + sigma
* sigma
/ den
;
2785 low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2786 high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2787 rollingData
[i
] = [date
,
2788 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2790 rollingData
[i
] = [date
, [0, 0, 0]];
2793 stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2794 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2797 rollingData
[i
] = [date
, mult
* value
];
2800 } else if (this.attr_("customBars")) {
2805 for (i
= 0; i
< originalData
.length
; i
++) {
2806 var data
= originalData
[i
][1];
2808 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2810 if (y
!== null && !isNaN(y
)) {
2816 if (i
- rollPeriod
>= 0) {
2817 var prev
= originalData
[i
- rollPeriod
];
2818 if (prev
[1][1] !== null && !isNaN(prev
[1][1])) {
2826 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2827 1.0 * (mid
- low
) / count
,
2828 1.0 * (high
- mid
) / count
]];
2830 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2834 // Calculate the rolling average for the first rollPeriod - 1 points where
2835 // there is not enough data to roll over the full number of points
2836 if (!this.attr_("errorBars")){
2837 if (rollPeriod
== 1) {
2838 return originalData
;
2841 for (i
= 0; i
< originalData
.length
; i
++) {
2844 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2845 y
= originalData
[j
][1];
2846 if (y
=== null || isNaN(y
)) continue;
2848 sum
+= originalData
[j
][1];
2851 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2853 rollingData
[i
] = [originalData
[i
][0], null];
2858 for (i
= 0; i
< originalData
.length
; i
++) {
2862 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2863 y
= originalData
[j
][1][0];
2864 if (y
=== null || isNaN(y
)) continue;
2866 sum
+= originalData
[j
][1][0];
2867 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2870 stddev
= Math
.sqrt(variance
) / num_ok
;
2871 rollingData
[i
] = [originalData
[i
][0],
2872 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2874 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2884 * Detects the type of the str (date or numeric) and sets the various
2885 * formatting attributes in this.attrs_ based on this type.
2886 * @param {String} str An x value.
2889 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2891 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2892 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
2893 str
.indexOf('/') >= 0 ||
2894 isNaN(parseFloat(str
))) {
2896 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2897 // TODO(danvk): remove support for this format.
2902 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2903 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
2904 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
2905 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2907 /** @private (shut up, jsdoc!) */
2908 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2909 // TODO(danvk): use Dygraph.numberValueFormatter here?
2910 /** @private (shut up, jsdoc!) */
2911 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2912 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
2913 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
2918 * Parses the value as a floating point number. This is like the parseFloat()
2919 * built-in, but with a few differences:
2920 * - the empty string is parsed as null, rather than NaN.
2921 * - if the string cannot be parsed at all, an error is logged.
2922 * If the string can't be parsed, this method returns null.
2923 * @param {String} x The string to be parsed
2924 * @param {Number} opt_line_no The line number from which the string comes.
2925 * @param {String} opt_line The text of the line from which the string comes.
2929 // Parse the x as a float or return null if it's not a number.
2930 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
2931 var val
= parseFloat(x
);
2932 if (!isNaN(val
)) return val
;
2934 // Try to figure out what happeend.
2935 // If the value is the empty string, parse it as null.
2936 if (/^ *$/.test(x
)) return null;
2938 // If it was actually "NaN", return it as NaN.
2939 if (/^ *nan *$/i.test(x
)) return NaN
;
2941 // Looks like a parsing error.
2942 var msg
= "Unable to parse '" + x
+ "' as a number";
2943 if (opt_line
!== null && opt_line_no
!== null) {
2944 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
2953 * Parses a string in a special csv format. We expect a csv file where each
2954 * line is a date point, and the first field in each line is the date string.
2955 * We also expect that all remaining fields represent series.
2956 * if the errorBars attribute is set, then interpret the fields as:
2957 * date, series1, stddev1, series2, stddev2, ...
2958 * @param {[Object]} data See above.
2960 * @return [Object] An array with one entry for each row. These entries
2961 * are an array of cells in that row. The first entry is the parsed x-value for
2962 * the row. The second, third, etc. are the y-values. These can take on one of
2963 * three forms, depending on the CSV and constructor parameters:
2965 * 2. [ value, stddev ]
2966 * 3. [ low value, center value, high value ]
2968 Dygraph
.prototype.parseCSV_
= function(data
) {
2970 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
2971 var lines
= data
.split(line_delimiter
|| "\n");
2974 // Use the default delimiter or fall back to a tab if that makes sense.
2975 var delim
= this.attr_('delimiter');
2976 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2981 if (!('labels' in this.user_attrs_
)) {
2982 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2984 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
2985 this.attributes_
.reparseSeries();
2990 var defaultParserSet
= false; // attempt to auto-detect x value type
2991 var expectedCols
= this.attr_("labels").length
;
2992 var outOfOrder
= false;
2993 for (var i
= start
; i
< lines
.length
; i
++) {
2994 var line
= lines
[i
];
2996 if (line
.length
=== 0) continue; // skip blank lines
2997 if (line
[0] == '#') continue; // skip comment lines
2998 var inFields
= line
.split(delim
);
2999 if (inFields
.length
< 2) continue;
3002 if (!defaultParserSet
) {
3003 this.detectTypeFromString_(inFields
[0]);
3004 xParser
= this.attr_("xValueParser");
3005 defaultParserSet
= true;
3007 fields
[0] = xParser(inFields
[0], this);
3009 // If fractions are expected, parse the numbers as "A/B
"
3010 if (this.fractions_) {
3011 for (j = 1; j < inFields.length; j++) {
3012 // TODO(danvk): figure out an appropriate way to flag parse errors.
3013 vals = inFields[j].split("/");
3014 if (vals.length != 2) {
3015 this.error('Expected fractional "num
/den
" values in CSV data ' +
3016 "but found a value
'" + inFields[j] + "' on line
" +
3017 (1 + i) + " ('" + line + "') which is not of
this form
.");
3020 fields[j] = [this.parseFloat_(vals[0], i, line),
3021 this.parseFloat_(vals[1], i, line)];
3024 } else if (this.attr_("errorBars
")) {
3025 // If there are error bars, values are (value, stddev) pairs
3026 if (inFields.length % 2 != 1) {
3027 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3028 'but line ' + (1 + i) + ' has an odd number of values (' +
3029 (inFields.length - 1) + "): '" + line + "'");
3031 for (j = 1; j < inFields.length; j += 2) {
3032 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3033 this.parseFloat_(inFields[j + 1], i, line)];
3035 } else if (this.attr_("customBars
")) {
3036 // Bars are a low;center;high tuple
3037 for (j = 1; j < inFields.length; j++) {
3038 var val = inFields[j];
3039 if (/^ *$/.test(val)) {
3040 fields[j] = [null, null, null];
3042 vals = val.split(";");
3043 if (vals.length == 3) {
3044 fields[j] = [ this.parseFloat_(vals[0], i, line),
3045 this.parseFloat_(vals[1], i, line),
3046 this.parseFloat_(vals[2], i, line) ];
3048 this.warn('When using customBars, values must be either blank ' +
3049 'or "low
;center
;high
" tuples (got "' + val +
3050 '" on line ' + (1+i));
3055 // Values are just numbers
3056 for (j = 1; j < inFields.length; j++) {
3057 fields[j] = this.parseFloat_(inFields[j], i, line);
3060 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3064 if (fields.length != expectedCols) {
3065 this.error("Number of columns
in line
" + i + " (" + fields.length +
3066 ") does not agree
with number of
labels (" + expectedCols +
3070 // If the user specified the 'labels' option and none of the cells of the
3071 // first row parsed correctly, then they probably double-specified the
3072 // labels. We go with the values set in the option, discard this row and
3073 // log a warning to the JS console.
3074 if (i === 0 && this.attr_('labels')) {
3075 var all_null = true;
3076 for (j = 0; all_null && j < fields.length; j++) {
3077 if (fields[j]) all_null = false;
3080 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3081 "CSV
data ('" + line + "') appears to also contain labels
. " +
3082 "Will drop the CSV labels and
use the option labels
.");
3090 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3091 ret.sort(function(a,b) { return a[0] - b[0]; });
3099 * The user has provided their data as a pre-packaged JS array. If the x values
3100 * are numeric, this is the same as dygraphs' internal format. If the x values
3101 * are dates, we need to convert them from Date objects to ms since epoch.
3102 * @param {[Object]} data
3103 * @return {[Object]} data with numeric x values.
3105 Dygraph.prototype.parseArray_ = function(data) {
3106 // Peek at the first x value to see if it's numeric.
3107 if (data.length === 0) {
3108 this.error("Can
't plot empty data set");
3111 if (data[0].length === 0) {
3112 this.error("Data set cannot contain an empty row");
3117 if (this.attr_("labels") === null) {
3118 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3119 "in the options parameter");
3120 this.attrs_.labels = [ "X" ];
3121 for (i = 1; i < data[0].length; i++) {
3122 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
3124 this.attributes_.reparseSeries();
3126 var num_labels = this.attr_("labels");
3127 if (num_labels.length != data[0].length) {
3128 this.error("Mismatch between number of labels (" + num_labels +
3129 ") and number of columns in array (" + data[0].length + ")");
3134 if (Dygraph.isDateLike(data[0][0])) {
3135 // Some intelligent defaults for a date x-axis.
3136 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
3137 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
3138 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3140 // Assume they're all dates
.
3141 var parsedData
= Dygraph
.clone(data
);
3142 for (i
= 0; i
< data
.length
; i
++) {
3143 if (parsedData
[i
].length
=== 0) {
3144 this.error("Row " + (1 + i
) + " of data is empty");
3147 if (parsedData
[i
][0] === null ||
3148 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3149 isNaN(parsedData
[i
][0].getTime())) {
3150 this.error("x value in row " + (1 + i
) + " is not a Date");
3153 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3157 // Some intelligent defaults for a numeric x-axis.
3158 /** @private (shut up, jsdoc!) */
3159 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3160 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3161 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3167 * Parses a DataTable object from gviz.
3168 * The data is expected to have a first column that is either a date or a
3169 * number. All subsequent columns must be numbers. If there is a clear mismatch
3170 * between this.xValueParser_ and the type of the first column, it will be
3171 * fixed. Fills out rawData_.
3172 * @param {[Object]} data See above.
3175 Dygraph
.prototype.parseDataTable_
= function(data
) {
3176 var shortTextForAnnotationNum
= function(num
) {
3177 // converts [0-9]+ [A-Z][a-z]*
3178 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3179 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3180 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3181 num
= Math
.floor(num
/ 26);
3183 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3184 num
= Math
.floor((num
- 1) / 26);
3189 var cols
= data
.getNumberOfColumns();
3190 var rows
= data
.getNumberOfRows();
3192 var indepType
= data
.getColumnType(0);
3193 if (indepType
== 'date' || indepType
== 'datetime') {
3194 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3195 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
3196 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3197 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3198 } else if (indepType
== 'number') {
3199 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3200 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3201 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3202 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3204 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3205 "column 1 of DataTable input (Got '" + indepType
+ "')");
3209 // Array of the column indices which contain data (and not annotations).
3211 var annotationCols
= {}; // data index -> [annotation cols]
3212 var hasAnnotations
= false;
3214 for (i
= 1; i
< cols
; i
++) {
3215 var type
= data
.getColumnType(i
);
3216 if (type
== 'number') {
3218 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3219 // This is OK -- it's an annotation column.
3220 var dataIdx
= colIdx
[colIdx
.length
- 1];
3221 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3222 annotationCols
[dataIdx
] = [i
];
3224 annotationCols
[dataIdx
].push(i
);
3226 hasAnnotations
= true;
3228 this.error("Only 'number' is supported as a dependent type with Gviz." +
3229 " 'string' is only supported if displayAnnotations is true");
3233 // Read column labels
3234 // TODO(danvk): add support back for errorBars
3235 var labels
= [data
.getColumnLabel(0)];
3236 for (i
= 0; i
< colIdx
.length
; i
++) {
3237 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3238 if (this.attr_("errorBars")) i
+= 1;
3240 this.attrs_
.labels
= labels
;
3241 cols
= labels
.length
;
3244 var outOfOrder
= false;
3245 var annotations
= [];
3246 for (i
= 0; i
< rows
; i
++) {
3248 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3249 data
.getValue(i
, 0) === null) {
3250 this.warn("Ignoring row " + i
+
3251 " of DataTable because of undefined or null first column.");
3255 if (indepType
== 'date' || indepType
== 'datetime') {
3256 row
.push(data
.getValue(i
, 0).getTime());
3258 row
.push(data
.getValue(i
, 0));
3260 if (!this.attr_("errorBars")) {
3261 for (j
= 0; j
< colIdx
.length
; j
++) {
3262 var col
= colIdx
[j
];
3263 row
.push(data
.getValue(i
, col
));
3264 if (hasAnnotations
&&
3265 annotationCols
.hasOwnProperty(col
) &&
3266 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3268 ann
.series
= data
.getColumnLabel(col
);
3270 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3272 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3273 if (k
) ann
.text
+= "\n";
3274 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3276 annotations
.push(ann
);
3280 // Strip out infinities, which give dygraphs problems later on.
3281 for (j
= 0; j
< row
.length
; j
++) {
3282 if (!isFinite(row
[j
])) row
[j
] = null;
3285 for (j
= 0; j
< cols
- 1; j
++) {
3286 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3289 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3296 this.warn("DataTable is out of order; order it correctly to speed loading.");
3297 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3299 this.rawData_
= ret
;
3301 if (annotations
.length
> 0) {
3302 this.setAnnotations(annotations
, true);
3307 * Get the CSV data. If it's in a function, call that function. If it's in a
3308 * file, do an XMLHttpRequest to get it.
3311 Dygraph
.prototype.start_
= function() {
3312 var data
= this.file_
;
3314 // Functions can return references of all other types.
3315 if (typeof data
== 'function') {
3319 if (Dygraph
.isArrayLike(data
)) {
3320 this.rawData_
= this.parseArray_(data
);
3322 } else if (typeof data
== 'object' &&
3323 typeof data
.getColumnRange
== 'function') {
3324 // must be a DataTable from gviz.
3325 this.parseDataTable_(data
);
3327 } else if (typeof data
== 'string') {
3328 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3329 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3330 if (line_delimiter
) {
3331 this.loadedEvent_(data
);
3333 var req
= new XMLHttpRequest();
3335 req
.onreadystatechange
= function () {
3336 if (req
.readyState
== 4) {
3337 if (req
.status
=== 200 || // Normal http
3338 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3339 caller
.loadedEvent_(req
.responseText
);
3344 req
.open("GET", data
, true);
3348 this.error("Unknown data format: " + (typeof data
));
3353 * Changes various properties of the graph. These can include:
3355 * <li>file: changes the source data for the graph</li>
3356 * <li>errorBars: changes whether the data contains stddev</li>
3359 * There's a huge variety of options that can be passed to this method. For a
3360 * full list, see http://dygraphs.com/options.html.
3362 * @param {Object} attrs The new properties and values
3363 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3364 * call to updateOptions(). If you know better, you can pass true to explicitly
3365 * block the redraw. This can be useful for chaining updateOptions() calls,
3366 * avoiding the occasional infinite loop and preventing redraws when it's not
3367 * necessary (e.g. when updating a callback).
3369 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3370 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3372 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
3373 var file
= input_attrs
.file
;
3374 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
3376 // TODO(danvk): this is a mess. Move these options into attr_.
3377 if ('rollPeriod' in attrs
) {
3378 this.rollPeriod_
= attrs
.rollPeriod
;
3380 if ('dateWindow' in attrs
) {
3381 this.dateWindow_
= attrs
.dateWindow
;
3382 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3383 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3386 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3387 this.zoomed_y_
= (attrs
.valueRange
!== null);
3390 // TODO(danvk): validate per-series options.
3395 // highlightCircleSize
3397 // Check if this set options will require new points.
3398 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3400 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3404 if (!block_redraw
) this.start_();
3406 if (!block_redraw
) {
3407 if (requiresNewPoints
) {
3410 this.renderGraph_(false);
3417 * Returns a copy of the options with deprecated names converted into current
3418 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3419 * interested in that, they should save a copy before calling this.
3422 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3424 for (var k
in attrs
) {
3425 if (k
== 'file') continue;
3426 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3429 var set
= function(axis
, opt
, value
) {
3430 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3431 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3432 my_attrs
.axes
[axis
][opt
] = value
;
3434 var map
= function(opt
, axis
, new_opt
) {
3435 if (typeof(attrs
[opt
]) != 'undefined') {
3436 set(axis
, new_opt
, attrs
[opt
]);
3437 delete my_attrs
[opt
];
3441 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3442 map('xValueFormatter', 'x', 'valueFormatter');
3443 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3444 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3445 map('xTicker', 'x', 'ticker');
3446 map('yValueFormatter', 'y', 'valueFormatter');
3447 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3448 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3449 map('yTicker', 'y', 'ticker');
3454 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3455 * containing div (which has presumably changed size since the dygraph was
3456 * instantiated. If the width/height are specified, the div will be resized.
3458 * This is far more efficient than destroying and re-instantiating a
3459 * Dygraph, since it doesn't have to reparse the underlying data.
3461 * @param {Number} [width] Width (in pixels)
3462 * @param {Number} [height] Height (in pixels)
3464 Dygraph
.prototype.resize
= function(width
, height
) {
3465 if (this.resize_lock
) {
3468 this.resize_lock
= true;
3470 if ((width
=== null) != (height
=== null)) {
3471 this.warn("Dygraph.resize() should be called with zero parameters or " +
3472 "two non-NULL parameters. Pretending it was zero.");
3473 width
= height
= null;
3476 var old_width
= this.width_
;
3477 var old_height
= this.height_
;
3480 this.maindiv_
.style
.width
= width
+ "px";
3481 this.maindiv_
.style
.height
= height
+ "px";
3482 this.width_
= width
;
3483 this.height_
= height
;
3485 this.width_
= this.maindiv_
.clientWidth
;
3486 this.height_
= this.maindiv_
.clientHeight
;
3489 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3490 // TODO(danvk): there should be a clear() method.
3491 this.maindiv_
.innerHTML
= "";
3492 this.roller_
= null;
3493 this.attrs_
.labelsDiv
= null;
3494 this.createInterface_();
3495 if (this.annotations_
.length
) {
3496 // createInterface_ reset the layout, so we need to do this.
3497 this.layout_
.setAnnotations(this.annotations_
);
3502 this.resize_lock
= false;
3506 * Adjusts the number of points in the rolling average. Updates the graph to
3507 * reflect the new averaging period.
3508 * @param {Number} length Number of points over which to average the data.
3510 Dygraph
.prototype.adjustRoll
= function(length
) {
3511 this.rollPeriod_
= length
;
3516 * Returns a boolean array of visibility statuses.
3518 Dygraph
.prototype.visibility
= function() {
3519 // Do lazy-initialization, so that this happens after we know the number of
3521 if (!this.attr_("visibility")) {
3522 this.attrs_
.visibility
= [];
3524 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3525 while (this.attr_("visibility").length
< this.numColumns() - 1) {
3526 this.attrs_
.visibility
.push(true);
3528 return this.attr_("visibility");
3532 * Changes the visiblity of a series.
3534 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3535 var x
= this.visibility();
3536 if (num
< 0 || num
>= x
.length
) {
3537 this.warn("invalid series number in setVisibility: " + num
);
3545 * How large of an area will the dygraph render itself in?
3546 * This is used for testing.
3547 * @return A {width: w, height: h} object.
3550 Dygraph
.prototype.size
= function() {
3551 return { width
: this.width_
, height
: this.height_
};
3555 * Update the list of annotations and redraw the chart.
3556 * See dygraphs.com/annotations.html for more info on how to use annotations.
3557 * @param ann {Array} An array of annotation objects.
3558 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3560 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3561 // Only add the annotation CSS rule once we know it will be used.
3562 Dygraph
.addAnnotationRule();
3563 this.annotations_
= ann
;
3564 this.layout_
.setAnnotations(this.annotations_
);
3565 if (!suppressDraw
) {
3571 * Return the list of annotations.
3573 Dygraph
.prototype.annotations
= function() {
3574 return this.annotations_
;
3578 * Get the list of label names for this graph. The first column is the
3579 * x-axis, so the data series names start at index 1.
3581 Dygraph
.prototype.getLabels
= function() {
3582 return this.attr_("labels").slice();
3586 * Get the index of a series (column) given its name. The first column is the
3587 * x-axis, so the data series start with index 1.
3589 Dygraph
.prototype.indexFromSetName
= function(name
) {
3590 return this.setIndexByName_
[name
];
3594 * Get the internal dataset index given its name. These are numbered starting from 0,
3595 * and only count visible sets.
3598 Dygraph
.prototype.datasetIndexFromSetName_
= function(name
) {
3599 return this.datasetIndex_
[this.indexFromSetName(name
)];
3604 * Adds a default style for the annotation CSS classes to the document. This is
3605 * only executed when annotations are actually used. It is designed to only be
3606 * called once -- all calls after the first will return immediately.
3608 Dygraph
.addAnnotationRule
= function() {
3609 // TODO(danvk): move this function into plugins/annotations.js
?
3610 if (Dygraph
.addedAnnotationCSS
) return;
3612 var rule
= "border: 1px solid black; " +
3613 "background-color: white; " +
3614 "text-align: center;";
3616 var styleSheetElement
= document
.createElement("style");
3617 styleSheetElement
.type
= "text/css";
3618 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3620 // Find the first style sheet that we can access.
3621 // We may not add a rule to a style sheet from another domain for security
3622 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3623 // adds its own style sheets from google.com.
3624 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3625 if (document
.styleSheets
[i
].disabled
) continue;
3626 var mysheet
= document
.styleSheets
[i
];
3628 if (mysheet
.insertRule
) { // Firefox
3629 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3630 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3631 } else if (mysheet
.addRule
) { // IE
3632 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3634 Dygraph
.addedAnnotationCSS
= true;
3637 // Was likely a security exception.
3641 this.warn("Unable to add default annotation CSS rule; display may be off.");
3644 // Older pages may still use this name.
3645 var DateGraph
= Dygraph
;