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 DygraphLayout:false, DygraphCanvasRenderer:false, DygraphOptions:false, G_vmlCanvasManager:false,ActiveXObject: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 // These have to go above the "Hack for IE" in __init__ since .ready() can be
66 // called as soon as the constructor returns. Once support for OldIE is
67 // dropped, this can go down with the rest of the initializers.
68 this.is_initial_draw_
= true;
71 if (opt_fourth_param
!== undefined
) {
72 // Old versions of dygraphs took in the series labels as a constructor
73 // parameter. This doesn't make sense anymore, but it's easy to continue
74 // to support this usage.
75 console
.warn("Using deprecated four-argument dygraph constructor");
76 this.__old_init__(div
, data
, opts
, opt_fourth_param
);
78 this.__init__(div
, data
, opts
);
82 Dygraph
.NAME
= "Dygraph";
83 Dygraph
.VERSION
= "1.0.1";
84 Dygraph
.__repr__
= function() {
85 return "[" + Dygraph
.NAME
+ " " + Dygraph
.VERSION
+ "]";
89 * Returns information about the Dygraph class.
91 Dygraph
.toString
= function() {
92 return Dygraph
.__repr__();
95 // Various default values
96 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
97 Dygraph
.DEFAULT_WIDTH
= 480;
98 Dygraph
.DEFAULT_HEIGHT
= 320;
100 // For max 60 Hz. animation:
101 Dygraph
.ANIMATION_STEPS
= 12;
102 Dygraph
.ANIMATION_DURATION
= 200;
104 // Label constants for the labelsKMB and labelsKMG2 options.
105 // (i.e. '100000' -> '100K')
106 Dygraph
.KMB_LABELS
= [ 'K', 'M', 'B', 'T', 'Q' ];
107 Dygraph
.KMG2_BIG_LABELS
= [ 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y' ];
108 Dygraph
.KMG2_SMALL_LABELS
= [ 'm', 'u', 'n', 'p', 'f', 'a', 'z', 'y' ];
110 // These are defined before DEFAULT_ATTRS so that it can refer to them.
113 * Return a string version of a number. This respects the digitsAfterDecimal
114 * and maxNumberWidth options.
115 * @param {number} x The number to be formatted
116 * @param {Dygraph} opts An options view
117 * @param {string} name The name of the point's data series
118 * @param {Dygraph} g The dygraph object
120 Dygraph
.numberValueFormatter
= function(x
, opts
, pt
, g
) {
121 var sigFigs
= opts('sigFigs');
123 if (sigFigs
!== null) {
124 // User has opted for a fixed number of significant figures.
125 return Dygraph
.floatFormat(x
, sigFigs
);
128 var digits
= opts('digitsAfterDecimal');
129 var maxNumberWidth
= opts('maxNumberWidth');
131 var kmb
= opts('labelsKMB');
132 var kmg2
= opts('labelsKMG2');
136 // switch to scientific notation if we underflow or overflow fixed display.
138 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
139 Math
.abs(x
) < Math
.pow(10, -digits
))) {
140 label
= x
.toExponential(digits
);
142 label
= '' + Dygraph
.round_(x
, digits
);
151 k_labels
= Dygraph
.KMB_LABELS
;
154 if (kmb
) console
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
156 k_labels
= Dygraph
.KMG2_BIG_LABELS
;
157 m_labels
= Dygraph
.KMG2_SMALL_LABELS
;
160 var absx
= Math
.abs(x
);
161 var n
= Dygraph
.pow(k
, k_labels
.length
);
162 for (var j
= k_labels
.length
- 1; j
>= 0; j
--, n
/= k
) {
164 label
= Dygraph
.round_(x
/ n
, digits
) + k_labels
[j
];
169 // TODO(danvk): clean up this logic. Why so different than kmb?
170 var x_parts
= String(x
.toExponential()).split('e-');
171 if (x_parts
.length
=== 2 && x_parts
[1] >= 3 && x_parts
[1] <= 24) {
172 if (x_parts
[1] % 3 > 0) {
173 label
= Dygraph
.round_(x_parts
[0] /
174 Dygraph
.pow(10, (x_parts
[1] % 3)),
177 label
= Number(x_parts
[0]).toFixed(2);
179 label
+= m_labels
[Math
.floor(x_parts
[1] / 3) - 1];
188 * variant for use as an axisLabelFormatter.
191 Dygraph
.numberAxisLabelFormatter
= function(x
, granularity
, opts
, g
) {
192 return Dygraph
.numberValueFormatter(x
, opts
, g
);
196 * @type {!Array.<string>}
200 Dygraph
.SHORT_MONTH_NAMES_
= ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
204 * Convert a JS date to a string appropriate to display on an axis that
205 * is displaying values at the stated granularity.
206 * @param {Date} date The date to format
207 * @param {number} granularity One of the Dygraph granularity constants
208 * @return {string} The formatted date
211 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
212 if (granularity
>= Dygraph
.DECADAL
) {
213 return '' + date
.getFullYear();
214 } else if (granularity
>= Dygraph
.MONTHLY
) {
215 return Dygraph
.SHORT_MONTH_NAMES_
[date
.getMonth()] + ' ' + date
.getFullYear();
217 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
218 if (frac
=== 0 || granularity
>= Dygraph
.DAILY
) {
219 // e.g. '21Jan' (%d%b)
220 var nd
= new Date(date
.getTime() + 3600*1000);
221 return Dygraph
.zeropad(nd
.getDate()) + Dygraph
.SHORT_MONTH_NAMES_
[nd
.getMonth()];
223 return Dygraph
.hmsString_(date
.getTime());
229 * Standard plotters. These may be used by clients.
230 * Available plotters are:
231 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
232 * - Dygraph.Plotters.errorPlotter: draws error bars
233 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
235 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
236 * This causes all the lines to be drawn over all the fills/error bars.
238 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
241 // Default attribute values.
242 Dygraph
.DEFAULT_ATTRS
= {
243 highlightCircleSize
: 3,
244 highlightSeriesOpts
: null,
245 highlightSeriesBackgroundAlpha
: 0.5,
249 // TODO(danvk): move defaults from createStatusMessage_ here.
251 labelsSeparateLines
: false,
252 labelsShowZeroValues
: true,
255 showLabelsOnHighlight
: true,
257 digitsAfterDecimal
: 2,
262 strokeBorderWidth
: 0,
263 strokeBorderColor
: "white",
266 axisLabelFontSize
: 14,
272 xValueParser
: Dygraph
.dateParser
,
279 wilsonInterval
: true, // only relevant if fractions is true
283 connectSeparatedPoints
: false,
286 stackedGraphNaNFill
: 'all',
287 hideOverlayOnMouseOut
: true,
289 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
290 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
296 drawAxesAtZero
: false,
298 // Sizes of the various chart labels.
305 axisLineColor
: "black",
308 axisLabelColor
: "black",
309 axisLabelFont
: "Arial", // TODO(danvk): is this implemented?
313 gridLineColor
: "rgb(128,128,128)",
315 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
316 animatedZooms
: false, // (for now)
318 // Range selector options
319 showRangeSelector
: false,
320 rangeSelectorHeight
: 40,
321 rangeSelectorPlotStrokeColor
: "#808FAB",
322 rangeSelectorPlotFillColor
: "#A7B1C4",
323 showInRangeSelector
: null,
325 // The ordering here ensures that central lines always appear above any
326 // fill bars/error bars
.
328 Dygraph
.Plotters
.fillPlotter
,
329 Dygraph
.Plotters
.errorPlotter
,
330 Dygraph
.Plotters
.linePlotter
339 axisLabelFormatter
: Dygraph
.dateAxisFormatter
,
340 valueFormatter
: Dygraph
.dateString_
,
343 independentTicks
: true,
344 ticker
: null // will be set in dygraph-tickers.js
348 valueFormatter
: Dygraph
.numberValueFormatter
,
349 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
352 independentTicks
: true,
353 ticker
: null // will be set in dygraph-tickers.js
357 valueFormatter
: Dygraph
.numberValueFormatter
,
358 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
361 independentTicks
: false,
362 ticker
: null // will be set in dygraph-tickers.js
367 // Directions for panning and zooming. Use bit operations when combined
368 // values are possible.
369 Dygraph
.HORIZONTAL
= 1;
370 Dygraph
.VERTICAL
= 2;
372 // Installed plugins, in order of precedence (most-general to most-specific).
373 // Plugins are installed after they are defined, in plugins/install.js
.
377 // Used for initializing annotation CSS rules only once.
378 Dygraph
.addedAnnotationCSS
= false;
380 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
381 // Labels is no longer a constructor parameter, since it's typically set
382 // directly from the data source. It also conains a name for the x-axis,
383 // which the previous constructor form did not.
384 if (labels
!== null) {
385 var new_labels
= ["Date"];
386 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
387 Dygraph
.update(attrs
, { 'labels': new_labels
});
389 this.__init__(div
, file
, attrs
);
393 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
394 * and context <canvas> inside of it. See the constructor for details.
396 * @param {Element} div the Element to render the graph into.
397 * @param {string | Function} file Source data
398 * @param {Object} attrs Miscellaneous other options
401 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
402 // Hack for IE: if we're using excanvas and the document hasn't finished
403 // loading yet (and hence may not have initialized whatever it needs to
404 // initialize), then keep calling this routine periodically until it has.
405 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
406 typeof(G_vmlCanvasManager
) != 'undefined' &&
407 document
.readyState
!= 'complete') {
409 setTimeout(function() { self
.__init__(div
, file
, attrs
); }, 100);
413 // Support two-argument constructor
414 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
416 attrs
= Dygraph
.mapLegacyOptions_(attrs
);
418 if (typeof(div
) == 'string') {
419 div
= document
.getElementById(div
);
423 console
.error("Constructing dygraph with a non-existent div!");
427 this.isUsingExcanvas_
= typeof(G_vmlCanvasManager
) != 'undefined';
429 // Copy the important bits into the object
430 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
433 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
434 this.previousVerticalX_
= -1;
435 this.fractions_
= attrs
.fractions
|| false;
436 this.dateWindow_
= attrs
.dateWindow
|| null;
438 this.annotations_
= [];
440 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
441 this.zoomed_x_
= false;
442 this.zoomed_y_
= false;
444 // Clear the div. This ensure that, if multiple dygraphs are passed the same
445 // div, then only one will be drawn.
448 // For historical reasons, the 'width' and 'height' options trump all CSS
449 // rules _except_ for an explicit 'width' or 'height' on the div.
450 // As an added convenience, if the div has zero height (like <div></div> does
451 // without any styles), then we use a default height/width
.
452 if (div
.style
.width
=== '' && attrs
.width
) {
453 div
.style
.width
= attrs
.width
+ "px";
455 if (div
.style
.height
=== '' && attrs
.height
) {
456 div
.style
.height
= attrs
.height
+ "px";
458 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
459 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
460 if (div
.style
.width
=== '') {
461 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
464 // These will be zero if the dygraph's div is hidden. In that case,
465 // use the user-specified attributes if present. If not, use zero
466 // and assume the user will call resize to fix things later.
467 this.width_
= div
.clientWidth
|| attrs
.width
|| 0;
468 this.height_
= div
.clientHeight
|| attrs
.height
|| 0;
470 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
471 if (attrs
.stackedGraph
) {
472 attrs
.fillGraph
= true;
473 // TODO(nikhilk): Add any other stackedGraph checks here.
476 // DEPRECATION WARNING: All option processing should be moved from
477 // attrs_ and user_attrs_ to options_, which holds all this information.
479 // Dygraphs has many options, some of which interact with one another.
480 // To keep track of everything, we maintain two sets of options:
482 // this.user_attrs_ only options explicitly set by the user.
483 // this.attrs_ defaults, options derived from user_attrs_, data.
485 // Options are then accessed this.attr_('attr'), which first looks at
486 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
487 // defaults without overriding behavior that the user specifically asks for.
488 this.user_attrs_
= {};
489 Dygraph
.update(this.user_attrs_
, attrs
);
491 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
493 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
495 this.boundaryIds_
= [];
496 this.setIndexByName_
= {};
497 this.datasetIndex_
= [];
499 this.registeredEvents_
= [];
500 this.eventListeners_
= {};
502 this.attributes_
= new DygraphOptions(this);
504 // Create the containing DIV and other interactive elements
505 this.createInterface_();
509 var plugins
= Dygraph
.PLUGINS
.concat(this.getOption('plugins'));
510 for (var i
= 0; i
< plugins
.length
; i
++) {
511 var Plugin
= plugins
[i
];
512 var pluginInstance
= new Plugin();
514 plugin
: pluginInstance
,
520 var handlers
= pluginInstance
.activate(this);
521 for (var eventName
in handlers
) {
522 // TODO(danvk): validate eventName.
523 pluginDict
.events
[eventName
] = handlers
[eventName
];
526 this.plugins_
.push(pluginDict
);
529 // At this point, plugins can no longer register event handlers.
530 // Construct a map from event -> ordered list of [callback, plugin].
531 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
532 var plugin_dict
= this.plugins_
[i
];
533 for (var eventName
in plugin_dict
.events
) {
534 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
535 var callback
= plugin_dict
.events
[eventName
];
537 var pair
= [plugin_dict
.plugin
, callback
];
538 if (!(eventName
in this.eventListeners_
)) {
539 this.eventListeners_
[eventName
] = [pair
];
541 this.eventListeners_
[eventName
].push(pair
);
546 this.createDragInterface_();
552 * Triggers a cascade of events to the various plugins which are interested in them.
553 * Returns true if the "default behavior" should be performed, i.e. if none of
554 * the event listeners called event.preventDefault().
557 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
558 if (!(name
in this.eventListeners_
)) return true;
560 // QUESTION: can we use objects & prototypes to speed this up?
564 defaultPrevented
: false,
565 preventDefault
: function() {
566 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
567 e
.defaultPrevented
= true;
569 propagationStopped
: false,
570 stopPropagation
: function() {
571 e
.propagationStopped
= true;
574 Dygraph
.update(e
, extra_props
);
576 var callback_plugin_pairs
= this.eventListeners_
[name
];
577 if (callback_plugin_pairs
) {
578 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
579 var plugin
= callback_plugin_pairs
[i
][0];
580 var callback
= callback_plugin_pairs
[i
][1];
581 callback
.call(plugin
, e
);
582 if (e
.propagationStopped
) break;
585 return e
.defaultPrevented
;
589 * Fetch a plugin instance of a particular class. Only for testing.
591 * @param {!Class} type The type of the plugin.
592 * @return {Object} Instance of the plugin, or null if there is none.
594 Dygraph
.prototype.getPluginInstance_
= function(type
) {
595 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
596 var p
= this.plugins_
[i
];
597 if (p
.plugin
instanceof type
) {
605 * Returns the zoomed status of the chart for one or both axes.
607 * Axis is an optional parameter. Can be set to 'x' or 'y'.
609 * The zoomed status for an axis is set whenever a user zooms using the mouse
610 * or when the dateWindow or valueRange are updated (unless the
611 * isZoomedIgnoreProgrammaticZoom option is also specified).
613 Dygraph
.prototype.isZoomed
= function(axis
) {
614 if (axis
=== null || axis
=== undefined
) {
615 return this.zoomed_x_
|| this.zoomed_y_
;
617 if (axis
=== 'x') return this.zoomed_x_
;
618 if (axis
=== 'y') return this.zoomed_y_
;
619 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
623 * Returns information about the Dygraph object, including its containing ID.
625 Dygraph
.prototype.toString
= function() {
626 var maindiv
= this.maindiv_
;
627 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
628 return "[Dygraph " + id
+ "]";
633 * Returns the value of an option. This may be set by the user (either in the
634 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
636 * @param {string} name The name of the option, e.g. 'rollPeriod'.
637 * @param {string} [seriesName] The name of the series to which the option
638 * will be applied. If no per-series value of this option is available, then
639 * the global value is returned. This is optional.
640 * @return { ... } The value of the option.
642 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
643 // <REMOVE_FOR_COMBINED>
644 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
645 console
.error('Must include options reference JS for testing');
646 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
647 console
.error('Dygraphs is using property ' + name
+ ', which has no ' +
648 'entry in the Dygraphs.OPTIONS_REFERENCE listing.');
649 // Only log this error once.
650 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
652 // </REMOVE_FOR_COMBINED
>
653 return seriesName
? this.attributes_
.getForSeries(name
, seriesName
) : this.attributes_
.get(name
);
657 * Returns the current value for an option, as set in the constructor or via
658 * updateOptions. You may pass in an (optional) series name to get per-series
659 * values for the option.
661 * All values returned by this method should be considered immutable. If you
662 * modify them, there is no guarantee that the changes will be honored or that
663 * dygraphs will remain in a consistent state. If you want to modify an option,
664 * use updateOptions() instead.
666 * @param {string} name The name of the option (e.g. 'strokeWidth')
667 * @param {string=} opt_seriesName Series name to get per-series values.
668 * @return {*} The value of the option.
670 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
671 return this.attr_(name
, opt_seriesName
);
675 * Like getOption(), but specifically returns a number.
676 * This is a convenience function for working with the Closure Compiler.
677 * @param {string} name The name of the option (e.g. 'strokeWidth')
678 * @param {string=} opt_seriesName Series name to get per-series values.
679 * @return {number} The value of the option.
682 Dygraph
.prototype.getNumericOption
= function(name
, opt_seriesName
) {
683 return /** @type{number} */(this.getOption(name
, opt_seriesName
));
687 * Like getOption(), but specifically returns a string.
688 * This is a convenience function for working with the Closure Compiler.
689 * @param {string} name The name of the option (e.g. 'strokeWidth')
690 * @param {string=} opt_seriesName Series name to get per-series values.
691 * @return {string} The value of the option.
694 Dygraph
.prototype.getStringOption
= function(name
, opt_seriesName
) {
695 return /** @type{string} */(this.getOption(name
, opt_seriesName
));
699 * Like getOption(), but specifically returns a boolean.
700 * This is a convenience function for working with the Closure Compiler.
701 * @param {string} name The name of the option (e.g. 'strokeWidth')
702 * @param {string=} opt_seriesName Series name to get per-series values.
703 * @return {boolean} The value of the option.
706 Dygraph
.prototype.getBooleanOption
= function(name
, opt_seriesName
) {
707 return /** @type{boolean} */(this.getOption(name
, opt_seriesName
));
711 * Like getOption(), but specifically returns a function.
712 * This is a convenience function for working with the Closure Compiler.
713 * @param {string} name The name of the option (e.g. 'strokeWidth')
714 * @param {string=} opt_seriesName Series name to get per-series values.
715 * @return {function(...)} The value of the option.
718 Dygraph
.prototype.getFunctionOption
= function(name
, opt_seriesName
) {
719 return /** @type{function(...)} */(this.getOption(name
, opt_seriesName
));
722 Dygraph
.prototype.getOptionForAxis
= function(name
, axis
) {
723 return this.attributes_
.getForAxis(name
, axis
);
728 * @param {string} axis The name of the axis (i.e. 'x', 'y' or 'y2')
729 * @return { ... } A function mapping string -> option value
731 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
733 return function(opt
) {
734 var axis_opts
= self
.user_attrs_
.axes
;
735 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
736 return axis_opts
[axis
][opt
];
739 // I don't like that this is in a second spot.
740 if (axis
=== 'x' && opt
=== 'logscale') {
741 // return the default value.
742 // TODO(konigsberg): pull the default from a global default.
746 // user-specified attributes always trump defaults, even if they're less
748 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
749 return self
.user_attrs_
[opt
];
752 axis_opts
= self
.attrs_
.axes
;
753 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
754 return axis_opts
[axis
][opt
];
756 // check old-style axis options
757 // TODO(danvk): add a deprecation warning if either of these match.
758 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
759 return self
.axes_
[0][opt
];
760 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
761 return self
.axes_
[1][opt
];
763 return self
.attr_(opt
);
768 * Returns the current rolling period, as set by the user or an option.
769 * @return {number} The number of points in the rolling window
771 Dygraph
.prototype.rollPeriod
= function() {
772 return this.rollPeriod_
;
776 * Returns the currently-visible x-range. This can be affected by zooming,
777 * panning or a call to updateOptions.
778 * Returns a two-element array: [left, right].
779 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
781 Dygraph
.prototype.xAxisRange
= function() {
782 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
786 * Returns the lower- and upper-bound x-axis values of the
789 Dygraph
.prototype.xAxisExtremes
= function() {
790 var pad
= this.getNumericOption('xRangePad') / this.plotter_
.area
.w
;
791 if (this.numRows() === 0) {
792 return [0 - pad
, 1 + pad
];
794 var left
= this.rawData_
[0][0];
795 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
797 // Must keep this in sync with dygraph-layout _evaluateLimits()
798 var range
= right
- left
;
800 right
+= range
* pad
;
802 return [left
, right
];
806 * Returns the currently-visible y-range for an axis. This can be affected by
807 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
808 * called with no arguments, returns the range of the first axis.
809 * Returns a two-element array: [bottom, top].
811 Dygraph
.prototype.yAxisRange
= function(idx
) {
812 if (typeof(idx
) == "undefined") idx
= 0;
813 if (idx
< 0 || idx
>= this.axes_
.length
) {
816 var axis
= this.axes_
[idx
];
817 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
821 * Returns the currently-visible y-ranges for each axis. This can be affected by
822 * zooming, panning, calls to updateOptions, etc.
823 * Returns an array of [bottom, top] pairs, one for each y-axis.
825 Dygraph
.prototype.yAxisRanges
= function() {
827 for (var i
= 0; i
< this.axes_
.length
; i
++) {
828 ret
.push(this.yAxisRange(i
));
833 // TODO(danvk): use these functions throughout dygraphs.
835 * Convert from data coordinates to canvas/div X/Y coordinates.
836 * If specified, do this conversion for the coordinate system of a particular
837 * axis. Uses the first axis by default.
838 * Returns a two-element array: [X, Y]
840 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
841 * instead of toDomCoords(null, y, axis).
843 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
844 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
848 * Convert from data x coordinates to canvas/div X coordinate.
849 * If specified, do this conversion for the coordinate system of a particular
851 * Returns a single value or null if x is null.
853 Dygraph
.prototype.toDomXCoord
= function(x
) {
858 var area
= this.plotter_
.area
;
859 var xRange
= this.xAxisRange();
860 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
864 * Convert from data x coordinates to canvas/div Y coordinate and optional
865 * axis. Uses the first axis by default.
867 * returns a single value or null if y is null.
869 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
870 var pct
= this.toPercentYCoord(y
, axis
);
875 var area
= this.plotter_
.area
;
876 return area
.y
+ pct
* area
.h
;
880 * Convert from canvas/div coords to data coordinates.
881 * If specified, do this conversion for the coordinate system of a particular
882 * axis. Uses the first axis by default.
883 * Returns a two-element array: [X, Y].
885 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
886 * instead of toDataCoords(null, y, axis).
888 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
889 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
893 * Convert from canvas/div x coordinate to data coordinate.
895 * If x is null, this returns null.
897 Dygraph
.prototype.toDataXCoord
= function(x
) {
902 var area
= this.plotter_
.area
;
903 var xRange
= this.xAxisRange();
905 if (!this.attributes_
.getForAxis("logscale", 'x')) {
906 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
908 // TODO: remove duplicate code?
909 // Computing the inverse of toDomCoord.
910 var pct
= (x
- area
.x
) / area
.w
;
912 // Computing the inverse of toPercentXCoord. The function was arrived at with
913 // the following steps:
915 // Original calcuation:
916 // pct = (log(x) - log(xRange[0])) / (log(xRange
[1]) - log(xRange
[0])));
918 // Multiply both sides by the right-side demoninator.
919 // pct * (log(xRange[1] - log(xRange[0]))) = log(x) - log(xRange[0])
921 // add log(xRange[0]) to both sides
922 // log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])) = log(x);
924 // Swap both sides of the equation,
925 // log(x) = log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0]))
927 // Use both sides as the exponent in 10^exp and we're done.
928 // x = 10 ^ (log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])))
929 var logr0
= Dygraph
.log10(xRange
[0]);
930 var logr1
= Dygraph
.log10(xRange
[1]);
931 var exponent
= logr0
+ (pct
* (logr1
- logr0
));
932 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
938 * Convert from canvas/div y coord to value.
940 * If y is null, this returns null.
941 * if axis is null, this uses the first axis.
943 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
948 var area
= this.plotter_
.area
;
949 var yRange
= this.yAxisRange(axis
);
951 if (typeof(axis
) == "undefined") axis
= 0;
952 if (!this.attributes_
.getForAxis("logscale", axis
)) {
953 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
955 // Computing the inverse of toDomCoord.
956 var pct
= (y
- area
.y
) / area
.h
;
958 // Computing the inverse of toPercentYCoord. The function was arrived at with
959 // the following steps:
961 // Original calcuation:
962 // pct = (log(yRange[1]) - log(y)) / (log(yRange
[1]) - log(yRange
[0]));
964 // Multiply both sides by the right-side demoninator.
965 // pct * (log(yRange[1]) - log(yRange[0])) = log(yRange[1]) - log(y);
967 // subtract log(yRange[1]) from both sides.
968 // (pct * (log(yRange[1]) - log(yRange[0]))) - log(yRange[1]) = -log(y);
970 // and multiply both sides by -1.
971 // log(yRange[1]) - (pct * (logr1 - log(yRange[0])) = log(y);
973 // Swap both sides of the equation,
974 // log(y) = log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0])));
976 // Use both sides as the exponent in 10^exp and we're done.
977 // y = 10 ^ (log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0]))));
978 var logr0
= Dygraph
.log10(yRange
[0]);
979 var logr1
= Dygraph
.log10(yRange
[1]);
980 var exponent
= logr1
- (pct
* (logr1
- logr0
));
981 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
987 * Converts a y for an axis to a percentage from the top to the
988 * bottom of the drawing area.
990 * If the coordinate represents a value visible on the canvas, then
991 * the value will be between 0 and 1, where 0 is the top of the canvas.
992 * However, this method will return values outside the range, as
993 * values can fall outside the canvas.
995 * If y is null, this returns null.
996 * if axis is null, this uses the first axis.
998 * @param {number} y The data y-coordinate.
999 * @param {number} [axis] The axis number on which the data coordinate lives.
1000 * @return {number} A fraction in [0, 1] where 0 = the top edge.
1002 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
1006 if (typeof(axis
) == "undefined") axis
= 0;
1008 var yRange
= this.yAxisRange(axis
);
1011 var logscale
= this.attributes_
.getForAxis("logscale", axis
);
1013 var logr0
= Dygraph
.log10(yRange
[0]);
1014 var logr1
= Dygraph
.log10(yRange
[1]);
1015 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- logr0
);
1017 // yRange[1] - y is unit distance from the bottom.
1018 // yRange[1] - yRange[0] is the scale of the range.
1019 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
1020 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
1026 * Converts an x value to a percentage from the left to the right of
1029 * If the coordinate represents a value visible on the canvas, then
1030 * the value will be between 0 and 1, where 0 is the left of the canvas.
1031 * However, this method will return values outside the range, as
1032 * values can fall outside the canvas.
1034 * If x is null, this returns null.
1035 * @param {number} x The data x-coordinate.
1036 * @return {number} A fraction in [0, 1] where 0 = the left edge.
1038 Dygraph
.prototype.toPercentXCoord
= function(x
) {
1043 var xRange
= this.xAxisRange();
1045 var logscale
= this.attributes_
.getForAxis("logscale", 'x') ;
1046 if (logscale
== true) { // logscale can be null so we test for true explicitly.
1047 var logr0
= Dygraph
.log10(xRange
[0]);
1048 var logr1
= Dygraph
.log10(xRange
[1]);
1049 pct
= (Dygraph
.log10(x
) - logr0
) / (logr1
- logr0
);
1051 // x - xRange[0] is unit distance from the left.
1052 // xRange[1] - xRange[0] is the scale of the range.
1053 // The full expression below is the % from the left.
1054 pct
= (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
1060 * Returns the number of columns (including the independent variable).
1061 * @return {number} The number of columns.
1063 Dygraph
.prototype.numColumns
= function() {
1064 if (!this.rawData_
) return 0;
1065 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
1069 * Returns the number of rows (excluding any header/label row).
1070 * @return {number} The number of rows, less any header.
1072 Dygraph
.prototype.numRows
= function() {
1073 if (!this.rawData_
) return 0;
1074 return this.rawData_
.length
;
1078 * Returns the value in the given row and column. If the row and column exceed
1079 * the bounds on the data, returns null. Also returns null if the value is
1081 * @param {number} row The row number of the data (0-based). Row 0 is the
1082 * first row of data, not a header row.
1083 * @param {number} col The column number of the data (0-based)
1084 * @return {number} The value in the specified cell or null if the row/col
1085 * were out of range.
1087 Dygraph
.prototype.getValue
= function(row
, col
) {
1088 if (row
< 0 || row
> this.rawData_
.length
) return null;
1089 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
1091 return this.rawData_
[row
][col
];
1095 * Generates interface elements for the Dygraph: a containing div, a div to
1096 * display the current point, and a textbox to adjust the rolling average
1097 * period. Also creates the Renderer/Layout elements.
1100 Dygraph
.prototype.createInterface_
= function() {
1101 // Create the all-enclosing graph div
1102 var enclosing
= this.maindiv_
;
1104 this.graphDiv
= document
.createElement("div");
1106 // TODO(danvk): any other styles that are useful to set here?
1107 this.graphDiv
.style
.textAlign
= 'left'; // This is a CSS "reset"
1108 this.graphDiv
.style
.position
= 'relative';
1109 enclosing
.appendChild(this.graphDiv
);
1111 // Create the canvas for interactive parts of the chart.
1112 this.canvas_
= Dygraph
.createCanvas();
1113 this.canvas_
.style
.position
= "absolute";
1115 // ... and for static parts of the chart.
1116 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
1118 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
1119 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
1121 this.resizeElements_();
1123 // The interactive parts of the graph are drawn on top of the chart.
1124 this.graphDiv
.appendChild(this.hidden_
);
1125 this.graphDiv
.appendChild(this.canvas_
);
1126 this.mouseEventElement_
= this.createMouseEventElement_();
1128 // Create the grapher
1129 this.layout_
= new DygraphLayout(this);
1133 this.mouseMoveHandler_
= function(e
) {
1134 dygraph
.mouseMove_(e
);
1137 this.mouseOutHandler_
= function(e
) {
1138 // The mouse has left the chart if:
1139 // 1. e.target is inside the chart
1140 // 2. e.relatedTarget is outside the chart
1141 var target
= e
.target
|| e
.fromElement
;
1142 var relatedTarget
= e
.relatedTarget
|| e
.toElement
;
1143 if (Dygraph
.isNodeContainedBy(target
, dygraph
.graphDiv
) &&
1144 !Dygraph
.isNodeContainedBy(relatedTarget
, dygraph
.graphDiv
)) {
1145 dygraph
.mouseOut_(e
);
1149 this.addAndTrackEvent(window
, 'mouseout', this.mouseOutHandler_
);
1150 this.addAndTrackEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1152 // Don't recreate and register the resize handler on subsequent calls.
1153 // This happens when the graph is resized.
1154 if (!this.resizeHandler_
) {
1155 this.resizeHandler_
= function(e
) {
1159 // Update when the window is resized.
1160 // TODO(danvk): drop frames depending on complexity of the chart.
1161 this.addAndTrackEvent(window
, 'resize', this.resizeHandler_
);
1165 Dygraph
.prototype.resizeElements_
= function() {
1166 this.graphDiv
.style
.width
= this.width_
+ "px";
1167 this.graphDiv
.style
.height
= this.height_
+ "px";
1169 var canvasScale
= Dygraph
.getContextPixelRatio(this.canvas_ctx_
);
1170 this.canvas_
.width
= this.width_
* canvasScale
;
1171 this.canvas_
.height
= this.height_
* canvasScale
;
1172 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
1173 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
1174 if (canvasScale
!== 1) {
1175 this.canvas_ctx_
.scale(canvasScale
, canvasScale
);
1178 var hiddenScale
= Dygraph
.getContextPixelRatio(this.hidden_ctx_
);
1179 this.hidden_
.width
= this.width_
* hiddenScale
;
1180 this.hidden_
.height
= this.height_
* hiddenScale
;
1181 this.hidden_
.style
.width
= this.width_
+ "px"; // for IE
1182 this.hidden_
.style
.height
= this.height_
+ "px"; // for IE
1183 if (hiddenScale
!== 1) {
1184 this.hidden_ctx_
.scale(hiddenScale
, hiddenScale
);
1189 * Detach DOM elements in the dygraph and null out all data references.
1190 * Calling this when you're done with a dygraph can dramatically reduce memory
1191 * usage. See, e.g., the tests/perf.html example.
1193 Dygraph
.prototype.destroy
= function() {
1194 this.canvas_ctx_
.restore();
1195 this.hidden_ctx_
.restore();
1197 var removeRecursive
= function(node
) {
1198 while (node
.hasChildNodes()) {
1199 removeRecursive(node
.firstChild
);
1200 node
.removeChild(node
.firstChild
);
1204 this.removeTrackedEvents_();
1206 // remove mouse event handlers (This may not be necessary anymore)
1207 Dygraph
.removeEvent(window
, 'mouseout', this.mouseOutHandler_
);
1208 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1210 // remove window handlers
1211 Dygraph
.removeEvent(window
,'resize',this.resizeHandler_
);
1212 this.resizeHandler_
= null;
1214 removeRecursive(this.maindiv_
);
1216 var nullOut
= function(obj
) {
1217 for (var n
in obj
) {
1218 if (typeof(obj
[n
]) === 'object') {
1223 // These may not all be necessary, but it can't hurt...
1224 nullOut(this.layout_
);
1225 nullOut(this.plotter_
);
1230 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1231 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1232 * or the zoom rectangles) is done on this.canvas_.
1233 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1234 * @return {Object} The newly-created canvas
1237 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1238 var h
= Dygraph
.createCanvas();
1239 h
.style
.position
= "absolute";
1240 // TODO(danvk): h should be offset from canvas. canvas needs to include
1241 // some extra area to make it easier to zoom in on the far left and far
1242 // right. h needs to be precisely the plot area, so that clipping occurs.
1243 h
.style
.top
= canvas
.style
.top
;
1244 h
.style
.left
= canvas
.style
.left
;
1245 h
.width
= this.width_
;
1246 h
.height
= this.height_
;
1247 h
.style
.width
= this.width_
+ "px"; // for IE
1248 h
.style
.height
= this.height_
+ "px"; // for IE
1253 * Creates an overlay element used to handle mouse events.
1254 * @return {Object} The mouse event element.
1257 Dygraph
.prototype.createMouseEventElement_
= function() {
1258 if (this.isUsingExcanvas_
) {
1259 var elem
= document
.createElement("div");
1260 elem
.style
.position
= 'absolute';
1261 elem
.style
.backgroundColor
= 'white';
1262 elem
.style
.filter
= 'alpha(opacity=0)';
1263 elem
.style
.width
= this.width_
+ "px";
1264 elem
.style
.height
= this.height_
+ "px";
1265 this.graphDiv
.appendChild(elem
);
1268 return this.canvas_
;
1273 * Generate a set of distinct colors for the data series. This is done with a
1274 * color wheel. Saturation/Value are customizable, and the hue is
1275 * equally-spaced around the color wheel. If a custom set of colors is
1276 * specified, that is used instead.
1279 Dygraph
.prototype.setColors_
= function() {
1280 var labels
= this.getLabels();
1281 var num
= labels
.length
- 1;
1283 this.colorsMap_
= {};
1285 // These are used for when no custom colors are specified.
1286 var sat
= this.getNumericOption('colorSaturation') || 1.0;
1287 var val
= this.getNumericOption('colorValue') || 0.5;
1288 var half
= Math
.ceil(num
/ 2);
1290 var colors
= this.getOption('colors');
1291 var visibility
= this.visibility();
1292 for (var i
= 0; i
< num
; i
++) {
1293 if (!visibility
[i
]) {
1296 var label
= labels
[i
+ 1];
1297 var colorStr
= this.attributes_
.getForSeries('color', label
);
1300 colorStr
= colors
[i
% colors
.length
];
1302 // alternate colors for high contrast.
1303 var idx
= i
% 2 ? (half
+ (i
+ 1)/ 2) : Math.ceil((i + 1) / 2);
1304 var hue
= (1.0 * idx
/ (1 + num
));
1305 colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1308 this.colors_
.push(colorStr
);
1309 this.colorsMap_
[label
] = colorStr
;
1314 * Return the list of colors. This is either the list of colors passed in the
1315 * attributes or the autogenerated list of rgb(r,g,b) strings.
1316 * This does not return colors for invisible series.
1317 * @return {Array.<string>} The list of colors.
1319 Dygraph
.prototype.getColors
= function() {
1320 return this.colors_
;
1324 * Returns a few attributes of a series, i.e. its color, its visibility, which
1325 * axis it's assigned to, and its column in the original data.
1326 * Returns null if the series does not exist.
1327 * Otherwise, returns an object with column, visibility, color and axis properties.
1328 * The "axis" property will be set to 1 for y1 and 2 for y2.
1329 * The "column" property can be fed back into getValue(row, column) to get
1330 * values for this series.
1332 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1334 var labels
= this.getLabels();
1335 for (var i
= 1; i
< labels
.length
; i
++) {
1336 if (labels
[i
] == series_name
) {
1341 if (idx
== -1) return null;
1346 visible
: this.visibility()[idx
- 1],
1347 color
: this.colorsMap_
[series_name
],
1348 axis
: 1 + this.attributes_
.axisForSeries(series_name
)
1353 * Create the text box to adjust the averaging period
1356 Dygraph
.prototype.createRollInterface_
= function() {
1357 // Create a roller if one doesn't exist already.
1358 if (!this.roller_
) {
1359 this.roller_
= document
.createElement("input");
1360 this.roller_
.type
= "text";
1361 this.roller_
.style
.display
= "none";
1362 this.graphDiv
.appendChild(this.roller_
);
1365 var display
= this.getBooleanOption('showRoller') ? 'block' : 'none';
1367 var area
= this.plotter_
.area
;
1368 var textAttr
= { "position": "absolute",
1370 "top": (area
.y
+ area
.h
- 25) + "px",
1371 "left": (area
.x
+ 1) + "px",
1374 this.roller_
.size
= "2";
1375 this.roller_
.value
= this.rollPeriod_
;
1376 for (var name
in textAttr
) {
1377 if (textAttr
.hasOwnProperty(name
)) {
1378 this.roller_
.style
[name
] = textAttr
[name
];
1383 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1387 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1391 Dygraph
.prototype.createDragInterface_
= function() {
1393 // Tracks whether the mouse is down right now
1395 isPanning
: false, // is this drag part of a pan?
1396 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1397 dragStartX
: null, // pixel coordinates
1398 dragStartY
: null, // pixel coordinates
1399 dragEndX
: null, // pixel coordinates
1400 dragEndY
: null, // pixel coordinates
1401 dragDirection
: null,
1402 prevEndX
: null, // pixel coordinates
1403 prevEndY
: null, // pixel coordinates
1404 prevDragDirection
: null,
1405 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1407 // The value on the left side of the graph when a pan operation starts.
1408 initialLeftmostDate
: null,
1410 // The number of units each pixel spans. (This won't be valid for log
1412 xUnitsPerPixel
: null,
1414 // TODO(danvk): update this comment
1415 // The range in second/value units that the viewport encompasses during a
1416 // panning operation.
1419 // Top-left corner of the canvas, in DOM coords
1420 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1424 // Values for use with panEdgeFraction, which limit how far outside the
1425 // graph's data boundaries it can be panned.
1426 boundedDates
: null, // [minDate, maxDate]
1427 boundedValues
: null, // [[minValue, maxValue] ...]
1429 // We cover iframes during mouse interactions. See comments in
1430 // dygraph-utils.js for more info on why this is a good idea.
1431 tarp
: new Dygraph
.IFrameTarp(),
1433 // contextB is the same thing as this context object but renamed.
1434 initializeMouseDown
: function(event
, g
, contextB
) {
1435 // prevents mouse drags from selecting page text.
1436 if (event
.preventDefault
) {
1437 event
.preventDefault(); // Firefox, Chrome, etc.
1439 event
.returnValue
= false; // IE
1440 event
.cancelBubble
= true;
1443 var canvasPos
= Dygraph
.findPos(g
.canvas_
);
1444 contextB
.px
= canvasPos
.x
;
1445 contextB
.py
= canvasPos
.y
;
1446 contextB
.dragStartX
= Dygraph
.dragGetX_(event
, contextB
);
1447 contextB
.dragStartY
= Dygraph
.dragGetY_(event
, contextB
);
1448 contextB
.cancelNextDblclick
= false;
1449 contextB
.tarp
.cover();
1453 var interactionModel
= this.getOption("interactionModel");
1455 // Self is the graph.
1458 // Function that binds the graph and context to the handler.
1459 var bindHandler
= function(handler
) {
1460 return function(event
) {
1461 handler(event
, self
, context
);
1465 for (var eventName
in interactionModel
) {
1466 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1467 this.addAndTrackEvent(this.mouseEventElement_
, eventName
,
1468 bindHandler(interactionModel
[eventName
]));
1471 // If the user releases the mouse button during a drag, but not over the
1472 // canvas, then it doesn't count as a zooming action.
1473 var mouseUpHandler
= function(event
) {
1474 if (context
.isZooming
|| context
.isPanning
) {
1475 context
.isZooming
= false;
1476 context
.dragStartX
= null;
1477 context
.dragStartY
= null;
1480 if (context
.isPanning
) {
1481 context
.isPanning
= false;
1482 context
.draggingDate
= null;
1483 context
.dateRange
= null;
1484 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1485 delete self
.axes_
[i
].draggingValue
;
1486 delete self
.axes_
[i
].dragValueRange
;
1490 context
.tarp
.uncover();
1493 this.addAndTrackEvent(document
, 'mouseup', mouseUpHandler
);
1497 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1498 * up any previous zoom rectangles that were drawn. This could be optimized to
1499 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1502 * @param {number} direction the direction of the zoom rectangle. Acceptable
1503 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1504 * @param {number} startX The X position where the drag started, in canvas
1506 * @param {number} endX The current X position of the drag, in canvas coords.
1507 * @param {number} startY The Y position where the drag started, in canvas
1509 * @param {number} endY The current Y position of the drag, in canvas coords.
1510 * @param {number} prevDirection the value of direction on the previous call to
1511 * this function. Used to avoid excess redrawing
1512 * @param {number} prevEndX The value of endX on the previous call to this
1513 * function. Used to avoid excess redrawing
1514 * @param {number} prevEndY The value of endY on the previous call to this
1515 * function. Used to avoid excess redrawing
1518 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1519 endY
, prevDirection
, prevEndX
,
1521 var ctx
= this.canvas_ctx_
;
1523 // Clean up from the previous rect if necessary
1524 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1525 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1526 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1527 } else if (prevDirection
== Dygraph
.VERTICAL
) {
1528 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1529 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1532 // Draw a light-grey rectangle to show the new viewing area
1533 if (direction
== Dygraph
.HORIZONTAL
) {
1534 if (endX
&& startX
) {
1535 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1536 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1537 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1539 } else if (direction
== Dygraph
.VERTICAL
) {
1540 if (endY
&& startY
) {
1541 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1542 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1543 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1547 if (this.isUsingExcanvas_
) {
1548 this.currentZoomRectArgs_
= [direction
, startX
, endX
, startY
, endY
, 0, 0, 0];
1553 * Clear the zoom rectangle (and perform no zoom).
1556 Dygraph
.prototype.clearZoomRect_
= function() {
1557 this.currentZoomRectArgs_
= null;
1558 this.canvas_ctx_
.clearRect(0, 0, this.canvas_
.width
, this.canvas_
.height
);
1562 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1563 * the canvas. The exact zoom window may be slightly larger if there are no data
1564 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1565 * which accepts dates that match the raw data. This function redraws the graph.
1567 * @param {number} lowX The leftmost pixel value that should be visible.
1568 * @param {number} highX The rightmost pixel value that should be visible.
1571 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1572 this.currentZoomRectArgs_
= null;
1573 // Find the earliest and latest dates contained in this canvasx range.
1574 // Convert the call to date ranges of the raw data.
1575 var minDate
= this.toDataXCoord(lowX
);
1576 var maxDate
= this.toDataXCoord(highX
);
1577 this.doZoomXDates_(minDate
, maxDate
);
1581 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1582 * method with doZoomX which accepts pixel coordinates. This function redraws
1585 * @param {number} minDate The minimum date that should be visible.
1586 * @param {number} maxDate The maximum date that should be visible.
1589 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1590 // TODO(danvk): when xAxisRange is null (i.e. "fit to data", the animation
1591 // can produce strange effects. Rather than the x-axis transitioning slowly
1592 // between values, it can jerk around.)
1593 var old_window
= this.xAxisRange();
1594 var new_window
= [minDate
, maxDate
];
1595 this.zoomed_x_
= true;
1597 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1598 if (that
.getFunctionOption("zoomCallback")) {
1599 that
.getFunctionOption("zoomCallback")(
1600 minDate
, maxDate
, that
.yAxisRanges());
1606 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1607 * the canvas. This function redraws the graph.
1609 * @param {number} lowY The topmost pixel value that should be visible.
1610 * @param {number} highY The lowest pixel value that should be visible.
1613 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1614 this.currentZoomRectArgs_
= null;
1615 // Find the highest and lowest values in pixel range for each axis.
1616 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1617 // This is because pixels increase as you go down on the screen, whereas data
1618 // coordinates increase as you go up the screen.
1619 var oldValueRanges
= this.yAxisRanges();
1620 var newValueRanges
= [];
1621 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1622 var hi
= this.toDataYCoord(lowY
, i
);
1623 var low
= this.toDataYCoord(highY
, i
);
1624 newValueRanges
.push([low
, hi
]);
1627 this.zoomed_y_
= true;
1629 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1630 if (that
.getFunctionOption("zoomCallback")) {
1631 var xRange
= that
.xAxisRange();
1632 that
.getFunctionOption("zoomCallback")(
1633 xRange
[0], xRange
[1], that
.yAxisRanges());
1639 * Transition function to use in animations. Returns values between 0.0
1640 * (totally old values) and 1.0 (totally new values) for each frame.
1643 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1645 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1649 * Reset the zoom to the original view coordinates. This is the same as
1650 * double-clicking on the graph.
1652 Dygraph
.prototype.resetZoom
= function() {
1653 var dirty
= false, dirtyX
= false, dirtyY
= false;
1654 if (this.dateWindow_
!== null) {
1659 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1660 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1666 // Clear any selection, since it's likely to be drawn in the wrong place.
1667 this.clearSelection();
1670 this.zoomed_x_
= false;
1671 this.zoomed_y_
= false;
1673 var minDate
= this.rawData_
[0][0];
1674 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1676 // With only one frame, don't bother calculating extreme ranges.
1677 // TODO(danvk): merge this block w/ the code below
.
1678 if (!this.getBooleanOption("animatedZooms")) {
1679 this.dateWindow_
= null;
1680 for (i
= 0; i
< this.axes_
.length
; i
++) {
1681 if (this.axes_
[i
].valueWindow
!== null) {
1682 delete this.axes_
[i
].valueWindow
;
1686 if (this.getFunctionOption("zoomCallback")) {
1687 this.getFunctionOption("zoomCallback")(
1688 minDate
, maxDate
, this.yAxisRanges());
1693 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1695 oldWindow
= this.xAxisRange();
1696 newWindow
= [minDate
, maxDate
];
1700 oldValueRanges
= this.yAxisRanges();
1701 // TODO(danvk): this is pretty inefficient
1702 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1703 var extremes
= packed
.extremes
;
1705 // this has the side-effect of modifying this.axes_.
1706 // this doesn't make much sense in this context, but it's convenient (we
1707 // need this.axes_[*].extremeValues) and not harmful since we'll be
1708 // calling drawGraph_ shortly, which clobbers these values.
1709 this.computeYAxisRanges_(extremes
);
1711 newValueRanges
= [];
1712 for (i
= 0; i
< this.axes_
.length
; i
++) {
1713 var axis
= this.axes_
[i
];
1714 newValueRanges
.push((axis
.valueRange
!== null &&
1715 axis
.valueRange
!== undefined
) ?
1716 axis
.valueRange
: axis
.extremeRange
);
1721 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1723 that
.dateWindow_
= null;
1724 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1725 if (that
.axes_
[i
].valueWindow
!== null) {
1726 delete that
.axes_
[i
].valueWindow
;
1729 if (that
.getFunctionOption("zoomCallback")) {
1730 that
.getFunctionOption("zoomCallback")(
1731 minDate
, maxDate
, that
.yAxisRanges());
1738 * Combined animation logic for all zoom functions.
1739 * either the x parameters or y parameters may be null.
1742 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1743 var steps
= this.getBooleanOption("animatedZooms") ?
1744 Dygraph
.ANIMATION_STEPS
: 1;
1747 var valueRanges
= [];
1750 if (oldXRange
!== null && newXRange
!== null) {
1751 for (step
= 1; step
<= steps
; step
++) {
1752 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1753 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1754 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1758 if (oldYRanges
!== null && newYRanges
!== null) {
1759 for (step
= 1; step
<= steps
; step
++) {
1760 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1762 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1763 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1764 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1766 valueRanges
[step
-1] = thisRange
;
1771 Dygraph
.repeatAndCleanup(function(step
) {
1772 if (valueRanges
.length
) {
1773 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1774 var w
= valueRanges
[step
][i
];
1775 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1778 if (windows
.length
) {
1779 that
.dateWindow_
= windows
[step
];
1782 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1786 * Get the current graph's area object.
1788 * Returns: {x, y, w, h}
1790 Dygraph
.prototype.getArea
= function() {
1791 return this.plotter_
.area
;
1795 * Convert a mouse event to DOM coordinates relative to the graph origin.
1797 * Returns a two-element array: [X, Y].
1799 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1800 if (event
.offsetX
&& event
.offsetY
) {
1801 return [ event
.offsetX
, event
.offsetY
];
1803 var eventElementPos
= Dygraph
.findPos(this.mouseEventElement_
);
1804 var canvasx
= Dygraph
.pageX(event
) - eventElementPos
.x
;
1805 var canvasy
= Dygraph
.pageY(event
) - eventElementPos
.y
;
1806 return [canvasx
, canvasy
];
1811 * Given a canvas X coordinate, find the closest row.
1812 * @param {number} domX graph-relative DOM X coordinate
1813 * Returns {number} row number.
1816 Dygraph
.prototype.findClosestRow
= function(domX
) {
1817 var minDistX
= Infinity
;
1818 var closestRow
= -1;
1819 var sets
= this.layout_
.points
;
1820 for (var i
= 0; i
< sets
.length
; i
++) {
1821 var points
= sets
[i
];
1822 var len
= points
.length
;
1823 for (var j
= 0; j
< len
; j
++) {
1824 var point
= points
[j
];
1825 if (!Dygraph
.isValidPoint(point
, true)) continue;
1826 var dist
= Math
.abs(point
.canvasx
- domX
);
1827 if (dist
< minDistX
) {
1829 closestRow
= point
.idx
;
1838 * Given canvas X,Y coordinates, find the closest point.
1840 * This finds the individual data point across all visible series
1841 * that's closest to the supplied DOM coordinates using the standard
1842 * Euclidean X,Y distance.
1844 * @param {number} domX graph-relative DOM X coordinate
1845 * @param {number} domY graph-relative DOM Y coordinate
1846 * Returns: {row, seriesName, point}
1849 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1850 var minDist
= Infinity
;
1851 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
, closestRow
;
1852 for ( var setIdx
= this.layout_
.points
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1853 var points
= this.layout_
.points
[setIdx
];
1854 for (var i
= 0; i
< points
.length
; ++i
) {
1856 if (!Dygraph
.isValidPoint(point
)) continue;
1857 dx
= point
.canvasx
- domX
;
1858 dy
= point
.canvasy
- domY
;
1859 dist
= dx
* dx
+ dy
* dy
;
1860 if (dist
< minDist
) {
1862 closestPoint
= point
;
1863 closestSeries
= setIdx
;
1864 closestRow
= point
.idx
;
1868 var name
= this.layout_
.setNames
[closestSeries
];
1877 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1879 * This first finds the X data point closest to the supplied DOM X coordinate,
1880 * then finds the series which puts the Y coordinate on top of its filled area,
1881 * using linear interpolation between adjacent point pairs.
1883 * @param {number} domX graph-relative DOM X coordinate
1884 * @param {number} domY graph-relative DOM Y coordinate
1885 * Returns: {row, seriesName, point}
1888 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1889 var row
= this.findClosestRow(domX
);
1890 var closestPoint
, closestSeries
;
1891 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
1892 var boundary
= this.getLeftBoundary_(setIdx
);
1893 var rowIdx
= row
- boundary
;
1894 var points
= this.layout_
.points
[setIdx
];
1895 if (rowIdx
>= points
.length
) continue;
1896 var p1
= points
[rowIdx
];
1897 if (!Dygraph
.isValidPoint(p1
)) continue;
1898 var py
= p1
.canvasy
;
1899 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1900 // interpolate series Y value using next point
1901 var p2
= points
[rowIdx
+ 1];
1902 if (Dygraph
.isValidPoint(p2
)) {
1903 var dx
= p2
.canvasx
- p1
.canvasx
;
1905 var r
= (domX
- p1
.canvasx
) / dx
;
1906 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1909 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1910 // interpolate series Y value using previous point
1911 var p0
= points
[rowIdx
- 1];
1912 if (Dygraph
.isValidPoint(p0
)) {
1913 var dx
= p1
.canvasx
- p0
.canvasx
;
1915 var r
= (p1
.canvasx
- domX
) / dx
;
1916 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1920 // Stop if the point (domX, py) is above this series' upper edge
1921 if (setIdx
=== 0 || py
< domY
) {
1923 closestSeries
= setIdx
;
1926 var name
= this.layout_
.setNames
[closestSeries
];
1935 * When the mouse moves in the canvas, display information about a nearby data
1936 * point and draw dots over those points in the data series. This function
1937 * takes care of cleanup of previously-drawn dots.
1938 * @param {Object} event The mousemove event from the browser.
1941 Dygraph
.prototype.mouseMove_
= function(event
) {
1942 // This prevents JS errors when mousing over the canvas before data loads.
1943 var points
= this.layout_
.points
;
1944 if (points
=== undefined
|| points
=== null) return;
1946 var canvasCoords
= this.eventToDomCoords(event
);
1947 var canvasx
= canvasCoords
[0];
1948 var canvasy
= canvasCoords
[1];
1950 var highlightSeriesOpts
= this.getOption("highlightSeriesOpts");
1951 var selectionChanged
= false;
1952 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1954 if (this.getBooleanOption("stackedGraph")) {
1955 closest
= this.findStackedPoint(canvasx
, canvasy
);
1957 closest
= this.findClosestPoint(canvasx
, canvasy
);
1959 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1961 var idx
= this.findClosestRow(canvasx
);
1962 selectionChanged
= this.setSelection(idx
);
1965 var callback
= this.getFunctionOption("highlightCallback");
1966 if (callback
&& selectionChanged
) {
1971 this.highlightSet_
);
1976 * Fetch left offset from the specified set index or if not passed, the
1977 * first defined boundaryIds record (see bug #236).
1980 Dygraph
.prototype.getLeftBoundary_
= function(setIdx
) {
1981 if (this.boundaryIds_
[setIdx
]) {
1982 return this.boundaryIds_
[setIdx
][0];
1984 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
1985 if (this.boundaryIds_
[i
] !== undefined
) {
1986 return this.boundaryIds_
[i
][0];
1993 Dygraph
.prototype.animateSelection_
= function(direction
) {
1994 var totalSteps
= 10;
1996 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
1997 if (this.animateId
=== undefined
) this.animateId
= 0;
1998 var start
= this.fadeLevel
;
1999 var steps
= direction
< 0 ? start
: totalSteps
- start
;
2001 if (this.fadeLevel
) {
2002 this.updateSelection_(1.0);
2007 var thisId
= ++this.animateId
;
2009 Dygraph
.repeatAndCleanup(
2011 // ignore simultaneous animations
2012 if (that
.animateId
!= thisId
) return;
2014 that
.fadeLevel
+= direction
;
2015 if (that
.fadeLevel
=== 0) {
2016 that
.clearSelection();
2018 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
2021 steps
, millis
, function() {});
2025 * Draw dots over the selectied points in the data series. This function
2026 * takes care of cleanup of previously-drawn dots.
2029 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
2030 /*var defaultPrevented = */
2031 this.cascadeEvents_('select', {
2032 selectedX
: this.lastx_
,
2033 selectedPoints
: this.selPoints_
2035 // TODO(danvk): use defaultPrevented here?
2037 // Clear the previously drawn vertical, if there is one
2039 var ctx
= this.canvas_ctx_
;
2040 if (this.getOption('highlightSeriesOpts')) {
2041 ctx
.clearRect(0, 0, this.width_
, this.height_
);
2042 var alpha
= 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha');
2044 // Activating background fade includes an animation effect for a gradual
2045 // fade. TODO(klausw): make this independently configurable if it causes
2046 // issues? Use a shared preference to control animations?
2047 var animateBackgroundFade
= true;
2048 if (animateBackgroundFade
) {
2049 if (opt_animFraction
=== undefined
) {
2050 // start a new animation
2051 this.animateSelection_(1);
2054 alpha
*= opt_animFraction
;
2056 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
2057 ctx
.fillRect(0, 0, this.width_
, this.height_
);
2060 // Redraw only the highlighted series in the interactive canvas (not the
2061 // static plot canvas, which is where series are usually drawn).
2062 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
2063 } else if (this.previousVerticalX_
>= 0) {
2064 // Determine the maximum highlight circle size.
2065 var maxCircleSize
= 0;
2066 var labels
= this.attr_('labels');
2067 for (i
= 1; i
< labels
.length
; i
++) {
2068 var r
= this.getNumericOption('highlightCircleSize', labels
[i
]);
2069 if (r
> maxCircleSize
) maxCircleSize
= r
;
2071 var px
= this.previousVerticalX_
;
2072 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
2073 2 * maxCircleSize
+ 2, this.height_
);
2076 if (this.isUsingExcanvas_
&& this.currentZoomRectArgs_
) {
2077 Dygraph
.prototype.drawZoomRect_
.apply(this, this.currentZoomRectArgs_
);
2080 if (this.selPoints_
.length
> 0) {
2081 // Draw colored circles over the center of each selected point
2082 var canvasx
= this.selPoints_
[0].canvasx
;
2084 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
2085 var pt
= this.selPoints_
[i
];
2086 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
2088 var circleSize
= this.getNumericOption('highlightCircleSize', pt
.name
);
2089 var callback
= this.getFunctionOption("drawHighlightPointCallback", pt
.name
);
2090 var color
= this.plotter_
.colors
[pt
.name
];
2092 callback
= Dygraph
.Circles
.DEFAULT
;
2094 ctx
.lineWidth
= this.getNumericOption('strokeWidth', pt
.name
);
2095 ctx
.strokeStyle
= color
;
2096 ctx
.fillStyle
= color
;
2097 callback(this, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
2098 color
, circleSize
, pt
.idx
);
2102 this.previousVerticalX_
= canvasx
;
2107 * Manually set the selected points and display information about them in the
2108 * legend. The selection can be cleared using clearSelection() and queried
2109 * using getSelection().
2110 * @param {number} row Row number that should be highlighted (i.e. appear with
2111 * hover dots on the chart). Set to false to clear any selection.
2112 * @param {seriesName} optional series name to highlight that series with the
2113 * the highlightSeriesOpts setting.
2114 * @param { locked } optional If true, keep seriesName selected when mousing
2115 * over the graph, disabling closest-series highlighting. Call clearSelection()
2118 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
2119 // Extract the points we've selected
2120 this.selPoints_
= [];
2122 var changed
= false;
2123 if (row
!== false && row
>= 0) {
2124 if (row
!= this.lastRow_
) changed
= true;
2125 this.lastRow_
= row
;
2126 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
2127 var points
= this.layout_
.points
[setIdx
];
2128 // Check if the point at the appropriate index is the point we're looking
2129 // for. If it is, just use it, otherwise search the array for a point
2130 // in the proper place.
2131 var setRow
= row
- this.getLeftBoundary_(setIdx
);
2132 if (setRow
< points
.length
&& points
[setRow
].idx
== row
) {
2133 var point
= points
[setRow
];
2134 if (point
.yval
!== null) this.selPoints_
.push(point
);
2136 for (var pointIdx
= 0; pointIdx
< points
.length
; ++pointIdx
) {
2137 var point
= points
[pointIdx
];
2138 if (point
.idx
== row
) {
2139 if (point
.yval
!== null) {
2140 this.selPoints_
.push(point
);
2148 if (this.lastRow_
>= 0) changed
= true;
2152 if (this.selPoints_
.length
) {
2153 this.lastx_
= this.selPoints_
[0].xval
;
2158 if (opt_seriesName
!== undefined
) {
2159 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
2160 this.highlightSet_
= opt_seriesName
;
2163 if (opt_locked
!== undefined
) {
2164 this.lockedSet_
= opt_locked
;
2168 this.updateSelection_(undefined
);
2174 * The mouse has left the canvas. Clear out whatever artifacts remain
2175 * @param {Object} event the mouseout event from the browser.
2178 Dygraph
.prototype.mouseOut_
= function(event
) {
2179 if (this.getFunctionOption("unhighlightCallback")) {
2180 this.getFunctionOption("unhighlightCallback")(event
);
2183 if (this.getFunctionOption("hideOverlayOnMouseOut") && !this.lockedSet_
) {
2184 this.clearSelection();
2189 * Clears the current selection (i.e. points that were highlighted by moving
2190 * the mouse over the chart).
2192 Dygraph
.prototype.clearSelection
= function() {
2193 this.cascadeEvents_('deselect', {});
2195 this.lockedSet_
= false;
2196 // Get rid of the overlay data
2197 if (this.fadeLevel
) {
2198 this.animateSelection_(-1);
2201 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2203 this.selPoints_
= [];
2206 this.highlightSet_
= null;
2210 * Returns the number of the currently selected row. To get data for this row,
2211 * you can use the getValue method.
2212 * @return {number} row number, or -1 if nothing is selected
2214 Dygraph
.prototype.getSelection
= function() {
2215 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2219 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2220 var points
= this.layout_
.points
[setIdx
];
2221 for (var row
= 0; row
< points
.length
; row
++) {
2222 if (points
[row
].x
== this.selPoints_
[0].x
) {
2223 return points
[row
].idx
;
2231 * Returns the name of the currently-highlighted series.
2232 * Only available when the highlightSeriesOpts option is in use.
2234 Dygraph
.prototype.getHighlightSeries
= function() {
2235 return this.highlightSet_
;
2239 * Returns true if the currently-highlighted series was locked
2240 * via setSelection(..., seriesName, true).
2242 Dygraph
.prototype.isSeriesLocked
= function() {
2243 return this.lockedSet_
;
2247 * Fires when there's data available to be graphed.
2248 * @param {string} data Raw CSV data to be plotted
2251 Dygraph
.prototype.loadedEvent_
= function(data
) {
2252 this.rawData_
= this.parseCSV_(data
);
2257 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2260 Dygraph
.prototype.addXTicks_
= function() {
2261 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2263 if (this.dateWindow_
) {
2264 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2266 range
= this.xAxisExtremes();
2269 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2270 var xTicks
= xAxisOptionsView('ticker')(
2273 this.width_
, // TODO(danvk): should be area.width
2276 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2277 // console.log(msg);
2278 this.layout_
.setXTicks(xTicks
);
2282 * Returns the correct handler class for the currently set options.
2285 Dygraph
.prototype.getHandlerClass_
= function() {
2287 if (this.attr_('dataHandler')) {
2288 handlerClass
= this.attr_('dataHandler');
2289 } else if (this.fractions_
) {
2290 if (this.getBooleanOption('errorBars')) {
2291 handlerClass
= Dygraph
.DataHandlers
.FractionsBarsHandler
;
2293 handlerClass
= Dygraph
.DataHandlers
.DefaultFractionHandler
;
2295 } else if (this.getBooleanOption('customBars')) {
2296 handlerClass
= Dygraph
.DataHandlers
.CustomBarsHandler
;
2297 } else if (this.getBooleanOption('errorBars')) {
2298 handlerClass
= Dygraph
.DataHandlers
.ErrorBarsHandler
;
2300 handlerClass
= Dygraph
.DataHandlers
.DefaultHandler
;
2302 return handlerClass
;
2307 * This function is called once when the chart's data is changed or the options
2308 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2309 * idea is that values derived from the chart's data can be computed here,
2310 * rather than every time the chart is drawn. This includes things like the
2311 * number of axes, rolling averages, etc.
2313 Dygraph
.prototype.predraw_
= function() {
2314 var start
= new Date();
2316 // Create the correct dataHandler
2317 this.dataHandler_
= new (this.getHandlerClass_())();
2319 this.layout_
.computePlotArea();
2321 // TODO(danvk): move more computations out of drawGraph_ and into here.
2322 this.computeYAxes_();
2324 // Create a new plotter.
2325 if (this.plotter_
) {
2326 this.cascadeEvents_('clearChart');
2327 this.plotter_
.clear();
2330 if (!this.is_initial_draw_
) {
2331 this.canvas_ctx_
.restore();
2332 this.hidden_ctx_
.restore();
2335 this.canvas_ctx_
.save();
2336 this.hidden_ctx_
.save();
2338 this.plotter_
= new DygraphCanvasRenderer(this,
2343 // The roller sits in the bottom left corner of the chart. We don't know where
2344 // this will be until the options are available, so it's positioned here.
2345 this.createRollInterface_();
2347 this.cascadeEvents_('predraw');
2349 // Convert the raw data (a 2D array) into the internal format and compute
2350 // rolling averages.
2351 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2352 for (var i
= 1; i
< this.numColumns(); i
++) {
2353 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2354 var series
= this.dataHandler_
.extractSeries(this.rawData_
, i
, this.attributes_
);
2355 if (this.rollPeriod_
> 1) {
2356 series
= this.dataHandler_
.rollingAverage(series
, this.rollPeriod_
, this.attributes_
);
2359 this.rolledSeries_
.push(series
);
2362 // If the data or options have changed, then we'd better redraw.
2365 // This is used to determine whether to do various animations.
2366 var end
= new Date();
2367 this.drawingTimeMs_
= (end
- start
);
2373 * xval_* and yval_* are the original unscaled data values,
2374 * while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
2375 * yval_stacked is the cumulative Y value used for stacking graphs,
2376 * and bottom/top/minus/plus are used for error bar graphs.
2383 * y_bottom: ?number,
2385 * y_stacked: ?number,
2387 * yval_minus: ?number,
2389 * yval_plus: ?number,
2393 Dygraph
.PointType
= undefined
;
2396 * Calculates point stacking for stackedGraph=true.
2398 * For stacking purposes, interpolate or extend neighboring data across
2399 * NaN values based on stackedGraphNaNFill settings. This is for display
2400 * only, the underlying data value as shown in the legend remains NaN.
2402 * @param {Array.<Dygraph.PointType>} points Point array for a single series.
2403 * Updates each Point's yval_stacked property.
2404 * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y
2405 * values for the series seen so far. Index is the row number. Updated
2406 * based on the current series's values.
2407 * @param {Array.<number>} seriesExtremes Min and max values, updated
2408 * to reflect the stacked values.
2409 * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or
2413 Dygraph
.stackPoints_
= function(
2414 points
, cumulativeYval
, seriesExtremes
, fillMethod
) {
2415 var lastXval
= null;
2416 var prevPoint
= null;
2417 var nextPoint
= null;
2418 var nextPointIdx
= -1;
2420 // Find the next stackable point starting from the given index.
2421 var updateNextPoint
= function(idx
) {
2422 // If we've previously found a non-NaN point and haven't gone past it yet,
2424 if (nextPointIdx
>= idx
) return;
2426 // We haven't found a non-NaN point yet or have moved past it,
2427 // look towards the right to find a non-NaN point.
2428 for (var j
= idx
; j
< points
.length
; ++j
) {
2429 // Clear out a previously-found point (if any) since it's no longer
2430 // valid, we shouldn't use it for interpolation anymore.
2432 if (!isNaN(points
[j
].yval
) && points
[j
].yval
!== null) {
2434 nextPoint
= points
[j
];
2440 for (var i
= 0; i
< points
.length
; ++i
) {
2441 var point
= points
[i
];
2442 var xval
= point
.xval
;
2443 if (cumulativeYval
[xval
] === undefined
) {
2444 cumulativeYval
[xval
] = 0;
2447 var actualYval
= point
.yval
;
2448 if (isNaN(actualYval
) || actualYval
=== null) {
2449 if(fillMethod
== 'none') {
2452 // Interpolate/extend
for stacking purposes
if possible
.
2454 if (prevPoint
&& nextPoint
&& fillMethod
!= 'none') {
2455 // Use linear interpolation between prevPoint and nextPoint.
2456 actualYval
= prevPoint
.yval
+ (nextPoint
.yval
- prevPoint
.yval
) *
2457 ((xval
- prevPoint
.xval
) / (nextPoint
.xval
- prevPoint
.xval
));
2458 } else if (prevPoint
&& fillMethod
== 'all') {
2459 actualYval
= prevPoint
.yval
;
2460 } else if (nextPoint
&& fillMethod
== 'all') {
2461 actualYval
= nextPoint
.yval
;
2470 var stackedYval
= cumulativeYval
[xval
];
2471 if (lastXval
!= xval
) {
2472 // If an x-value is repeated, we ignore the duplicates.
2473 stackedYval
+= actualYval
;
2474 cumulativeYval
[xval
] = stackedYval
;
2478 point
.yval_stacked
= stackedYval
;
2480 if (stackedYval
> seriesExtremes
[1]) {
2481 seriesExtremes
[1] = stackedYval
;
2483 if (stackedYval
< seriesExtremes
[0]) {
2484 seriesExtremes
[0] = stackedYval
;
2491 * Loop over all fields and create datasets, calculating extreme y-values for
2492 * each series and extreme x-indices as we go.
2494 * dateWindow is passed in as an explicit parameter so that we can compute
2495 * extreme values "speculatively", i.e. without actually setting state on the
2498 * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2499 * rolledSeries[seriesIndex][row] = raw point, where
2500 * seriesIndex is the column number starting with 1, and
2501 * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2502 * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2504 * points: Array.<Array.<Dygraph.PointType>>,
2505 * seriesExtremes: Array.<Array.<number>>,
2506 * boundaryIds: Array.<number>}}
2509 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2510 var boundaryIds
= [];
2512 var cumulativeYval
= []; // For stacked series.
2513 var extremes
= {}; // series name -> [low, high]
2514 var seriesIdx
, sampleIdx
;
2515 var firstIdx
, lastIdx
;
2518 // Loop over the fields (series). Go from the last to the first,
2519 // because if they're stacked that's how we accumulate the values.
2520 var num_series
= rolledSeries
.length
- 1;
2522 for (seriesIdx
= num_series
; seriesIdx
>= 1; seriesIdx
--) {
2523 if (!this.visibility()[seriesIdx
- 1]) continue;
2525 // Prune down to the desired range, if necessary (for zooming)
2526 // Because there can be lines going to points outside of the visible area,
2527 // we actually prune to visible points, plus one on either side.
2529 series
= rolledSeries
[seriesIdx
];
2530 var low
= dateWindow
[0];
2531 var high
= dateWindow
[1];
2533 // TODO(danvk): do binary search instead of linear search.
2534 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2537 for (sampleIdx
= 0; sampleIdx
< series
.length
; sampleIdx
++) {
2538 if (series
[sampleIdx
][0] >= low
&& firstIdx
=== null) {
2539 firstIdx
= sampleIdx
;
2541 if (series
[sampleIdx
][0] <= high
) {
2542 lastIdx
= sampleIdx
;
2546 if (firstIdx
=== null) firstIdx
= 0;
2547 var correctedFirstIdx
= firstIdx
;
2548 var isInvalidValue
= true;
2549 while (isInvalidValue
&& correctedFirstIdx
> 0) {
2550 correctedFirstIdx
--;
2551 // check if the y value is null.
2552 isInvalidValue
= series
[correctedFirstIdx
][1] === null;
2555 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2556 var correctedLastIdx
= lastIdx
;
2557 isInvalidValue
= true;
2558 while (isInvalidValue
&& correctedLastIdx
< series
.length
- 1) {
2560 isInvalidValue
= series
[correctedLastIdx
][1] === null;
2563 if (correctedFirstIdx
!==firstIdx
) {
2564 firstIdx
= correctedFirstIdx
;
2566 if (correctedLastIdx
!== lastIdx
) {
2567 lastIdx
= correctedLastIdx
;
2570 boundaryIds
[seriesIdx
-1] = [firstIdx
, lastIdx
];
2572 // .slice's end is exclusive, we want to include lastIdx.
2573 series
= series
.slice(firstIdx
, lastIdx
+ 1);
2575 series
= rolledSeries
[seriesIdx
];
2576 boundaryIds
[seriesIdx
-1] = [0, series
.length
-1];
2579 var seriesName
= this.attr_("labels")[seriesIdx
];
2580 var seriesExtremes
= this.dataHandler_
.getExtremeYValues(series
,
2581 dateWindow
, this.getBooleanOption("stepPlot",seriesName
));
2583 var seriesPoints
= this.dataHandler_
.seriesToPoints(series
,
2584 seriesName
, boundaryIds
[seriesIdx
-1][0]);
2586 if (this.getBooleanOption("stackedGraph")) {
2587 axisIdx
= this.attributes_
.axisForSeries(seriesName
);
2588 if (cumulativeYval
[axisIdx
] === undefined
) {
2589 cumulativeYval
[axisIdx
] = [];
2591 Dygraph
.stackPoints_(seriesPoints
, cumulativeYval
[axisIdx
], seriesExtremes
,
2592 this.getBooleanOption("stackedGraphNaNFill"));
2595 extremes
[seriesName
] = seriesExtremes
;
2596 points
[seriesIdx
] = seriesPoints
;
2599 return { points
: points
, extremes
: extremes
, boundaryIds
: boundaryIds
};
2603 * Update the graph with new data. This method is called when the viewing area
2604 * has changed. If the underlying data or options have changed, predraw_ will
2605 * be called before drawGraph_ is called.
2609 Dygraph
.prototype.drawGraph_
= function() {
2610 var start
= new Date();
2612 // This is used to set the second parameter to drawCallback, below.
2613 var is_initial_draw
= this.is_initial_draw_
;
2614 this.is_initial_draw_
= false;
2616 this.layout_
.removeAllDatasets();
2618 this.attrs_
.pointSize
= 0.5 * this.getNumericOption('highlightCircleSize');
2620 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2621 var points
= packed
.points
;
2622 var extremes
= packed
.extremes
;
2623 this.boundaryIds_
= packed
.boundaryIds
;
2625 this.setIndexByName_
= {};
2626 var labels
= this.attr_("labels");
2627 if (labels
.length
> 0) {
2628 this.setIndexByName_
[labels
[0]] = 0;
2631 for (var i
= 1; i
< points
.length
; i
++) {
2632 this.setIndexByName_
[labels
[i
]] = i
;
2633 if (!this.visibility()[i
- 1]) continue;
2634 this.layout_
.addDataset(labels
[i
], points
[i
]);
2635 this.datasetIndex_
[i
] = dataIdx
++;
2638 this.computeYAxisRanges_(extremes
);
2639 this.layout_
.setYAxes(this.axes_
);
2643 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2644 var tmp_zoomed_x
= this.zoomed_x_
;
2645 // Tell PlotKit to use this new data and render itself
2646 this.zoomed_x_
= tmp_zoomed_x
;
2647 this.layout_
.evaluate();
2648 this.renderGraph_(is_initial_draw
);
2650 if (this.getStringOption("timingName")) {
2651 var end
= new Date();
2652 console
.log(this.getStringOption("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2657 * This does the work of drawing the chart. It assumes that the layout and axis
2658 * scales have already been set (e.g. by predraw_).
2662 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2663 this.cascadeEvents_('clearChart');
2664 this.plotter_
.clear();
2666 if (this.getFunctionOption('underlayCallback')) {
2667 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2668 // users who expect a deprecated form of this callback.
2669 this.getFunctionOption('underlayCallback')(
2670 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2674 canvas
: this.hidden_
,
2675 drawingContext
: this.hidden_ctx_
2677 this.cascadeEvents_('willDrawChart', e
);
2678 this.plotter_
.render();
2679 this.cascadeEvents_('didDrawChart', e
);
2680 this.lastRow_
= -1; // because plugins/legend.js clears the legend
2682 // TODO(danvk): is this a performance bottleneck when panning?
2683 // The interaction canvas should already be empty in that situation.
2684 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2685 this.canvas_
.height
);
2687 if (this.getFunctionOption("drawCallback") !== null) {
2688 this.getFunctionOption("drawCallback")(this, is_initial_draw
);
2690 if (is_initial_draw
) {
2691 this.readyFired_
= true;
2692 while (this.readyFns_
.length
> 0) {
2693 var fn
= this.readyFns_
.pop();
2701 * Determine properties of the y-axes which are independent of the data
2702 * currently being displayed. This includes things like the number of axes and
2703 * the style of the axes. It does not include the range of each axis and its
2705 * This fills in this.axes_.
2706 * axes_ = [ { options } ]
2707 * indices are into the axes_ array.
2709 Dygraph
.prototype.computeYAxes_
= function() {
2710 // Preserve valueWindow settings if they exist, and if the user hasn't
2711 // specified a new valueRange.
2712 var valueWindows
, axis
, index
, opts
, v
;
2713 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2715 for (index
= 0; index
< this.axes_
.length
; index
++) {
2716 valueWindows
.push(this.axes_
[index
].valueWindow
);
2720 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2721 // data computation as well as options storage.
2722 // Go through once and add all the axes.
2725 for (axis
= 0; axis
< this.attributes_
.numAxes(); axis
++) {
2726 // Add a new axis, making a copy of its per-axis options.
2727 opts
= { g
: this };
2728 Dygraph
.update(opts
, this.attributes_
.axisOptions(axis
));
2729 this.axes_
[axis
] = opts
;
2733 // Copy global valueRange option over to the first axis.
2734 // NOTE(konigsberg): Are these two statements necessary?
2735 // I tried removing it. The automated tests pass, and manually
2736 // messing with tests/zoom
.html showed no trouble
.
2737 v
= this.attr_('valueRange');
2738 if (v
) this.axes_
[0].valueRange
= v
;
2740 if (valueWindows
!== undefined
) {
2741 // Restore valueWindow settings.
2743 // When going from two axes back to one, we only restore
2745 var idxCount
= Math
.min(valueWindows
.length
, this.axes_
.length
);
2747 for (index
= 0; index
< idxCount
; index
++) {
2748 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2752 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2754 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2755 v
= opts("valueRange");
2756 if (v
) this.axes_
[axis
].valueRange
= v
;
2757 } else { // To keep old behavior
2758 var axes
= this.user_attrs_
.axes
;
2759 if (axes
&& axes
.y2
) {
2760 v
= axes
.y2
.valueRange
;
2761 if (v
) this.axes_
[axis
].valueRange
= v
;
2768 * Returns the number of y-axes on the chart.
2769 * @return {number} the number of axes.
2771 Dygraph
.prototype.numAxes
= function() {
2772 return this.attributes_
.numAxes();
2777 * Returns axis properties for the given series.
2778 * @param {string} setName The name of the series for which to get axis
2779 * properties, e.g. 'Y1'.
2780 * @return {Object} The axis properties.
2782 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2783 // TODO(danvk): handle errors.
2784 return this.axes_
[this.attributes_
.axisForSeries(series
)];
2789 * Determine the value range and tick marks for each axis.
2790 * @param {Object} extremes A mapping from seriesName -> [low, high]
2791 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2793 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2794 var isNullUndefinedOrNaN
= function(num
) {
2795 return isNaN(parseFloat(num
));
2797 var numAxes
= this.attributes_
.numAxes();
2798 var ypadCompat
, span
, series
, ypad
;
2802 // Compute extreme values, a span and tick marks for each axis.
2803 for (var i
= 0; i
< numAxes
; i
++) {
2804 var axis
= this.axes_
[i
];
2805 var logscale
= this.attributes_
.getForAxis("logscale", i
);
2806 var includeZero
= this.attributes_
.getForAxis("includeZero", i
);
2807 var independentTicks
= this.attributes_
.getForAxis("independentTicks", i
);
2808 series
= this.attributes_
.seriesForAxis(i
);
2810 // Add some padding. This supports two Y padding operation modes:
2812 // - backwards compatible (yRangePad not set):
2813 // 10% padding for automatic Y ranges, but not for user-supplied
2814 // ranges, and move a close-to-zero edge to zero except if
2815 // avoidMinZero is set, since drawing at the edge results in
2816 // invisible lines. Unfortunately lines drawn at the edge of a
2817 // user-supplied range will still be invisible. If logscale is
2818 // set, add a variable amount of padding at the top but
2819 // none at the bottom.
2821 // - new-style (yRangePad set by the user):
2822 // always add the specified Y padding.
2825 ypad
= 0.1; // add 10%
2826 if (this.getNumericOption('yRangePad') !== null) {
2828 // Convert pixel padding to ratio
2829 ypad
= this.getNumericOption('yRangePad') / this.plotter_
.area
.h
;
2832 if (series
.length
=== 0) {
2833 // If no series are defined or visible then use a reasonable default
2834 axis
.extremeRange
= [0, 1];
2836 // Calculate the extremes of extremes.
2837 var minY
= Infinity
; // extremes[series[0]][0];
2838 var maxY
= -Infinity
; // extremes[series[0]][1];
2839 var extremeMinY
, extremeMaxY
;
2841 for (var j
= 0; j
< series
.length
; j
++) {
2842 // this skips invisible series
2843 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2845 // Only use valid extremes to stop null data series' from corrupting the scale.
2846 extremeMinY
= extremes
[series
[j
]][0];
2847 if (extremeMinY
!== null) {
2848 minY
= Math
.min(extremeMinY
, minY
);
2850 extremeMaxY
= extremes
[series
[j
]][1];
2851 if (extremeMaxY
!== null) {
2852 maxY
= Math
.max(extremeMaxY
, maxY
);
2856 // Include zero if requested by the user.
2857 if (includeZero
&& !logscale
) {
2858 if (minY
> 0) minY
= 0;
2859 if (maxY
< 0) maxY
= 0;
2862 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2863 if (minY
== Infinity
) minY
= 0;
2864 if (maxY
== -Infinity
) maxY
= 1;
2867 // special case: if we have no sense of scale, center on the sole value.
2870 span
= Math
.abs(maxY
);
2872 // ... and if the sole value is zero, use range 0-1.
2878 var maxAxisY
, minAxisY
;
2881 maxAxisY
= maxY
+ ypad
* span
;
2884 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2885 maxAxisY
= maxY
* logpad
;
2886 minAxisY
= minY
/ logpad
;
2889 maxAxisY
= maxY
+ ypad
* span
;
2890 minAxisY
= minY
- ypad
* span
;
2892 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2893 // close to zero, but not if avoidMinZero is set.
2894 if (ypadCompat
&& !this.getBooleanOption("avoidMinZero")) {
2895 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2896 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2899 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2901 if (axis
.valueWindow
) {
2902 // This is only set if the user has zoomed on the y-axis. It is never set
2903 // by a user. It takes precedence over axis.valueRange because, if you set
2904 // valueRange, you'd still expect to be able to pan.
2905 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2906 } else if (axis
.valueRange
) {
2907 // This is a user-set value range for this axis.
2908 var y0
= isNullUndefinedOrNaN(axis
.valueRange
[0]) ? axis
.extremeRange
[0] : axis
.valueRange
[0];
2909 var y1
= isNullUndefinedOrNaN(axis
.valueRange
[1]) ? axis
.extremeRange
[1] : axis
.valueRange
[1];
2911 if (axis
.logscale
) {
2912 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2921 axis
.computedValueRange
= [y0
, y1
];
2923 axis
.computedValueRange
= axis
.extremeRange
;
2927 if (independentTicks
) {
2928 axis
.independentTicks
= independentTicks
;
2929 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2930 var ticker
= opts('ticker');
2931 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2932 axis
.computedValueRange
[1],
2933 this.height_
, // TODO(danvk): should be area.height
2936 // Define the first independent axis as primary axis.
2937 if (!p_axis
) p_axis
= axis
;
2940 if (p_axis
=== undefined
) {
2941 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
2943 // Add ticks. By default, all axes inherit the tick positions of the
2944 // primary axis. However, if an axis is specifically marked as having
2945 // independent ticks, then that is permissible as well.
2946 for (var i
= 0; i
< numAxes
; i
++) {
2947 var axis
= this.axes_
[i
];
2949 if (!axis
.independentTicks
) {
2950 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2951 var ticker
= opts('ticker');
2952 var p_ticks
= p_axis
.ticks
;
2953 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2954 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2955 var tick_values
= [];
2956 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2957 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2958 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2959 tick_values
.push(y_val
);
2962 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2963 axis
.computedValueRange
[1],
2964 this.height_
, // TODO(danvk): should be area.height
2973 * Detects the type of the str (date or numeric) and sets the various
2974 * formatting attributes in this.attrs_ based on this type.
2975 * @param {string} str An x value.
2978 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2980 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2981 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
2982 str
.indexOf('/') >= 0 ||
2983 isNaN(parseFloat(str
))) {
2985 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2986 // TODO(danvk): remove support for this format.
2990 this.setXAxisOptions_(isDate
);
2993 Dygraph
.prototype.setXAxisOptions_
= function(isDate
) {
2995 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2996 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
2997 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
2998 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3000 /** @private (shut up, jsdoc!) */
3001 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3002 // TODO(danvk): use Dygraph.numberValueFormatter here?
3003 /** @private (shut up, jsdoc!) */
3004 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3005 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3006 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3012 * Parses a string in a special csv format. We expect a csv file where each
3013 * line is a date point, and the first field in each line is the date string.
3014 * We also expect that all remaining fields represent series.
3015 * if the errorBars attribute is set, then interpret the fields as:
3016 * date, series1, stddev1, series2, stddev2, ...
3017 * @param {[Object]} data See above.
3019 * @return [Object] An array with one entry for each row. These entries
3020 * are an array of cells in that row. The first entry is the parsed x-value for
3021 * the row. The second, third, etc. are the y-values. These can take on one of
3022 * three forms, depending on the CSV and constructor parameters:
3024 * 2. [ value, stddev ]
3025 * 3. [ low value, center value, high value ]
3027 Dygraph
.prototype.parseCSV_
= function(data
) {
3029 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3030 var lines
= data
.split(line_delimiter
|| "\n");
3033 // Use the default delimiter or fall back to a tab if that makes sense.
3034 var delim
= this.getStringOption('delimiter');
3035 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3040 if (!('labels' in this.user_attrs_
)) {
3041 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
3043 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
3044 this.attributes_
.reparseSeries();
3049 var defaultParserSet
= false; // attempt to auto-detect x value type
3050 var expectedCols
= this.attr_("labels").length
;
3051 var outOfOrder
= false;
3052 for (var i
= start
; i
< lines
.length
; i
++) {
3053 var line
= lines
[i
];
3055 if (line
.length
=== 0) continue; // skip blank lines
3056 if (line
[0] == '#') continue; // skip comment lines
3057 var inFields
= line
.split(delim
);
3058 if (inFields
.length
< 2) continue;
3061 if (!defaultParserSet
) {
3062 this.detectTypeFromString_(inFields
[0]);
3063 xParser
= this.getFunctionOption("xValueParser");
3064 defaultParserSet
= true;
3066 fields
[0] = xParser(inFields
[0], this);
3068 // If fractions are expected, parse the numbers as "A/B
"
3069 if (this.fractions_) {
3070 for (j = 1; j < inFields.length; j++) {
3071 // TODO(danvk): figure out an appropriate way to flag parse errors.
3072 vals = inFields[j].split("/");
3073 if (vals.length != 2) {
3074 console.error('Expected fractional "num
/den
" values in CSV data ' +
3075 "but found a value
'" + inFields[j] + "' on line
" +
3076 (1 + i) + " ('" + line + "') which is not of
this form
.");
3079 fields[j] = [Dygraph.parseFloat_(vals[0], i, line),
3080 Dygraph.parseFloat_(vals[1], i, line)];
3083 } else if (this.getBooleanOption("errorBars
")) {
3084 // If there are error bars, values are (value, stddev) pairs
3085 if (inFields.length % 2 != 1) {
3086 console.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3087 'but line ' + (1 + i) + ' has an odd number of values (' +
3088 (inFields.length - 1) + "): '" + line + "'");
3090 for (j = 1; j < inFields.length; j += 2) {
3091 fields[(j + 1) / 2] = [Dygraph.parseFloat_(inFields[j], i, line),
3092 Dygraph.parseFloat_(inFields[j + 1], i, line)];
3094 } else if (this.getBooleanOption("customBars
")) {
3095 // Bars are a low;center;high tuple
3096 for (j = 1; j < inFields.length; j++) {
3097 var val = inFields[j];
3098 if (/^ *$/.test(val)) {
3099 fields[j] = [null, null, null];
3101 vals = val.split(";");
3102 if (vals.length == 3) {
3103 fields[j] = [ Dygraph.parseFloat_(vals[0], i, line),
3104 Dygraph.parseFloat_(vals[1], i, line),
3105 Dygraph.parseFloat_(vals[2], i, line) ];
3107 console.warn('When using customBars, values must be either blank ' +
3108 'or "low
;center
;high
" tuples (got "' + val +
3109 '" on line ' + (1+i));
3114 // Values are just numbers
3115 for (j = 1; j < inFields.length; j++) {
3116 fields[j] = Dygraph.parseFloat_(inFields[j], i, line);
3119 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3123 if (fields.length != expectedCols) {
3124 console.error("Number of columns
in line
" + i + " (" + fields.length +
3125 ") does not agree
with number of
labels (" + expectedCols +
3129 // If the user specified the 'labels' option and none of the cells of the
3130 // first row parsed correctly, then they probably double-specified the
3131 // labels. We go with the values set in the option, discard this row and
3132 // log a warning to the JS console.
3133 if (i === 0 && this.attr_('labels')) {
3134 var all_null = true;
3135 for (j = 0; all_null && j < fields.length; j++) {
3136 if (fields[j]) all_null = false;
3139 console.warn("The dygraphs
'labels' option is set
, but the first row
" +
3140 "of CSV
data ('" + line + "') appears to also contain
" +
3141 "labels
. Will drop the CSV labels and
use the option
" +
3150 console.warn("CSV is out of order
; order it correctly to speed loading
.");
3151 ret.sort(function(a,b) { return a[0] - b[0]; });
3158 * The user has provided their data as a pre-packaged JS array. If the x values
3159 * are numeric, this is the same as dygraphs' internal format. If the x values
3160 * are dates, we need to convert them from Date objects to ms since epoch.
3161 * @param {!Array} data
3162 * @return {Object} data with numeric x values.
3165 Dygraph.prototype.parseArray_ = function(data) {
3166 // Peek at the first x value to see if it's numeric.
3167 if (data.length === 0) {
3168 console.error("Can
't plot empty data set");
3171 if (data[0].length === 0) {
3172 console.error("Data set cannot contain an empty row");
3177 if (this.attr_("labels") === null) {
3178 console.warn("Using default labels. Set labels explicitly via 'labels
' " +
3179 "in the options parameter");
3180 this.attrs_.labels = [ "X" ];
3181 for (i = 1; i < data[0].length; i++) {
3182 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
3184 this.attributes_.reparseSeries();
3186 var num_labels = this.attr_("labels");
3187 if (num_labels.length != data[0].length) {
3188 console.error("Mismatch between number of labels (" + num_labels + ")" +
3189 " and number of columns in array (" + data[0].length + ")");
3194 if (Dygraph.isDateLike(data[0][0])) {
3195 // Some intelligent defaults for a date x-axis.
3196 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
3197 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3198 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
3200 // Assume they're all dates
.
3201 var parsedData
= Dygraph
.clone(data
);
3202 for (i
= 0; i
< data
.length
; i
++) {
3203 if (parsedData
[i
].length
=== 0) {
3204 console
.error("Row " + (1 + i
) + " of data is empty");
3207 if (parsedData
[i
][0] === null ||
3208 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3209 isNaN(parsedData
[i
][0].getTime())) {
3210 console
.error("x value in row " + (1 + i
) + " is not a Date");
3213 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3217 // Some intelligent defaults for a numeric x-axis.
3218 /** @private (shut up, jsdoc!) */
3219 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3220 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3221 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3227 * Parses a DataTable object from gviz.
3228 * The data is expected to have a first column that is either a date or a
3229 * number. All subsequent columns must be numbers. If there is a clear mismatch
3230 * between this.xValueParser_ and the type of the first column, it will be
3231 * fixed. Fills out rawData_.
3232 * @param {!google.visualization.DataTable} data See above.
3235 Dygraph
.prototype.parseDataTable_
= function(data
) {
3236 var shortTextForAnnotationNum
= function(num
) {
3237 // converts [0-9]+ [A-Z][a-z]*
3238 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3239 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3240 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3241 num
= Math
.floor(num
/ 26);
3243 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3244 num
= Math
.floor((num
- 1) / 26);
3249 var cols
= data
.getNumberOfColumns();
3250 var rows
= data
.getNumberOfRows();
3252 var indepType
= data
.getColumnType(0);
3253 if (indepType
== 'date' || indepType
== 'datetime') {
3254 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3255 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
3256 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3257 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3258 } else if (indepType
== 'number') {
3259 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3260 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3261 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3262 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3264 console
.error("only 'date', 'datetime' and 'number' types are supported " +
3265 "for column 1 of DataTable input (Got '" + indepType
+ "')");
3269 // Array of the column indices which contain data (and not annotations).
3271 var annotationCols
= {}; // data index -> [annotation cols]
3272 var hasAnnotations
= false;
3274 for (i
= 1; i
< cols
; i
++) {
3275 var type
= data
.getColumnType(i
);
3276 if (type
== 'number') {
3278 } else if (type
== 'string' && this.getBooleanOption('displayAnnotations')) {
3279 // This is OK -- it's an annotation column.
3280 var dataIdx
= colIdx
[colIdx
.length
- 1];
3281 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3282 annotationCols
[dataIdx
] = [i
];
3284 annotationCols
[dataIdx
].push(i
);
3286 hasAnnotations
= true;
3288 console
.error("Only 'number' is supported as a dependent type with Gviz." +
3289 " 'string' is only supported if displayAnnotations is true");
3293 // Read column labels
3294 // TODO(danvk): add support back for errorBars
3295 var labels
= [data
.getColumnLabel(0)];
3296 for (i
= 0; i
< colIdx
.length
; i
++) {
3297 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3298 if (this.getBooleanOption("errorBars")) i
+= 1;
3300 this.attrs_
.labels
= labels
;
3301 cols
= labels
.length
;
3304 var outOfOrder
= false;
3305 var annotations
= [];
3306 for (i
= 0; i
< rows
; i
++) {
3308 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3309 data
.getValue(i
, 0) === null) {
3310 console
.warn("Ignoring row " + i
+
3311 " of DataTable because of undefined or null first column.");
3315 if (indepType
== 'date' || indepType
== 'datetime') {
3316 row
.push(data
.getValue(i
, 0).getTime());
3318 row
.push(data
.getValue(i
, 0));
3320 if (!this.getBooleanOption("errorBars")) {
3321 for (j
= 0; j
< colIdx
.length
; j
++) {
3322 var col
= colIdx
[j
];
3323 row
.push(data
.getValue(i
, col
));
3324 if (hasAnnotations
&&
3325 annotationCols
.hasOwnProperty(col
) &&
3326 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3328 ann
.series
= data
.getColumnLabel(col
);
3330 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3332 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3333 if (k
) ann
.text
+= "\n";
3334 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3336 annotations
.push(ann
);
3340 // Strip out infinities, which give dygraphs problems later on.
3341 for (j
= 0; j
< row
.length
; j
++) {
3342 if (!isFinite(row
[j
])) row
[j
] = null;
3345 for (j
= 0; j
< cols
- 1; j
++) {
3346 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3349 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3356 console
.warn("DataTable is out of order; order it correctly to speed loading.");
3357 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3359 this.rawData_
= ret
;
3361 if (annotations
.length
> 0) {
3362 this.setAnnotations(annotations
, true);
3364 this.attributes_
.reparseSeries();
3368 * Get the CSV data. If it's in a function, call that function. If it's in a
3369 * file, do an XMLHttpRequest to get it.
3372 Dygraph
.prototype.start_
= function() {
3373 var data
= this.file_
;
3375 // Functions can return references of all other types.
3376 if (typeof data
== 'function') {
3380 if (Dygraph
.isArrayLike(data
)) {
3381 this.rawData_
= this.parseArray_(data
);
3383 } else if (typeof data
== 'object' &&
3384 typeof data
.getColumnRange
== 'function') {
3385 // must be a DataTable from gviz.
3386 this.parseDataTable_(data
);
3388 } else if (typeof data
== 'string') {
3389 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3390 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3391 if (line_delimiter
) {
3392 this.loadedEvent_(data
);
3396 if (window
.XMLHttpRequest
) {
3397 // Firefox, Opera, IE7, and other browsers will use the native object
3398 req
= new XMLHttpRequest();
3400 // IE 5 and 6 will use the ActiveX control
3401 req
= new ActiveXObject("Microsoft.XMLHTTP");
3405 req
.onreadystatechange
= function () {
3406 if (req
.readyState
== 4) {
3407 if (req
.status
=== 200 || // Normal http
3408 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3409 caller
.loadedEvent_(req
.responseText
);
3414 req
.open("GET", data
, true);
3418 console
.error("Unknown data format: " + (typeof data
));
3423 * Changes various properties of the graph. These can include:
3425 * <li>file: changes the source data for the graph</li>
3426 * <li>errorBars: changes whether the data contains stddev</li>
3429 * There's a huge variety of options that can be passed to this method. For a
3430 * full list, see http://dygraphs.com/options.html.
3432 * @param {Object} input_attrs The new properties and values
3433 * @param {boolean} block_redraw Usually the chart is redrawn after every
3434 * call to updateOptions(). If you know better, you can pass true to
3435 * explicitly block the redraw. This can be useful for chaining
3436 * updateOptions() calls, avoiding the occasional infinite loop and
3437 * preventing redraws when it's not necessary (e.g. when updating a
3440 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3441 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3443 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
3444 var file
= input_attrs
.file
;
3445 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
3447 // TODO(danvk): this is a mess. Move these options into attr_.
3448 if ('rollPeriod' in attrs
) {
3449 this.rollPeriod_
= attrs
.rollPeriod
;
3451 if ('dateWindow' in attrs
) {
3452 this.dateWindow_
= attrs
.dateWindow
;
3453 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3454 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3457 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3458 this.zoomed_y_
= (attrs
.valueRange
!== null);
3461 // TODO(danvk): validate per-series options.
3466 // highlightCircleSize
3468 // Check if this set options will require new points.
3469 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3471 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3473 this.attributes_
.reparseSeries();
3477 if (!block_redraw
) this.start_();
3479 if (!block_redraw
) {
3480 if (requiresNewPoints
) {
3483 this.renderGraph_(false);
3490 * Returns a copy of the options with deprecated names converted into current
3491 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3492 * interested in that, they should save a copy before calling this.
3495 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3497 for (var k
in attrs
) {
3498 if (k
== 'file') continue;
3499 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3502 var set
= function(axis
, opt
, value
) {
3503 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3504 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3505 my_attrs
.axes
[axis
][opt
] = value
;
3507 var map
= function(opt
, axis
, new_opt
) {
3508 if (typeof(attrs
[opt
]) != 'undefined') {
3509 console
.warn("Option " + opt
+ " is deprecated. Use the " +
3510 new_opt
+ " option for the " + axis
+ " axis instead. " +
3511 "(e.g. { axes : { " + axis
+ " : { " + new_opt
+ " : ... } } } " +
3512 "(see http://dygraphs.com/per-axis.html for more information.");
3513 set(axis
, new_opt
, attrs
[opt
]);
3514 delete my_attrs
[opt
];
3518 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3519 map('xValueFormatter', 'x', 'valueFormatter');
3520 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3521 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3522 map('xTicker', 'x', 'ticker');
3523 map('yValueFormatter', 'y', 'valueFormatter');
3524 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3525 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3526 map('yTicker', 'y', 'ticker');
3527 map('drawXGrid', 'x', 'drawGrid');
3528 map('drawXAxis', 'x', 'drawAxis');
3529 map('drawYGrid', 'y', 'drawGrid');
3530 map('drawYAxis', 'y', 'drawAxis');
3535 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3536 * containing div (which has presumably changed size since the dygraph was
3537 * instantiated. If the width/height are specified, the div will be resized.
3539 * This is far more efficient than destroying and re-instantiating a
3540 * Dygraph, since it doesn't have to reparse the underlying data.
3542 * @param {number} width Width (in pixels)
3543 * @param {number} height Height (in pixels)
3545 Dygraph
.prototype.resize
= function(width
, height
) {
3546 if (this.resize_lock
) {
3549 this.resize_lock
= true;
3551 if ((width
=== null) != (height
=== null)) {
3552 console
.warn("Dygraph.resize() should be called with zero parameters or " +
3553 "two non-NULL parameters. Pretending it was zero.");
3554 width
= height
= null;
3557 var old_width
= this.width_
;
3558 var old_height
= this.height_
;
3561 this.maindiv_
.style
.width
= width
+ "px";
3562 this.maindiv_
.style
.height
= height
+ "px";
3563 this.width_
= width
;
3564 this.height_
= height
;
3566 this.width_
= this.maindiv_
.clientWidth
;
3567 this.height_
= this.maindiv_
.clientHeight
;
3570 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3571 // Resizing a canvas erases it, even when the size doesn't change, so
3572 // any resize needs to be followed by a redraw.
3573 this.resizeElements_();
3577 this.resize_lock
= false;
3581 * Adjusts the number of points in the rolling average. Updates the graph to
3582 * reflect the new averaging period.
3583 * @param {number} length Number of points over which to average the data.
3585 Dygraph
.prototype.adjustRoll
= function(length
) {
3586 this.rollPeriod_
= length
;
3591 * Returns a boolean array of visibility statuses.
3593 Dygraph
.prototype.visibility
= function() {
3594 // Do lazy-initialization, so that this happens after we know the number of
3596 if (!this.getOption("visibility")) {
3597 this.attrs_
.visibility
= [];
3599 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3600 while (this.getOption("visibility").length
< this.numColumns() - 1) {
3601 this.attrs_
.visibility
.push(true);
3603 return this.getOption("visibility");
3607 * Changes the visiblity of a series.
3609 * @param {number} num the series index
3610 * @param {boolean} value true or false, identifying the visibility.
3612 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3613 var x
= this.visibility();
3614 if (num
< 0 || num
>= x
.length
) {
3615 console
.warn("invalid series number in setVisibility: " + num
);
3623 * How large of an area will the dygraph render itself in?
3624 * This is used for testing.
3625 * @return A {width: w, height: h} object.
3628 Dygraph
.prototype.size
= function() {
3629 return { width
: this.width_
, height
: this.height_
};
3633 * Update the list of annotations and redraw the chart.
3634 * See dygraphs.com/annotations.html for more info on how to use annotations.
3635 * @param ann {Array} An array of annotation objects.
3636 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3638 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3639 // Only add the annotation CSS rule once we know it will be used.
3640 Dygraph
.addAnnotationRule();
3641 this.annotations_
= ann
;
3642 if (!this.layout_
) {
3643 console
.warn("Tried to setAnnotations before dygraph was ready. " +
3644 "Try setting them in a ready() block. See " +
3645 "dygraphs.com/tests/annotation.html");
3649 this.layout_
.setAnnotations(this.annotations_
);
3650 if (!suppressDraw
) {
3656 * Return the list of annotations.
3658 Dygraph
.prototype.annotations
= function() {
3659 return this.annotations_
;
3663 * Get the list of label names for this graph. The first column is the
3664 * x-axis, so the data series names start at index 1.
3666 * Returns null when labels have not yet been defined.
3668 Dygraph
.prototype.getLabels
= function() {
3669 var labels
= this.attr_("labels");
3670 return labels
? labels
.slice() : null;
3674 * Get the index of a series (column) given its name. The first column is the
3675 * x-axis, so the data series start with index 1.
3677 Dygraph
.prototype.indexFromSetName
= function(name
) {
3678 return this.setIndexByName_
[name
];
3682 * Trigger a callback when the dygraph has drawn itself and is ready to be
3683 * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3684 * data (i.e. a URL is passed as the data source) and the chart is drawn
3685 * asynchronously. If the chart has already drawn, the callback will fire
3688 * This is a good place to call setAnnotation().
3690 * @param {function(!Dygraph)} callback The callback to trigger when the chart
3693 Dygraph
.prototype.ready
= function(callback
) {
3694 if (this.is_initial_draw_
) {
3695 this.readyFns_
.push(callback
);
3703 * Adds a default style for the annotation CSS classes to the document. This is
3704 * only executed when annotations are actually used. It is designed to only be
3705 * called once -- all calls after the first will return immediately.
3707 Dygraph
.addAnnotationRule
= function() {
3708 // TODO(danvk): move this function into plugins/annotations.js
?
3709 if (Dygraph
.addedAnnotationCSS
) return;
3711 var rule
= "border: 1px solid black; " +
3712 "background-color: white; " +
3713 "text-align: center;";
3715 var styleSheetElement
= document
.createElement("style");
3716 styleSheetElement
.type
= "text/css";
3717 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3719 // Find the first style sheet that we can access.
3720 // We may not add a rule to a style sheet from another domain for security
3721 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3722 // adds its own style sheets from google.com.
3723 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3724 if (document
.styleSheets
[i
].disabled
) continue;
3725 var mysheet
= document
.styleSheets
[i
];
3727 if (mysheet
.insertRule
) { // Firefox
3728 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3729 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3730 } else if (mysheet
.addRule
) { // IE
3731 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3733 Dygraph
.addedAnnotationCSS
= true;
3736 // Was likely a security exception.
3740 console
.warn("Unable to add default annotation CSS rule; display may be off.");