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 // For "production" code, this gets set to false by uglifyjs.
47 if (typeof(DEBUG
) === 'undefined') DEBUG
=true;
49 var Dygraph
= (function() {
50 /*global DygraphLayout:false, DygraphCanvasRenderer:false, DygraphOptions:false, G_vmlCanvasManager:false,ActiveXObject:false */
54 * Creates an interactive, zoomable chart.
57 * @param {div | String} div A div or the id of a div into which to construct
59 * @param {String | Function} file A file containing CSV data or a function
60 * that returns this data. The most basic expected format for each line is
61 * "YYYY/MM/DD,val1,val2,...". For more information, see
62 * http://dygraphs.com/data.html.
63 * @param {Object} attrs Various other attributes, e.g. errorBars determines
64 * whether the input data contains error ranges. For a complete list of
65 * options, see http://dygraphs.com/options.html.
67 var Dygraph
= function(div
, data
, opts
, opt_fourth_param
) {
68 // These have to go above the "Hack for IE" in __init__ since .ready() can be
69 // called as soon as the constructor returns. Once support for OldIE is
70 // dropped, this can go down with the rest of the initializers.
71 this.is_initial_draw_
= true;
74 if (opt_fourth_param
!== undefined
) {
75 // Old versions of dygraphs took in the series labels as a constructor
76 // parameter. This doesn't make sense anymore, but it's easy to continue
77 // to support this usage.
78 console
.warn("Using deprecated four-argument dygraph constructor");
79 this.__old_init__(div
, data
, opts
, opt_fourth_param
);
81 this.__init__(div
, data
, opts
);
85 Dygraph
.NAME
= "Dygraph";
86 Dygraph
.VERSION
= "1.1.0";
87 Dygraph
.__repr__
= function() {
88 return "[" + Dygraph
.NAME
+ " " + Dygraph
.VERSION
+ "]";
92 * Returns information about the Dygraph class.
94 Dygraph
.toString
= function() {
95 return Dygraph
.__repr__();
98 // Various default values
99 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
100 Dygraph
.DEFAULT_WIDTH
= 480;
101 Dygraph
.DEFAULT_HEIGHT
= 320;
103 // For max 60 Hz. animation:
104 Dygraph
.ANIMATION_STEPS
= 12;
105 Dygraph
.ANIMATION_DURATION
= 200;
107 // Label constants for the labelsKMB and labelsKMG2 options.
108 // (i.e. '100000' -> '100K')
109 Dygraph
.KMB_LABELS
= [ 'K', 'M', 'B', 'T', 'Q' ];
110 Dygraph
.KMG2_BIG_LABELS
= [ 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y' ];
111 Dygraph
.KMG2_SMALL_LABELS
= [ 'm', 'u', 'n', 'p', 'f', 'a', 'z', 'y' ];
113 // These are defined before DEFAULT_ATTRS so that it can refer to them.
116 * Return a string version of a number. This respects the digitsAfterDecimal
117 * and maxNumberWidth options.
118 * @param {number} x The number to be formatted
119 * @param {Dygraph} opts An options view
121 Dygraph
.numberValueFormatter
= function(x
, opts
) {
122 var sigFigs
= opts('sigFigs');
124 if (sigFigs
!== null) {
125 // User has opted for a fixed number of significant figures.
126 return Dygraph
.floatFormat(x
, sigFigs
);
129 var digits
= opts('digitsAfterDecimal');
130 var maxNumberWidth
= opts('maxNumberWidth');
132 var kmb
= opts('labelsKMB');
133 var kmg2
= opts('labelsKMG2');
137 // switch to scientific notation if we underflow or overflow fixed display.
139 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
140 Math
.abs(x
) < Math
.pow(10, -digits
))) {
141 label
= x
.toExponential(digits
);
143 label
= '' + Dygraph
.round_(x
, digits
);
152 k_labels
= Dygraph
.KMB_LABELS
;
155 if (kmb
) console
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
157 k_labels
= Dygraph
.KMG2_BIG_LABELS
;
158 m_labels
= Dygraph
.KMG2_SMALL_LABELS
;
161 var absx
= Math
.abs(x
);
162 var n
= Dygraph
.pow(k
, k_labels
.length
);
163 for (var j
= k_labels
.length
- 1; j
>= 0; j
--, n
/= k
) {
165 label
= Dygraph
.round_(x
/ n
, digits
) + k_labels
[j
];
170 // TODO(danvk): clean up this logic. Why so different than kmb?
171 var x_parts
= String(x
.toExponential()).split('e-');
172 if (x_parts
.length
=== 2 && x_parts
[1] >= 3 && x_parts
[1] <= 24) {
173 if (x_parts
[1] % 3 > 0) {
174 label
= Dygraph
.round_(x_parts
[0] /
175 Dygraph
.pow(10, (x_parts
[1] % 3)),
178 label
= Number(x_parts
[0]).toFixed(2);
180 label
+= m_labels
[Math
.floor(x_parts
[1] / 3) - 1];
189 * variant for use as an axisLabelFormatter.
192 Dygraph
.numberAxisLabelFormatter
= function(x
, granularity
, opts
) {
193 return Dygraph
.numberValueFormatter(x
, opts
);
197 * @type {!Array.<string>}
201 Dygraph
.SHORT_MONTH_NAMES_
= ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
205 * Convert a JS date to a string appropriate to display on an axis that
206 * is displaying values at the stated granularity. This respects the
208 * @param {Date} date The date to format
209 * @param {number} granularity One of the Dygraph granularity constants
210 * @param {Dygraph} opts An options view
211 * @return {string} The date formatted as local time
214 Dygraph
.dateAxisLabelFormatter
= function(date
, granularity
, opts
) {
215 var utc
= opts('labelsUTC');
216 var accessors
= utc
? Dygraph
.DateAccessorsUTC
: Dygraph
.DateAccessorsLocal
;
218 var year
= accessors
.getFullYear(date
),
219 month
= accessors
.getMonth(date
),
220 day
= accessors
.getDate(date
),
221 hours
= accessors
.getHours(date
),
222 mins
= accessors
.getMinutes(date
),
223 secs
= accessors
.getSeconds(date
),
224 millis
= accessors
.getSeconds(date
);
226 if (granularity
>= Dygraph
.DECADAL
) {
228 } else if (granularity
>= Dygraph
.MONTHLY
) {
229 return Dygraph
.SHORT_MONTH_NAMES_
[month
] + ' ' + year
;
231 var frac
= hours
* 3600 + mins
* 60 + secs
+ 1e-3 * millis
;
232 if (frac
=== 0 || granularity
>= Dygraph
.DAILY
) {
233 // e.g. '21 Jan' (%d%b)
234 return Dygraph
.zeropad(day
) + ' ' + Dygraph
.SHORT_MONTH_NAMES_
[month
];
236 return Dygraph
.hmsString_(hours
, mins
, secs
);
240 // alias in case anyone is referencing the old method.
241 Dygraph
.dateAxisFormatter
= Dygraph
.dateAxisLabelFormatter
;
244 * Return a string version of a JS date for a value label. This respects the
246 * @param {Date} date The date to be formatted
247 * @param {Dygraph} opts An options view
250 Dygraph
.dateValueFormatter
= function(d
, opts
) {
251 return Dygraph
.dateString_(d
, opts('labelsUTC'));
255 * Standard plotters. These may be used by clients.
256 * Available plotters are:
257 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
258 * - Dygraph.Plotters.errorPlotter: draws error bars
259 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
261 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
262 * This causes all the lines to be drawn over all the fills/error bars.
264 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
267 // Default attribute values.
268 Dygraph
.DEFAULT_ATTRS
= {
269 highlightCircleSize
: 3,
270 highlightSeriesOpts
: null,
271 highlightSeriesBackgroundAlpha
: 0.5,
275 // TODO(danvk): move defaults from createStatusMessage_ here.
277 labelsSeparateLines
: false,
278 labelsShowZeroValues
: true,
281 showLabelsOnHighlight
: true,
283 digitsAfterDecimal
: 2,
288 strokeBorderWidth
: 0,
289 strokeBorderColor
: "white",
292 axisLabelFontSize
: 14,
296 xValueParser
: Dygraph
.dateParser
,
303 wilsonInterval
: true, // only relevant if fractions is true
307 connectSeparatedPoints
: false,
310 stackedGraphNaNFill
: 'all',
311 hideOverlayOnMouseOut
: true,
313 legend
: 'onmouseover',
318 drawAxesAtZero
: false,
320 // Sizes of the various chart labels.
327 axisLineColor
: "black",
330 axisLabelColor
: "black",
334 gridLineColor
: "rgb(128,128,128)",
336 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
337 animatedZooms
: false, // (for now)
339 // Range selector options
340 showRangeSelector
: false,
341 rangeSelectorHeight
: 40,
342 rangeSelectorPlotStrokeColor
: "#808FAB",
343 rangeSelectorPlotFillColor
: "#A7B1C4",
344 showInRangeSelector
: null,
346 // The ordering here ensures that central lines always appear above any
347 // fill bars/error bars
.
349 Dygraph
.Plotters
.fillPlotter
,
350 Dygraph
.Plotters
.errorPlotter
,
351 Dygraph
.Plotters
.linePlotter
361 axisLabelFormatter
: Dygraph
.dateAxisLabelFormatter
,
362 valueFormatter
: Dygraph
.dateValueFormatter
,
365 independentTicks
: true,
366 ticker
: null // will be set in dygraph-tickers.js
371 valueFormatter
: Dygraph
.numberValueFormatter
,
372 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
375 independentTicks
: true,
376 ticker
: null // will be set in dygraph-tickers.js
381 valueFormatter
: Dygraph
.numberValueFormatter
,
382 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
383 drawAxis
: true, // only applies when there are two axes of data.
385 independentTicks
: false,
386 ticker
: null // will be set in dygraph-tickers.js
391 // Directions for panning and zooming. Use bit operations when combined
392 // values are possible.
393 Dygraph
.HORIZONTAL
= 1;
394 Dygraph
.VERTICAL
= 2;
396 // Installed plugins, in order of precedence (most-general to most-specific).
397 // Plugins are installed after they are defined, in plugins/install.js
.
401 // Used for initializing annotation CSS rules only once.
402 Dygraph
.addedAnnotationCSS
= false;
404 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
405 // Labels is no longer a constructor parameter, since it's typically set
406 // directly from the data source. It also conains a name for the x-axis,
407 // which the previous constructor form did not.
408 if (labels
!== null) {
409 var new_labels
= ["Date"];
410 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
411 Dygraph
.update(attrs
, { 'labels': new_labels
});
413 this.__init__(div
, file
, attrs
);
417 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
418 * and context <canvas> inside of it. See the constructor for details.
420 * @param {Element} div the Element to render the graph into.
421 * @param {string | Function} file Source data
422 * @param {Object} attrs Miscellaneous other options
425 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
426 // Support two-argument constructor
427 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
429 attrs
= Dygraph
.mapLegacyOptions_(attrs
);
431 if (typeof(div
) == 'string') {
432 div
= document
.getElementById(div
);
436 console
.error("Constructing dygraph with a non-existent div!");
440 // Copy the important bits into the object
441 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
444 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
445 this.previousVerticalX_
= -1;
446 this.fractions_
= attrs
.fractions
|| false;
447 this.dateWindow_
= attrs
.dateWindow
|| null;
449 this.annotations_
= [];
451 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
452 this.zoomed_x_
= false;
453 this.zoomed_y_
= false;
455 // Clear the div. This ensure that, if multiple dygraphs are passed the same
456 // div, then only one will be drawn.
459 // For historical reasons, the 'width' and 'height' options trump all CSS
460 // rules _except_ for an explicit 'width' or 'height' on the div.
461 // As an added convenience, if the div has zero height (like <div></div> does
462 // without any styles), then we use a default height/width
.
463 if (div
.style
.width
=== '' && attrs
.width
) {
464 div
.style
.width
= attrs
.width
+ "px";
466 if (div
.style
.height
=== '' && attrs
.height
) {
467 div
.style
.height
= attrs
.height
+ "px";
469 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
470 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
471 if (div
.style
.width
=== '') {
472 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
475 // These will be zero if the dygraph's div is hidden. In that case,
476 // use the user-specified attributes if present. If not, use zero
477 // and assume the user will call resize to fix things later.
478 this.width_
= div
.clientWidth
|| attrs
.width
|| 0;
479 this.height_
= div
.clientHeight
|| attrs
.height
|| 0;
481 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
482 if (attrs
.stackedGraph
) {
483 attrs
.fillGraph
= true;
484 // TODO(nikhilk): Add any other stackedGraph checks here.
487 // DEPRECATION WARNING: All option processing should be moved from
488 // attrs_ and user_attrs_ to options_, which holds all this information.
490 // Dygraphs has many options, some of which interact with one another.
491 // To keep track of everything, we maintain two sets of options:
493 // this.user_attrs_ only options explicitly set by the user.
494 // this.attrs_ defaults, options derived from user_attrs_, data.
496 // Options are then accessed this.attr_('attr'), which first looks at
497 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
498 // defaults without overriding behavior that the user specifically asks for.
499 this.user_attrs_
= {};
500 Dygraph
.update(this.user_attrs_
, attrs
);
502 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
504 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
506 this.boundaryIds_
= [];
507 this.setIndexByName_
= {};
508 this.datasetIndex_
= [];
510 this.registeredEvents_
= [];
511 this.eventListeners_
= {};
513 this.attributes_
= new DygraphOptions(this);
515 // Create the containing DIV and other interactive elements
516 this.createInterface_();
520 var plugins
= Dygraph
.PLUGINS
.concat(this.getOption('plugins'));
521 for (var i
= 0; i
< plugins
.length
; i
++) {
522 // the plugins option may contain either plugin classes or instances.
523 // Plugin instances contain an activate method.
524 var Plugin
= plugins
[i
]; // either a constructor or an instance.
526 if (typeof(Plugin
.activate
) !== 'undefined') {
527 pluginInstance
= Plugin
;
529 pluginInstance
= new Plugin();
533 plugin
: pluginInstance
,
539 var handlers
= pluginInstance
.activate(this);
540 for (var eventName
in handlers
) {
541 if (!handlers
.hasOwnProperty(eventName
)) continue;
542 // TODO(danvk): validate eventName.
543 pluginDict
.events
[eventName
] = handlers
[eventName
];
546 this.plugins_
.push(pluginDict
);
549 // At this point, plugins can no longer register event handlers.
550 // Construct a map from event -> ordered list of [callback, plugin].
551 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
552 var plugin_dict
= this.plugins_
[i
];
553 for (var eventName
in plugin_dict
.events
) {
554 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
555 var callback
= plugin_dict
.events
[eventName
];
557 var pair
= [plugin_dict
.plugin
, callback
];
558 if (!(eventName
in this.eventListeners_
)) {
559 this.eventListeners_
[eventName
] = [pair
];
561 this.eventListeners_
[eventName
].push(pair
);
566 this.createDragInterface_();
572 * Triggers a cascade of events to the various plugins which are interested in them.
573 * Returns true if the "default behavior" should be prevented, i.e. if one
574 * of the event listeners called event.preventDefault().
577 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
578 if (!(name
in this.eventListeners_
)) return false;
580 // QUESTION: can we use objects & prototypes to speed this up?
584 defaultPrevented
: false,
585 preventDefault
: function() {
586 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
587 e
.defaultPrevented
= true;
589 propagationStopped
: false,
590 stopPropagation
: function() {
591 e
.propagationStopped
= true;
594 Dygraph
.update(e
, extra_props
);
596 var callback_plugin_pairs
= this.eventListeners_
[name
];
597 if (callback_plugin_pairs
) {
598 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
599 var plugin
= callback_plugin_pairs
[i
][0];
600 var callback
= callback_plugin_pairs
[i
][1];
601 callback
.call(plugin
, e
);
602 if (e
.propagationStopped
) break;
605 return e
.defaultPrevented
;
609 * Fetch a plugin instance of a particular class. Only for testing.
611 * @param {!Class} type The type of the plugin.
612 * @return {Object} Instance of the plugin, or null if there is none.
614 Dygraph
.prototype.getPluginInstance_
= function(type
) {
615 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
616 var p
= this.plugins_
[i
];
617 if (p
.plugin
instanceof type
) {
625 * Returns the zoomed status of the chart for one or both axes.
627 * Axis is an optional parameter. Can be set to 'x' or 'y'.
629 * The zoomed status for an axis is set whenever a user zooms using the mouse
630 * or when the dateWindow or valueRange are updated (unless the
631 * isZoomedIgnoreProgrammaticZoom option is also specified).
633 Dygraph
.prototype.isZoomed
= function(axis
) {
634 if (axis
=== null || axis
=== undefined
) {
635 return this.zoomed_x_
|| this.zoomed_y_
;
637 if (axis
=== 'x') return this.zoomed_x_
;
638 if (axis
=== 'y') return this.zoomed_y_
;
639 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
643 * Returns information about the Dygraph object, including its containing ID.
645 Dygraph
.prototype.toString
= function() {
646 var maindiv
= this.maindiv_
;
647 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
648 return "[Dygraph " + id
+ "]";
653 * Returns the value of an option. This may be set by the user (either in the
654 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
656 * @param {string} name The name of the option, e.g. 'rollPeriod'.
657 * @param {string} [seriesName] The name of the series to which the option
658 * will be applied. If no per-series value of this option is available, then
659 * the global value is returned. This is optional.
660 * @return { ... } The value of the option.
662 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
664 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
665 console
.error('Must include options reference JS for testing');
666 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
667 console
.error('Dygraphs is using property ' + name
+ ', which has no ' +
668 'entry in the Dygraphs.OPTIONS_REFERENCE listing.');
669 // Only log this error once.
670 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
673 return seriesName
? this.attributes_
.getForSeries(name
, seriesName
) : this.attributes_
.get(name
);
677 * Returns the current value for an option, as set in the constructor or via
678 * updateOptions. You may pass in an (optional) series name to get per-series
679 * values for the option.
681 * All values returned by this method should be considered immutable. If you
682 * modify them, there is no guarantee that the changes will be honored or that
683 * dygraphs will remain in a consistent state. If you want to modify an option,
684 * use updateOptions() instead.
686 * @param {string} name The name of the option (e.g. 'strokeWidth')
687 * @param {string=} opt_seriesName Series name to get per-series values.
688 * @return {*} The value of the option.
690 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
691 return this.attr_(name
, opt_seriesName
);
695 * Like getOption(), but specifically returns a number.
696 * This is a convenience function for working with the Closure Compiler.
697 * @param {string} name The name of the option (e.g. 'strokeWidth')
698 * @param {string=} opt_seriesName Series name to get per-series values.
699 * @return {number} The value of the option.
702 Dygraph
.prototype.getNumericOption
= function(name
, opt_seriesName
) {
703 return /** @type{number} */(this.getOption(name
, opt_seriesName
));
707 * Like getOption(), but specifically returns a string.
708 * This is a convenience function for working with the Closure Compiler.
709 * @param {string} name The name of the option (e.g. 'strokeWidth')
710 * @param {string=} opt_seriesName Series name to get per-series values.
711 * @return {string} The value of the option.
714 Dygraph
.prototype.getStringOption
= function(name
, opt_seriesName
) {
715 return /** @type{string} */(this.getOption(name
, opt_seriesName
));
719 * Like getOption(), but specifically returns a boolean.
720 * This is a convenience function for working with the Closure Compiler.
721 * @param {string} name The name of the option (e.g. 'strokeWidth')
722 * @param {string=} opt_seriesName Series name to get per-series values.
723 * @return {boolean} The value of the option.
726 Dygraph
.prototype.getBooleanOption
= function(name
, opt_seriesName
) {
727 return /** @type{boolean} */(this.getOption(name
, opt_seriesName
));
731 * Like getOption(), but specifically returns a function.
732 * This is a convenience function for working with the Closure Compiler.
733 * @param {string} name The name of the option (e.g. 'strokeWidth')
734 * @param {string=} opt_seriesName Series name to get per-series values.
735 * @return {function(...)} The value of the option.
738 Dygraph
.prototype.getFunctionOption
= function(name
, opt_seriesName
) {
739 return /** @type{function(...)} */(this.getOption(name
, opt_seriesName
));
742 Dygraph
.prototype.getOptionForAxis
= function(name
, axis
) {
743 return this.attributes_
.getForAxis(name
, axis
);
748 * @param {string} axis The name of the axis (i.e. 'x', 'y' or 'y2')
749 * @return { ... } A function mapping string -> option value
751 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
753 return function(opt
) {
754 var axis_opts
= self
.user_attrs_
.axes
;
755 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
756 return axis_opts
[axis
][opt
];
759 // I don't like that this is in a second spot.
760 if (axis
=== 'x' && opt
=== 'logscale') {
761 // return the default value.
762 // TODO(konigsberg): pull the default from a global default.
766 // user-specified attributes always trump defaults, even if they're less
768 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
769 return self
.user_attrs_
[opt
];
772 axis_opts
= self
.attrs_
.axes
;
773 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
774 return axis_opts
[axis
][opt
];
776 // check old-style axis options
777 // TODO(danvk): add a deprecation warning if either of these match.
778 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
779 return self
.axes_
[0][opt
];
780 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
781 return self
.axes_
[1][opt
];
783 return self
.attr_(opt
);
788 * Returns the current rolling period, as set by the user or an option.
789 * @return {number} The number of points in the rolling window
791 Dygraph
.prototype.rollPeriod
= function() {
792 return this.rollPeriod_
;
796 * Returns the currently-visible x-range. This can be affected by zooming,
797 * panning or a call to updateOptions.
798 * Returns a two-element array: [left, right].
799 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
801 Dygraph
.prototype.xAxisRange
= function() {
802 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
806 * Returns the lower- and upper-bound x-axis values of the
809 Dygraph
.prototype.xAxisExtremes
= function() {
810 var pad
= this.getNumericOption('xRangePad') / this.plotter_
.area
.w
;
811 if (this.numRows() === 0) {
812 return [0 - pad
, 1 + pad
];
814 var left
= this.rawData_
[0][0];
815 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
817 // Must keep this in sync with dygraph-layout _evaluateLimits()
818 var range
= right
- left
;
820 right
+= range
* pad
;
822 return [left
, right
];
826 * Returns the currently-visible y-range for an axis. This can be affected by
827 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
828 * called with no arguments, returns the range of the first axis.
829 * Returns a two-element array: [bottom, top].
831 Dygraph
.prototype.yAxisRange
= function(idx
) {
832 if (typeof(idx
) == "undefined") idx
= 0;
833 if (idx
< 0 || idx
>= this.axes_
.length
) {
836 var axis
= this.axes_
[idx
];
837 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
841 * Returns the currently-visible y-ranges for each axis. This can be affected by
842 * zooming, panning, calls to updateOptions, etc.
843 * Returns an array of [bottom, top] pairs, one for each y-axis.
845 Dygraph
.prototype.yAxisRanges
= function() {
847 for (var i
= 0; i
< this.axes_
.length
; i
++) {
848 ret
.push(this.yAxisRange(i
));
853 // TODO(danvk): use these functions throughout dygraphs.
855 * Convert from data coordinates to canvas/div X/Y coordinates.
856 * If specified, do this conversion for the coordinate system of a particular
857 * axis. Uses the first axis by default.
858 * Returns a two-element array: [X, Y]
860 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
861 * instead of toDomCoords(null, y, axis).
863 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
864 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
868 * Convert from data x coordinates to canvas/div X coordinate.
869 * If specified, do this conversion for the coordinate system of a particular
871 * Returns a single value or null if x is null.
873 Dygraph
.prototype.toDomXCoord
= function(x
) {
878 var area
= this.plotter_
.area
;
879 var xRange
= this.xAxisRange();
880 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
884 * Convert from data x coordinates to canvas/div Y coordinate and optional
885 * axis. Uses the first axis by default.
887 * returns a single value or null if y is null.
889 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
890 var pct
= this.toPercentYCoord(y
, axis
);
895 var area
= this.plotter_
.area
;
896 return area
.y
+ pct
* area
.h
;
900 * Convert from canvas/div coords to data coordinates.
901 * If specified, do this conversion for the coordinate system of a particular
902 * axis. Uses the first axis by default.
903 * Returns a two-element array: [X, Y].
905 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
906 * instead of toDataCoords(null, y, axis).
908 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
909 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
913 * Convert from canvas/div x coordinate to data coordinate.
915 * If x is null, this returns null.
917 Dygraph
.prototype.toDataXCoord
= function(x
) {
922 var area
= this.plotter_
.area
;
923 var xRange
= this.xAxisRange();
925 if (!this.attributes_
.getForAxis("logscale", 'x')) {
926 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
928 // TODO: remove duplicate code?
929 // Computing the inverse of toDomCoord.
930 var pct
= (x
- area
.x
) / area
.w
;
932 // Computing the inverse of toPercentXCoord. The function was arrived at with
933 // the following steps:
935 // Original calcuation:
936 // pct = (log(x) - log(xRange[0])) / (log(xRange
[1]) - log(xRange
[0])));
938 // Multiply both sides by the right-side demoninator.
939 // pct * (log(xRange[1] - log(xRange[0]))) = log(x) - log(xRange[0])
941 // add log(xRange[0]) to both sides
942 // log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])) = log(x);
944 // Swap both sides of the equation,
945 // log(x) = log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0]))
947 // Use both sides as the exponent in 10^exp and we're done.
948 // x = 10 ^ (log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])))
949 var logr0
= Dygraph
.log10(xRange
[0]);
950 var logr1
= Dygraph
.log10(xRange
[1]);
951 var exponent
= logr0
+ (pct
* (logr1
- logr0
));
952 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
958 * Convert from canvas/div y coord to value.
960 * If y is null, this returns null.
961 * if axis is null, this uses the first axis.
963 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
968 var area
= this.plotter_
.area
;
969 var yRange
= this.yAxisRange(axis
);
971 if (typeof(axis
) == "undefined") axis
= 0;
972 if (!this.attributes_
.getForAxis("logscale", axis
)) {
973 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
975 // Computing the inverse of toDomCoord.
976 var pct
= (y
- area
.y
) / area
.h
;
978 // Computing the inverse of toPercentYCoord. The function was arrived at with
979 // the following steps:
981 // Original calcuation:
982 // pct = (log(yRange[1]) - log(y)) / (log(yRange
[1]) - log(yRange
[0]));
984 // Multiply both sides by the right-side demoninator.
985 // pct * (log(yRange[1]) - log(yRange[0])) = log(yRange[1]) - log(y);
987 // subtract log(yRange[1]) from both sides.
988 // (pct * (log(yRange[1]) - log(yRange[0]))) - log(yRange[1]) = -log(y);
990 // and multiply both sides by -1.
991 // log(yRange[1]) - (pct * (logr1 - log(yRange[0])) = log(y);
993 // Swap both sides of the equation,
994 // log(y) = log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0])));
996 // Use both sides as the exponent in 10^exp and we're done.
997 // y = 10 ^ (log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0]))));
998 var logr0
= Dygraph
.log10(yRange
[0]);
999 var logr1
= Dygraph
.log10(yRange
[1]);
1000 var exponent
= logr1
- (pct
* (logr1
- logr0
));
1001 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
1007 * Converts a y for an axis to a percentage from the top to the
1008 * bottom of the drawing area.
1010 * If the coordinate represents a value visible on the canvas, then
1011 * the value will be between 0 and 1, where 0 is the top of the canvas.
1012 * However, this method will return values outside the range, as
1013 * values can fall outside the canvas.
1015 * If y is null, this returns null.
1016 * if axis is null, this uses the first axis.
1018 * @param {number} y The data y-coordinate.
1019 * @param {number} [axis] The axis number on which the data coordinate lives.
1020 * @return {number} A fraction in [0, 1] where 0 = the top edge.
1022 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
1026 if (typeof(axis
) == "undefined") axis
= 0;
1028 var yRange
= this.yAxisRange(axis
);
1031 var logscale
= this.attributes_
.getForAxis("logscale", axis
);
1033 var logr0
= Dygraph
.log10(yRange
[0]);
1034 var logr1
= Dygraph
.log10(yRange
[1]);
1035 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- logr0
);
1037 // yRange[1] - y is unit distance from the bottom.
1038 // yRange[1] - yRange[0] is the scale of the range.
1039 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
1040 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
1046 * Converts an x value to a percentage from the left to the right of
1049 * If the coordinate represents a value visible on the canvas, then
1050 * the value will be between 0 and 1, where 0 is the left of the canvas.
1051 * However, this method will return values outside the range, as
1052 * values can fall outside the canvas.
1054 * If x is null, this returns null.
1055 * @param {number} x The data x-coordinate.
1056 * @return {number} A fraction in [0, 1] where 0 = the left edge.
1058 Dygraph
.prototype.toPercentXCoord
= function(x
) {
1063 var xRange
= this.xAxisRange();
1065 var logscale
= this.attributes_
.getForAxis("logscale", 'x') ;
1066 if (logscale
=== true) { // logscale can be null so we test for true explicitly.
1067 var logr0
= Dygraph
.log10(xRange
[0]);
1068 var logr1
= Dygraph
.log10(xRange
[1]);
1069 pct
= (Dygraph
.log10(x
) - logr0
) / (logr1
- logr0
);
1071 // x - xRange[0] is unit distance from the left.
1072 // xRange[1] - xRange[0] is the scale of the range.
1073 // The full expression below is the % from the left.
1074 pct
= (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
1080 * Returns the number of columns (including the independent variable).
1081 * @return {number} The number of columns.
1083 Dygraph
.prototype.numColumns
= function() {
1084 if (!this.rawData_
) return 0;
1085 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
1089 * Returns the number of rows (excluding any header/label row).
1090 * @return {number} The number of rows, less any header.
1092 Dygraph
.prototype.numRows
= function() {
1093 if (!this.rawData_
) return 0;
1094 return this.rawData_
.length
;
1098 * Returns the value in the given row and column. If the row and column exceed
1099 * the bounds on the data, returns null. Also returns null if the value is
1101 * @param {number} row The row number of the data (0-based). Row 0 is the
1102 * first row of data, not a header row.
1103 * @param {number} col The column number of the data (0-based)
1104 * @return {number} The value in the specified cell or null if the row/col
1105 * were out of range.
1107 Dygraph
.prototype.getValue
= function(row
, col
) {
1108 if (row
< 0 || row
> this.rawData_
.length
) return null;
1109 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
1111 return this.rawData_
[row
][col
];
1115 * Generates interface elements for the Dygraph: a containing div, a div to
1116 * display the current point, and a textbox to adjust the rolling average
1117 * period. Also creates the Renderer/Layout elements.
1120 Dygraph
.prototype.createInterface_
= function() {
1121 // Create the all-enclosing graph div
1122 var enclosing
= this.maindiv_
;
1124 this.graphDiv
= document
.createElement("div");
1126 // TODO(danvk): any other styles that are useful to set here?
1127 this.graphDiv
.style
.textAlign
= 'left'; // This is a CSS "reset"
1128 this.graphDiv
.style
.position
= 'relative';
1129 enclosing
.appendChild(this.graphDiv
);
1131 // Create the canvas for interactive parts of the chart.
1132 this.canvas_
= Dygraph
.createCanvas();
1133 this.canvas_
.style
.position
= "absolute";
1135 // ... and for static parts of the chart.
1136 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
1138 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
1139 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
1141 this.resizeElements_();
1143 // The interactive parts of the graph are drawn on top of the chart.
1144 this.graphDiv
.appendChild(this.hidden_
);
1145 this.graphDiv
.appendChild(this.canvas_
);
1146 this.mouseEventElement_
= this.createMouseEventElement_();
1148 // Create the grapher
1149 this.layout_
= new DygraphLayout(this);
1153 this.mouseMoveHandler_
= function(e
) {
1154 dygraph
.mouseMove_(e
);
1157 this.mouseOutHandler_
= function(e
) {
1158 // The mouse has left the chart if:
1159 // 1. e.target is inside the chart
1160 // 2. e.relatedTarget is outside the chart
1161 var target
= e
.target
|| e
.fromElement
;
1162 var relatedTarget
= e
.relatedTarget
|| e
.toElement
;
1163 if (Dygraph
.isNodeContainedBy(target
, dygraph
.graphDiv
) &&
1164 !Dygraph
.isNodeContainedBy(relatedTarget
, dygraph
.graphDiv
)) {
1165 dygraph
.mouseOut_(e
);
1169 this.addAndTrackEvent(window
, 'mouseout', this.mouseOutHandler_
);
1170 this.addAndTrackEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1172 // Don't recreate and register the resize handler on subsequent calls.
1173 // This happens when the graph is resized.
1174 if (!this.resizeHandler_
) {
1175 this.resizeHandler_
= function(e
) {
1179 // Update when the window is resized.
1180 // TODO(danvk): drop frames depending on complexity of the chart.
1181 this.addAndTrackEvent(window
, 'resize', this.resizeHandler_
);
1185 Dygraph
.prototype.resizeElements_
= function() {
1186 this.graphDiv
.style
.width
= this.width_
+ "px";
1187 this.graphDiv
.style
.height
= this.height_
+ "px";
1189 var canvasScale
= Dygraph
.getContextPixelRatio(this.canvas_ctx_
);
1190 this.canvas_
.width
= this.width_
* canvasScale
;
1191 this.canvas_
.height
= this.height_
* canvasScale
;
1192 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
1193 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
1194 if (canvasScale
!== 1) {
1195 this.canvas_ctx_
.scale(canvasScale
, canvasScale
);
1198 var hiddenScale
= Dygraph
.getContextPixelRatio(this.hidden_ctx_
);
1199 this.hidden_
.width
= this.width_
* hiddenScale
;
1200 this.hidden_
.height
= this.height_
* hiddenScale
;
1201 this.hidden_
.style
.width
= this.width_
+ "px"; // for IE
1202 this.hidden_
.style
.height
= this.height_
+ "px"; // for IE
1203 if (hiddenScale
!== 1) {
1204 this.hidden_ctx_
.scale(hiddenScale
, hiddenScale
);
1209 * Detach DOM elements in the dygraph and null out all data references.
1210 * Calling this when you're done with a dygraph can dramatically reduce memory
1211 * usage. See, e.g., the tests/perf.html example.
1213 Dygraph
.prototype.destroy
= function() {
1214 this.canvas_ctx_
.restore();
1215 this.hidden_ctx_
.restore();
1217 // Destroy any plugins, in the reverse order that they were registered.
1218 for (var i
= this.plugins_
.length
- 1; i
>= 0; i
--) {
1219 var p
= this.plugins_
.pop();
1220 if (p
.plugin
.destroy
) p
.plugin
.destroy();
1223 var removeRecursive
= function(node
) {
1224 while (node
.hasChildNodes()) {
1225 removeRecursive(node
.firstChild
);
1226 node
.removeChild(node
.firstChild
);
1230 this.removeTrackedEvents_();
1232 // remove mouse event handlers (This may not be necessary anymore)
1233 Dygraph
.removeEvent(window
, 'mouseout', this.mouseOutHandler_
);
1234 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1236 // remove window handlers
1237 Dygraph
.removeEvent(window
,'resize', this.resizeHandler_
);
1238 this.resizeHandler_
= null;
1240 removeRecursive(this.maindiv_
);
1242 var nullOut
= function(obj
) {
1243 for (var n
in obj
) {
1244 if (typeof(obj
[n
]) === 'object') {
1249 // These may not all be necessary, but it can't hurt...
1250 nullOut(this.layout_
);
1251 nullOut(this.plotter_
);
1256 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1257 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1258 * or the zoom rectangles) is done on this.canvas_.
1259 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1260 * @return {Object} The newly-created canvas
1263 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1264 var h
= Dygraph
.createCanvas();
1265 h
.style
.position
= "absolute";
1266 // TODO(danvk): h should be offset from canvas. canvas needs to include
1267 // some extra area to make it easier to zoom in on the far left and far
1268 // right. h needs to be precisely the plot area, so that clipping occurs.
1269 h
.style
.top
= canvas
.style
.top
;
1270 h
.style
.left
= canvas
.style
.left
;
1271 h
.width
= this.width_
;
1272 h
.height
= this.height_
;
1273 h
.style
.width
= this.width_
+ "px"; // for IE
1274 h
.style
.height
= this.height_
+ "px"; // for IE
1279 * Creates an overlay element used to handle mouse events.
1280 * @return {Object} The mouse event element.
1283 Dygraph
.prototype.createMouseEventElement_
= function() {
1284 return this.canvas_
;
1288 * Generate a set of distinct colors for the data series. This is done with a
1289 * color wheel. Saturation/Value are customizable, and the hue is
1290 * equally-spaced around the color wheel. If a custom set of colors is
1291 * specified, that is used instead.
1294 Dygraph
.prototype.setColors_
= function() {
1295 var labels
= this.getLabels();
1296 var num
= labels
.length
- 1;
1298 this.colorsMap_
= {};
1300 // These are used for when no custom colors are specified.
1301 var sat
= this.getNumericOption('colorSaturation') || 1.0;
1302 var val
= this.getNumericOption('colorValue') || 0.5;
1303 var half
= Math
.ceil(num
/ 2);
1305 var colors
= this.getOption('colors');
1306 var visibility
= this.visibility();
1307 for (var i
= 0; i
< num
; i
++) {
1308 if (!visibility
[i
]) {
1311 var label
= labels
[i
+ 1];
1312 var colorStr
= this.attributes_
.getForSeries('color', label
);
1315 colorStr
= colors
[i
% colors
.length
];
1317 // alternate colors for high contrast.
1318 var idx
= i
% 2 ? (half
+ (i
+ 1)/ 2) : Math.ceil((i + 1) / 2);
1319 var hue
= (1.0 * idx
/ (1 + num
));
1320 colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1323 this.colors_
.push(colorStr
);
1324 this.colorsMap_
[label
] = colorStr
;
1329 * Return the list of colors. This is either the list of colors passed in the
1330 * attributes or the autogenerated list of rgb(r,g,b) strings.
1331 * This does not return colors for invisible series.
1332 * @return {Array.<string>} The list of colors.
1334 Dygraph
.prototype.getColors
= function() {
1335 return this.colors_
;
1339 * Returns a few attributes of a series, i.e. its color, its visibility, which
1340 * axis it's assigned to, and its column in the original data.
1341 * Returns null if the series does not exist.
1342 * Otherwise, returns an object with column, visibility, color and axis properties.
1343 * The "axis" property will be set to 1 for y1 and 2 for y2.
1344 * The "column" property can be fed back into getValue(row, column) to get
1345 * values for this series.
1347 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1349 var labels
= this.getLabels();
1350 for (var i
= 1; i
< labels
.length
; i
++) {
1351 if (labels
[i
] == series_name
) {
1356 if (idx
== -1) return null;
1361 visible
: this.visibility()[idx
- 1],
1362 color
: this.colorsMap_
[series_name
],
1363 axis
: 1 + this.attributes_
.axisForSeries(series_name
)
1368 * Create the text box to adjust the averaging period
1371 Dygraph
.prototype.createRollInterface_
= function() {
1372 // Create a roller if one doesn't exist already.
1373 if (!this.roller_
) {
1374 this.roller_
= document
.createElement("input");
1375 this.roller_
.type
= "text";
1376 this.roller_
.style
.display
= "none";
1377 this.graphDiv
.appendChild(this.roller_
);
1380 var display
= this.getBooleanOption('showRoller') ? 'block' : 'none';
1382 var area
= this.plotter_
.area
;
1383 var textAttr
= { "position": "absolute",
1385 "top": (area
.y
+ area
.h
- 25) + "px",
1386 "left": (area
.x
+ 1) + "px",
1389 this.roller_
.size
= "2";
1390 this.roller_
.value
= this.rollPeriod_
;
1391 for (var name
in textAttr
) {
1392 if (textAttr
.hasOwnProperty(name
)) {
1393 this.roller_
.style
[name
] = textAttr
[name
];
1398 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1402 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1406 Dygraph
.prototype.createDragInterface_
= function() {
1408 // Tracks whether the mouse is down right now
1410 isPanning
: false, // is this drag part of a pan?
1411 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1412 dragStartX
: null, // pixel coordinates
1413 dragStartY
: null, // pixel coordinates
1414 dragEndX
: null, // pixel coordinates
1415 dragEndY
: null, // pixel coordinates
1416 dragDirection
: null,
1417 prevEndX
: null, // pixel coordinates
1418 prevEndY
: null, // pixel coordinates
1419 prevDragDirection
: null,
1420 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1422 // The value on the left side of the graph when a pan operation starts.
1423 initialLeftmostDate
: null,
1425 // The number of units each pixel spans. (This won't be valid for log
1427 xUnitsPerPixel
: null,
1429 // TODO(danvk): update this comment
1430 // The range in second/value units that the viewport encompasses during a
1431 // panning operation.
1434 // Top-left corner of the canvas, in DOM coords
1435 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1439 // Values for use with panEdgeFraction, which limit how far outside the
1440 // graph's data boundaries it can be panned.
1441 boundedDates
: null, // [minDate, maxDate]
1442 boundedValues
: null, // [[minValue, maxValue] ...]
1444 // We cover iframes during mouse interactions. See comments in
1445 // dygraph-utils.js for more info on why this is a good idea.
1446 tarp
: new Dygraph
.IFrameTarp(),
1448 // contextB is the same thing as this context object but renamed.
1449 initializeMouseDown
: function(event
, g
, contextB
) {
1450 // prevents mouse drags from selecting page text.
1451 if (event
.preventDefault
) {
1452 event
.preventDefault(); // Firefox, Chrome, etc.
1454 event
.returnValue
= false; // IE
1455 event
.cancelBubble
= true;
1458 var canvasPos
= Dygraph
.findPos(g
.canvas_
);
1459 contextB
.px
= canvasPos
.x
;
1460 contextB
.py
= canvasPos
.y
;
1461 contextB
.dragStartX
= Dygraph
.dragGetX_(event
, contextB
);
1462 contextB
.dragStartY
= Dygraph
.dragGetY_(event
, contextB
);
1463 contextB
.cancelNextDblclick
= false;
1464 contextB
.tarp
.cover();
1466 destroy
: function() {
1468 if (context
.isZooming
|| context
.isPanning
) {
1469 context
.isZooming
= false;
1470 context
.dragStartX
= null;
1471 context
.dragStartY
= null;
1474 if (context
.isPanning
) {
1475 context
.isPanning
= false;
1476 context
.draggingDate
= null;
1477 context
.dateRange
= null;
1478 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1479 delete self
.axes_
[i
].draggingValue
;
1480 delete self
.axes_
[i
].dragValueRange
;
1484 context
.tarp
.uncover();
1488 var interactionModel
= this.getOption("interactionModel");
1490 // Self is the graph.
1493 // Function that binds the graph and context to the handler.
1494 var bindHandler
= function(handler
) {
1495 return function(event
) {
1496 handler(event
, self
, context
);
1500 for (var eventName
in interactionModel
) {
1501 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1502 this.addAndTrackEvent(this.mouseEventElement_
, eventName
,
1503 bindHandler(interactionModel
[eventName
]));
1506 // If the user releases the mouse button during a drag, but not over the
1507 // canvas, then it doesn't count as a zooming action.
1508 if (!interactionModel
.willDestroyContextMyself
) {
1509 var mouseUpHandler
= function(event
) {
1513 this.addAndTrackEvent(document
, 'mouseup', mouseUpHandler
);
1518 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1519 * up any previous zoom rectangles that were drawn. This could be optimized to
1520 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1523 * @param {number} direction the direction of the zoom rectangle. Acceptable
1524 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1525 * @param {number} startX The X position where the drag started, in canvas
1527 * @param {number} endX The current X position of the drag, in canvas coords.
1528 * @param {number} startY The Y position where the drag started, in canvas
1530 * @param {number} endY The current Y position of the drag, in canvas coords.
1531 * @param {number} prevDirection the value of direction on the previous call to
1532 * this function. Used to avoid excess redrawing
1533 * @param {number} prevEndX The value of endX on the previous call to this
1534 * function. Used to avoid excess redrawing
1535 * @param {number} prevEndY The value of endY on the previous call to this
1536 * function. Used to avoid excess redrawing
1539 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1540 endY
, prevDirection
, prevEndX
,
1542 var ctx
= this.canvas_ctx_
;
1544 // Clean up from the previous rect if necessary
1545 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1546 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1547 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1548 } else if (prevDirection
== Dygraph
.VERTICAL
) {
1549 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1550 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1553 // Draw a light-grey rectangle to show the new viewing area
1554 if (direction
== Dygraph
.HORIZONTAL
) {
1555 if (endX
&& startX
) {
1556 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1557 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1558 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1560 } else if (direction
== Dygraph
.VERTICAL
) {
1561 if (endY
&& startY
) {
1562 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1563 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1564 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1570 * Clear the zoom rectangle (and perform no zoom).
1573 Dygraph
.prototype.clearZoomRect_
= function() {
1574 this.currentZoomRectArgs_
= null;
1575 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1579 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1580 * the canvas. The exact zoom window may be slightly larger if there are no data
1581 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1582 * which accepts dates that match the raw data. This function redraws the graph.
1584 * @param {number} lowX The leftmost pixel value that should be visible.
1585 * @param {number} highX The rightmost pixel value that should be visible.
1588 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1589 this.currentZoomRectArgs_
= null;
1590 // Find the earliest and latest dates contained in this canvasx range.
1591 // Convert the call to date ranges of the raw data.
1592 var minDate
= this.toDataXCoord(lowX
);
1593 var maxDate
= this.toDataXCoord(highX
);
1594 this.doZoomXDates_(minDate
, maxDate
);
1598 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1599 * method with doZoomX which accepts pixel coordinates. This function redraws
1602 * @param {number} minDate The minimum date that should be visible.
1603 * @param {number} maxDate The maximum date that should be visible.
1606 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1607 // TODO(danvk): when xAxisRange is null (i.e. "fit to data", the animation
1608 // can produce strange effects. Rather than the x-axis transitioning slowly
1609 // between values, it can jerk around.)
1610 var old_window
= this.xAxisRange();
1611 var new_window
= [minDate
, maxDate
];
1612 this.zoomed_x_
= true;
1614 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1615 if (that
.getFunctionOption("zoomCallback")) {
1616 that
.getFunctionOption("zoomCallback").call(that
,
1617 minDate
, maxDate
, that
.yAxisRanges());
1623 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1624 * the canvas. This function redraws the graph.
1626 * @param {number} lowY The topmost pixel value that should be visible.
1627 * @param {number} highY The lowest pixel value that should be visible.
1630 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1631 this.currentZoomRectArgs_
= null;
1632 // Find the highest and lowest values in pixel range for each axis.
1633 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1634 // This is because pixels increase as you go down on the screen, whereas data
1635 // coordinates increase as you go up the screen.
1636 var oldValueRanges
= this.yAxisRanges();
1637 var newValueRanges
= [];
1638 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1639 var hi
= this.toDataYCoord(lowY
, i
);
1640 var low
= this.toDataYCoord(highY
, i
);
1641 newValueRanges
.push([low
, hi
]);
1644 this.zoomed_y_
= true;
1646 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1647 if (that
.getFunctionOption("zoomCallback")) {
1648 var xRange
= that
.xAxisRange();
1649 that
.getFunctionOption("zoomCallback").call(that
,
1650 xRange
[0], xRange
[1], that
.yAxisRanges());
1656 * Transition function to use in animations. Returns values between 0.0
1657 * (totally old values) and 1.0 (totally new values) for each frame.
1660 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1662 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1666 * Reset the zoom to the original view coordinates. This is the same as
1667 * double-clicking on the graph.
1669 Dygraph
.prototype.resetZoom
= function() {
1670 var dirty
= false, dirtyX
= false, dirtyY
= false;
1671 if (this.dateWindow_
!== null) {
1676 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1677 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1683 // Clear any selection, since it's likely to be drawn in the wrong place.
1684 this.clearSelection();
1687 this.zoomed_x_
= false;
1688 this.zoomed_y_
= false;
1690 var minDate
= this.rawData_
[0][0];
1691 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1693 // With only one frame, don't bother calculating extreme ranges.
1694 // TODO(danvk): merge this block w/ the code below
.
1695 if (!this.getBooleanOption("animatedZooms")) {
1696 this.dateWindow_
= null;
1697 for (i
= 0; i
< this.axes_
.length
; i
++) {
1698 if (this.axes_
[i
].valueWindow
!== null) {
1699 delete this.axes_
[i
].valueWindow
;
1703 if (this.getFunctionOption("zoomCallback")) {
1704 this.getFunctionOption("zoomCallback").call(this,
1705 minDate
, maxDate
, this.yAxisRanges());
1710 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1712 oldWindow
= this.xAxisRange();
1713 newWindow
= [minDate
, maxDate
];
1717 oldValueRanges
= this.yAxisRanges();
1718 // TODO(danvk): this is pretty inefficient
1719 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1720 var extremes
= packed
.extremes
;
1722 // this has the side-effect of modifying this.axes_.
1723 // this doesn't make much sense in this context, but it's convenient (we
1724 // need this.axes_[*].extremeValues) and not harmful since we'll be
1725 // calling drawGraph_ shortly, which clobbers these values.
1726 this.computeYAxisRanges_(extremes
);
1728 newValueRanges
= [];
1729 for (i
= 0; i
< this.axes_
.length
; i
++) {
1730 var axis
= this.axes_
[i
];
1731 newValueRanges
.push((axis
.valueRange
!== null &&
1732 axis
.valueRange
!== undefined
) ?
1733 axis
.valueRange
: axis
.extremeRange
);
1738 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1740 that
.dateWindow_
= null;
1741 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1742 if (that
.axes_
[i
].valueWindow
!== null) {
1743 delete that
.axes_
[i
].valueWindow
;
1746 if (that
.getFunctionOption("zoomCallback")) {
1747 that
.getFunctionOption("zoomCallback").call(that
,
1748 minDate
, maxDate
, that
.yAxisRanges());
1755 * Combined animation logic for all zoom functions.
1756 * either the x parameters or y parameters may be null.
1759 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1760 var steps
= this.getBooleanOption("animatedZooms") ?
1761 Dygraph
.ANIMATION_STEPS
: 1;
1764 var valueRanges
= [];
1767 if (oldXRange
!== null && newXRange
!== null) {
1768 for (step
= 1; step
<= steps
; step
++) {
1769 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1770 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1771 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1775 if (oldYRanges
!== null && newYRanges
!== null) {
1776 for (step
= 1; step
<= steps
; step
++) {
1777 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1779 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1780 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1781 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1783 valueRanges
[step
-1] = thisRange
;
1788 Dygraph
.repeatAndCleanup(function(step
) {
1789 if (valueRanges
.length
) {
1790 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1791 var w
= valueRanges
[step
][i
];
1792 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1795 if (windows
.length
) {
1796 that
.dateWindow_
= windows
[step
];
1799 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1803 * Get the current graph's area object.
1805 * Returns: {x, y, w, h}
1807 Dygraph
.prototype.getArea
= function() {
1808 return this.plotter_
.area
;
1812 * Convert a mouse event to DOM coordinates relative to the graph origin.
1814 * Returns a two-element array: [X, Y].
1816 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1817 if (event
.offsetX
&& event
.offsetY
) {
1818 return [ event
.offsetX
, event
.offsetY
];
1820 var eventElementPos
= Dygraph
.findPos(this.mouseEventElement_
);
1821 var canvasx
= Dygraph
.pageX(event
) - eventElementPos
.x
;
1822 var canvasy
= Dygraph
.pageY(event
) - eventElementPos
.y
;
1823 return [canvasx
, canvasy
];
1828 * Given a canvas X coordinate, find the closest row.
1829 * @param {number} domX graph-relative DOM X coordinate
1830 * Returns {number} row number.
1833 Dygraph
.prototype.findClosestRow
= function(domX
) {
1834 var minDistX
= Infinity
;
1835 var closestRow
= -1;
1836 var sets
= this.layout_
.points
;
1837 for (var i
= 0; i
< sets
.length
; i
++) {
1838 var points
= sets
[i
];
1839 var len
= points
.length
;
1840 for (var j
= 0; j
< len
; j
++) {
1841 var point
= points
[j
];
1842 if (!Dygraph
.isValidPoint(point
, true)) continue;
1843 var dist
= Math
.abs(point
.canvasx
- domX
);
1844 if (dist
< minDistX
) {
1846 closestRow
= point
.idx
;
1855 * Given canvas X,Y coordinates, find the closest point.
1857 * This finds the individual data point across all visible series
1858 * that's closest to the supplied DOM coordinates using the standard
1859 * Euclidean X,Y distance.
1861 * @param {number} domX graph-relative DOM X coordinate
1862 * @param {number} domY graph-relative DOM Y coordinate
1863 * Returns: {row, seriesName, point}
1866 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1867 var minDist
= Infinity
;
1868 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
, closestRow
;
1869 for ( var setIdx
= this.layout_
.points
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1870 var points
= this.layout_
.points
[setIdx
];
1871 for (var i
= 0; i
< points
.length
; ++i
) {
1873 if (!Dygraph
.isValidPoint(point
)) continue;
1874 dx
= point
.canvasx
- domX
;
1875 dy
= point
.canvasy
- domY
;
1876 dist
= dx
* dx
+ dy
* dy
;
1877 if (dist
< minDist
) {
1879 closestPoint
= point
;
1880 closestSeries
= setIdx
;
1881 closestRow
= point
.idx
;
1885 var name
= this.layout_
.setNames
[closestSeries
];
1894 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1896 * This first finds the X data point closest to the supplied DOM X coordinate,
1897 * then finds the series which puts the Y coordinate on top of its filled area,
1898 * using linear interpolation between adjacent point pairs.
1900 * @param {number} domX graph-relative DOM X coordinate
1901 * @param {number} domY graph-relative DOM Y coordinate
1902 * Returns: {row, seriesName, point}
1905 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1906 var row
= this.findClosestRow(domX
);
1907 var closestPoint
, closestSeries
;
1908 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
1909 var boundary
= this.getLeftBoundary_(setIdx
);
1910 var rowIdx
= row
- boundary
;
1911 var points
= this.layout_
.points
[setIdx
];
1912 if (rowIdx
>= points
.length
) continue;
1913 var p1
= points
[rowIdx
];
1914 if (!Dygraph
.isValidPoint(p1
)) continue;
1915 var py
= p1
.canvasy
;
1916 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1917 // interpolate series Y value using next point
1918 var p2
= points
[rowIdx
+ 1];
1919 if (Dygraph
.isValidPoint(p2
)) {
1920 var dx
= p2
.canvasx
- p1
.canvasx
;
1922 var r
= (domX
- p1
.canvasx
) / dx
;
1923 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1926 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1927 // interpolate series Y value using previous point
1928 var p0
= points
[rowIdx
- 1];
1929 if (Dygraph
.isValidPoint(p0
)) {
1930 var dx
= p1
.canvasx
- p0
.canvasx
;
1932 var r
= (p1
.canvasx
- domX
) / dx
;
1933 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1937 // Stop if the point (domX, py) is above this series' upper edge
1938 if (setIdx
=== 0 || py
< domY
) {
1940 closestSeries
= setIdx
;
1943 var name
= this.layout_
.setNames
[closestSeries
];
1952 * When the mouse moves in the canvas, display information about a nearby data
1953 * point and draw dots over those points in the data series. This function
1954 * takes care of cleanup of previously-drawn dots.
1955 * @param {Object} event The mousemove event from the browser.
1958 Dygraph
.prototype.mouseMove_
= function(event
) {
1959 // This prevents JS errors when mousing over the canvas before data loads.
1960 var points
= this.layout_
.points
;
1961 if (points
=== undefined
|| points
=== null) return;
1963 var canvasCoords
= this.eventToDomCoords(event
);
1964 var canvasx
= canvasCoords
[0];
1965 var canvasy
= canvasCoords
[1];
1967 var highlightSeriesOpts
= this.getOption("highlightSeriesOpts");
1968 var selectionChanged
= false;
1969 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1971 if (this.getBooleanOption("stackedGraph")) {
1972 closest
= this.findStackedPoint(canvasx
, canvasy
);
1974 closest
= this.findClosestPoint(canvasx
, canvasy
);
1976 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1978 var idx
= this.findClosestRow(canvasx
);
1979 selectionChanged
= this.setSelection(idx
);
1982 var callback
= this.getFunctionOption("highlightCallback");
1983 if (callback
&& selectionChanged
) {
1984 callback
.call(this, event
,
1988 this.highlightSet_
);
1993 * Fetch left offset from the specified set index or if not passed, the
1994 * first defined boundaryIds record (see bug #236).
1997 Dygraph
.prototype.getLeftBoundary_
= function(setIdx
) {
1998 if (this.boundaryIds_
[setIdx
]) {
1999 return this.boundaryIds_
[setIdx
][0];
2001 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
2002 if (this.boundaryIds_
[i
] !== undefined
) {
2003 return this.boundaryIds_
[i
][0];
2010 Dygraph
.prototype.animateSelection_
= function(direction
) {
2011 var totalSteps
= 10;
2013 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
2014 if (this.animateId
=== undefined
) this.animateId
= 0;
2015 var start
= this.fadeLevel
;
2016 var steps
= direction
< 0 ? start
: totalSteps
- start
;
2018 if (this.fadeLevel
) {
2019 this.updateSelection_(1.0);
2024 var thisId
= ++this.animateId
;
2026 Dygraph
.repeatAndCleanup(
2028 // ignore simultaneous animations
2029 if (that
.animateId
!= thisId
) return;
2031 that
.fadeLevel
+= direction
;
2032 if (that
.fadeLevel
=== 0) {
2033 that
.clearSelection();
2035 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
2038 steps
, millis
, function() {});
2042 * Draw dots over the selectied points in the data series. This function
2043 * takes care of cleanup of previously-drawn dots.
2046 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
2047 /*var defaultPrevented = */
2048 this.cascadeEvents_('select', {
2049 selectedX
: this.lastx_
,
2050 selectedPoints
: this.selPoints_
2052 // TODO(danvk): use defaultPrevented here?
2054 // Clear the previously drawn vertical, if there is one
2056 var ctx
= this.canvas_ctx_
;
2057 if (this.getOption('highlightSeriesOpts')) {
2058 ctx
.clearRect(0, 0, this.width_
, this.height_
);
2059 var alpha
= 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha');
2061 // Activating background fade includes an animation effect for a gradual
2062 // fade. TODO(klausw): make this independently configurable if it causes
2063 // issues? Use a shared preference to control animations?
2064 var animateBackgroundFade
= true;
2065 if (animateBackgroundFade
) {
2066 if (opt_animFraction
=== undefined
) {
2067 // start a new animation
2068 this.animateSelection_(1);
2071 alpha
*= opt_animFraction
;
2073 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
2074 ctx
.fillRect(0, 0, this.width_
, this.height_
);
2077 // Redraw only the highlighted series in the interactive canvas (not the
2078 // static plot canvas, which is where series are usually drawn).
2079 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
2080 } else if (this.previousVerticalX_
>= 0) {
2081 // Determine the maximum highlight circle size.
2082 var maxCircleSize
= 0;
2083 var labels
= this.attr_('labels');
2084 for (i
= 1; i
< labels
.length
; i
++) {
2085 var r
= this.getNumericOption('highlightCircleSize', labels
[i
]);
2086 if (r
> maxCircleSize
) maxCircleSize
= r
;
2088 var px
= this.previousVerticalX_
;
2089 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
2090 2 * maxCircleSize
+ 2, this.height_
);
2093 if (this.selPoints_
.length
> 0) {
2094 // Draw colored circles over the center of each selected point
2095 var canvasx
= this.selPoints_
[0].canvasx
;
2097 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
2098 var pt
= this.selPoints_
[i
];
2099 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
2101 var circleSize
= this.getNumericOption('highlightCircleSize', pt
.name
);
2102 var callback
= this.getFunctionOption("drawHighlightPointCallback", pt
.name
);
2103 var color
= this.plotter_
.colors
[pt
.name
];
2105 callback
= Dygraph
.Circles
.DEFAULT
;
2107 ctx
.lineWidth
= this.getNumericOption('strokeWidth', pt
.name
);
2108 ctx
.strokeStyle
= color
;
2109 ctx
.fillStyle
= color
;
2110 callback
.call(this, this, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
2111 color
, circleSize
, pt
.idx
);
2115 this.previousVerticalX_
= canvasx
;
2120 * Manually set the selected points and display information about them in the
2121 * legend. The selection can be cleared using clearSelection() and queried
2122 * using getSelection().
2123 * @param {number} row Row number that should be highlighted (i.e. appear with
2124 * hover dots on the chart).
2125 * @param {seriesName} optional series name to highlight that series with the
2126 * the highlightSeriesOpts setting.
2127 * @param { locked } optional If true, keep seriesName selected when mousing
2128 * over the graph, disabling closest-series highlighting. Call clearSelection()
2131 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
2132 // Extract the points we've selected
2133 this.selPoints_
= [];
2135 var changed
= false;
2136 if (row
!== false && row
>= 0) {
2137 if (row
!= this.lastRow_
) changed
= true;
2138 this.lastRow_
= row
;
2139 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
2140 var points
= this.layout_
.points
[setIdx
];
2141 // Check if the point at the appropriate index is the point we're looking
2142 // for. If it is, just use it, otherwise search the array for a point
2143 // in the proper place.
2144 var setRow
= row
- this.getLeftBoundary_(setIdx
);
2145 if (setRow
< points
.length
&& points
[setRow
].idx
== row
) {
2146 var point
= points
[setRow
];
2147 if (point
.yval
!== null) this.selPoints_
.push(point
);
2149 for (var pointIdx
= 0; pointIdx
< points
.length
; ++pointIdx
) {
2150 var point
= points
[pointIdx
];
2151 if (point
.idx
== row
) {
2152 if (point
.yval
!== null) {
2153 this.selPoints_
.push(point
);
2161 if (this.lastRow_
>= 0) changed
= true;
2165 if (this.selPoints_
.length
) {
2166 this.lastx_
= this.selPoints_
[0].xval
;
2171 if (opt_seriesName
!== undefined
) {
2172 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
2173 this.highlightSet_
= opt_seriesName
;
2176 if (opt_locked
!== undefined
) {
2177 this.lockedSet_
= opt_locked
;
2181 this.updateSelection_(undefined
);
2187 * The mouse has left the canvas. Clear out whatever artifacts remain
2188 * @param {Object} event the mouseout event from the browser.
2191 Dygraph
.prototype.mouseOut_
= function(event
) {
2192 if (this.getFunctionOption("unhighlightCallback")) {
2193 this.getFunctionOption("unhighlightCallback").call(this, event
);
2196 if (this.getBooleanOption("hideOverlayOnMouseOut") && !this.lockedSet_
) {
2197 this.clearSelection();
2202 * Clears the current selection (i.e. points that were highlighted by moving
2203 * the mouse over the chart).
2205 Dygraph
.prototype.clearSelection
= function() {
2206 this.cascadeEvents_('deselect', {});
2208 this.lockedSet_
= false;
2209 // Get rid of the overlay data
2210 if (this.fadeLevel
) {
2211 this.animateSelection_(-1);
2214 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2216 this.selPoints_
= [];
2219 this.highlightSet_
= null;
2223 * Returns the number of the currently selected row. To get data for this row,
2224 * you can use the getValue method.
2225 * @return {number} row number, or -1 if nothing is selected
2227 Dygraph
.prototype.getSelection
= function() {
2228 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2232 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2233 var points
= this.layout_
.points
[setIdx
];
2234 for (var row
= 0; row
< points
.length
; row
++) {
2235 if (points
[row
].x
== this.selPoints_
[0].x
) {
2236 return points
[row
].idx
;
2244 * Returns the name of the currently-highlighted series.
2245 * Only available when the highlightSeriesOpts option is in use.
2247 Dygraph
.prototype.getHighlightSeries
= function() {
2248 return this.highlightSet_
;
2252 * Returns true if the currently-highlighted series was locked
2253 * via setSelection(..., seriesName, true).
2255 Dygraph
.prototype.isSeriesLocked
= function() {
2256 return this.lockedSet_
;
2260 * Fires when there's data available to be graphed.
2261 * @param {string} data Raw CSV data to be plotted
2264 Dygraph
.prototype.loadedEvent_
= function(data
) {
2265 this.rawData_
= this.parseCSV_(data
);
2266 this.cascadeDataDidUpdateEvent_();
2271 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2274 Dygraph
.prototype.addXTicks_
= function() {
2275 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2277 if (this.dateWindow_
) {
2278 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2280 range
= this.xAxisExtremes();
2283 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2284 var xTicks
= xAxisOptionsView('ticker')(
2287 this.plotter_
.area
.w
, // TODO(danvk): should be area.width
2290 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2291 // console.log(msg);
2292 this.layout_
.setXTicks(xTicks
);
2296 * Returns the correct handler class for the currently set options.
2299 Dygraph
.prototype.getHandlerClass_
= function() {
2301 if (this.attr_('dataHandler')) {
2302 handlerClass
= this.attr_('dataHandler');
2303 } else if (this.fractions_
) {
2304 if (this.getBooleanOption('errorBars')) {
2305 handlerClass
= Dygraph
.DataHandlers
.FractionsBarsHandler
;
2307 handlerClass
= Dygraph
.DataHandlers
.DefaultFractionHandler
;
2309 } else if (this.getBooleanOption('customBars')) {
2310 handlerClass
= Dygraph
.DataHandlers
.CustomBarsHandler
;
2311 } else if (this.getBooleanOption('errorBars')) {
2312 handlerClass
= Dygraph
.DataHandlers
.ErrorBarsHandler
;
2314 handlerClass
= Dygraph
.DataHandlers
.DefaultHandler
;
2316 return handlerClass
;
2321 * This function is called once when the chart's data is changed or the options
2322 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2323 * idea is that values derived from the chart's data can be computed here,
2324 * rather than every time the chart is drawn. This includes things like the
2325 * number of axes, rolling averages, etc.
2327 Dygraph
.prototype.predraw_
= function() {
2328 var start
= new Date();
2330 // Create the correct dataHandler
2331 this.dataHandler_
= new (this.getHandlerClass_())();
2333 this.layout_
.computePlotArea();
2335 // TODO(danvk): move more computations out of drawGraph_ and into here.
2336 this.computeYAxes_();
2338 if (!this.is_initial_draw_
) {
2339 this.canvas_ctx_
.restore();
2340 this.hidden_ctx_
.restore();
2343 this.canvas_ctx_
.save();
2344 this.hidden_ctx_
.save();
2346 // Create a new plotter.
2347 this.plotter_
= new DygraphCanvasRenderer(this,
2352 // The roller sits in the bottom left corner of the chart. We don't know where
2353 // this will be until the options are available, so it's positioned here.
2354 this.createRollInterface_();
2356 this.cascadeEvents_('predraw');
2358 // Convert the raw data (a 2D array) into the internal format and compute
2359 // rolling averages.
2360 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2361 for (var i
= 1; i
< this.numColumns(); i
++) {
2362 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2363 var series
= this.dataHandler_
.extractSeries(this.rawData_
, i
, this.attributes_
);
2364 if (this.rollPeriod_
> 1) {
2365 series
= this.dataHandler_
.rollingAverage(series
, this.rollPeriod_
, this.attributes_
);
2368 this.rolledSeries_
.push(series
);
2371 // If the data or options have changed, then we'd better redraw.
2374 // This is used to determine whether to do various animations.
2375 var end
= new Date();
2376 this.drawingTimeMs_
= (end
- start
);
2382 * xval_* and yval_* are the original unscaled data values,
2383 * while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
2384 * yval_stacked is the cumulative Y value used for stacking graphs,
2385 * and bottom/top/minus/plus are used for error bar graphs.
2392 * y_bottom: ?number,
2394 * y_stacked: ?number,
2396 * yval_minus: ?number,
2398 * yval_plus: ?number,
2402 Dygraph
.PointType
= undefined
;
2405 * Calculates point stacking for stackedGraph=true.
2407 * For stacking purposes, interpolate or extend neighboring data across
2408 * NaN values based on stackedGraphNaNFill settings. This is for display
2409 * only, the underlying data value as shown in the legend remains NaN.
2411 * @param {Array.<Dygraph.PointType>} points Point array for a single series.
2412 * Updates each Point's yval_stacked property.
2413 * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y
2414 * values for the series seen so far. Index is the row number. Updated
2415 * based on the current series's values.
2416 * @param {Array.<number>} seriesExtremes Min and max values, updated
2417 * to reflect the stacked values.
2418 * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or
2422 Dygraph
.stackPoints_
= function(
2423 points
, cumulativeYval
, seriesExtremes
, fillMethod
) {
2424 var lastXval
= null;
2425 var prevPoint
= null;
2426 var nextPoint
= null;
2427 var nextPointIdx
= -1;
2429 // Find the next stackable point starting from the given index.
2430 var updateNextPoint
= function(idx
) {
2431 // If we've previously found a non-NaN point and haven't gone past it yet,
2433 if (nextPointIdx
>= idx
) return;
2435 // We haven't found a non-NaN point yet or have moved past it,
2436 // look towards the right to find a non-NaN point.
2437 for (var j
= idx
; j
< points
.length
; ++j
) {
2438 // Clear out a previously-found point (if any) since it's no longer
2439 // valid, we shouldn't use it for interpolation anymore.
2441 if (!isNaN(points
[j
].yval
) && points
[j
].yval
!== null) {
2443 nextPoint
= points
[j
];
2449 for (var i
= 0; i
< points
.length
; ++i
) {
2450 var point
= points
[i
];
2451 var xval
= point
.xval
;
2452 if (cumulativeYval
[xval
] === undefined
) {
2453 cumulativeYval
[xval
] = 0;
2456 var actualYval
= point
.yval
;
2457 if (isNaN(actualYval
) || actualYval
=== null) {
2458 if(fillMethod
== 'none') {
2461 // Interpolate/extend
for stacking purposes
if possible
.
2463 if (prevPoint
&& nextPoint
&& fillMethod
!= 'none') {
2464 // Use linear interpolation between prevPoint and nextPoint.
2465 actualYval
= prevPoint
.yval
+ (nextPoint
.yval
- prevPoint
.yval
) *
2466 ((xval
- prevPoint
.xval
) / (nextPoint
.xval
- prevPoint
.xval
));
2467 } else if (prevPoint
&& fillMethod
== 'all') {
2468 actualYval
= prevPoint
.yval
;
2469 } else if (nextPoint
&& fillMethod
== 'all') {
2470 actualYval
= nextPoint
.yval
;
2479 var stackedYval
= cumulativeYval
[xval
];
2480 if (lastXval
!= xval
) {
2481 // If an x-value is repeated, we ignore the duplicates.
2482 stackedYval
+= actualYval
;
2483 cumulativeYval
[xval
] = stackedYval
;
2487 point
.yval_stacked
= stackedYval
;
2489 if (stackedYval
> seriesExtremes
[1]) {
2490 seriesExtremes
[1] = stackedYval
;
2492 if (stackedYval
< seriesExtremes
[0]) {
2493 seriesExtremes
[0] = stackedYval
;
2500 * Loop over all fields and create datasets, calculating extreme y-values for
2501 * each series and extreme x-indices as we go.
2503 * dateWindow is passed in as an explicit parameter so that we can compute
2504 * extreme values "speculatively", i.e. without actually setting state on the
2507 * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2508 * rolledSeries[seriesIndex][row] = raw point, where
2509 * seriesIndex is the column number starting with 1, and
2510 * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2511 * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2513 * points: Array.<Array.<Dygraph.PointType>>,
2514 * seriesExtremes: Array.<Array.<number>>,
2515 * boundaryIds: Array.<number>}}
2518 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2519 var boundaryIds
= [];
2521 var cumulativeYval
= []; // For stacked series.
2522 var extremes
= {}; // series name -> [low, high]
2523 var seriesIdx
, sampleIdx
;
2524 var firstIdx
, lastIdx
;
2527 // Loop over the fields (series). Go from the last to the first,
2528 // because if they're stacked that's how we accumulate the values.
2529 var num_series
= rolledSeries
.length
- 1;
2531 for (seriesIdx
= num_series
; seriesIdx
>= 1; seriesIdx
--) {
2532 if (!this.visibility()[seriesIdx
- 1]) continue;
2534 // Prune down to the desired range, if necessary (for zooming)
2535 // Because there can be lines going to points outside of the visible area,
2536 // we actually prune to visible points, plus one on either side.
2538 series
= rolledSeries
[seriesIdx
];
2539 var low
= dateWindow
[0];
2540 var high
= dateWindow
[1];
2542 // TODO(danvk): do binary search instead of linear search.
2543 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2546 for (sampleIdx
= 0; sampleIdx
< series
.length
; sampleIdx
++) {
2547 if (series
[sampleIdx
][0] >= low
&& firstIdx
=== null) {
2548 firstIdx
= sampleIdx
;
2550 if (series
[sampleIdx
][0] <= high
) {
2551 lastIdx
= sampleIdx
;
2555 if (firstIdx
=== null) firstIdx
= 0;
2556 var correctedFirstIdx
= firstIdx
;
2557 var isInvalidValue
= true;
2558 while (isInvalidValue
&& correctedFirstIdx
> 0) {
2559 correctedFirstIdx
--;
2560 // check if the y value is null.
2561 isInvalidValue
= series
[correctedFirstIdx
][1] === null;
2564 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2565 var correctedLastIdx
= lastIdx
;
2566 isInvalidValue
= true;
2567 while (isInvalidValue
&& correctedLastIdx
< series
.length
- 1) {
2569 isInvalidValue
= series
[correctedLastIdx
][1] === null;
2572 if (correctedFirstIdx
!==firstIdx
) {
2573 firstIdx
= correctedFirstIdx
;
2575 if (correctedLastIdx
!== lastIdx
) {
2576 lastIdx
= correctedLastIdx
;
2579 boundaryIds
[seriesIdx
-1] = [firstIdx
, lastIdx
];
2581 // .slice's end is exclusive, we want to include lastIdx.
2582 series
= series
.slice(firstIdx
, lastIdx
+ 1);
2584 series
= rolledSeries
[seriesIdx
];
2585 boundaryIds
[seriesIdx
-1] = [0, series
.length
-1];
2588 var seriesName
= this.attr_("labels")[seriesIdx
];
2589 var seriesExtremes
= this.dataHandler_
.getExtremeYValues(series
,
2590 dateWindow
, this.getBooleanOption("stepPlot",seriesName
));
2592 var seriesPoints
= this.dataHandler_
.seriesToPoints(series
,
2593 seriesName
, boundaryIds
[seriesIdx
-1][0]);
2595 if (this.getBooleanOption("stackedGraph")) {
2596 axisIdx
= this.attributes_
.axisForSeries(seriesName
);
2597 if (cumulativeYval
[axisIdx
] === undefined
) {
2598 cumulativeYval
[axisIdx
] = [];
2600 Dygraph
.stackPoints_(seriesPoints
, cumulativeYval
[axisIdx
], seriesExtremes
,
2601 this.getBooleanOption("stackedGraphNaNFill"));
2604 extremes
[seriesName
] = seriesExtremes
;
2605 points
[seriesIdx
] = seriesPoints
;
2608 return { points
: points
, extremes
: extremes
, boundaryIds
: boundaryIds
};
2612 * Update the graph with new data. This method is called when the viewing area
2613 * has changed. If the underlying data or options have changed, predraw_ will
2614 * be called before drawGraph_ is called.
2618 Dygraph
.prototype.drawGraph_
= function() {
2619 var start
= new Date();
2621 // This is used to set the second parameter to drawCallback, below.
2622 var is_initial_draw
= this.is_initial_draw_
;
2623 this.is_initial_draw_
= false;
2625 this.layout_
.removeAllDatasets();
2627 this.attrs_
.pointSize
= 0.5 * this.getNumericOption('highlightCircleSize');
2629 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2630 var points
= packed
.points
;
2631 var extremes
= packed
.extremes
;
2632 this.boundaryIds_
= packed
.boundaryIds
;
2634 this.setIndexByName_
= {};
2635 var labels
= this.attr_("labels");
2636 if (labels
.length
> 0) {
2637 this.setIndexByName_
[labels
[0]] = 0;
2640 for (var i
= 1; i
< points
.length
; i
++) {
2641 this.setIndexByName_
[labels
[i
]] = i
;
2642 if (!this.visibility()[i
- 1]) continue;
2643 this.layout_
.addDataset(labels
[i
], points
[i
]);
2644 this.datasetIndex_
[i
] = dataIdx
++;
2647 this.computeYAxisRanges_(extremes
);
2648 this.layout_
.setYAxes(this.axes_
);
2652 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2653 var tmp_zoomed_x
= this.zoomed_x_
;
2654 // Tell PlotKit to use this new data and render itself
2655 this.zoomed_x_
= tmp_zoomed_x
;
2656 this.layout_
.evaluate();
2657 this.renderGraph_(is_initial_draw
);
2659 if (this.getStringOption("timingName")) {
2660 var end
= new Date();
2661 console
.log(this.getStringOption("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2666 * This does the work of drawing the chart. It assumes that the layout and axis
2667 * scales have already been set (e.g. by predraw_).
2671 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2672 this.cascadeEvents_('clearChart');
2673 this.plotter_
.clear();
2675 if (this.getFunctionOption('underlayCallback')) {
2676 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2677 // users who expect a deprecated form of this callback.
2678 this.getFunctionOption('underlayCallback').call(this,
2679 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2683 canvas
: this.hidden_
,
2684 drawingContext
: this.hidden_ctx_
2686 this.cascadeEvents_('willDrawChart', e
);
2687 this.plotter_
.render();
2688 this.cascadeEvents_('didDrawChart', e
);
2689 this.lastRow_
= -1; // because plugins/legend.js clears the legend
2691 // TODO(danvk): is this a performance bottleneck when panning?
2692 // The interaction canvas should already be empty in that situation.
2693 this.canvas_
.getContext('2d').clearRect(0, 0, this.width_
, this.height_
);
2695 if (this.getFunctionOption("drawCallback") !== null) {
2696 this.getFunctionOption("drawCallback")(this, is_initial_draw
);
2698 if (is_initial_draw
) {
2699 this.readyFired_
= true;
2700 while (this.readyFns_
.length
> 0) {
2701 var fn
= this.readyFns_
.pop();
2709 * Determine properties of the y-axes which are independent of the data
2710 * currently being displayed. This includes things like the number of axes and
2711 * the style of the axes. It does not include the range of each axis and its
2713 * This fills in this.axes_.
2714 * axes_ = [ { options } ]
2715 * indices are into the axes_ array.
2717 Dygraph
.prototype.computeYAxes_
= function() {
2718 // Preserve valueWindow settings if they exist, and if the user hasn't
2719 // specified a new valueRange.
2720 var valueWindows
, axis
, index
, opts
, v
;
2721 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2723 for (index
= 0; index
< this.axes_
.length
; index
++) {
2724 valueWindows
.push(this.axes_
[index
].valueWindow
);
2728 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2729 // data computation as well as options storage.
2730 // Go through once and add all the axes.
2733 for (axis
= 0; axis
< this.attributes_
.numAxes(); axis
++) {
2734 // Add a new axis, making a copy of its per-axis options.
2735 opts
= { g
: this };
2736 Dygraph
.update(opts
, this.attributes_
.axisOptions(axis
));
2737 this.axes_
[axis
] = opts
;
2741 // Copy global valueRange option over to the first axis.
2742 // NOTE(konigsberg): Are these two statements necessary?
2743 // I tried removing it. The automated tests pass, and manually
2744 // messing with tests/zoom
.html showed no trouble
.
2745 v
= this.attr_('valueRange');
2746 if (v
) this.axes_
[0].valueRange
= v
;
2748 if (valueWindows
!== undefined
) {
2749 // Restore valueWindow settings.
2751 // When going from two axes back to one, we only restore
2753 var idxCount
= Math
.min(valueWindows
.length
, this.axes_
.length
);
2755 for (index
= 0; index
< idxCount
; index
++) {
2756 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2760 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2762 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2763 v
= opts("valueRange");
2764 if (v
) this.axes_
[axis
].valueRange
= v
;
2765 } else { // To keep old behavior
2766 var axes
= this.user_attrs_
.axes
;
2767 if (axes
&& axes
.y2
) {
2768 v
= axes
.y2
.valueRange
;
2769 if (v
) this.axes_
[axis
].valueRange
= v
;
2776 * Returns the number of y-axes on the chart.
2777 * @return {number} the number of axes.
2779 Dygraph
.prototype.numAxes
= function() {
2780 return this.attributes_
.numAxes();
2785 * Returns axis properties for the given series.
2786 * @param {string} setName The name of the series for which to get axis
2787 * properties, e.g. 'Y1'.
2788 * @return {Object} The axis properties.
2790 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2791 // TODO(danvk): handle errors.
2792 return this.axes_
[this.attributes_
.axisForSeries(series
)];
2797 * Determine the value range and tick marks for each axis.
2798 * @param {Object} extremes A mapping from seriesName -> [low, high]
2799 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2801 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2802 var isNullUndefinedOrNaN
= function(num
) {
2803 return isNaN(parseFloat(num
));
2805 var numAxes
= this.attributes_
.numAxes();
2806 var ypadCompat
, span
, series
, ypad
;
2810 // Compute extreme values, a span and tick marks for each axis.
2811 for (var i
= 0; i
< numAxes
; i
++) {
2812 var axis
= this.axes_
[i
];
2813 var logscale
= this.attributes_
.getForAxis("logscale", i
);
2814 var includeZero
= this.attributes_
.getForAxis("includeZero", i
);
2815 var independentTicks
= this.attributes_
.getForAxis("independentTicks", i
);
2816 series
= this.attributes_
.seriesForAxis(i
);
2818 // Add some padding. This supports two Y padding operation modes:
2820 // - backwards compatible (yRangePad not set):
2821 // 10% padding for automatic Y ranges, but not for user-supplied
2822 // ranges, and move a close-to-zero edge to zero except if
2823 // avoidMinZero is set, since drawing at the edge results in
2824 // invisible lines. Unfortunately lines drawn at the edge of a
2825 // user-supplied range will still be invisible. If logscale is
2826 // set, add a variable amount of padding at the top but
2827 // none at the bottom.
2829 // - new-style (yRangePad set by the user):
2830 // always add the specified Y padding.
2833 ypad
= 0.1; // add 10%
2834 if (this.getNumericOption('yRangePad') !== null) {
2836 // Convert pixel padding to ratio
2837 ypad
= this.getNumericOption('yRangePad') / this.plotter_
.area
.h
;
2840 if (series
.length
=== 0) {
2841 // If no series are defined or visible then use a reasonable default
2842 axis
.extremeRange
= [0, 1];
2844 // Calculate the extremes of extremes.
2845 var minY
= Infinity
; // extremes[series[0]][0];
2846 var maxY
= -Infinity
; // extremes[series[0]][1];
2847 var extremeMinY
, extremeMaxY
;
2849 for (var j
= 0; j
< series
.length
; j
++) {
2850 // this skips invisible series
2851 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2853 // Only use valid extremes to stop null data series' from corrupting the scale.
2854 extremeMinY
= extremes
[series
[j
]][0];
2855 if (extremeMinY
!== null) {
2856 minY
= Math
.min(extremeMinY
, minY
);
2858 extremeMaxY
= extremes
[series
[j
]][1];
2859 if (extremeMaxY
!== null) {
2860 maxY
= Math
.max(extremeMaxY
, maxY
);
2864 // Include zero if requested by the user.
2865 if (includeZero
&& !logscale
) {
2866 if (minY
> 0) minY
= 0;
2867 if (maxY
< 0) maxY
= 0;
2870 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2871 if (minY
== Infinity
) minY
= 0;
2872 if (maxY
== -Infinity
) maxY
= 1;
2875 // special case: if we have no sense of scale, center on the sole value.
2878 span
= Math
.abs(maxY
);
2880 // ... and if the sole value is zero, use range 0-1.
2886 var maxAxisY
, minAxisY
;
2889 maxAxisY
= maxY
+ ypad
* span
;
2892 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2893 maxAxisY
= maxY
* logpad
;
2894 minAxisY
= minY
/ logpad
;
2897 maxAxisY
= maxY
+ ypad
* span
;
2898 minAxisY
= minY
- ypad
* span
;
2900 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2901 // close to zero, but not if avoidMinZero is set.
2902 if (ypadCompat
&& !this.getBooleanOption("avoidMinZero")) {
2903 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2904 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2907 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2909 if (axis
.valueWindow
) {
2910 // This is only set if the user has zoomed on the y-axis. It is never set
2911 // by a user. It takes precedence over axis.valueRange because, if you set
2912 // valueRange, you'd still expect to be able to pan.
2913 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2914 } else if (axis
.valueRange
) {
2915 // This is a user-set value range for this axis.
2916 var y0
= isNullUndefinedOrNaN(axis
.valueRange
[0]) ? axis
.extremeRange
[0] : axis
.valueRange
[0];
2917 var y1
= isNullUndefinedOrNaN(axis
.valueRange
[1]) ? axis
.extremeRange
[1] : axis
.valueRange
[1];
2919 if (axis
.logscale
) {
2920 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2929 axis
.computedValueRange
= [y0
, y1
];
2931 axis
.computedValueRange
= axis
.extremeRange
;
2935 if (independentTicks
) {
2936 axis
.independentTicks
= independentTicks
;
2937 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2938 var ticker
= opts('ticker');
2939 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2940 axis
.computedValueRange
[1],
2941 this.plotter_
.area
.h
,
2944 // Define the first independent axis as primary axis.
2945 if (!p_axis
) p_axis
= axis
;
2948 if (p_axis
=== undefined
) {
2949 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
2951 // Add ticks. By default, all axes inherit the tick positions of the
2952 // primary axis. However, if an axis is specifically marked as having
2953 // independent ticks, then that is permissible as well.
2954 for (var i
= 0; i
< numAxes
; i
++) {
2955 var axis
= this.axes_
[i
];
2957 if (!axis
.independentTicks
) {
2958 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2959 var ticker
= opts('ticker');
2960 var p_ticks
= p_axis
.ticks
;
2961 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2962 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2963 var tick_values
= [];
2964 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2965 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2966 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2967 tick_values
.push(y_val
);
2970 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2971 axis
.computedValueRange
[1],
2972 this.plotter_
.area
.h
,
2981 * Detects the type of the str (date or numeric) and sets the various
2982 * formatting attributes in this.attrs_ based on this type.
2983 * @param {string} str An x value.
2986 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2988 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2989 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
2990 str
.indexOf('/') >= 0 ||
2991 isNaN(parseFloat(str
))) {
2993 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2994 // TODO(danvk): remove support for this format.
2998 this.setXAxisOptions_(isDate
);
3001 Dygraph
.prototype.setXAxisOptions_
= function(isDate
) {
3003 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3004 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateValueFormatter
;
3005 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3006 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisLabelFormatter
;
3008 /** @private (shut up, jsdoc!) */
3009 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3010 // TODO(danvk): use Dygraph.numberValueFormatter here?
3011 /** @private (shut up, jsdoc!) */
3012 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3013 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3014 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3020 * Parses a string in a special csv format. We expect a csv file where each
3021 * line is a date point, and the first field in each line is the date string.
3022 * We also expect that all remaining fields represent series.
3023 * if the errorBars attribute is set, then interpret the fields as:
3024 * date, series1, stddev1, series2, stddev2, ...
3025 * @param {[Object]} data See above.
3027 * @return [Object] An array with one entry for each row. These entries
3028 * are an array of cells in that row. The first entry is the parsed x-value for
3029 * the row. The second, third, etc. are the y-values. These can take on one of
3030 * three forms, depending on the CSV and constructor parameters:
3032 * 2. [ value, stddev ]
3033 * 3. [ low value, center value, high value ]
3035 Dygraph
.prototype.parseCSV_
= function(data
) {
3037 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3038 var lines
= data
.split(line_delimiter
|| "\n");
3041 // Use the default delimiter or fall back to a tab if that makes sense.
3042 var delim
= this.getStringOption('delimiter');
3043 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3048 if (!('labels' in this.user_attrs_
)) {
3049 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
3051 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
3052 this.attributes_
.reparseSeries();
3057 var defaultParserSet
= false; // attempt to auto-detect x value type
3058 var expectedCols
= this.attr_("labels").length
;
3059 var outOfOrder
= false;
3060 for (var i
= start
; i
< lines
.length
; i
++) {
3061 var line
= lines
[i
];
3063 if (line
.length
=== 0) continue; // skip blank lines
3064 if (line
[0] == '#') continue; // skip comment lines
3065 var inFields
= line
.split(delim
);
3066 if (inFields
.length
< 2) continue;
3069 if (!defaultParserSet
) {
3070 this.detectTypeFromString_(inFields
[0]);
3071 xParser
= this.getFunctionOption("xValueParser");
3072 defaultParserSet
= true;
3074 fields
[0] = xParser(inFields
[0], this);
3076 // If fractions are expected, parse the numbers as "A/B
"
3077 if (this.fractions_) {
3078 for (j = 1; j < inFields.length; j++) {
3079 // TODO(danvk): figure out an appropriate way to flag parse errors.
3080 vals = inFields[j].split("/");
3081 if (vals.length != 2) {
3082 console.error('Expected fractional "num
/den
" values in CSV data ' +
3083 "but found a value
'" + inFields[j] + "' on line
" +
3084 (1 + i) + " ('" + line + "') which is not of
this form
.");
3087 fields[j] = [Dygraph.parseFloat_(vals[0], i, line),
3088 Dygraph.parseFloat_(vals[1], i, line)];
3091 } else if (this.getBooleanOption("errorBars
")) {
3092 // If there are error bars, values are (value, stddev) pairs
3093 if (inFields.length % 2 != 1) {
3094 console.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3095 'but line ' + (1 + i) + ' has an odd number of values (' +
3096 (inFields.length - 1) + "): '" + line + "'");
3098 for (j = 1; j < inFields.length; j += 2) {
3099 fields[(j + 1) / 2] = [Dygraph.parseFloat_(inFields[j], i, line),
3100 Dygraph.parseFloat_(inFields[j + 1], i, line)];
3102 } else if (this.getBooleanOption("customBars
")) {
3103 // Bars are a low;center;high tuple
3104 for (j = 1; j < inFields.length; j++) {
3105 var val = inFields[j];
3106 if (/^ *$/.test(val)) {
3107 fields[j] = [null, null, null];
3109 vals = val.split(";");
3110 if (vals.length == 3) {
3111 fields[j] = [ Dygraph.parseFloat_(vals[0], i, line),
3112 Dygraph.parseFloat_(vals[1], i, line),
3113 Dygraph.parseFloat_(vals[2], i, line) ];
3115 console.warn('When using customBars, values must be either blank ' +
3116 'or "low
;center
;high
" tuples (got "' + val +
3117 '" on line ' + (1+i));
3122 // Values are just numbers
3123 for (j = 1; j < inFields.length; j++) {
3124 fields[j] = Dygraph.parseFloat_(inFields[j], i, line);
3127 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3131 if (fields.length != expectedCols) {
3132 console.error("Number of columns
in line
" + i + " (" + fields.length +
3133 ") does not agree
with number of
labels (" + expectedCols +
3137 // If the user specified the 'labels' option and none of the cells of the
3138 // first row parsed correctly, then they probably double-specified the
3139 // labels. We go with the values set in the option, discard this row and
3140 // log a warning to the JS console.
3141 if (i === 0 && this.attr_('labels')) {
3142 var all_null = true;
3143 for (j = 0; all_null && j < fields.length; j++) {
3144 if (fields[j]) all_null = false;
3147 console.warn("The dygraphs
'labels' option is set
, but the first row
" +
3148 "of CSV
data ('" + line + "') appears to also contain
" +
3149 "labels
. Will drop the CSV labels and
use the option
" +
3158 console.warn("CSV is out of order
; order it correctly to speed loading
.");
3159 ret.sort(function(a,b) { return a[0] - b[0]; });
3166 * The user has provided their data as a pre-packaged JS array. If the x values
3167 * are numeric, this is the same as dygraphs' internal format. If the x values
3168 * are dates, we need to convert them from Date objects to ms since epoch.
3169 * @param {!Array} data
3170 * @return {Object} data with numeric x values.
3173 Dygraph.prototype.parseArray_ = function(data) {
3174 // Peek at the first x value to see if it's numeric.
3175 if (data.length === 0) {
3176 console.error("Can
't plot empty data set");
3179 if (data[0].length === 0) {
3180 console.error("Data set cannot contain an empty row");
3185 if (this.attr_("labels") === null) {
3186 console.warn("Using default labels. Set labels explicitly via 'labels
' " +
3187 "in the options parameter");
3188 this.attrs_.labels = [ "X" ];
3189 for (i = 1; i < data[0].length; i++) {
3190 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
3192 this.attributes_.reparseSeries();
3194 var num_labels = this.attr_("labels");
3195 if (num_labels.length != data[0].length) {
3196 console.error("Mismatch between number of labels (" + num_labels + ")" +
3197 " and number of columns in array (" + data[0].length + ")");
3202 if (Dygraph.isDateLike(data[0][0])) {
3203 // Some intelligent defaults for a date x-axis.
3204 this.attrs_.axes.x.valueFormatter = Dygraph.dateValueFormatter;
3205 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3206 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisLabelFormatter;
3208 // Assume they're all dates
.
3209 var parsedData
= Dygraph
.clone(data
);
3210 for (i
= 0; i
< data
.length
; i
++) {
3211 if (parsedData
[i
].length
=== 0) {
3212 console
.error("Row " + (1 + i
) + " of data is empty");
3215 if (parsedData
[i
][0] === null ||
3216 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3217 isNaN(parsedData
[i
][0].getTime())) {
3218 console
.error("x value in row " + (1 + i
) + " is not a Date");
3221 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3225 // Some intelligent defaults for a numeric x-axis.
3226 /** @private (shut up, jsdoc!) */
3227 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3228 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3229 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3235 * Parses a DataTable object from gviz.
3236 * The data is expected to have a first column that is either a date or a
3237 * number. All subsequent columns must be numbers. If there is a clear mismatch
3238 * between this.xValueParser_ and the type of the first column, it will be
3239 * fixed. Fills out rawData_.
3240 * @param {!google.visualization.DataTable} data See above.
3243 Dygraph
.prototype.parseDataTable_
= function(data
) {
3244 var shortTextForAnnotationNum
= function(num
) {
3245 // converts [0-9]+ [A-Z][a-z]*
3246 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3247 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3248 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3249 num
= Math
.floor(num
/ 26);
3251 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3252 num
= Math
.floor((num
- 1) / 26);
3257 var cols
= data
.getNumberOfColumns();
3258 var rows
= data
.getNumberOfRows();
3260 var indepType
= data
.getColumnType(0);
3261 if (indepType
== 'date' || indepType
== 'datetime') {
3262 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3263 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateValueFormatter
;
3264 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3265 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisLabelFormatter
;
3266 } else if (indepType
== 'number') {
3267 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3268 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3269 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3270 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3272 console
.error("only 'date', 'datetime' and 'number' types are supported " +
3273 "for column 1 of DataTable input (Got '" + indepType
+ "')");
3277 // Array of the column indices which contain data (and not annotations).
3279 var annotationCols
= {}; // data index -> [annotation cols]
3280 var hasAnnotations
= false;
3282 for (i
= 1; i
< cols
; i
++) {
3283 var type
= data
.getColumnType(i
);
3284 if (type
== 'number') {
3286 } else if (type
== 'string' && this.getBooleanOption('displayAnnotations')) {
3287 // This is OK -- it's an annotation column.
3288 var dataIdx
= colIdx
[colIdx
.length
- 1];
3289 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3290 annotationCols
[dataIdx
] = [i
];
3292 annotationCols
[dataIdx
].push(i
);
3294 hasAnnotations
= true;
3296 console
.error("Only 'number' is supported as a dependent type with Gviz." +
3297 " 'string' is only supported if displayAnnotations is true");
3301 // Read column labels
3302 // TODO(danvk): add support back for errorBars
3303 var labels
= [data
.getColumnLabel(0)];
3304 for (i
= 0; i
< colIdx
.length
; i
++) {
3305 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3306 if (this.getBooleanOption("errorBars")) i
+= 1;
3308 this.attrs_
.labels
= labels
;
3309 cols
= labels
.length
;
3312 var outOfOrder
= false;
3313 var annotations
= [];
3314 for (i
= 0; i
< rows
; i
++) {
3316 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3317 data
.getValue(i
, 0) === null) {
3318 console
.warn("Ignoring row " + i
+
3319 " of DataTable because of undefined or null first column.");
3323 if (indepType
== 'date' || indepType
== 'datetime') {
3324 row
.push(data
.getValue(i
, 0).getTime());
3326 row
.push(data
.getValue(i
, 0));
3328 if (!this.getBooleanOption("errorBars")) {
3329 for (j
= 0; j
< colIdx
.length
; j
++) {
3330 var col
= colIdx
[j
];
3331 row
.push(data
.getValue(i
, col
));
3332 if (hasAnnotations
&&
3333 annotationCols
.hasOwnProperty(col
) &&
3334 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3336 ann
.series
= data
.getColumnLabel(col
);
3338 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3340 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3341 if (k
) ann
.text
+= "\n";
3342 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3344 annotations
.push(ann
);
3348 // Strip out infinities, which give dygraphs problems later on.
3349 for (j
= 0; j
< row
.length
; j
++) {
3350 if (!isFinite(row
[j
])) row
[j
] = null;
3353 for (j
= 0; j
< cols
- 1; j
++) {
3354 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3357 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3364 console
.warn("DataTable is out of order; order it correctly to speed loading.");
3365 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3367 this.rawData_
= ret
;
3369 if (annotations
.length
> 0) {
3370 this.setAnnotations(annotations
, true);
3372 this.attributes_
.reparseSeries();
3376 * Signals to plugins that the chart data has updated.
3377 * This happens after the data has updated but before the chart has redrawn.
3379 Dygraph
.prototype.cascadeDataDidUpdateEvent_
= function() {
3380 // TODO(danvk): there are some issues checking xAxisRange() and using
3381 // toDomCoords from handlers of this event. The visible range should be set
3382 // when the chart is drawn, not derived from the data.
3383 this.cascadeEvents_('dataDidUpdate', {});
3387 * Get the CSV data. If it's in a function, call that function. If it's in a
3388 * file, do an XMLHttpRequest to get it.
3391 Dygraph
.prototype.start_
= function() {
3392 var data
= this.file_
;
3394 // Functions can return references of all other types.
3395 if (typeof data
== 'function') {
3399 if (Dygraph
.isArrayLike(data
)) {
3400 this.rawData_
= this.parseArray_(data
);
3401 this.cascadeDataDidUpdateEvent_();
3403 } else if (typeof data
== 'object' &&
3404 typeof data
.getColumnRange
== 'function') {
3405 // must be a DataTable from gviz.
3406 this.parseDataTable_(data
);
3407 this.cascadeDataDidUpdateEvent_();
3409 } else if (typeof data
== 'string') {
3410 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3411 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3412 if (line_delimiter
) {
3413 this.loadedEvent_(data
);
3417 if (window
.XMLHttpRequest
) {
3418 // Firefox, Opera, IE7, and other browsers will use the native object
3419 req
= new XMLHttpRequest();
3421 // IE 5 and 6 will use the ActiveX control
3422 req
= new ActiveXObject("Microsoft.XMLHTTP");
3426 req
.onreadystatechange
= function () {
3427 if (req
.readyState
== 4) {
3428 if (req
.status
=== 200 || // Normal http
3429 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3430 caller
.loadedEvent_(req
.responseText
);
3435 req
.open("GET", data
, true);
3439 console
.error("Unknown data format: " + (typeof data
));
3444 * Changes various properties of the graph. These can include:
3446 * <li>file: changes the source data for the graph</li>
3447 * <li>errorBars: changes whether the data contains stddev</li>
3450 * There's a huge variety of options that can be passed to this method. For a
3451 * full list, see http://dygraphs.com/options.html.
3453 * @param {Object} input_attrs The new properties and values
3454 * @param {boolean} block_redraw Usually the chart is redrawn after every
3455 * call to updateOptions(). If you know better, you can pass true to
3456 * explicitly block the redraw. This can be useful for chaining
3457 * updateOptions() calls, avoiding the occasional infinite loop and
3458 * preventing redraws when it's not necessary (e.g. when updating a
3461 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3462 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3464 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
3465 var file
= input_attrs
.file
;
3466 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
3468 // TODO(danvk): this is a mess. Move these options into attr_.
3469 if ('rollPeriod' in attrs
) {
3470 this.rollPeriod_
= attrs
.rollPeriod
;
3472 if ('dateWindow' in attrs
) {
3473 this.dateWindow_
= attrs
.dateWindow
;
3474 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3475 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3478 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3479 this.zoomed_y_
= (attrs
.valueRange
!== null);
3482 // TODO(danvk): validate per-series options.
3487 // highlightCircleSize
3489 // Check if this set options will require new points.
3490 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3492 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3494 this.attributes_
.reparseSeries();
3497 // This event indicates that the data is about to change, but hasn't yet.
3498 // TODO(danvk): support cancelation of the update via this event.
3499 this.cascadeEvents_('dataWillUpdate', {});
3502 if (!block_redraw
) this.start_();
3504 if (!block_redraw
) {
3505 if (requiresNewPoints
) {
3508 this.renderGraph_(false);
3515 * Returns a copy of the options with deprecated names converted into current
3516 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3517 * interested in that, they should save a copy before calling this.
3520 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3522 for (var k
in attrs
) {
3523 if (!attrs
.hasOwnProperty(k
)) continue;
3524 if (k
== 'file') continue;
3525 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3528 var set
= function(axis
, opt
, value
) {
3529 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3530 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3531 my_attrs
.axes
[axis
][opt
] = value
;
3533 var map
= function(opt
, axis
, new_opt
) {
3534 if (typeof(attrs
[opt
]) != 'undefined') {
3535 console
.warn("Option " + opt
+ " is deprecated. Use the " +
3536 new_opt
+ " option for the " + axis
+ " axis instead. " +
3537 "(e.g. { axes : { " + axis
+ " : { " + new_opt
+ " : ... } } } " +
3538 "(see http://dygraphs.com/per-axis.html for more information.");
3539 set(axis
, new_opt
, attrs
[opt
]);
3540 delete my_attrs
[opt
];
3544 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3545 map('xValueFormatter', 'x', 'valueFormatter');
3546 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3547 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3548 map('xTicker', 'x', 'ticker');
3549 map('yValueFormatter', 'y', 'valueFormatter');
3550 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3551 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3552 map('yTicker', 'y', 'ticker');
3553 map('drawXGrid', 'x', 'drawGrid');
3554 map('drawXAxis', 'x', 'drawAxis');
3555 map('drawYGrid', 'y', 'drawGrid');
3556 map('drawYAxis', 'y', 'drawAxis');
3557 map('xAxisLabelWidth', 'x', 'axisLabelWidth');
3558 map('yAxisLabelWidth', 'y', 'axisLabelWidth');
3563 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3564 * containing div (which has presumably changed size since the dygraph was
3565 * instantiated. If the width/height are specified, the div will be resized.
3567 * This is far more efficient than destroying and re-instantiating a
3568 * Dygraph, since it doesn't have to reparse the underlying data.
3570 * @param {number} width Width (in pixels)
3571 * @param {number} height Height (in pixels)
3573 Dygraph
.prototype.resize
= function(width
, height
) {
3574 if (this.resize_lock
) {
3577 this.resize_lock
= true;
3579 if ((width
=== null) != (height
=== null)) {
3580 console
.warn("Dygraph.resize() should be called with zero parameters or " +
3581 "two non-NULL parameters. Pretending it was zero.");
3582 width
= height
= null;
3585 var old_width
= this.width_
;
3586 var old_height
= this.height_
;
3589 this.maindiv_
.style
.width
= width
+ "px";
3590 this.maindiv_
.style
.height
= height
+ "px";
3591 this.width_
= width
;
3592 this.height_
= height
;
3594 this.width_
= this.maindiv_
.clientWidth
;
3595 this.height_
= this.maindiv_
.clientHeight
;
3598 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3599 // Resizing a canvas erases it, even when the size doesn't change, so
3600 // any resize needs to be followed by a redraw.
3601 this.resizeElements_();
3605 this.resize_lock
= false;
3609 * Adjusts the number of points in the rolling average. Updates the graph to
3610 * reflect the new averaging period.
3611 * @param {number} length Number of points over which to average the data.
3613 Dygraph
.prototype.adjustRoll
= function(length
) {
3614 this.rollPeriod_
= length
;
3619 * Returns a boolean array of visibility statuses.
3621 Dygraph
.prototype.visibility
= function() {
3622 // Do lazy-initialization, so that this happens after we know the number of
3624 if (!this.getOption("visibility")) {
3625 this.attrs_
.visibility
= [];
3627 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3628 while (this.getOption("visibility").length
< this.numColumns() - 1) {
3629 this.attrs_
.visibility
.push(true);
3631 return this.getOption("visibility");
3635 * Changes the visiblity of a series.
3637 * @param {number} num the series index
3638 * @param {boolean} value true or false, identifying the visibility.
3640 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3641 var x
= this.visibility();
3642 if (num
< 0 || num
>= x
.length
) {
3643 console
.warn("invalid series number in setVisibility: " + num
);
3651 * How large of an area will the dygraph render itself in?
3652 * This is used for testing.
3653 * @return A {width: w, height: h} object.
3656 Dygraph
.prototype.size
= function() {
3657 return { width
: this.width_
, height
: this.height_
};
3661 * Update the list of annotations and redraw the chart.
3662 * See dygraphs.com/annotations.html for more info on how to use annotations.
3663 * @param ann {Array} An array of annotation objects.
3664 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3666 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3667 // Only add the annotation CSS rule once we know it will be used.
3668 Dygraph
.addAnnotationRule();
3669 this.annotations_
= ann
;
3670 if (!this.layout_
) {
3671 console
.warn("Tried to setAnnotations before dygraph was ready. " +
3672 "Try setting them in a ready() block. See " +
3673 "dygraphs.com/tests/annotation.html");
3677 this.layout_
.setAnnotations(this.annotations_
);
3678 if (!suppressDraw
) {
3684 * Return the list of annotations.
3686 Dygraph
.prototype.annotations
= function() {
3687 return this.annotations_
;
3691 * Get the list of label names for this graph. The first column is the
3692 * x-axis, so the data series names start at index 1.
3694 * Returns null when labels have not yet been defined.
3696 Dygraph
.prototype.getLabels
= function() {
3697 var labels
= this.attr_("labels");
3698 return labels
? labels
.slice() : null;
3702 * Get the index of a series (column) given its name. The first column is the
3703 * x-axis, so the data series start with index 1.
3705 Dygraph
.prototype.indexFromSetName
= function(name
) {
3706 return this.setIndexByName_
[name
];
3710 * Trigger a callback when the dygraph has drawn itself and is ready to be
3711 * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3712 * data (i.e. a URL is passed as the data source) and the chart is drawn
3713 * asynchronously. If the chart has already drawn, the callback will fire
3716 * This is a good place to call setAnnotation().
3718 * @param {function(!Dygraph)} callback The callback to trigger when the chart
3721 Dygraph
.prototype.ready
= function(callback
) {
3722 if (this.is_initial_draw_
) {
3723 this.readyFns_
.push(callback
);
3725 callback
.call(this, this);
3731 * Adds a default style for the annotation CSS classes to the document. This is
3732 * only executed when annotations are actually used. It is designed to only be
3733 * called once -- all calls after the first will return immediately.
3735 Dygraph
.addAnnotationRule
= function() {
3736 // TODO(danvk): move this function into plugins/annotations.js
?
3737 if (Dygraph
.addedAnnotationCSS
) return;
3739 var rule
= "border: 1px solid black; " +
3740 "background-color: white; " +
3741 "text-align: center;";
3743 var styleSheetElement
= document
.createElement("style");
3744 styleSheetElement
.type
= "text/css";
3745 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3747 // Find the first style sheet that we can access.
3748 // We may not add a rule to a style sheet from another domain for security
3749 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3750 // adds its own style sheets from google.com.
3751 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3752 if (document
.styleSheets
[i
].disabled
) continue;
3753 var mysheet
= document
.styleSheets
[i
];
3755 if (mysheet
.insertRule
) { // Firefox
3756 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3757 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3758 } else if (mysheet
.addRule
) { // IE
3759 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3761 Dygraph
.addedAnnotationCSS
= true;
3764 // Was likely a security exception.
3768 console
.warn("Unable to add default annotation CSS rule; display may be off.");