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 /*jshint globalstrict: true */
51 /*global DygraphLayout:false, DygraphCanvasRenderer:false, DygraphOptions:false, G_vmlCanvasManager:false,ActiveXObject:false */
55 * Creates an interactive, zoomable chart.
58 * @param {div | String} div A div or the id of a div into which to construct
60 * @param {String | Function} file A file containing CSV data or a function
61 * that returns this data. The most basic expected format for each line is
62 * "YYYY/MM/DD,val1,val2,...". For more information, see
63 * http://dygraphs.com/data.html.
64 * @param {Object} attrs Various other attributes, e.g. errorBars determines
65 * whether the input data contains error ranges. For a complete list of
66 * options, see http://dygraphs.com/options.html.
68 var Dygraph
= function(div
, data
, opts
, opt_fourth_param
) {
69 // These have to go above the "Hack for IE" in __init__ since .ready() can be
70 // called as soon as the constructor returns. Once support for OldIE is
71 // dropped, this can go down with the rest of the initializers.
72 this.is_initial_draw_
= true;
75 if (opt_fourth_param
!== undefined
) {
76 // Old versions of dygraphs took in the series labels as a constructor
77 // parameter. This doesn't make sense anymore, but it's easy to continue
78 // to support this usage.
79 console
.warn("Using deprecated four-argument dygraph constructor");
80 this.__old_init__(div
, data
, opts
, opt_fourth_param
);
82 this.__init__(div
, data
, opts
);
86 Dygraph
.NAME
= "Dygraph";
87 Dygraph
.VERSION
= "1.0.1";
88 Dygraph
.__repr__
= function() {
89 return "[" + Dygraph
.NAME
+ " " + Dygraph
.VERSION
+ "]";
93 * Returns information about the Dygraph class.
95 Dygraph
.toString
= function() {
96 return Dygraph
.__repr__();
99 // Various default values
100 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
101 Dygraph
.DEFAULT_WIDTH
= 480;
102 Dygraph
.DEFAULT_HEIGHT
= 320;
104 // For max 60 Hz. animation:
105 Dygraph
.ANIMATION_STEPS
= 12;
106 Dygraph
.ANIMATION_DURATION
= 200;
108 // Label constants for the labelsKMB and labelsKMG2 options.
109 // (i.e. '100000' -> '100K')
110 Dygraph
.KMB_LABELS
= [ 'K', 'M', 'B', 'T', 'Q' ];
111 Dygraph
.KMG2_BIG_LABELS
= [ 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y' ];
112 Dygraph
.KMG2_SMALL_LABELS
= [ 'm', 'u', 'n', 'p', 'f', 'a', 'z', 'y' ];
114 // These are defined before DEFAULT_ATTRS so that it can refer to them.
117 * Return a string version of a number. This respects the digitsAfterDecimal
118 * and maxNumberWidth options.
119 * @param {number} x The number to be formatted
120 * @param {Dygraph} opts An options view
121 * @param {string} name The name of the point's data series
122 * @param {Dygraph} g The dygraph object
124 Dygraph
.numberValueFormatter
= function(x
, opts
, pt
, g
) {
125 var sigFigs
= opts('sigFigs');
127 if (sigFigs
!== null) {
128 // User has opted for a fixed number of significant figures.
129 return Dygraph
.floatFormat(x
, sigFigs
);
132 var digits
= opts('digitsAfterDecimal');
133 var maxNumberWidth
= opts('maxNumberWidth');
135 var kmb
= opts('labelsKMB');
136 var kmg2
= opts('labelsKMG2');
140 // switch to scientific notation if we underflow or overflow fixed display.
142 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
143 Math
.abs(x
) < Math
.pow(10, -digits
))) {
144 label
= x
.toExponential(digits
);
146 label
= '' + Dygraph
.round_(x
, digits
);
155 k_labels
= Dygraph
.KMB_LABELS
;
158 if (kmb
) console
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
160 k_labels
= Dygraph
.KMG2_BIG_LABELS
;
161 m_labels
= Dygraph
.KMG2_SMALL_LABELS
;
164 var absx
= Math
.abs(x
);
165 var n
= Dygraph
.pow(k
, k_labels
.length
);
166 for (var j
= k_labels
.length
- 1; j
>= 0; j
--, n
/= k
) {
168 label
= Dygraph
.round_(x
/ n
, digits
) + k_labels
[j
];
173 // TODO(danvk): clean up this logic. Why so different than kmb?
174 var x_parts
= String(x
.toExponential()).split('e-');
175 if (x_parts
.length
=== 2 && x_parts
[1] >= 3 && x_parts
[1] <= 24) {
176 if (x_parts
[1] % 3 > 0) {
177 label
= Dygraph
.round_(x_parts
[0] /
178 Dygraph
.pow(10, (x_parts
[1] % 3)),
181 label
= Number(x_parts
[0]).toFixed(2);
183 label
+= m_labels
[Math
.floor(x_parts
[1] / 3) - 1];
192 * variant for use as an axisLabelFormatter.
195 Dygraph
.numberAxisLabelFormatter
= function(x
, granularity
, opts
, g
) {
196 return Dygraph
.numberValueFormatter(x
, opts
, g
);
200 * @type {!Array.<string>}
204 Dygraph
.SHORT_MONTH_NAMES_
= ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
208 * Convert a JS date to a string appropriate to display on an axis that
209 * is displaying values at the stated granularity. This respects the
211 * @param {Date} date The date to format
212 * @param {number} granularity One of the Dygraph granularity constants
213 * @param {Dygraph} opts An options view
214 * @return {string} The date formatted as local time
217 Dygraph
.dateAxisLabelFormatter
= function(date
, granularity
, opts
) {
218 var utc
= opts('labelsUTC');
219 var accessors
= utc
? Dygraph
.DateAccessorsUTC
: Dygraph
.DateAccessorsLocal
;
221 var year
= accessors
.getFullYear(date
),
222 month
= accessors
.getMonth(date
),
223 day
= accessors
.getDate(date
),
224 hours
= accessors
.getHours(date
),
225 mins
= accessors
.getMinutes(date
),
226 secs
= accessors
.getSeconds(date
),
227 millis
= accessors
.getSeconds(date
);
229 if (granularity
>= Dygraph
.DECADAL
) {
231 } else if (granularity
>= Dygraph
.MONTHLY
) {
232 return Dygraph
.SHORT_MONTH_NAMES_
[month
] + ' ' + year
;
234 var frac
= hours
* 3600 + mins
* 60 + secs
+ 1e-3 * millis
;
235 if (frac
=== 0 || granularity
>= Dygraph
.DAILY
) {
236 // e.g. '21Jan' (%d%b)
237 return Dygraph
.zeropad(day
) + Dygraph
.SHORT_MONTH_NAMES_
[month
];
239 return Dygraph
.hmsString_(hours
, mins
, secs
);
243 // alias in case anyone is referencing the old method.
244 Dygraph
.dateAxisFormatter
= Dygraph
.dateAxisLabelFormatter
;
247 * Return a string version of a JS date for a value label. This respects the
249 * @param {Date} date The date to be formatted
250 * @param {Dygraph} opts An options view
253 Dygraph
.dateValueFormatter
= function(d
, opts
) {
254 return Dygraph
.dateString_(d
, opts('labelsUTC'));
258 * Standard plotters. These may be used by clients.
259 * Available plotters are:
260 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
261 * - Dygraph.Plotters.errorPlotter: draws error bars
262 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
264 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
265 * This causes all the lines to be drawn over all the fills/error bars.
267 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
270 // Default attribute values.
271 Dygraph
.DEFAULT_ATTRS
= {
272 highlightCircleSize
: 3,
273 highlightSeriesOpts
: null,
274 highlightSeriesBackgroundAlpha
: 0.5,
278 // TODO(danvk): move defaults from createStatusMessage_ here.
280 labelsSeparateLines
: false,
281 labelsShowZeroValues
: true,
284 showLabelsOnHighlight
: true,
286 digitsAfterDecimal
: 2,
291 strokeBorderWidth
: 0,
292 strokeBorderColor
: "white",
295 axisLabelFontSize
: 14,
301 xValueParser
: Dygraph
.dateParser
,
308 wilsonInterval
: true, // only relevant if fractions is true
312 connectSeparatedPoints
: false,
315 stackedGraphNaNFill
: 'all',
316 hideOverlayOnMouseOut
: true,
318 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
319 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
325 drawAxesAtZero
: false,
327 // Sizes of the various chart labels.
334 axisLineColor
: "black",
337 axisLabelColor
: "black",
341 gridLineColor
: "rgb(128,128,128)",
343 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
344 animatedZooms
: false, // (for now)
346 // Range selector options
347 showRangeSelector
: false,
348 rangeSelectorHeight
: 40,
349 rangeSelectorPlotStrokeColor
: "#808FAB",
350 rangeSelectorPlotFillColor
: "#A7B1C4",
351 showInRangeSelector
: null,
353 // The ordering here ensures that central lines always appear above any
354 // fill bars/error bars
.
356 Dygraph
.Plotters
.fillPlotter
,
357 Dygraph
.Plotters
.errorPlotter
,
358 Dygraph
.Plotters
.linePlotter
367 axisLabelFormatter
: Dygraph
.dateAxisLabelFormatter
,
368 valueFormatter
: Dygraph
.dateValueFormatter
,
371 independentTicks
: true,
372 ticker
: null // will be set in dygraph-tickers.js
376 valueFormatter
: Dygraph
.numberValueFormatter
,
377 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
380 independentTicks
: true,
381 ticker
: null // will be set in dygraph-tickers.js
385 valueFormatter
: Dygraph
.numberValueFormatter
,
386 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
389 independentTicks
: false,
390 ticker
: null // will be set in dygraph-tickers.js
395 // Directions for panning and zooming. Use bit operations when combined
396 // values are possible.
397 Dygraph
.HORIZONTAL
= 1;
398 Dygraph
.VERTICAL
= 2;
400 // Installed plugins, in order of precedence (most-general to most-specific).
401 // Plugins are installed after they are defined, in plugins/install.js
.
405 // Used for initializing annotation CSS rules only once.
406 Dygraph
.addedAnnotationCSS
= false;
408 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
409 // Labels is no longer a constructor parameter, since it's typically set
410 // directly from the data source. It also conains a name for the x-axis,
411 // which the previous constructor form did not.
412 if (labels
!== null) {
413 var new_labels
= ["Date"];
414 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
415 Dygraph
.update(attrs
, { 'labels': new_labels
});
417 this.__init__(div
, file
, attrs
);
421 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
422 * and context <canvas> inside of it. See the constructor for details.
424 * @param {Element} div the Element to render the graph into.
425 * @param {string | Function} file Source data
426 * @param {Object} attrs Miscellaneous other options
429 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
430 // Hack for IE: if we're using excanvas and the document hasn't finished
431 // loading yet (and hence may not have initialized whatever it needs to
432 // initialize), then keep calling this routine periodically until it has.
433 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
434 typeof(G_vmlCanvasManager
) != 'undefined' &&
435 document
.readyState
!= 'complete') {
437 setTimeout(function() { self
.__init__(div
, file
, attrs
); }, 100);
441 // Support two-argument constructor
442 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
444 attrs
= Dygraph
.mapLegacyOptions_(attrs
);
446 if (typeof(div
) == 'string') {
447 div
= document
.getElementById(div
);
451 console
.error("Constructing dygraph with a non-existent div!");
455 this.isUsingExcanvas_
= typeof(G_vmlCanvasManager
) != 'undefined';
457 // Copy the important bits into the object
458 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
461 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
462 this.previousVerticalX_
= -1;
463 this.fractions_
= attrs
.fractions
|| false;
464 this.dateWindow_
= attrs
.dateWindow
|| null;
466 this.annotations_
= [];
468 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
469 this.zoomed_x_
= false;
470 this.zoomed_y_
= false;
472 // Clear the div. This ensure that, if multiple dygraphs are passed the same
473 // div, then only one will be drawn.
476 // For historical reasons, the 'width' and 'height' options trump all CSS
477 // rules _except_ for an explicit 'width' or 'height' on the div.
478 // As an added convenience, if the div has zero height (like <div></div> does
479 // without any styles), then we use a default height/width
.
480 if (div
.style
.width
=== '' && attrs
.width
) {
481 div
.style
.width
= attrs
.width
+ "px";
483 if (div
.style
.height
=== '' && attrs
.height
) {
484 div
.style
.height
= attrs
.height
+ "px";
486 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
487 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
488 if (div
.style
.width
=== '') {
489 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
492 // These will be zero if the dygraph's div is hidden. In that case,
493 // use the user-specified attributes if present. If not, use zero
494 // and assume the user will call resize to fix things later.
495 this.width_
= div
.clientWidth
|| attrs
.width
|| 0;
496 this.height_
= div
.clientHeight
|| attrs
.height
|| 0;
498 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
499 if (attrs
.stackedGraph
) {
500 attrs
.fillGraph
= true;
501 // TODO(nikhilk): Add any other stackedGraph checks here.
504 // DEPRECATION WARNING: All option processing should be moved from
505 // attrs_ and user_attrs_ to options_, which holds all this information.
507 // Dygraphs has many options, some of which interact with one another.
508 // To keep track of everything, we maintain two sets of options:
510 // this.user_attrs_ only options explicitly set by the user.
511 // this.attrs_ defaults, options derived from user_attrs_, data.
513 // Options are then accessed this.attr_('attr'), which first looks at
514 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
515 // defaults without overriding behavior that the user specifically asks for.
516 this.user_attrs_
= {};
517 Dygraph
.update(this.user_attrs_
, attrs
);
519 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
521 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
523 this.boundaryIds_
= [];
524 this.setIndexByName_
= {};
525 this.datasetIndex_
= [];
527 this.registeredEvents_
= [];
528 this.eventListeners_
= {};
530 this.attributes_
= new DygraphOptions(this);
532 // Create the containing DIV and other interactive elements
533 this.createInterface_();
537 var plugins
= Dygraph
.PLUGINS
.concat(this.getOption('plugins'));
538 for (var i
= 0; i
< plugins
.length
; i
++) {
539 // the plugins option may contain either plugin classes or instances.
540 // Plugin instances contain an activate method.
541 var Plugin
= plugins
[i
]; // either a constructor or an instance.
543 if (typeof(Plugin
.activate
) !== 'undefined') {
544 pluginInstance
= Plugin
;
546 pluginInstance
= new Plugin();
550 plugin
: pluginInstance
,
556 var handlers
= pluginInstance
.activate(this);
557 for (var eventName
in handlers
) {
558 // TODO(danvk): validate eventName.
559 pluginDict
.events
[eventName
] = handlers
[eventName
];
562 this.plugins_
.push(pluginDict
);
565 // At this point, plugins can no longer register event handlers.
566 // Construct a map from event -> ordered list of [callback, plugin].
567 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
568 var plugin_dict
= this.plugins_
[i
];
569 for (var eventName
in plugin_dict
.events
) {
570 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
571 var callback
= plugin_dict
.events
[eventName
];
573 var pair
= [plugin_dict
.plugin
, callback
];
574 if (!(eventName
in this.eventListeners_
)) {
575 this.eventListeners_
[eventName
] = [pair
];
577 this.eventListeners_
[eventName
].push(pair
);
582 this.createDragInterface_();
588 * Triggers a cascade of events to the various plugins which are interested in them.
589 * Returns true if the "default behavior" should be prevented, i.e. if one
590 * of the event listeners called event.preventDefault().
593 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
594 if (!(name
in this.eventListeners_
)) return false;
596 // QUESTION: can we use objects & prototypes to speed this up?
600 defaultPrevented
: false,
601 preventDefault
: function() {
602 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
603 e
.defaultPrevented
= true;
605 propagationStopped
: false,
606 stopPropagation
: function() {
607 e
.propagationStopped
= true;
610 Dygraph
.update(e
, extra_props
);
612 var callback_plugin_pairs
= this.eventListeners_
[name
];
613 if (callback_plugin_pairs
) {
614 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
615 var plugin
= callback_plugin_pairs
[i
][0];
616 var callback
= callback_plugin_pairs
[i
][1];
617 callback
.call(plugin
, e
);
618 if (e
.propagationStopped
) break;
621 return e
.defaultPrevented
;
625 * Fetch a plugin instance of a particular class. Only for testing.
627 * @param {!Class} type The type of the plugin.
628 * @return {Object} Instance of the plugin, or null if there is none.
630 Dygraph
.prototype.getPluginInstance_
= function(type
) {
631 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
632 var p
= this.plugins_
[i
];
633 if (p
.plugin
instanceof type
) {
641 * Returns the zoomed status of the chart for one or both axes.
643 * Axis is an optional parameter. Can be set to 'x' or 'y'.
645 * The zoomed status for an axis is set whenever a user zooms using the mouse
646 * or when the dateWindow or valueRange are updated (unless the
647 * isZoomedIgnoreProgrammaticZoom option is also specified).
649 Dygraph
.prototype.isZoomed
= function(axis
) {
650 if (axis
=== null || axis
=== undefined
) {
651 return this.zoomed_x_
|| this.zoomed_y_
;
653 if (axis
=== 'x') return this.zoomed_x_
;
654 if (axis
=== 'y') return this.zoomed_y_
;
655 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
659 * Returns information about the Dygraph object, including its containing ID.
661 Dygraph
.prototype.toString
= function() {
662 var maindiv
= this.maindiv_
;
663 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
664 return "[Dygraph " + id
+ "]";
669 * Returns the value of an option. This may be set by the user (either in the
670 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
672 * @param {string} name The name of the option, e.g. 'rollPeriod'.
673 * @param {string} [seriesName] The name of the series to which the option
674 * will be applied. If no per-series value of this option is available, then
675 * the global value is returned. This is optional.
676 * @return { ... } The value of the option.
678 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
680 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
681 console
.error('Must include options reference JS for testing');
682 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
683 console
.error('Dygraphs is using property ' + name
+ ', which has no ' +
684 'entry in the Dygraphs.OPTIONS_REFERENCE listing.');
685 // Only log this error once.
686 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
689 return seriesName
? this.attributes_
.getForSeries(name
, seriesName
) : this.attributes_
.get(name
);
693 * Returns the current value for an option, as set in the constructor or via
694 * updateOptions. You may pass in an (optional) series name to get per-series
695 * values for the option.
697 * All values returned by this method should be considered immutable. If you
698 * modify them, there is no guarantee that the changes will be honored or that
699 * dygraphs will remain in a consistent state. If you want to modify an option,
700 * use updateOptions() instead.
702 * @param {string} name The name of the option (e.g. 'strokeWidth')
703 * @param {string=} opt_seriesName Series name to get per-series values.
704 * @return {*} The value of the option.
706 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
707 return this.attr_(name
, opt_seriesName
);
711 * Like getOption(), but specifically returns a number.
712 * This is a convenience function for working with the Closure Compiler.
713 * @param {string} name The name of the option (e.g. 'strokeWidth')
714 * @param {string=} opt_seriesName Series name to get per-series values.
715 * @return {number} The value of the option.
718 Dygraph
.prototype.getNumericOption
= function(name
, opt_seriesName
) {
719 return /** @type{number} */(this.getOption(name
, opt_seriesName
));
723 * Like getOption(), but specifically returns a string.
724 * This is a convenience function for working with the Closure Compiler.
725 * @param {string} name The name of the option (e.g. 'strokeWidth')
726 * @param {string=} opt_seriesName Series name to get per-series values.
727 * @return {string} The value of the option.
730 Dygraph
.prototype.getStringOption
= function(name
, opt_seriesName
) {
731 return /** @type{string} */(this.getOption(name
, opt_seriesName
));
735 * Like getOption(), but specifically returns a boolean.
736 * This is a convenience function for working with the Closure Compiler.
737 * @param {string} name The name of the option (e.g. 'strokeWidth')
738 * @param {string=} opt_seriesName Series name to get per-series values.
739 * @return {boolean} The value of the option.
742 Dygraph
.prototype.getBooleanOption
= function(name
, opt_seriesName
) {
743 return /** @type{boolean} */(this.getOption(name
, opt_seriesName
));
747 * Like getOption(), but specifically returns a function.
748 * This is a convenience function for working with the Closure Compiler.
749 * @param {string} name The name of the option (e.g. 'strokeWidth')
750 * @param {string=} opt_seriesName Series name to get per-series values.
751 * @return {function(...)} The value of the option.
754 Dygraph
.prototype.getFunctionOption
= function(name
, opt_seriesName
) {
755 return /** @type{function(...)} */(this.getOption(name
, opt_seriesName
));
758 Dygraph
.prototype.getOptionForAxis
= function(name
, axis
) {
759 return this.attributes_
.getForAxis(name
, axis
);
764 * @param {string} axis The name of the axis (i.e. 'x', 'y' or 'y2')
765 * @return { ... } A function mapping string -> option value
767 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
769 return function(opt
) {
770 var axis_opts
= self
.user_attrs_
.axes
;
771 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
772 return axis_opts
[axis
][opt
];
775 // I don't like that this is in a second spot.
776 if (axis
=== 'x' && opt
=== 'logscale') {
777 // return the default value.
778 // TODO(konigsberg): pull the default from a global default.
782 // user-specified attributes always trump defaults, even if they're less
784 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
785 return self
.user_attrs_
[opt
];
788 axis_opts
= self
.attrs_
.axes
;
789 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
790 return axis_opts
[axis
][opt
];
792 // check old-style axis options
793 // TODO(danvk): add a deprecation warning if either of these match.
794 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
795 return self
.axes_
[0][opt
];
796 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
797 return self
.axes_
[1][opt
];
799 return self
.attr_(opt
);
804 * Returns the current rolling period, as set by the user or an option.
805 * @return {number} The number of points in the rolling window
807 Dygraph
.prototype.rollPeriod
= function() {
808 return this.rollPeriod_
;
812 * Returns the currently-visible x-range. This can be affected by zooming,
813 * panning or a call to updateOptions.
814 * Returns a two-element array: [left, right].
815 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
817 Dygraph
.prototype.xAxisRange
= function() {
818 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
822 * Returns the lower- and upper-bound x-axis values of the
825 Dygraph
.prototype.xAxisExtremes
= function() {
826 var pad
= this.getNumericOption('xRangePad') / this.plotter_
.area
.w
;
827 if (this.numRows() === 0) {
828 return [0 - pad
, 1 + pad
];
830 var left
= this.rawData_
[0][0];
831 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
833 // Must keep this in sync with dygraph-layout _evaluateLimits()
834 var range
= right
- left
;
836 right
+= range
* pad
;
838 return [left
, right
];
842 * Returns the currently-visible y-range for an axis. This can be affected by
843 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
844 * called with no arguments, returns the range of the first axis.
845 * Returns a two-element array: [bottom, top].
847 Dygraph
.prototype.yAxisRange
= function(idx
) {
848 if (typeof(idx
) == "undefined") idx
= 0;
849 if (idx
< 0 || idx
>= this.axes_
.length
) {
852 var axis
= this.axes_
[idx
];
853 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
857 * Returns the currently-visible y-ranges for each axis. This can be affected by
858 * zooming, panning, calls to updateOptions, etc.
859 * Returns an array of [bottom, top] pairs, one for each y-axis.
861 Dygraph
.prototype.yAxisRanges
= function() {
863 for (var i
= 0; i
< this.axes_
.length
; i
++) {
864 ret
.push(this.yAxisRange(i
));
869 // TODO(danvk): use these functions throughout dygraphs.
871 * Convert from data coordinates to canvas/div X/Y coordinates.
872 * If specified, do this conversion for the coordinate system of a particular
873 * axis. Uses the first axis by default.
874 * Returns a two-element array: [X, Y]
876 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
877 * instead of toDomCoords(null, y, axis).
879 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
880 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
884 * Convert from data x coordinates to canvas/div X coordinate.
885 * If specified, do this conversion for the coordinate system of a particular
887 * Returns a single value or null if x is null.
889 Dygraph
.prototype.toDomXCoord
= function(x
) {
894 var area
= this.plotter_
.area
;
895 var xRange
= this.xAxisRange();
896 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
900 * Convert from data x coordinates to canvas/div Y coordinate and optional
901 * axis. Uses the first axis by default.
903 * returns a single value or null if y is null.
905 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
906 var pct
= this.toPercentYCoord(y
, axis
);
911 var area
= this.plotter_
.area
;
912 return area
.y
+ pct
* area
.h
;
916 * Convert from canvas/div coords to data coordinates.
917 * If specified, do this conversion for the coordinate system of a particular
918 * axis. Uses the first axis by default.
919 * Returns a two-element array: [X, Y].
921 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
922 * instead of toDataCoords(null, y, axis).
924 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
925 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
929 * Convert from canvas/div x coordinate to data coordinate.
931 * If x is null, this returns null.
933 Dygraph
.prototype.toDataXCoord
= function(x
) {
938 var area
= this.plotter_
.area
;
939 var xRange
= this.xAxisRange();
941 if (!this.attributes_
.getForAxis("logscale", 'x')) {
942 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
944 // TODO: remove duplicate code?
945 // Computing the inverse of toDomCoord.
946 var pct
= (x
- area
.x
) / area
.w
;
948 // Computing the inverse of toPercentXCoord. The function was arrived at with
949 // the following steps:
951 // Original calcuation:
952 // pct = (log(x) - log(xRange[0])) / (log(xRange
[1]) - log(xRange
[0])));
954 // Multiply both sides by the right-side demoninator.
955 // pct * (log(xRange[1] - log(xRange[0]))) = log(x) - log(xRange[0])
957 // add log(xRange[0]) to both sides
958 // log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])) = log(x);
960 // Swap both sides of the equation,
961 // log(x) = log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0]))
963 // Use both sides as the exponent in 10^exp and we're done.
964 // x = 10 ^ (log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])))
965 var logr0
= Dygraph
.log10(xRange
[0]);
966 var logr1
= Dygraph
.log10(xRange
[1]);
967 var exponent
= logr0
+ (pct
* (logr1
- logr0
));
968 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
974 * Convert from canvas/div y coord to value.
976 * If y is null, this returns null.
977 * if axis is null, this uses the first axis.
979 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
984 var area
= this.plotter_
.area
;
985 var yRange
= this.yAxisRange(axis
);
987 if (typeof(axis
) == "undefined") axis
= 0;
988 if (!this.attributes_
.getForAxis("logscale", axis
)) {
989 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
991 // Computing the inverse of toDomCoord.
992 var pct
= (y
- area
.y
) / area
.h
;
994 // Computing the inverse of toPercentYCoord. The function was arrived at with
995 // the following steps:
997 // Original calcuation:
998 // pct = (log(yRange[1]) - log(y)) / (log(yRange
[1]) - log(yRange
[0]));
1000 // Multiply both sides by the right-side demoninator.
1001 // pct * (log(yRange[1]) - log(yRange[0])) = log(yRange[1]) - log(y);
1003 // subtract log(yRange[1]) from both sides.
1004 // (pct * (log(yRange[1]) - log(yRange[0]))) - log(yRange[1]) = -log(y);
1006 // and multiply both sides by -1.
1007 // log(yRange[1]) - (pct * (logr1 - log(yRange[0])) = log(y);
1009 // Swap both sides of the equation,
1010 // log(y) = log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0])));
1012 // Use both sides as the exponent in 10^exp and we're done.
1013 // y = 10 ^ (log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0]))));
1014 var logr0
= Dygraph
.log10(yRange
[0]);
1015 var logr1
= Dygraph
.log10(yRange
[1]);
1016 var exponent
= logr1
- (pct
* (logr1
- logr0
));
1017 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
1023 * Converts a y for an axis to a percentage from the top to the
1024 * bottom of the drawing area.
1026 * If the coordinate represents a value visible on the canvas, then
1027 * the value will be between 0 and 1, where 0 is the top of the canvas.
1028 * However, this method will return values outside the range, as
1029 * values can fall outside the canvas.
1031 * If y is null, this returns null.
1032 * if axis is null, this uses the first axis.
1034 * @param {number} y The data y-coordinate.
1035 * @param {number} [axis] The axis number on which the data coordinate lives.
1036 * @return {number} A fraction in [0, 1] where 0 = the top edge.
1038 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
1042 if (typeof(axis
) == "undefined") axis
= 0;
1044 var yRange
= this.yAxisRange(axis
);
1047 var logscale
= this.attributes_
.getForAxis("logscale", axis
);
1049 var logr0
= Dygraph
.log10(yRange
[0]);
1050 var logr1
= Dygraph
.log10(yRange
[1]);
1051 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- logr0
);
1053 // yRange[1] - y is unit distance from the bottom.
1054 // yRange[1] - yRange[0] is the scale of the range.
1055 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
1056 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
1062 * Converts an x value to a percentage from the left to the right of
1065 * If the coordinate represents a value visible on the canvas, then
1066 * the value will be between 0 and 1, where 0 is the left of the canvas.
1067 * However, this method will return values outside the range, as
1068 * values can fall outside the canvas.
1070 * If x is null, this returns null.
1071 * @param {number} x The data x-coordinate.
1072 * @return {number} A fraction in [0, 1] where 0 = the left edge.
1074 Dygraph
.prototype.toPercentXCoord
= function(x
) {
1079 var xRange
= this.xAxisRange();
1081 var logscale
= this.attributes_
.getForAxis("logscale", 'x') ;
1082 if (logscale
== true) { // logscale can be null so we test for true explicitly.
1083 var logr0
= Dygraph
.log10(xRange
[0]);
1084 var logr1
= Dygraph
.log10(xRange
[1]);
1085 pct
= (Dygraph
.log10(x
) - logr0
) / (logr1
- logr0
);
1087 // x - xRange[0] is unit distance from the left.
1088 // xRange[1] - xRange[0] is the scale of the range.
1089 // The full expression below is the % from the left.
1090 pct
= (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
1096 * Returns the number of columns (including the independent variable).
1097 * @return {number} The number of columns.
1099 Dygraph
.prototype.numColumns
= function() {
1100 if (!this.rawData_
) return 0;
1101 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
1105 * Returns the number of rows (excluding any header/label row).
1106 * @return {number} The number of rows, less any header.
1108 Dygraph
.prototype.numRows
= function() {
1109 if (!this.rawData_
) return 0;
1110 return this.rawData_
.length
;
1114 * Returns the value in the given row and column. If the row and column exceed
1115 * the bounds on the data, returns null. Also returns null if the value is
1117 * @param {number} row The row number of the data (0-based). Row 0 is the
1118 * first row of data, not a header row.
1119 * @param {number} col The column number of the data (0-based)
1120 * @return {number} The value in the specified cell or null if the row/col
1121 * were out of range.
1123 Dygraph
.prototype.getValue
= function(row
, col
) {
1124 if (row
< 0 || row
> this.rawData_
.length
) return null;
1125 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
1127 return this.rawData_
[row
][col
];
1131 * Generates interface elements for the Dygraph: a containing div, a div to
1132 * display the current point, and a textbox to adjust the rolling average
1133 * period. Also creates the Renderer/Layout elements.
1136 Dygraph
.prototype.createInterface_
= function() {
1137 // Create the all-enclosing graph div
1138 var enclosing
= this.maindiv_
;
1140 this.graphDiv
= document
.createElement("div");
1142 // TODO(danvk): any other styles that are useful to set here?
1143 this.graphDiv
.style
.textAlign
= 'left'; // This is a CSS "reset"
1144 this.graphDiv
.style
.position
= 'relative';
1145 enclosing
.appendChild(this.graphDiv
);
1147 // Create the canvas for interactive parts of the chart.
1148 this.canvas_
= Dygraph
.createCanvas();
1149 this.canvas_
.style
.position
= "absolute";
1151 // ... and for static parts of the chart.
1152 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
1154 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
1155 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
1157 this.resizeElements_();
1159 // The interactive parts of the graph are drawn on top of the chart.
1160 this.graphDiv
.appendChild(this.hidden_
);
1161 this.graphDiv
.appendChild(this.canvas_
);
1162 this.mouseEventElement_
= this.createMouseEventElement_();
1164 // Create the grapher
1165 this.layout_
= new DygraphLayout(this);
1169 this.mouseMoveHandler_
= function(e
) {
1170 dygraph
.mouseMove_(e
);
1173 this.mouseOutHandler_
= function(e
) {
1174 // The mouse has left the chart if:
1175 // 1. e.target is inside the chart
1176 // 2. e.relatedTarget is outside the chart
1177 var target
= e
.target
|| e
.fromElement
;
1178 var relatedTarget
= e
.relatedTarget
|| e
.toElement
;
1179 if (Dygraph
.isNodeContainedBy(target
, dygraph
.graphDiv
) &&
1180 !Dygraph
.isNodeContainedBy(relatedTarget
, dygraph
.graphDiv
)) {
1181 dygraph
.mouseOut_(e
);
1185 this.addAndTrackEvent(window
, 'mouseout', this.mouseOutHandler_
);
1186 this.addAndTrackEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1188 // Don't recreate and register the resize handler on subsequent calls.
1189 // This happens when the graph is resized.
1190 if (!this.resizeHandler_
) {
1191 this.resizeHandler_
= function(e
) {
1195 // Update when the window is resized.
1196 // TODO(danvk): drop frames depending on complexity of the chart.
1197 this.addAndTrackEvent(window
, 'resize', this.resizeHandler_
);
1201 Dygraph
.prototype.resizeElements_
= function() {
1202 this.graphDiv
.style
.width
= this.width_
+ "px";
1203 this.graphDiv
.style
.height
= this.height_
+ "px";
1205 var canvasScale
= Dygraph
.getContextPixelRatio(this.canvas_ctx_
);
1206 this.canvas_
.width
= this.width_
* canvasScale
;
1207 this.canvas_
.height
= this.height_
* canvasScale
;
1208 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
1209 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
1210 if (canvasScale
!== 1) {
1211 this.canvas_ctx_
.scale(canvasScale
, canvasScale
);
1214 var hiddenScale
= Dygraph
.getContextPixelRatio(this.hidden_ctx_
);
1215 this.hidden_
.width
= this.width_
* hiddenScale
;
1216 this.hidden_
.height
= this.height_
* hiddenScale
;
1217 this.hidden_
.style
.width
= this.width_
+ "px"; // for IE
1218 this.hidden_
.style
.height
= this.height_
+ "px"; // for IE
1219 if (hiddenScale
!== 1) {
1220 this.hidden_ctx_
.scale(hiddenScale
, hiddenScale
);
1225 * Detach DOM elements in the dygraph and null out all data references.
1226 * Calling this when you're done with a dygraph can dramatically reduce memory
1227 * usage. See, e.g., the tests/perf.html example.
1229 Dygraph
.prototype.destroy
= function() {
1230 this.canvas_ctx_
.restore();
1231 this.hidden_ctx_
.restore();
1233 // Destroy any plugins, in the reverse order that they were registered.
1234 for (var i
= this.plugins_
.length
- 1; i
>= 0; i
--) {
1235 var p
= this.plugins_
.pop();
1236 if (p
.plugin
.destroy
) p
.plugin
.destroy();
1239 var removeRecursive
= function(node
) {
1240 while (node
.hasChildNodes()) {
1241 removeRecursive(node
.firstChild
);
1242 node
.removeChild(node
.firstChild
);
1246 this.removeTrackedEvents_();
1248 // remove mouse event handlers (This may not be necessary anymore)
1249 Dygraph
.removeEvent(window
, 'mouseout', this.mouseOutHandler_
);
1250 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1252 // remove window handlers
1253 Dygraph
.removeEvent(window
,'resize', this.resizeHandler_
);
1254 this.resizeHandler_
= null;
1256 removeRecursive(this.maindiv_
);
1258 var nullOut
= function(obj
) {
1259 for (var n
in obj
) {
1260 if (typeof(obj
[n
]) === 'object') {
1265 // These may not all be necessary, but it can't hurt...
1266 nullOut(this.layout_
);
1267 nullOut(this.plotter_
);
1272 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1273 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1274 * or the zoom rectangles) is done on this.canvas_.
1275 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1276 * @return {Object} The newly-created canvas
1279 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1280 var h
= Dygraph
.createCanvas();
1281 h
.style
.position
= "absolute";
1282 // TODO(danvk): h should be offset from canvas. canvas needs to include
1283 // some extra area to make it easier to zoom in on the far left and far
1284 // right. h needs to be precisely the plot area, so that clipping occurs.
1285 h
.style
.top
= canvas
.style
.top
;
1286 h
.style
.left
= canvas
.style
.left
;
1287 h
.width
= this.width_
;
1288 h
.height
= this.height_
;
1289 h
.style
.width
= this.width_
+ "px"; // for IE
1290 h
.style
.height
= this.height_
+ "px"; // for IE
1295 * Creates an overlay element used to handle mouse events.
1296 * @return {Object} The mouse event element.
1299 Dygraph
.prototype.createMouseEventElement_
= function() {
1300 if (this.isUsingExcanvas_
) {
1301 var elem
= document
.createElement("div");
1302 elem
.style
.position
= 'absolute';
1303 elem
.style
.backgroundColor
= 'white';
1304 elem
.style
.filter
= 'alpha(opacity=0)';
1305 elem
.style
.width
= this.width_
+ "px";
1306 elem
.style
.height
= this.height_
+ "px";
1307 this.graphDiv
.appendChild(elem
);
1310 return this.canvas_
;
1315 * Generate a set of distinct colors for the data series. This is done with a
1316 * color wheel. Saturation/Value are customizable, and the hue is
1317 * equally-spaced around the color wheel. If a custom set of colors is
1318 * specified, that is used instead.
1321 Dygraph
.prototype.setColors_
= function() {
1322 var labels
= this.getLabels();
1323 var num
= labels
.length
- 1;
1325 this.colorsMap_
= {};
1327 // These are used for when no custom colors are specified.
1328 var sat
= this.getNumericOption('colorSaturation') || 1.0;
1329 var val
= this.getNumericOption('colorValue') || 0.5;
1330 var half
= Math
.ceil(num
/ 2);
1332 var colors
= this.getOption('colors');
1333 var visibility
= this.visibility();
1334 for (var i
= 0; i
< num
; i
++) {
1335 if (!visibility
[i
]) {
1338 var label
= labels
[i
+ 1];
1339 var colorStr
= this.attributes_
.getForSeries('color', label
);
1342 colorStr
= colors
[i
% colors
.length
];
1344 // alternate colors for high contrast.
1345 var idx
= i
% 2 ? (half
+ (i
+ 1)/ 2) : Math.ceil((i + 1) / 2);
1346 var hue
= (1.0 * idx
/ (1 + num
));
1347 colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1350 this.colors_
.push(colorStr
);
1351 this.colorsMap_
[label
] = colorStr
;
1356 * Return the list of colors. This is either the list of colors passed in the
1357 * attributes or the autogenerated list of rgb(r,g,b) strings.
1358 * This does not return colors for invisible series.
1359 * @return {Array.<string>} The list of colors.
1361 Dygraph
.prototype.getColors
= function() {
1362 return this.colors_
;
1366 * Returns a few attributes of a series, i.e. its color, its visibility, which
1367 * axis it's assigned to, and its column in the original data.
1368 * Returns null if the series does not exist.
1369 * Otherwise, returns an object with column, visibility, color and axis properties.
1370 * The "axis" property will be set to 1 for y1 and 2 for y2.
1371 * The "column" property can be fed back into getValue(row, column) to get
1372 * values for this series.
1374 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1376 var labels
= this.getLabels();
1377 for (var i
= 1; i
< labels
.length
; i
++) {
1378 if (labels
[i
] == series_name
) {
1383 if (idx
== -1) return null;
1388 visible
: this.visibility()[idx
- 1],
1389 color
: this.colorsMap_
[series_name
],
1390 axis
: 1 + this.attributes_
.axisForSeries(series_name
)
1395 * Create the text box to adjust the averaging period
1398 Dygraph
.prototype.createRollInterface_
= function() {
1399 // Create a roller if one doesn't exist already.
1400 if (!this.roller_
) {
1401 this.roller_
= document
.createElement("input");
1402 this.roller_
.type
= "text";
1403 this.roller_
.style
.display
= "none";
1404 this.graphDiv
.appendChild(this.roller_
);
1407 var display
= this.getBooleanOption('showRoller') ? 'block' : 'none';
1409 var area
= this.plotter_
.area
;
1410 var textAttr
= { "position": "absolute",
1412 "top": (area
.y
+ area
.h
- 25) + "px",
1413 "left": (area
.x
+ 1) + "px",
1416 this.roller_
.size
= "2";
1417 this.roller_
.value
= this.rollPeriod_
;
1418 for (var name
in textAttr
) {
1419 if (textAttr
.hasOwnProperty(name
)) {
1420 this.roller_
.style
[name
] = textAttr
[name
];
1425 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1429 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1433 Dygraph
.prototype.createDragInterface_
= function() {
1435 // Tracks whether the mouse is down right now
1437 isPanning
: false, // is this drag part of a pan?
1438 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1439 dragStartX
: null, // pixel coordinates
1440 dragStartY
: null, // pixel coordinates
1441 dragEndX
: null, // pixel coordinates
1442 dragEndY
: null, // pixel coordinates
1443 dragDirection
: null,
1444 prevEndX
: null, // pixel coordinates
1445 prevEndY
: null, // pixel coordinates
1446 prevDragDirection
: null,
1447 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1449 // The value on the left side of the graph when a pan operation starts.
1450 initialLeftmostDate
: null,
1452 // The number of units each pixel spans. (This won't be valid for log
1454 xUnitsPerPixel
: null,
1456 // TODO(danvk): update this comment
1457 // The range in second/value units that the viewport encompasses during a
1458 // panning operation.
1461 // Top-left corner of the canvas, in DOM coords
1462 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1466 // Values for use with panEdgeFraction, which limit how far outside the
1467 // graph's data boundaries it can be panned.
1468 boundedDates
: null, // [minDate, maxDate]
1469 boundedValues
: null, // [[minValue, maxValue] ...]
1471 // We cover iframes during mouse interactions. See comments in
1472 // dygraph-utils.js for more info on why this is a good idea.
1473 tarp
: new Dygraph
.IFrameTarp(),
1475 // contextB is the same thing as this context object but renamed.
1476 initializeMouseDown
: function(event
, g
, contextB
) {
1477 // prevents mouse drags from selecting page text.
1478 if (event
.preventDefault
) {
1479 event
.preventDefault(); // Firefox, Chrome, etc.
1481 event
.returnValue
= false; // IE
1482 event
.cancelBubble
= true;
1485 var canvasPos
= Dygraph
.findPos(g
.canvas_
);
1486 contextB
.px
= canvasPos
.x
;
1487 contextB
.py
= canvasPos
.y
;
1488 contextB
.dragStartX
= Dygraph
.dragGetX_(event
, contextB
);
1489 contextB
.dragStartY
= Dygraph
.dragGetY_(event
, contextB
);
1490 contextB
.cancelNextDblclick
= false;
1491 contextB
.tarp
.cover();
1493 destroy
: function() {
1495 if (context
.isZooming
|| context
.isPanning
) {
1496 context
.isZooming
= false;
1497 context
.dragStartX
= null;
1498 context
.dragStartY
= null;
1501 if (context
.isPanning
) {
1502 context
.isPanning
= false;
1503 context
.draggingDate
= null;
1504 context
.dateRange
= null;
1505 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1506 delete self
.axes_
[i
].draggingValue
;
1507 delete self
.axes_
[i
].dragValueRange
;
1511 context
.tarp
.uncover();
1515 var interactionModel
= this.getOption("interactionModel");
1517 // Self is the graph.
1520 // Function that binds the graph and context to the handler.
1521 var bindHandler
= function(handler
) {
1522 return function(event
) {
1523 handler(event
, self
, context
);
1527 for (var eventName
in interactionModel
) {
1528 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1529 this.addAndTrackEvent(this.mouseEventElement_
, eventName
,
1530 bindHandler(interactionModel
[eventName
]));
1533 // If the user releases the mouse button during a drag, but not over the
1534 // canvas, then it doesn't count as a zooming action.
1535 if (!interactionModel
.willDestroyContextMyself
) {
1536 var mouseUpHandler
= function(event
) {
1540 this.addAndTrackEvent(document
, 'mouseup', mouseUpHandler
);
1545 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1546 * up any previous zoom rectangles that were drawn. This could be optimized to
1547 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1550 * @param {number} direction the direction of the zoom rectangle. Acceptable
1551 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1552 * @param {number} startX The X position where the drag started, in canvas
1554 * @param {number} endX The current X position of the drag, in canvas coords.
1555 * @param {number} startY The Y position where the drag started, in canvas
1557 * @param {number} endY The current Y position of the drag, in canvas coords.
1558 * @param {number} prevDirection the value of direction on the previous call to
1559 * this function. Used to avoid excess redrawing
1560 * @param {number} prevEndX The value of endX on the previous call to this
1561 * function. Used to avoid excess redrawing
1562 * @param {number} prevEndY The value of endY on the previous call to this
1563 * function. Used to avoid excess redrawing
1566 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1567 endY
, prevDirection
, prevEndX
,
1569 var ctx
= this.canvas_ctx_
;
1571 // Clean up from the previous rect if necessary
1572 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1573 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1574 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1575 } else if (prevDirection
== Dygraph
.VERTICAL
) {
1576 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1577 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1580 // Draw a light-grey rectangle to show the new viewing area
1581 if (direction
== Dygraph
.HORIZONTAL
) {
1582 if (endX
&& startX
) {
1583 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1584 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1585 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1587 } else if (direction
== Dygraph
.VERTICAL
) {
1588 if (endY
&& startY
) {
1589 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1590 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1591 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1595 if (this.isUsingExcanvas_
) {
1596 this.currentZoomRectArgs_
= [direction
, startX
, endX
, startY
, endY
, 0, 0, 0];
1601 * Clear the zoom rectangle (and perform no zoom).
1604 Dygraph
.prototype.clearZoomRect_
= function() {
1605 this.currentZoomRectArgs_
= null;
1606 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1610 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1611 * the canvas. The exact zoom window may be slightly larger if there are no data
1612 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1613 * which accepts dates that match the raw data. This function redraws the graph.
1615 * @param {number} lowX The leftmost pixel value that should be visible.
1616 * @param {number} highX The rightmost pixel value that should be visible.
1619 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1620 this.currentZoomRectArgs_
= null;
1621 // Find the earliest and latest dates contained in this canvasx range.
1622 // Convert the call to date ranges of the raw data.
1623 var minDate
= this.toDataXCoord(lowX
);
1624 var maxDate
= this.toDataXCoord(highX
);
1625 this.doZoomXDates_(minDate
, maxDate
);
1629 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1630 * method with doZoomX which accepts pixel coordinates. This function redraws
1633 * @param {number} minDate The minimum date that should be visible.
1634 * @param {number} maxDate The maximum date that should be visible.
1637 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1638 // TODO(danvk): when xAxisRange is null (i.e. "fit to data", the animation
1639 // can produce strange effects. Rather than the x-axis transitioning slowly
1640 // between values, it can jerk around.)
1641 var old_window
= this.xAxisRange();
1642 var new_window
= [minDate
, maxDate
];
1643 this.zoomed_x_
= true;
1645 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1646 if (that
.getFunctionOption("zoomCallback")) {
1647 that
.getFunctionOption("zoomCallback").call(that
,
1648 minDate
, maxDate
, that
.yAxisRanges());
1654 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1655 * the canvas. This function redraws the graph.
1657 * @param {number} lowY The topmost pixel value that should be visible.
1658 * @param {number} highY The lowest pixel value that should be visible.
1661 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1662 this.currentZoomRectArgs_
= null;
1663 // Find the highest and lowest values in pixel range for each axis.
1664 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1665 // This is because pixels increase as you go down on the screen, whereas data
1666 // coordinates increase as you go up the screen.
1667 var oldValueRanges
= this.yAxisRanges();
1668 var newValueRanges
= [];
1669 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1670 var hi
= this.toDataYCoord(lowY
, i
);
1671 var low
= this.toDataYCoord(highY
, i
);
1672 newValueRanges
.push([low
, hi
]);
1675 this.zoomed_y_
= true;
1677 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1678 if (that
.getFunctionOption("zoomCallback")) {
1679 var xRange
= that
.xAxisRange();
1680 that
.getFunctionOption("zoomCallback").call(that
,
1681 xRange
[0], xRange
[1], that
.yAxisRanges());
1687 * Transition function to use in animations. Returns values between 0.0
1688 * (totally old values) and 1.0 (totally new values) for each frame.
1691 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1693 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1697 * Reset the zoom to the original view coordinates. This is the same as
1698 * double-clicking on the graph.
1700 Dygraph
.prototype.resetZoom
= function() {
1701 var dirty
= false, dirtyX
= false, dirtyY
= false;
1702 if (this.dateWindow_
!== null) {
1707 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1708 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1714 // Clear any selection, since it's likely to be drawn in the wrong place.
1715 this.clearSelection();
1718 this.zoomed_x_
= false;
1719 this.zoomed_y_
= false;
1721 var minDate
= this.rawData_
[0][0];
1722 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1724 // With only one frame, don't bother calculating extreme ranges.
1725 // TODO(danvk): merge this block w/ the code below
.
1726 if (!this.getBooleanOption("animatedZooms")) {
1727 this.dateWindow_
= null;
1728 for (i
= 0; i
< this.axes_
.length
; i
++) {
1729 if (this.axes_
[i
].valueWindow
!== null) {
1730 delete this.axes_
[i
].valueWindow
;
1734 if (this.getFunctionOption("zoomCallback")) {
1735 this.getFunctionOption("zoomCallback").call(this,
1736 minDate
, maxDate
, this.yAxisRanges());
1741 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1743 oldWindow
= this.xAxisRange();
1744 newWindow
= [minDate
, maxDate
];
1748 oldValueRanges
= this.yAxisRanges();
1749 // TODO(danvk): this is pretty inefficient
1750 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1751 var extremes
= packed
.extremes
;
1753 // this has the side-effect of modifying this.axes_.
1754 // this doesn't make much sense in this context, but it's convenient (we
1755 // need this.axes_[*].extremeValues) and not harmful since we'll be
1756 // calling drawGraph_ shortly, which clobbers these values.
1757 this.computeYAxisRanges_(extremes
);
1759 newValueRanges
= [];
1760 for (i
= 0; i
< this.axes_
.length
; i
++) {
1761 var axis
= this.axes_
[i
];
1762 newValueRanges
.push((axis
.valueRange
!== null &&
1763 axis
.valueRange
!== undefined
) ?
1764 axis
.valueRange
: axis
.extremeRange
);
1769 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1771 that
.dateWindow_
= null;
1772 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1773 if (that
.axes_
[i
].valueWindow
!== null) {
1774 delete that
.axes_
[i
].valueWindow
;
1777 if (that
.getFunctionOption("zoomCallback")) {
1778 that
.getFunctionOption("zoomCallback").call(that
,
1779 minDate
, maxDate
, that
.yAxisRanges());
1786 * Combined animation logic for all zoom functions.
1787 * either the x parameters or y parameters may be null.
1790 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1791 var steps
= this.getBooleanOption("animatedZooms") ?
1792 Dygraph
.ANIMATION_STEPS
: 1;
1795 var valueRanges
= [];
1798 if (oldXRange
!== null && newXRange
!== null) {
1799 for (step
= 1; step
<= steps
; step
++) {
1800 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1801 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1802 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1806 if (oldYRanges
!== null && newYRanges
!== null) {
1807 for (step
= 1; step
<= steps
; step
++) {
1808 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1810 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1811 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1812 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1814 valueRanges
[step
-1] = thisRange
;
1819 Dygraph
.repeatAndCleanup(function(step
) {
1820 if (valueRanges
.length
) {
1821 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1822 var w
= valueRanges
[step
][i
];
1823 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1826 if (windows
.length
) {
1827 that
.dateWindow_
= windows
[step
];
1830 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1834 * Get the current graph's area object.
1836 * Returns: {x, y, w, h}
1838 Dygraph
.prototype.getArea
= function() {
1839 return this.plotter_
.area
;
1843 * Convert a mouse event to DOM coordinates relative to the graph origin.
1845 * Returns a two-element array: [X, Y].
1847 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1848 if (event
.offsetX
&& event
.offsetY
) {
1849 return [ event
.offsetX
, event
.offsetY
];
1851 var eventElementPos
= Dygraph
.findPos(this.mouseEventElement_
);
1852 var canvasx
= Dygraph
.pageX(event
) - eventElementPos
.x
;
1853 var canvasy
= Dygraph
.pageY(event
) - eventElementPos
.y
;
1854 return [canvasx
, canvasy
];
1859 * Given a canvas X coordinate, find the closest row.
1860 * @param {number} domX graph-relative DOM X coordinate
1861 * Returns {number} row number.
1864 Dygraph
.prototype.findClosestRow
= function(domX
) {
1865 var minDistX
= Infinity
;
1866 var closestRow
= -1;
1867 var sets
= this.layout_
.points
;
1868 for (var i
= 0; i
< sets
.length
; i
++) {
1869 var points
= sets
[i
];
1870 var len
= points
.length
;
1871 for (var j
= 0; j
< len
; j
++) {
1872 var point
= points
[j
];
1873 if (!Dygraph
.isValidPoint(point
, true)) continue;
1874 var dist
= Math
.abs(point
.canvasx
- domX
);
1875 if (dist
< minDistX
) {
1877 closestRow
= point
.idx
;
1886 * Given canvas X,Y coordinates, find the closest point.
1888 * This finds the individual data point across all visible series
1889 * that's closest to the supplied DOM coordinates using the standard
1890 * Euclidean X,Y distance.
1892 * @param {number} domX graph-relative DOM X coordinate
1893 * @param {number} domY graph-relative DOM Y coordinate
1894 * Returns: {row, seriesName, point}
1897 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1898 var minDist
= Infinity
;
1899 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
, closestRow
;
1900 for ( var setIdx
= this.layout_
.points
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1901 var points
= this.layout_
.points
[setIdx
];
1902 for (var i
= 0; i
< points
.length
; ++i
) {
1904 if (!Dygraph
.isValidPoint(point
)) continue;
1905 dx
= point
.canvasx
- domX
;
1906 dy
= point
.canvasy
- domY
;
1907 dist
= dx
* dx
+ dy
* dy
;
1908 if (dist
< minDist
) {
1910 closestPoint
= point
;
1911 closestSeries
= setIdx
;
1912 closestRow
= point
.idx
;
1916 var name
= this.layout_
.setNames
[closestSeries
];
1925 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1927 * This first finds the X data point closest to the supplied DOM X coordinate,
1928 * then finds the series which puts the Y coordinate on top of its filled area,
1929 * using linear interpolation between adjacent point pairs.
1931 * @param {number} domX graph-relative DOM X coordinate
1932 * @param {number} domY graph-relative DOM Y coordinate
1933 * Returns: {row, seriesName, point}
1936 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1937 var row
= this.findClosestRow(domX
);
1938 var closestPoint
, closestSeries
;
1939 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
1940 var boundary
= this.getLeftBoundary_(setIdx
);
1941 var rowIdx
= row
- boundary
;
1942 var points
= this.layout_
.points
[setIdx
];
1943 if (rowIdx
>= points
.length
) continue;
1944 var p1
= points
[rowIdx
];
1945 if (!Dygraph
.isValidPoint(p1
)) continue;
1946 var py
= p1
.canvasy
;
1947 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1948 // interpolate series Y value using next point
1949 var p2
= points
[rowIdx
+ 1];
1950 if (Dygraph
.isValidPoint(p2
)) {
1951 var dx
= p2
.canvasx
- p1
.canvasx
;
1953 var r
= (domX
- p1
.canvasx
) / dx
;
1954 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1957 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1958 // interpolate series Y value using previous point
1959 var p0
= points
[rowIdx
- 1];
1960 if (Dygraph
.isValidPoint(p0
)) {
1961 var dx
= p1
.canvasx
- p0
.canvasx
;
1963 var r
= (p1
.canvasx
- domX
) / dx
;
1964 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1968 // Stop if the point (domX, py) is above this series' upper edge
1969 if (setIdx
=== 0 || py
< domY
) {
1971 closestSeries
= setIdx
;
1974 var name
= this.layout_
.setNames
[closestSeries
];
1983 * When the mouse moves in the canvas, display information about a nearby data
1984 * point and draw dots over those points in the data series. This function
1985 * takes care of cleanup of previously-drawn dots.
1986 * @param {Object} event The mousemove event from the browser.
1989 Dygraph
.prototype.mouseMove_
= function(event
) {
1990 // This prevents JS errors when mousing over the canvas before data loads.
1991 var points
= this.layout_
.points
;
1992 if (points
=== undefined
|| points
=== null) return;
1994 var canvasCoords
= this.eventToDomCoords(event
);
1995 var canvasx
= canvasCoords
[0];
1996 var canvasy
= canvasCoords
[1];
1998 var highlightSeriesOpts
= this.getOption("highlightSeriesOpts");
1999 var selectionChanged
= false;
2000 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
2002 if (this.getBooleanOption("stackedGraph")) {
2003 closest
= this.findStackedPoint(canvasx
, canvasy
);
2005 closest
= this.findClosestPoint(canvasx
, canvasy
);
2007 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
2009 var idx
= this.findClosestRow(canvasx
);
2010 selectionChanged
= this.setSelection(idx
);
2013 var callback
= this.getFunctionOption("highlightCallback");
2014 if (callback
&& selectionChanged
) {
2015 callback
.call(this, event
,
2019 this.highlightSet_
);
2024 * Fetch left offset from the specified set index or if not passed, the
2025 * first defined boundaryIds record (see bug #236).
2028 Dygraph
.prototype.getLeftBoundary_
= function(setIdx
) {
2029 if (this.boundaryIds_
[setIdx
]) {
2030 return this.boundaryIds_
[setIdx
][0];
2032 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
2033 if (this.boundaryIds_
[i
] !== undefined
) {
2034 return this.boundaryIds_
[i
][0];
2041 Dygraph
.prototype.animateSelection_
= function(direction
) {
2042 var totalSteps
= 10;
2044 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
2045 if (this.animateId
=== undefined
) this.animateId
= 0;
2046 var start
= this.fadeLevel
;
2047 var steps
= direction
< 0 ? start
: totalSteps
- start
;
2049 if (this.fadeLevel
) {
2050 this.updateSelection_(1.0);
2055 var thisId
= ++this.animateId
;
2057 Dygraph
.repeatAndCleanup(
2059 // ignore simultaneous animations
2060 if (that
.animateId
!= thisId
) return;
2062 that
.fadeLevel
+= direction
;
2063 if (that
.fadeLevel
=== 0) {
2064 that
.clearSelection();
2066 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
2069 steps
, millis
, function() {});
2073 * Draw dots over the selectied points in the data series. This function
2074 * takes care of cleanup of previously-drawn dots.
2077 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
2078 /*var defaultPrevented = */
2079 this.cascadeEvents_('select', {
2080 selectedX
: this.lastx_
,
2081 selectedPoints
: this.selPoints_
2083 // TODO(danvk): use defaultPrevented here?
2085 // Clear the previously drawn vertical, if there is one
2087 var ctx
= this.canvas_ctx_
;
2088 if (this.getOption('highlightSeriesOpts')) {
2089 ctx
.clearRect(0, 0, this.width_
, this.height_
);
2090 var alpha
= 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha');
2092 // Activating background fade includes an animation effect for a gradual
2093 // fade. TODO(klausw): make this independently configurable if it causes
2094 // issues? Use a shared preference to control animations?
2095 var animateBackgroundFade
= true;
2096 if (animateBackgroundFade
) {
2097 if (opt_animFraction
=== undefined
) {
2098 // start a new animation
2099 this.animateSelection_(1);
2102 alpha
*= opt_animFraction
;
2104 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
2105 ctx
.fillRect(0, 0, this.width_
, this.height_
);
2108 // Redraw only the highlighted series in the interactive canvas (not the
2109 // static plot canvas, which is where series are usually drawn).
2110 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
2111 } else if (this.previousVerticalX_
>= 0) {
2112 // Determine the maximum highlight circle size.
2113 var maxCircleSize
= 0;
2114 var labels
= this.attr_('labels');
2115 for (i
= 1; i
< labels
.length
; i
++) {
2116 var r
= this.getNumericOption('highlightCircleSize', labels
[i
]);
2117 if (r
> maxCircleSize
) maxCircleSize
= r
;
2119 var px
= this.previousVerticalX_
;
2120 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
2121 2 * maxCircleSize
+ 2, this.height_
);
2124 if (this.isUsingExcanvas_
&& this.currentZoomRectArgs_
) {
2125 Dygraph
.prototype.drawZoomRect_
.apply(this, this.currentZoomRectArgs_
);
2128 if (this.selPoints_
.length
> 0) {
2129 // Draw colored circles over the center of each selected point
2130 var canvasx
= this.selPoints_
[0].canvasx
;
2132 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
2133 var pt
= this.selPoints_
[i
];
2134 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
2136 var circleSize
= this.getNumericOption('highlightCircleSize', pt
.name
);
2137 var callback
= this.getFunctionOption("drawHighlightPointCallback", pt
.name
);
2138 var color
= this.plotter_
.colors
[pt
.name
];
2140 callback
= Dygraph
.Circles
.DEFAULT
;
2142 ctx
.lineWidth
= this.getNumericOption('strokeWidth', pt
.name
);
2143 ctx
.strokeStyle
= color
;
2144 ctx
.fillStyle
= color
;
2145 callback
.call(this, this, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
2146 color
, circleSize
, pt
.idx
);
2150 this.previousVerticalX_
= canvasx
;
2155 * Manually set the selected points and display information about them in the
2156 * legend. The selection can be cleared using clearSelection() and queried
2157 * using getSelection().
2158 * @param {number} row Row number that should be highlighted (i.e. appear with
2159 * hover dots on the chart). Set to false to clear any selection.
2160 * @param {seriesName} optional series name to highlight that series with the
2161 * the highlightSeriesOpts setting.
2162 * @param { locked } optional If true, keep seriesName selected when mousing
2163 * over the graph, disabling closest-series highlighting. Call clearSelection()
2166 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
2167 // Extract the points we've selected
2168 this.selPoints_
= [];
2170 var changed
= false;
2171 if (row
!== false && row
>= 0) {
2172 if (row
!= this.lastRow_
) changed
= true;
2173 this.lastRow_
= row
;
2174 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
2175 var points
= this.layout_
.points
[setIdx
];
2176 // Check if the point at the appropriate index is the point we're looking
2177 // for. If it is, just use it, otherwise search the array for a point
2178 // in the proper place.
2179 var setRow
= row
- this.getLeftBoundary_(setIdx
);
2180 if (setRow
< points
.length
&& points
[setRow
].idx
== row
) {
2181 var point
= points
[setRow
];
2182 if (point
.yval
!== null) this.selPoints_
.push(point
);
2184 for (var pointIdx
= 0; pointIdx
< points
.length
; ++pointIdx
) {
2185 var point
= points
[pointIdx
];
2186 if (point
.idx
== row
) {
2187 if (point
.yval
!== null) {
2188 this.selPoints_
.push(point
);
2196 if (this.lastRow_
>= 0) changed
= true;
2200 if (this.selPoints_
.length
) {
2201 this.lastx_
= this.selPoints_
[0].xval
;
2206 if (opt_seriesName
!== undefined
) {
2207 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
2208 this.highlightSet_
= opt_seriesName
;
2211 if (opt_locked
!== undefined
) {
2212 this.lockedSet_
= opt_locked
;
2216 this.updateSelection_(undefined
);
2222 * The mouse has left the canvas. Clear out whatever artifacts remain
2223 * @param {Object} event the mouseout event from the browser.
2226 Dygraph
.prototype.mouseOut_
= function(event
) {
2227 if (this.getFunctionOption("unhighlightCallback")) {
2228 this.getFunctionOption("unhighlightCallback").call(this, event
);
2231 if (this.getBooleanOption("hideOverlayOnMouseOut") && !this.lockedSet_
) {
2232 this.clearSelection();
2237 * Clears the current selection (i.e. points that were highlighted by moving
2238 * the mouse over the chart).
2240 Dygraph
.prototype.clearSelection
= function() {
2241 this.cascadeEvents_('deselect', {});
2243 this.lockedSet_
= false;
2244 // Get rid of the overlay data
2245 if (this.fadeLevel
) {
2246 this.animateSelection_(-1);
2249 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2251 this.selPoints_
= [];
2254 this.highlightSet_
= null;
2258 * Returns the number of the currently selected row. To get data for this row,
2259 * you can use the getValue method.
2260 * @return {number} row number, or -1 if nothing is selected
2262 Dygraph
.prototype.getSelection
= function() {
2263 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2267 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2268 var points
= this.layout_
.points
[setIdx
];
2269 for (var row
= 0; row
< points
.length
; row
++) {
2270 if (points
[row
].x
== this.selPoints_
[0].x
) {
2271 return points
[row
].idx
;
2279 * Returns the name of the currently-highlighted series.
2280 * Only available when the highlightSeriesOpts option is in use.
2282 Dygraph
.prototype.getHighlightSeries
= function() {
2283 return this.highlightSet_
;
2287 * Returns true if the currently-highlighted series was locked
2288 * via setSelection(..., seriesName, true).
2290 Dygraph
.prototype.isSeriesLocked
= function() {
2291 return this.lockedSet_
;
2295 * Fires when there's data available to be graphed.
2296 * @param {string} data Raw CSV data to be plotted
2299 Dygraph
.prototype.loadedEvent_
= function(data
) {
2300 this.rawData_
= this.parseCSV_(data
);
2301 this.cascadeDataDidUpdateEvent_();
2306 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2309 Dygraph
.prototype.addXTicks_
= function() {
2310 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2312 if (this.dateWindow_
) {
2313 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2315 range
= this.xAxisExtremes();
2318 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2319 var xTicks
= xAxisOptionsView('ticker')(
2322 this.width_
, // TODO(danvk): should be area.width
2325 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2326 // console.log(msg);
2327 this.layout_
.setXTicks(xTicks
);
2331 * Returns the correct handler class for the currently set options.
2334 Dygraph
.prototype.getHandlerClass_
= function() {
2336 if (this.attr_('dataHandler')) {
2337 handlerClass
= this.attr_('dataHandler');
2338 } else if (this.fractions_
) {
2339 if (this.getBooleanOption('errorBars')) {
2340 handlerClass
= Dygraph
.DataHandlers
.FractionsBarsHandler
;
2342 handlerClass
= Dygraph
.DataHandlers
.DefaultFractionHandler
;
2344 } else if (this.getBooleanOption('customBars')) {
2345 handlerClass
= Dygraph
.DataHandlers
.CustomBarsHandler
;
2346 } else if (this.getBooleanOption('errorBars')) {
2347 handlerClass
= Dygraph
.DataHandlers
.ErrorBarsHandler
;
2349 handlerClass
= Dygraph
.DataHandlers
.DefaultHandler
;
2351 return handlerClass
;
2356 * This function is called once when the chart's data is changed or the options
2357 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2358 * idea is that values derived from the chart's data can be computed here,
2359 * rather than every time the chart is drawn. This includes things like the
2360 * number of axes, rolling averages, etc.
2362 Dygraph
.prototype.predraw_
= function() {
2363 var start
= new Date();
2365 // Create the correct dataHandler
2366 this.dataHandler_
= new (this.getHandlerClass_())();
2368 this.layout_
.computePlotArea();
2370 // TODO(danvk): move more computations out of drawGraph_ and into here.
2371 this.computeYAxes_();
2373 if (!this.is_initial_draw_
) {
2374 this.canvas_ctx_
.restore();
2375 this.hidden_ctx_
.restore();
2378 this.canvas_ctx_
.save();
2379 this.hidden_ctx_
.save();
2381 // Create a new plotter.
2382 this.plotter_
= new DygraphCanvasRenderer(this,
2387 // The roller sits in the bottom left corner of the chart. We don't know where
2388 // this will be until the options are available, so it's positioned here.
2389 this.createRollInterface_();
2391 this.cascadeEvents_('predraw');
2393 // Convert the raw data (a 2D array) into the internal format and compute
2394 // rolling averages.
2395 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2396 for (var i
= 1; i
< this.numColumns(); i
++) {
2397 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2398 var series
= this.dataHandler_
.extractSeries(this.rawData_
, i
, this.attributes_
);
2399 if (this.rollPeriod_
> 1) {
2400 series
= this.dataHandler_
.rollingAverage(series
, this.rollPeriod_
, this.attributes_
);
2403 this.rolledSeries_
.push(series
);
2406 // If the data or options have changed, then we'd better redraw.
2409 // This is used to determine whether to do various animations.
2410 var end
= new Date();
2411 this.drawingTimeMs_
= (end
- start
);
2417 * xval_* and yval_* are the original unscaled data values,
2418 * while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
2419 * yval_stacked is the cumulative Y value used for stacking graphs,
2420 * and bottom/top/minus/plus are used for error bar graphs.
2427 * y_bottom: ?number,
2429 * y_stacked: ?number,
2431 * yval_minus: ?number,
2433 * yval_plus: ?number,
2437 Dygraph
.PointType
= undefined
;
2440 * Calculates point stacking for stackedGraph=true.
2442 * For stacking purposes, interpolate or extend neighboring data across
2443 * NaN values based on stackedGraphNaNFill settings. This is for display
2444 * only, the underlying data value as shown in the legend remains NaN.
2446 * @param {Array.<Dygraph.PointType>} points Point array for a single series.
2447 * Updates each Point's yval_stacked property.
2448 * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y
2449 * values for the series seen so far. Index is the row number. Updated
2450 * based on the current series's values.
2451 * @param {Array.<number>} seriesExtremes Min and max values, updated
2452 * to reflect the stacked values.
2453 * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or
2457 Dygraph
.stackPoints_
= function(
2458 points
, cumulativeYval
, seriesExtremes
, fillMethod
) {
2459 var lastXval
= null;
2460 var prevPoint
= null;
2461 var nextPoint
= null;
2462 var nextPointIdx
= -1;
2464 // Find the next stackable point starting from the given index.
2465 var updateNextPoint
= function(idx
) {
2466 // If we've previously found a non-NaN point and haven't gone past it yet,
2468 if (nextPointIdx
>= idx
) return;
2470 // We haven't found a non-NaN point yet or have moved past it,
2471 // look towards the right to find a non-NaN point.
2472 for (var j
= idx
; j
< points
.length
; ++j
) {
2473 // Clear out a previously-found point (if any) since it's no longer
2474 // valid, we shouldn't use it for interpolation anymore.
2476 if (!isNaN(points
[j
].yval
) && points
[j
].yval
!== null) {
2478 nextPoint
= points
[j
];
2484 for (var i
= 0; i
< points
.length
; ++i
) {
2485 var point
= points
[i
];
2486 var xval
= point
.xval
;
2487 if (cumulativeYval
[xval
] === undefined
) {
2488 cumulativeYval
[xval
] = 0;
2491 var actualYval
= point
.yval
;
2492 if (isNaN(actualYval
) || actualYval
=== null) {
2493 if(fillMethod
== 'none') {
2496 // Interpolate/extend
for stacking purposes
if possible
.
2498 if (prevPoint
&& nextPoint
&& fillMethod
!= 'none') {
2499 // Use linear interpolation between prevPoint and nextPoint.
2500 actualYval
= prevPoint
.yval
+ (nextPoint
.yval
- prevPoint
.yval
) *
2501 ((xval
- prevPoint
.xval
) / (nextPoint
.xval
- prevPoint
.xval
));
2502 } else if (prevPoint
&& fillMethod
== 'all') {
2503 actualYval
= prevPoint
.yval
;
2504 } else if (nextPoint
&& fillMethod
== 'all') {
2505 actualYval
= nextPoint
.yval
;
2514 var stackedYval
= cumulativeYval
[xval
];
2515 if (lastXval
!= xval
) {
2516 // If an x-value is repeated, we ignore the duplicates.
2517 stackedYval
+= actualYval
;
2518 cumulativeYval
[xval
] = stackedYval
;
2522 point
.yval_stacked
= stackedYval
;
2524 if (stackedYval
> seriesExtremes
[1]) {
2525 seriesExtremes
[1] = stackedYval
;
2527 if (stackedYval
< seriesExtremes
[0]) {
2528 seriesExtremes
[0] = stackedYval
;
2535 * Loop over all fields and create datasets, calculating extreme y-values for
2536 * each series and extreme x-indices as we go.
2538 * dateWindow is passed in as an explicit parameter so that we can compute
2539 * extreme values "speculatively", i.e. without actually setting state on the
2542 * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2543 * rolledSeries[seriesIndex][row] = raw point, where
2544 * seriesIndex is the column number starting with 1, and
2545 * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2546 * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2548 * points: Array.<Array.<Dygraph.PointType>>,
2549 * seriesExtremes: Array.<Array.<number>>,
2550 * boundaryIds: Array.<number>}}
2553 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2554 var boundaryIds
= [];
2556 var cumulativeYval
= []; // For stacked series.
2557 var extremes
= {}; // series name -> [low, high]
2558 var seriesIdx
, sampleIdx
;
2559 var firstIdx
, lastIdx
;
2562 // Loop over the fields (series). Go from the last to the first,
2563 // because if they're stacked that's how we accumulate the values.
2564 var num_series
= rolledSeries
.length
- 1;
2566 for (seriesIdx
= num_series
; seriesIdx
>= 1; seriesIdx
--) {
2567 if (!this.visibility()[seriesIdx
- 1]) continue;
2569 // Prune down to the desired range, if necessary (for zooming)
2570 // Because there can be lines going to points outside of the visible area,
2571 // we actually prune to visible points, plus one on either side.
2573 series
= rolledSeries
[seriesIdx
];
2574 var low
= dateWindow
[0];
2575 var high
= dateWindow
[1];
2577 // TODO(danvk): do binary search instead of linear search.
2578 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2581 for (sampleIdx
= 0; sampleIdx
< series
.length
; sampleIdx
++) {
2582 if (series
[sampleIdx
][0] >= low
&& firstIdx
=== null) {
2583 firstIdx
= sampleIdx
;
2585 if (series
[sampleIdx
][0] <= high
) {
2586 lastIdx
= sampleIdx
;
2590 if (firstIdx
=== null) firstIdx
= 0;
2591 var correctedFirstIdx
= firstIdx
;
2592 var isInvalidValue
= true;
2593 while (isInvalidValue
&& correctedFirstIdx
> 0) {
2594 correctedFirstIdx
--;
2595 // check if the y value is null.
2596 isInvalidValue
= series
[correctedFirstIdx
][1] === null;
2599 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2600 var correctedLastIdx
= lastIdx
;
2601 isInvalidValue
= true;
2602 while (isInvalidValue
&& correctedLastIdx
< series
.length
- 1) {
2604 isInvalidValue
= series
[correctedLastIdx
][1] === null;
2607 if (correctedFirstIdx
!==firstIdx
) {
2608 firstIdx
= correctedFirstIdx
;
2610 if (correctedLastIdx
!== lastIdx
) {
2611 lastIdx
= correctedLastIdx
;
2614 boundaryIds
[seriesIdx
-1] = [firstIdx
, lastIdx
];
2616 // .slice's end is exclusive, we want to include lastIdx.
2617 series
= series
.slice(firstIdx
, lastIdx
+ 1);
2619 series
= rolledSeries
[seriesIdx
];
2620 boundaryIds
[seriesIdx
-1] = [0, series
.length
-1];
2623 var seriesName
= this.attr_("labels")[seriesIdx
];
2624 var seriesExtremes
= this.dataHandler_
.getExtremeYValues(series
,
2625 dateWindow
, this.getBooleanOption("stepPlot",seriesName
));
2627 var seriesPoints
= this.dataHandler_
.seriesToPoints(series
,
2628 seriesName
, boundaryIds
[seriesIdx
-1][0]);
2630 if (this.getBooleanOption("stackedGraph")) {
2631 axisIdx
= this.attributes_
.axisForSeries(seriesName
);
2632 if (cumulativeYval
[axisIdx
] === undefined
) {
2633 cumulativeYval
[axisIdx
] = [];
2635 Dygraph
.stackPoints_(seriesPoints
, cumulativeYval
[axisIdx
], seriesExtremes
,
2636 this.getBooleanOption("stackedGraphNaNFill"));
2639 extremes
[seriesName
] = seriesExtremes
;
2640 points
[seriesIdx
] = seriesPoints
;
2643 return { points
: points
, extremes
: extremes
, boundaryIds
: boundaryIds
};
2647 * Update the graph with new data. This method is called when the viewing area
2648 * has changed. If the underlying data or options have changed, predraw_ will
2649 * be called before drawGraph_ is called.
2653 Dygraph
.prototype.drawGraph_
= function() {
2654 var start
= new Date();
2656 // This is used to set the second parameter to drawCallback, below.
2657 var is_initial_draw
= this.is_initial_draw_
;
2658 this.is_initial_draw_
= false;
2660 this.layout_
.removeAllDatasets();
2662 this.attrs_
.pointSize
= 0.5 * this.getNumericOption('highlightCircleSize');
2664 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2665 var points
= packed
.points
;
2666 var extremes
= packed
.extremes
;
2667 this.boundaryIds_
= packed
.boundaryIds
;
2669 this.setIndexByName_
= {};
2670 var labels
= this.attr_("labels");
2671 if (labels
.length
> 0) {
2672 this.setIndexByName_
[labels
[0]] = 0;
2675 for (var i
= 1; i
< points
.length
; i
++) {
2676 this.setIndexByName_
[labels
[i
]] = i
;
2677 if (!this.visibility()[i
- 1]) continue;
2678 this.layout_
.addDataset(labels
[i
], points
[i
]);
2679 this.datasetIndex_
[i
] = dataIdx
++;
2682 this.computeYAxisRanges_(extremes
);
2683 this.layout_
.setYAxes(this.axes_
);
2687 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2688 var tmp_zoomed_x
= this.zoomed_x_
;
2689 // Tell PlotKit to use this new data and render itself
2690 this.zoomed_x_
= tmp_zoomed_x
;
2691 this.layout_
.evaluate();
2692 this.renderGraph_(is_initial_draw
);
2694 if (this.getStringOption("timingName")) {
2695 var end
= new Date();
2696 console
.log(this.getStringOption("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2701 * This does the work of drawing the chart. It assumes that the layout and axis
2702 * scales have already been set (e.g. by predraw_).
2706 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2707 this.cascadeEvents_('clearChart');
2708 this.plotter_
.clear();
2710 if (this.getFunctionOption('underlayCallback')) {
2711 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2712 // users who expect a deprecated form of this callback.
2713 this.getFunctionOption('underlayCallback').call(this,
2714 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2718 canvas
: this.hidden_
,
2719 drawingContext
: this.hidden_ctx_
2721 this.cascadeEvents_('willDrawChart', e
);
2722 this.plotter_
.render();
2723 this.cascadeEvents_('didDrawChart', e
);
2724 this.lastRow_
= -1; // because plugins/legend.js clears the legend
2726 // TODO(danvk): is this a performance bottleneck when panning?
2727 // The interaction canvas should already be empty in that situation.
2728 this.canvas_
.getContext('2d').clearRect(0, 0, this.width_
, this.height_
);
2730 if (this.getFunctionOption("drawCallback") !== null) {
2731 this.getFunctionOption("drawCallback")(this, is_initial_draw
);
2733 if (is_initial_draw
) {
2734 this.readyFired_
= true;
2735 while (this.readyFns_
.length
> 0) {
2736 var fn
= this.readyFns_
.pop();
2744 * Determine properties of the y-axes which are independent of the data
2745 * currently being displayed. This includes things like the number of axes and
2746 * the style of the axes. It does not include the range of each axis and its
2748 * This fills in this.axes_.
2749 * axes_ = [ { options } ]
2750 * indices are into the axes_ array.
2752 Dygraph
.prototype.computeYAxes_
= function() {
2753 // Preserve valueWindow settings if they exist, and if the user hasn't
2754 // specified a new valueRange.
2755 var valueWindows
, axis
, index
, opts
, v
;
2756 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2758 for (index
= 0; index
< this.axes_
.length
; index
++) {
2759 valueWindows
.push(this.axes_
[index
].valueWindow
);
2763 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2764 // data computation as well as options storage.
2765 // Go through once and add all the axes.
2768 for (axis
= 0; axis
< this.attributes_
.numAxes(); axis
++) {
2769 // Add a new axis, making a copy of its per-axis options.
2770 opts
= { g
: this };
2771 Dygraph
.update(opts
, this.attributes_
.axisOptions(axis
));
2772 this.axes_
[axis
] = opts
;
2776 // Copy global valueRange option over to the first axis.
2777 // NOTE(konigsberg): Are these two statements necessary?
2778 // I tried removing it. The automated tests pass, and manually
2779 // messing with tests/zoom
.html showed no trouble
.
2780 v
= this.attr_('valueRange');
2781 if (v
) this.axes_
[0].valueRange
= v
;
2783 if (valueWindows
!== undefined
) {
2784 // Restore valueWindow settings.
2786 // When going from two axes back to one, we only restore
2788 var idxCount
= Math
.min(valueWindows
.length
, this.axes_
.length
);
2790 for (index
= 0; index
< idxCount
; index
++) {
2791 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2795 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2797 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2798 v
= opts("valueRange");
2799 if (v
) this.axes_
[axis
].valueRange
= v
;
2800 } else { // To keep old behavior
2801 var axes
= this.user_attrs_
.axes
;
2802 if (axes
&& axes
.y2
) {
2803 v
= axes
.y2
.valueRange
;
2804 if (v
) this.axes_
[axis
].valueRange
= v
;
2811 * Returns the number of y-axes on the chart.
2812 * @return {number} the number of axes.
2814 Dygraph
.prototype.numAxes
= function() {
2815 return this.attributes_
.numAxes();
2820 * Returns axis properties for the given series.
2821 * @param {string} setName The name of the series for which to get axis
2822 * properties, e.g. 'Y1'.
2823 * @return {Object} The axis properties.
2825 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2826 // TODO(danvk): handle errors.
2827 return this.axes_
[this.attributes_
.axisForSeries(series
)];
2832 * Determine the value range and tick marks for each axis.
2833 * @param {Object} extremes A mapping from seriesName -> [low, high]
2834 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2836 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2837 var isNullUndefinedOrNaN
= function(num
) {
2838 return isNaN(parseFloat(num
));
2840 var numAxes
= this.attributes_
.numAxes();
2841 var ypadCompat
, span
, series
, ypad
;
2845 // Compute extreme values, a span and tick marks for each axis.
2846 for (var i
= 0; i
< numAxes
; i
++) {
2847 var axis
= this.axes_
[i
];
2848 var logscale
= this.attributes_
.getForAxis("logscale", i
);
2849 var includeZero
= this.attributes_
.getForAxis("includeZero", i
);
2850 var independentTicks
= this.attributes_
.getForAxis("independentTicks", i
);
2851 series
= this.attributes_
.seriesForAxis(i
);
2853 // Add some padding. This supports two Y padding operation modes:
2855 // - backwards compatible (yRangePad not set):
2856 // 10% padding for automatic Y ranges, but not for user-supplied
2857 // ranges, and move a close-to-zero edge to zero except if
2858 // avoidMinZero is set, since drawing at the edge results in
2859 // invisible lines. Unfortunately lines drawn at the edge of a
2860 // user-supplied range will still be invisible. If logscale is
2861 // set, add a variable amount of padding at the top but
2862 // none at the bottom.
2864 // - new-style (yRangePad set by the user):
2865 // always add the specified Y padding.
2868 ypad
= 0.1; // add 10%
2869 if (this.getNumericOption('yRangePad') !== null) {
2871 // Convert pixel padding to ratio
2872 ypad
= this.getNumericOption('yRangePad') / this.plotter_
.area
.h
;
2875 if (series
.length
=== 0) {
2876 // If no series are defined or visible then use a reasonable default
2877 axis
.extremeRange
= [0, 1];
2879 // Calculate the extremes of extremes.
2880 var minY
= Infinity
; // extremes[series[0]][0];
2881 var maxY
= -Infinity
; // extremes[series[0]][1];
2882 var extremeMinY
, extremeMaxY
;
2884 for (var j
= 0; j
< series
.length
; j
++) {
2885 // this skips invisible series
2886 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2888 // Only use valid extremes to stop null data series' from corrupting the scale.
2889 extremeMinY
= extremes
[series
[j
]][0];
2890 if (extremeMinY
!== null) {
2891 minY
= Math
.min(extremeMinY
, minY
);
2893 extremeMaxY
= extremes
[series
[j
]][1];
2894 if (extremeMaxY
!== null) {
2895 maxY
= Math
.max(extremeMaxY
, maxY
);
2899 // Include zero if requested by the user.
2900 if (includeZero
&& !logscale
) {
2901 if (minY
> 0) minY
= 0;
2902 if (maxY
< 0) maxY
= 0;
2905 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2906 if (minY
== Infinity
) minY
= 0;
2907 if (maxY
== -Infinity
) maxY
= 1;
2910 // special case: if we have no sense of scale, center on the sole value.
2913 span
= Math
.abs(maxY
);
2915 // ... and if the sole value is zero, use range 0-1.
2921 var maxAxisY
, minAxisY
;
2924 maxAxisY
= maxY
+ ypad
* span
;
2927 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2928 maxAxisY
= maxY
* logpad
;
2929 minAxisY
= minY
/ logpad
;
2932 maxAxisY
= maxY
+ ypad
* span
;
2933 minAxisY
= minY
- ypad
* span
;
2935 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2936 // close to zero, but not if avoidMinZero is set.
2937 if (ypadCompat
&& !this.getBooleanOption("avoidMinZero")) {
2938 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2939 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2942 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2944 if (axis
.valueWindow
) {
2945 // This is only set if the user has zoomed on the y-axis. It is never set
2946 // by a user. It takes precedence over axis.valueRange because, if you set
2947 // valueRange, you'd still expect to be able to pan.
2948 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2949 } else if (axis
.valueRange
) {
2950 // This is a user-set value range for this axis.
2951 var y0
= isNullUndefinedOrNaN(axis
.valueRange
[0]) ? axis
.extremeRange
[0] : axis
.valueRange
[0];
2952 var y1
= isNullUndefinedOrNaN(axis
.valueRange
[1]) ? axis
.extremeRange
[1] : axis
.valueRange
[1];
2954 if (axis
.logscale
) {
2955 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2964 axis
.computedValueRange
= [y0
, y1
];
2966 axis
.computedValueRange
= axis
.extremeRange
;
2970 if (independentTicks
) {
2971 axis
.independentTicks
= independentTicks
;
2972 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2973 var ticker
= opts('ticker');
2974 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2975 axis
.computedValueRange
[1],
2976 this.height_
, // TODO(danvk): should be area.height
2979 // Define the first independent axis as primary axis.
2980 if (!p_axis
) p_axis
= axis
;
2983 if (p_axis
=== undefined
) {
2984 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
2986 // Add ticks. By default, all axes inherit the tick positions of the
2987 // primary axis. However, if an axis is specifically marked as having
2988 // independent ticks, then that is permissible as well.
2989 for (var i
= 0; i
< numAxes
; i
++) {
2990 var axis
= this.axes_
[i
];
2992 if (!axis
.independentTicks
) {
2993 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2994 var ticker
= opts('ticker');
2995 var p_ticks
= p_axis
.ticks
;
2996 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2997 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2998 var tick_values
= [];
2999 for (var k
= 0; k
< p_ticks
.length
; k
++) {
3000 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
3001 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
3002 tick_values
.push(y_val
);
3005 axis
.ticks
= ticker(axis
.computedValueRange
[0],
3006 axis
.computedValueRange
[1],
3007 this.height_
, // TODO(danvk): should be area.height
3016 * Detects the type of the str (date or numeric) and sets the various
3017 * formatting attributes in this.attrs_ based on this type.
3018 * @param {string} str An x value.
3021 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3023 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
3024 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
3025 str
.indexOf('/') >= 0 ||
3026 isNaN(parseFloat(str
))) {
3028 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3029 // TODO(danvk): remove support for this format.
3033 this.setXAxisOptions_(isDate
);
3036 Dygraph
.prototype.setXAxisOptions_
= function(isDate
) {
3038 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3039 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateValueFormatter
;
3040 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3041 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisLabelFormatter
;
3043 /** @private (shut up, jsdoc!) */
3044 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3045 // TODO(danvk): use Dygraph.numberValueFormatter here?
3046 /** @private (shut up, jsdoc!) */
3047 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3048 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3049 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3055 * Parses a string in a special csv format. We expect a csv file where each
3056 * line is a date point, and the first field in each line is the date string.
3057 * We also expect that all remaining fields represent series.
3058 * if the errorBars attribute is set, then interpret the fields as:
3059 * date, series1, stddev1, series2, stddev2, ...
3060 * @param {[Object]} data See above.
3062 * @return [Object] An array with one entry for each row. These entries
3063 * are an array of cells in that row. The first entry is the parsed x-value for
3064 * the row. The second, third, etc. are the y-values. These can take on one of
3065 * three forms, depending on the CSV and constructor parameters:
3067 * 2. [ value, stddev ]
3068 * 3. [ low value, center value, high value ]
3070 Dygraph
.prototype.parseCSV_
= function(data
) {
3072 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3073 var lines
= data
.split(line_delimiter
|| "\n");
3076 // Use the default delimiter or fall back to a tab if that makes sense.
3077 var delim
= this.getStringOption('delimiter');
3078 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3083 if (!('labels' in this.user_attrs_
)) {
3084 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
3086 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
3087 this.attributes_
.reparseSeries();
3092 var defaultParserSet
= false; // attempt to auto-detect x value type
3093 var expectedCols
= this.attr_("labels").length
;
3094 var outOfOrder
= false;
3095 for (var i
= start
; i
< lines
.length
; i
++) {
3096 var line
= lines
[i
];
3098 if (line
.length
=== 0) continue; // skip blank lines
3099 if (line
[0] == '#') continue; // skip comment lines
3100 var inFields
= line
.split(delim
);
3101 if (inFields
.length
< 2) continue;
3104 if (!defaultParserSet
) {
3105 this.detectTypeFromString_(inFields
[0]);
3106 xParser
= this.getFunctionOption("xValueParser");
3107 defaultParserSet
= true;
3109 fields
[0] = xParser(inFields
[0], this);
3111 // If fractions are expected, parse the numbers as "A/B
"
3112 if (this.fractions_) {
3113 for (j = 1; j < inFields.length; j++) {
3114 // TODO(danvk): figure out an appropriate way to flag parse errors.
3115 vals = inFields[j].split("/");
3116 if (vals.length != 2) {
3117 console.error('Expected fractional "num
/den
" values in CSV data ' +
3118 "but found a value
'" + inFields[j] + "' on line
" +
3119 (1 + i) + " ('" + line + "') which is not of
this form
.");
3122 fields[j] = [Dygraph.parseFloat_(vals[0], i, line),
3123 Dygraph.parseFloat_(vals[1], i, line)];
3126 } else if (this.getBooleanOption("errorBars
")) {
3127 // If there are error bars, values are (value, stddev) pairs
3128 if (inFields.length % 2 != 1) {
3129 console.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3130 'but line ' + (1 + i) + ' has an odd number of values (' +
3131 (inFields.length - 1) + "): '" + line + "'");
3133 for (j = 1; j < inFields.length; j += 2) {
3134 fields[(j + 1) / 2] = [Dygraph.parseFloat_(inFields[j], i, line),
3135 Dygraph.parseFloat_(inFields[j + 1], i, line)];
3137 } else if (this.getBooleanOption("customBars
")) {
3138 // Bars are a low;center;high tuple
3139 for (j = 1; j < inFields.length; j++) {
3140 var val = inFields[j];
3141 if (/^ *$/.test(val)) {
3142 fields[j] = [null, null, null];
3144 vals = val.split(";");
3145 if (vals.length == 3) {
3146 fields[j] = [ Dygraph.parseFloat_(vals[0], i, line),
3147 Dygraph.parseFloat_(vals[1], i, line),
3148 Dygraph.parseFloat_(vals[2], i, line) ];
3150 console.warn('When using customBars, values must be either blank ' +
3151 'or "low
;center
;high
" tuples (got "' + val +
3152 '" on line ' + (1+i));
3157 // Values are just numbers
3158 for (j = 1; j < inFields.length; j++) {
3159 fields[j] = Dygraph.parseFloat_(inFields[j], i, line);
3162 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3166 if (fields.length != expectedCols) {
3167 console.error("Number of columns
in line
" + i + " (" + fields.length +
3168 ") does not agree
with number of
labels (" + expectedCols +
3172 // If the user specified the 'labels' option and none of the cells of the
3173 // first row parsed correctly, then they probably double-specified the
3174 // labels. We go with the values set in the option, discard this row and
3175 // log a warning to the JS console.
3176 if (i === 0 && this.attr_('labels')) {
3177 var all_null = true;
3178 for (j = 0; all_null && j < fields.length; j++) {
3179 if (fields[j]) all_null = false;
3182 console.warn("The dygraphs
'labels' option is set
, but the first row
" +
3183 "of CSV
data ('" + line + "') appears to also contain
" +
3184 "labels
. Will drop the CSV labels and
use the option
" +
3193 console.warn("CSV is out of order
; order it correctly to speed loading
.");
3194 ret.sort(function(a,b) { return a[0] - b[0]; });
3201 * The user has provided their data as a pre-packaged JS array. If the x values
3202 * are numeric, this is the same as dygraphs' internal format. If the x values
3203 * are dates, we need to convert them from Date objects to ms since epoch.
3204 * @param {!Array} data
3205 * @return {Object} data with numeric x values.
3208 Dygraph.prototype.parseArray_ = function(data) {
3209 // Peek at the first x value to see if it's numeric.
3210 if (data.length === 0) {
3211 console.error("Can
't plot empty data set");
3214 if (data[0].length === 0) {
3215 console.error("Data set cannot contain an empty row");
3220 if (this.attr_("labels") === null) {
3221 console.warn("Using default labels. Set labels explicitly via 'labels
' " +
3222 "in the options parameter");
3223 this.attrs_.labels = [ "X" ];
3224 for (i = 1; i < data[0].length; i++) {
3225 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
3227 this.attributes_.reparseSeries();
3229 var num_labels = this.attr_("labels");
3230 if (num_labels.length != data[0].length) {
3231 console.error("Mismatch between number of labels (" + num_labels + ")" +
3232 " and number of columns in array (" + data[0].length + ")");
3237 if (Dygraph.isDateLike(data[0][0])) {
3238 // Some intelligent defaults for a date x-axis.
3239 this.attrs_.axes.x.valueFormatter = Dygraph.dateValueFormatter;
3240 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3241 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisLabelFormatter;
3243 // Assume they're all dates
.
3244 var parsedData
= Dygraph
.clone(data
);
3245 for (i
= 0; i
< data
.length
; i
++) {
3246 if (parsedData
[i
].length
=== 0) {
3247 console
.error("Row " + (1 + i
) + " of data is empty");
3250 if (parsedData
[i
][0] === null ||
3251 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3252 isNaN(parsedData
[i
][0].getTime())) {
3253 console
.error("x value in row " + (1 + i
) + " is not a Date");
3256 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3260 // Some intelligent defaults for a numeric x-axis.
3261 /** @private (shut up, jsdoc!) */
3262 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3263 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3264 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3270 * Parses a DataTable object from gviz.
3271 * The data is expected to have a first column that is either a date or a
3272 * number. All subsequent columns must be numbers. If there is a clear mismatch
3273 * between this.xValueParser_ and the type of the first column, it will be
3274 * fixed. Fills out rawData_.
3275 * @param {!google.visualization.DataTable} data See above.
3278 Dygraph
.prototype.parseDataTable_
= function(data
) {
3279 var shortTextForAnnotationNum
= function(num
) {
3280 // converts [0-9]+ [A-Z][a-z]*
3281 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3282 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3283 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3284 num
= Math
.floor(num
/ 26);
3286 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3287 num
= Math
.floor((num
- 1) / 26);
3292 var cols
= data
.getNumberOfColumns();
3293 var rows
= data
.getNumberOfRows();
3295 var indepType
= data
.getColumnType(0);
3296 if (indepType
== 'date' || indepType
== 'datetime') {
3297 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3298 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateValueFormatter
;
3299 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3300 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisLabelFormatter
;
3301 } else if (indepType
== 'number') {
3302 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3303 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3304 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3305 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3307 console
.error("only 'date', 'datetime' and 'number' types are supported " +
3308 "for column 1 of DataTable input (Got '" + indepType
+ "')");
3312 // Array of the column indices which contain data (and not annotations).
3314 var annotationCols
= {}; // data index -> [annotation cols]
3315 var hasAnnotations
= false;
3317 for (i
= 1; i
< cols
; i
++) {
3318 var type
= data
.getColumnType(i
);
3319 if (type
== 'number') {
3321 } else if (type
== 'string' && this.getBooleanOption('displayAnnotations')) {
3322 // This is OK -- it's an annotation column.
3323 var dataIdx
= colIdx
[colIdx
.length
- 1];
3324 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3325 annotationCols
[dataIdx
] = [i
];
3327 annotationCols
[dataIdx
].push(i
);
3329 hasAnnotations
= true;
3331 console
.error("Only 'number' is supported as a dependent type with Gviz." +
3332 " 'string' is only supported if displayAnnotations is true");
3336 // Read column labels
3337 // TODO(danvk): add support back for errorBars
3338 var labels
= [data
.getColumnLabel(0)];
3339 for (i
= 0; i
< colIdx
.length
; i
++) {
3340 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3341 if (this.getBooleanOption("errorBars")) i
+= 1;
3343 this.attrs_
.labels
= labels
;
3344 cols
= labels
.length
;
3347 var outOfOrder
= false;
3348 var annotations
= [];
3349 for (i
= 0; i
< rows
; i
++) {
3351 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3352 data
.getValue(i
, 0) === null) {
3353 console
.warn("Ignoring row " + i
+
3354 " of DataTable because of undefined or null first column.");
3358 if (indepType
== 'date' || indepType
== 'datetime') {
3359 row
.push(data
.getValue(i
, 0).getTime());
3361 row
.push(data
.getValue(i
, 0));
3363 if (!this.getBooleanOption("errorBars")) {
3364 for (j
= 0; j
< colIdx
.length
; j
++) {
3365 var col
= colIdx
[j
];
3366 row
.push(data
.getValue(i
, col
));
3367 if (hasAnnotations
&&
3368 annotationCols
.hasOwnProperty(col
) &&
3369 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3371 ann
.series
= data
.getColumnLabel(col
);
3373 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3375 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3376 if (k
) ann
.text
+= "\n";
3377 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3379 annotations
.push(ann
);
3383 // Strip out infinities, which give dygraphs problems later on.
3384 for (j
= 0; j
< row
.length
; j
++) {
3385 if (!isFinite(row
[j
])) row
[j
] = null;
3388 for (j
= 0; j
< cols
- 1; j
++) {
3389 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3392 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3399 console
.warn("DataTable is out of order; order it correctly to speed loading.");
3400 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3402 this.rawData_
= ret
;
3404 if (annotations
.length
> 0) {
3405 this.setAnnotations(annotations
, true);
3407 this.attributes_
.reparseSeries();
3411 * Signals to plugins that the chart data has updated.
3412 * This happens after the data has updated but before the chart has redrawn.
3414 Dygraph
.prototype.cascadeDataDidUpdateEvent_
= function() {
3415 // TODO(danvk): there are some issues checking xAxisRange() and using
3416 // toDomCoords from handlers of this event. The visible range should be set
3417 // when the chart is drawn, not derived from the data.
3418 this.cascadeEvents_('dataDidUpdate', {});
3422 * Get the CSV data. If it's in a function, call that function. If it's in a
3423 * file, do an XMLHttpRequest to get it.
3426 Dygraph
.prototype.start_
= function() {
3427 var data
= this.file_
;
3429 // Functions can return references of all other types.
3430 if (typeof data
== 'function') {
3434 if (Dygraph
.isArrayLike(data
)) {
3435 this.rawData_
= this.parseArray_(data
);
3436 this.cascadeDataDidUpdateEvent_();
3438 } else if (typeof data
== 'object' &&
3439 typeof data
.getColumnRange
== 'function') {
3440 // must be a DataTable from gviz.
3441 this.parseDataTable_(data
);
3442 this.cascadeDataDidUpdateEvent_();
3444 } else if (typeof data
== 'string') {
3445 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3446 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3447 if (line_delimiter
) {
3448 this.loadedEvent_(data
);
3452 if (window
.XMLHttpRequest
) {
3453 // Firefox, Opera, IE7, and other browsers will use the native object
3454 req
= new XMLHttpRequest();
3456 // IE 5 and 6 will use the ActiveX control
3457 req
= new ActiveXObject("Microsoft.XMLHTTP");
3461 req
.onreadystatechange
= function () {
3462 if (req
.readyState
== 4) {
3463 if (req
.status
=== 200 || // Normal http
3464 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3465 caller
.loadedEvent_(req
.responseText
);
3470 req
.open("GET", data
, true);
3474 console
.error("Unknown data format: " + (typeof data
));
3479 * Changes various properties of the graph. These can include:
3481 * <li>file: changes the source data for the graph</li>
3482 * <li>errorBars: changes whether the data contains stddev</li>
3485 * There's a huge variety of options that can be passed to this method. For a
3486 * full list, see http://dygraphs.com/options.html.
3488 * @param {Object} input_attrs The new properties and values
3489 * @param {boolean} block_redraw Usually the chart is redrawn after every
3490 * call to updateOptions(). If you know better, you can pass true to
3491 * explicitly block the redraw. This can be useful for chaining
3492 * updateOptions() calls, avoiding the occasional infinite loop and
3493 * preventing redraws when it's not necessary (e.g. when updating a
3496 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3497 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3499 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
3500 var file
= input_attrs
.file
;
3501 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
3503 // TODO(danvk): this is a mess. Move these options into attr_.
3504 if ('rollPeriod' in attrs
) {
3505 this.rollPeriod_
= attrs
.rollPeriod
;
3507 if ('dateWindow' in attrs
) {
3508 this.dateWindow_
= attrs
.dateWindow
;
3509 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3510 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3513 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3514 this.zoomed_y_
= (attrs
.valueRange
!== null);
3517 // TODO(danvk): validate per-series options.
3522 // highlightCircleSize
3524 // Check if this set options will require new points.
3525 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3527 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3529 this.attributes_
.reparseSeries();
3532 // This event indicates that the data is about to change, but hasn't yet.
3533 // TODO(danvk): support cancelation of the update via this event.
3534 this.cascadeEvents_('dataWillUpdate', {});
3537 if (!block_redraw
) this.start_();
3539 if (!block_redraw
) {
3540 if (requiresNewPoints
) {
3543 this.renderGraph_(false);
3550 * Returns a copy of the options with deprecated names converted into current
3551 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3552 * interested in that, they should save a copy before calling this.
3555 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3557 for (var k
in attrs
) {
3558 if (k
== 'file') continue;
3559 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3562 var set
= function(axis
, opt
, value
) {
3563 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3564 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3565 my_attrs
.axes
[axis
][opt
] = value
;
3567 var map
= function(opt
, axis
, new_opt
) {
3568 if (typeof(attrs
[opt
]) != 'undefined') {
3569 console
.warn("Option " + opt
+ " is deprecated. Use the " +
3570 new_opt
+ " option for the " + axis
+ " axis instead. " +
3571 "(e.g. { axes : { " + axis
+ " : { " + new_opt
+ " : ... } } } " +
3572 "(see http://dygraphs.com/per-axis.html for more information.");
3573 set(axis
, new_opt
, attrs
[opt
]);
3574 delete my_attrs
[opt
];
3578 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3579 map('xValueFormatter', 'x', 'valueFormatter');
3580 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3581 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3582 map('xTicker', 'x', 'ticker');
3583 map('yValueFormatter', 'y', 'valueFormatter');
3584 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3585 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3586 map('yTicker', 'y', 'ticker');
3587 map('drawXGrid', 'x', 'drawGrid');
3588 map('drawXAxis', 'x', 'drawAxis');
3589 map('drawYGrid', 'y', 'drawGrid');
3590 map('drawYAxis', 'y', 'drawAxis');
3595 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3596 * containing div (which has presumably changed size since the dygraph was
3597 * instantiated. If the width/height are specified, the div will be resized.
3599 * This is far more efficient than destroying and re-instantiating a
3600 * Dygraph, since it doesn't have to reparse the underlying data.
3602 * @param {number} width Width (in pixels)
3603 * @param {number} height Height (in pixels)
3605 Dygraph
.prototype.resize
= function(width
, height
) {
3606 if (this.resize_lock
) {
3609 this.resize_lock
= true;
3611 if ((width
=== null) != (height
=== null)) {
3612 console
.warn("Dygraph.resize() should be called with zero parameters or " +
3613 "two non-NULL parameters. Pretending it was zero.");
3614 width
= height
= null;
3617 var old_width
= this.width_
;
3618 var old_height
= this.height_
;
3621 this.maindiv_
.style
.width
= width
+ "px";
3622 this.maindiv_
.style
.height
= height
+ "px";
3623 this.width_
= width
;
3624 this.height_
= height
;
3626 this.width_
= this.maindiv_
.clientWidth
;
3627 this.height_
= this.maindiv_
.clientHeight
;
3630 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3631 // Resizing a canvas erases it, even when the size doesn't change, so
3632 // any resize needs to be followed by a redraw.
3633 this.resizeElements_();
3637 this.resize_lock
= false;
3641 * Adjusts the number of points in the rolling average. Updates the graph to
3642 * reflect the new averaging period.
3643 * @param {number} length Number of points over which to average the data.
3645 Dygraph
.prototype.adjustRoll
= function(length
) {
3646 this.rollPeriod_
= length
;
3651 * Returns a boolean array of visibility statuses.
3653 Dygraph
.prototype.visibility
= function() {
3654 // Do lazy-initialization, so that this happens after we know the number of
3656 if (!this.getOption("visibility")) {
3657 this.attrs_
.visibility
= [];
3659 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3660 while (this.getOption("visibility").length
< this.numColumns() - 1) {
3661 this.attrs_
.visibility
.push(true);
3663 return this.getOption("visibility");
3667 * Changes the visiblity of a series.
3669 * @param {number} num the series index
3670 * @param {boolean} value true or false, identifying the visibility.
3672 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3673 var x
= this.visibility();
3674 if (num
< 0 || num
>= x
.length
) {
3675 console
.warn("invalid series number in setVisibility: " + num
);
3683 * How large of an area will the dygraph render itself in?
3684 * This is used for testing.
3685 * @return A {width: w, height: h} object.
3688 Dygraph
.prototype.size
= function() {
3689 return { width
: this.width_
, height
: this.height_
};
3693 * Update the list of annotations and redraw the chart.
3694 * See dygraphs.com/annotations.html for more info on how to use annotations.
3695 * @param ann {Array} An array of annotation objects.
3696 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3698 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3699 // Only add the annotation CSS rule once we know it will be used.
3700 Dygraph
.addAnnotationRule();
3701 this.annotations_
= ann
;
3702 if (!this.layout_
) {
3703 console
.warn("Tried to setAnnotations before dygraph was ready. " +
3704 "Try setting them in a ready() block. See " +
3705 "dygraphs.com/tests/annotation.html");
3709 this.layout_
.setAnnotations(this.annotations_
);
3710 if (!suppressDraw
) {
3716 * Return the list of annotations.
3718 Dygraph
.prototype.annotations
= function() {
3719 return this.annotations_
;
3723 * Get the list of label names for this graph. The first column is the
3724 * x-axis, so the data series names start at index 1.
3726 * Returns null when labels have not yet been defined.
3728 Dygraph
.prototype.getLabels
= function() {
3729 var labels
= this.attr_("labels");
3730 return labels
? labels
.slice() : null;
3734 * Get the index of a series (column) given its name. The first column is the
3735 * x-axis, so the data series start with index 1.
3737 Dygraph
.prototype.indexFromSetName
= function(name
) {
3738 return this.setIndexByName_
[name
];
3742 * Trigger a callback when the dygraph has drawn itself and is ready to be
3743 * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3744 * data (i.e. a URL is passed as the data source) and the chart is drawn
3745 * asynchronously. If the chart has already drawn, the callback will fire
3748 * This is a good place to call setAnnotation().
3750 * @param {function(!Dygraph)} callback The callback to trigger when the chart
3753 Dygraph
.prototype.ready
= function(callback
) {
3754 if (this.is_initial_draw_
) {
3755 this.readyFns_
.push(callback
);
3757 callback
.call(this, this);
3763 * Adds a default style for the annotation CSS classes to the document. This is
3764 * only executed when annotations are actually used. It is designed to only be
3765 * called once -- all calls after the first will return immediately.
3767 Dygraph
.addAnnotationRule
= function() {
3768 // TODO(danvk): move this function into plugins/annotations.js
?
3769 if (Dygraph
.addedAnnotationCSS
) return;
3771 var rule
= "border: 1px solid black; " +
3772 "background-color: white; " +
3773 "text-align: center;";
3775 var styleSheetElement
= document
.createElement("style");
3776 styleSheetElement
.type
= "text/css";
3777 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3779 // Find the first style sheet that we can access.
3780 // We may not add a rule to a style sheet from another domain for security
3781 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3782 // adds its own style sheets from google.com.
3783 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3784 if (document
.styleSheets
[i
].disabled
) continue;
3785 var mysheet
= document
.styleSheets
[i
];
3787 if (mysheet
.insertRule
) { // Firefox
3788 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3789 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3790 } else if (mysheet
.addRule
) { // IE
3791 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3793 Dygraph
.addedAnnotationCSS
= true;
3796 // Was likely a security exception.
3800 console
.warn("Unable to add default annotation CSS rule; display may be off.");