3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
8 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
9 * string. Dygraph can handle multiple series with or without error bars. The
10 * date/value ranges will be automatically set. Dygraph uses the
11 * <canvas> tag, so it only works in FF1.5+.
12 * @author danvdk@gmail.com (Dan Vanderkam)
15 <div id="graphdiv" style="width:800px; height:500px;"></div>
16 <script type="text/javascript">
17 new Dygraph(document.getElementById("graphdiv"),
18 "datafile.csv", // CSV file with headers
22 The CSV file is of the form
24 Date,SeriesA,SeriesB,SeriesC
28 If the 'errorBars' option is set in the constructor, the input should be of
30 Date,SeriesA,SeriesB,...
31 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
32 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
34 If the 'fractions' option is set, the input should be of the form:
36 Date,SeriesA,SeriesB,...
37 YYYYMMDD,A1/B1,A2/B2,...
38 YYYYMMDD,A1/B1,A2/B2,...
40 And error bars will be calculated automatically using a binomial distribution.
42 For further documentation and examples, see http://dygraphs.com/
46 // For "production" code, this gets set to false by uglifyjs.
47 if (typeof(DEBUG
) === 'undefined') DEBUG
=true;
49 var Dygraph
= (function() {
50 /*global DygraphLayout:false, DygraphCanvasRenderer:false, DygraphOptions:false, G_vmlCanvasManager:false,ActiveXObject:false */
54 * Creates an interactive, zoomable chart.
57 * @param {div | String} div A div or the id of a div into which to construct
59 * @param {String | Function} file A file containing CSV data or a function
60 * that returns this data. The most basic expected format for each line is
61 * "YYYY/MM/DD,val1,val2,...". For more information, see
62 * http://dygraphs.com/data.html.
63 * @param {Object} attrs Various other attributes, e.g. errorBars determines
64 * whether the input data contains error ranges. For a complete list of
65 * options, see http://dygraphs.com/options.html.
67 var Dygraph
= function(div
, data
, opts
, opt_fourth_param
) {
68 // These have to go above the "Hack for IE" in __init__ since .ready() can be
69 // called as soon as the constructor returns. Once support for OldIE is
70 // dropped, this can go down with the rest of the initializers.
71 this.is_initial_draw_
= true;
74 if (opt_fourth_param
!== undefined
) {
75 // Old versions of dygraphs took in the series labels as a constructor
76 // parameter. This doesn't make sense anymore, but it's easy to continue
77 // to support this usage.
78 console
.warn("Using deprecated four-argument dygraph constructor");
79 this.__old_init__(div
, data
, opts
, opt_fourth_param
);
81 this.__init__(div
, data
, opts
);
85 Dygraph
.NAME
= "Dygraph";
86 Dygraph
.VERSION
= "1.0.1";
87 Dygraph
.__repr__
= function() {
88 return "[" + Dygraph
.NAME
+ " " + Dygraph
.VERSION
+ "]";
92 * Returns information about the Dygraph class.
94 Dygraph
.toString
= function() {
95 return Dygraph
.__repr__();
98 // Various default values
99 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
100 Dygraph
.DEFAULT_WIDTH
= 480;
101 Dygraph
.DEFAULT_HEIGHT
= 320;
103 // For max 60 Hz. animation:
104 Dygraph
.ANIMATION_STEPS
= 12;
105 Dygraph
.ANIMATION_DURATION
= 200;
107 // Label constants for the labelsKMB and labelsKMG2 options.
108 // (i.e. '100000' -> '100K')
109 Dygraph
.KMB_LABELS
= [ 'K', 'M', 'B', 'T', 'Q' ];
110 Dygraph
.KMG2_BIG_LABELS
= [ 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y' ];
111 Dygraph
.KMG2_SMALL_LABELS
= [ 'm', 'u', 'n', 'p', 'f', 'a', 'z', 'y' ];
113 // These are defined before DEFAULT_ATTRS so that it can refer to them.
116 * Return a string version of a number. This respects the digitsAfterDecimal
117 * and maxNumberWidth options.
118 * @param {number} x The number to be formatted
119 * @param {Dygraph} opts An options view
121 Dygraph
.numberValueFormatter
= function(x
, opts
) {
122 var sigFigs
= opts('sigFigs');
124 if (sigFigs
!== null) {
125 // User has opted for a fixed number of significant figures.
126 return Dygraph
.floatFormat(x
, sigFigs
);
129 var digits
= opts('digitsAfterDecimal');
130 var maxNumberWidth
= opts('maxNumberWidth');
132 var kmb
= opts('labelsKMB');
133 var kmg2
= opts('labelsKMG2');
137 // switch to scientific notation if we underflow or overflow fixed display.
139 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
140 Math
.abs(x
) < Math
.pow(10, -digits
))) {
141 label
= x
.toExponential(digits
);
143 label
= '' + Dygraph
.round_(x
, digits
);
152 k_labels
= Dygraph
.KMB_LABELS
;
155 if (kmb
) console
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
157 k_labels
= Dygraph
.KMG2_BIG_LABELS
;
158 m_labels
= Dygraph
.KMG2_SMALL_LABELS
;
161 var absx
= Math
.abs(x
);
162 var n
= Dygraph
.pow(k
, k_labels
.length
);
163 for (var j
= k_labels
.length
- 1; j
>= 0; j
--, n
/= k
) {
165 label
= Dygraph
.round_(x
/ n
, digits
) + k_labels
[j
];
170 // TODO(danvk): clean up this logic. Why so different than kmb?
171 var x_parts
= String(x
.toExponential()).split('e-');
172 if (x_parts
.length
=== 2 && x_parts
[1] >= 3 && x_parts
[1] <= 24) {
173 if (x_parts
[1] % 3 > 0) {
174 label
= Dygraph
.round_(x_parts
[0] /
175 Dygraph
.pow(10, (x_parts
[1] % 3)),
178 label
= Number(x_parts
[0]).toFixed(2);
180 label
+= m_labels
[Math
.floor(x_parts
[1] / 3) - 1];
189 * variant for use as an axisLabelFormatter.
192 Dygraph
.numberAxisLabelFormatter
= function(x
, granularity
, opts
) {
193 return Dygraph
.numberValueFormatter(x
, opts
);
197 * @type {!Array.<string>}
201 Dygraph
.SHORT_MONTH_NAMES_
= ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
205 * Convert a JS date to a string appropriate to display on an axis that
206 * is displaying values at the stated granularity. This respects the
208 * @param {Date} date The date to format
209 * @param {number} granularity One of the Dygraph granularity constants
210 * @param {Dygraph} opts An options view
211 * @return {string} The date formatted as local time
214 Dygraph
.dateAxisLabelFormatter
= function(date
, granularity
, opts
) {
215 var utc
= opts('labelsUTC');
216 var accessors
= utc
? Dygraph
.DateAccessorsUTC
: Dygraph
.DateAccessorsLocal
;
218 var year
= accessors
.getFullYear(date
),
219 month
= accessors
.getMonth(date
),
220 day
= accessors
.getDate(date
),
221 hours
= accessors
.getHours(date
),
222 mins
= accessors
.getMinutes(date
),
223 secs
= accessors
.getSeconds(date
),
224 millis
= accessors
.getSeconds(date
);
226 if (granularity
>= Dygraph
.DECADAL
) {
228 } else if (granularity
>= Dygraph
.MONTHLY
) {
229 return Dygraph
.SHORT_MONTH_NAMES_
[month
] + ' ' + year
;
231 var frac
= hours
* 3600 + mins
* 60 + secs
+ 1e-3 * millis
;
232 if (frac
=== 0 || granularity
>= Dygraph
.DAILY
) {
233 // e.g. '21Jan' (%d%b)
234 return Dygraph
.zeropad(day
) + Dygraph
.SHORT_MONTH_NAMES_
[month
];
236 return Dygraph
.hmsString_(hours
, mins
, secs
);
240 // alias in case anyone is referencing the old method.
241 Dygraph
.dateAxisFormatter
= Dygraph
.dateAxisLabelFormatter
;
244 * Return a string version of a JS date for a value label. This respects the
246 * @param {Date} date The date to be formatted
247 * @param {Dygraph} opts An options view
250 Dygraph
.dateValueFormatter
= function(d
, opts
) {
251 return Dygraph
.dateString_(d
, opts('labelsUTC'));
255 * Standard plotters. These may be used by clients.
256 * Available plotters are:
257 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
258 * - Dygraph.Plotters.errorPlotter: draws error bars
259 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
261 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
262 * This causes all the lines to be drawn over all the fills/error bars.
264 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
267 // Default attribute values.
268 Dygraph
.DEFAULT_ATTRS
= {
269 highlightCircleSize
: 3,
270 highlightSeriesOpts
: null,
271 highlightSeriesBackgroundAlpha
: 0.5,
275 // TODO(danvk): move defaults from createStatusMessage_ here.
277 labelsSeparateLines
: false,
278 labelsShowZeroValues
: true,
281 showLabelsOnHighlight
: true,
283 digitsAfterDecimal
: 2,
288 strokeBorderWidth
: 0,
289 strokeBorderColor
: "white",
292 axisLabelFontSize
: 14,
298 xValueParser
: Dygraph
.dateParser
,
305 wilsonInterval
: true, // only relevant if fractions is true
309 connectSeparatedPoints
: false,
312 stackedGraphNaNFill
: 'all',
313 hideOverlayOnMouseOut
: true,
315 legend
: 'onmouseover',
320 drawAxesAtZero
: false,
322 // Sizes of the various chart labels.
329 axisLineColor
: "black",
332 axisLabelColor
: "black",
336 gridLineColor
: "rgb(128,128,128)",
338 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
339 animatedZooms
: false, // (for now)
341 // Range selector options
342 showRangeSelector
: false,
343 rangeSelectorHeight
: 40,
344 rangeSelectorPlotStrokeColor
: "#808FAB",
345 rangeSelectorPlotFillColor
: "#A7B1C4",
346 showInRangeSelector
: null,
348 // The ordering here ensures that central lines always appear above any
349 // fill bars/error bars
.
351 Dygraph
.Plotters
.fillPlotter
,
352 Dygraph
.Plotters
.errorPlotter
,
353 Dygraph
.Plotters
.linePlotter
362 axisLabelFormatter
: Dygraph
.dateAxisLabelFormatter
,
363 valueFormatter
: Dygraph
.dateValueFormatter
,
366 independentTicks
: true,
367 ticker
: null // will be set in dygraph-tickers.js
371 valueFormatter
: Dygraph
.numberValueFormatter
,
372 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
375 independentTicks
: true,
376 ticker
: null // will be set in dygraph-tickers.js
380 valueFormatter
: Dygraph
.numberValueFormatter
,
381 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
384 independentTicks
: false,
385 ticker
: null // will be set in dygraph-tickers.js
390 // Directions for panning and zooming. Use bit operations when combined
391 // values are possible.
392 Dygraph
.HORIZONTAL
= 1;
393 Dygraph
.VERTICAL
= 2;
395 // Installed plugins, in order of precedence (most-general to most-specific).
396 // Plugins are installed after they are defined, in plugins/install.js
.
400 // Used for initializing annotation CSS rules only once.
401 Dygraph
.addedAnnotationCSS
= false;
403 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
404 // Labels is no longer a constructor parameter, since it's typically set
405 // directly from the data source. It also conains a name for the x-axis,
406 // which the previous constructor form did not.
407 if (labels
!== null) {
408 var new_labels
= ["Date"];
409 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
410 Dygraph
.update(attrs
, { 'labels': new_labels
});
412 this.__init__(div
, file
, attrs
);
416 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
417 * and context <canvas> inside of it. See the constructor for details.
419 * @param {Element} div the Element to render the graph into.
420 * @param {string | Function} file Source data
421 * @param {Object} attrs Miscellaneous other options
424 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
425 // Hack for IE: if we're using excanvas and the document hasn't finished
426 // loading yet (and hence may not have initialized whatever it needs to
427 // initialize), then keep calling this routine periodically until it has.
428 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
429 typeof(G_vmlCanvasManager
) != 'undefined' &&
430 document
.readyState
!= 'complete') {
432 setTimeout(function() { self
.__init__(div
, file
, attrs
); }, 100);
436 // Support two-argument constructor
437 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
439 attrs
= Dygraph
.mapLegacyOptions_(attrs
);
441 if (typeof(div
) == 'string') {
442 div
= document
.getElementById(div
);
446 console
.error("Constructing dygraph with a non-existent div!");
450 this.isUsingExcanvas_
= typeof(G_vmlCanvasManager
) != 'undefined';
452 // Copy the important bits into the object
453 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
456 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
457 this.previousVerticalX_
= -1;
458 this.fractions_
= attrs
.fractions
|| false;
459 this.dateWindow_
= attrs
.dateWindow
|| null;
461 this.annotations_
= [];
463 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
464 this.zoomed_x_
= false;
465 this.zoomed_y_
= false;
467 // Clear the div. This ensure that, if multiple dygraphs are passed the same
468 // div, then only one will be drawn.
471 // For historical reasons, the 'width' and 'height' options trump all CSS
472 // rules _except_ for an explicit 'width' or 'height' on the div.
473 // As an added convenience, if the div has zero height (like <div></div> does
474 // without any styles), then we use a default height/width
.
475 if (div
.style
.width
=== '' && attrs
.width
) {
476 div
.style
.width
= attrs
.width
+ "px";
478 if (div
.style
.height
=== '' && attrs
.height
) {
479 div
.style
.height
= attrs
.height
+ "px";
481 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
482 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
483 if (div
.style
.width
=== '') {
484 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
487 // These will be zero if the dygraph's div is hidden. In that case,
488 // use the user-specified attributes if present. If not, use zero
489 // and assume the user will call resize to fix things later.
490 this.width_
= div
.clientWidth
|| attrs
.width
|| 0;
491 this.height_
= div
.clientHeight
|| attrs
.height
|| 0;
493 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
494 if (attrs
.stackedGraph
) {
495 attrs
.fillGraph
= true;
496 // TODO(nikhilk): Add any other stackedGraph checks here.
499 // DEPRECATION WARNING: All option processing should be moved from
500 // attrs_ and user_attrs_ to options_, which holds all this information.
502 // Dygraphs has many options, some of which interact with one another.
503 // To keep track of everything, we maintain two sets of options:
505 // this.user_attrs_ only options explicitly set by the user.
506 // this.attrs_ defaults, options derived from user_attrs_, data.
508 // Options are then accessed this.attr_('attr'), which first looks at
509 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
510 // defaults without overriding behavior that the user specifically asks for.
511 this.user_attrs_
= {};
512 Dygraph
.update(this.user_attrs_
, attrs
);
514 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
516 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
518 this.boundaryIds_
= [];
519 this.setIndexByName_
= {};
520 this.datasetIndex_
= [];
522 this.registeredEvents_
= [];
523 this.eventListeners_
= {};
525 this.attributes_
= new DygraphOptions(this);
527 // Create the containing DIV and other interactive elements
528 this.createInterface_();
532 var plugins
= Dygraph
.PLUGINS
.concat(this.getOption('plugins'));
533 for (var i
= 0; i
< plugins
.length
; i
++) {
534 // the plugins option may contain either plugin classes or instances.
535 // Plugin instances contain an activate method.
536 var Plugin
= plugins
[i
]; // either a constructor or an instance.
538 if (typeof(Plugin
.activate
) !== 'undefined') {
539 pluginInstance
= Plugin
;
541 pluginInstance
= new Plugin();
545 plugin
: pluginInstance
,
551 var handlers
= pluginInstance
.activate(this);
552 for (var eventName
in handlers
) {
553 if (!handlers
.hasOwnProperty(eventName
)) continue;
554 // TODO(danvk): validate eventName.
555 pluginDict
.events
[eventName
] = handlers
[eventName
];
558 this.plugins_
.push(pluginDict
);
561 // At this point, plugins can no longer register event handlers.
562 // Construct a map from event -> ordered list of [callback, plugin].
563 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
564 var plugin_dict
= this.plugins_
[i
];
565 for (var eventName
in plugin_dict
.events
) {
566 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
567 var callback
= plugin_dict
.events
[eventName
];
569 var pair
= [plugin_dict
.plugin
, callback
];
570 if (!(eventName
in this.eventListeners_
)) {
571 this.eventListeners_
[eventName
] = [pair
];
573 this.eventListeners_
[eventName
].push(pair
);
578 this.createDragInterface_();
584 * Triggers a cascade of events to the various plugins which are interested in them.
585 * Returns true if the "default behavior" should be prevented, i.e. if one
586 * of the event listeners called event.preventDefault().
589 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
590 if (!(name
in this.eventListeners_
)) return false;
592 // QUESTION: can we use objects & prototypes to speed this up?
596 defaultPrevented
: false,
597 preventDefault
: function() {
598 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
599 e
.defaultPrevented
= true;
601 propagationStopped
: false,
602 stopPropagation
: function() {
603 e
.propagationStopped
= true;
606 Dygraph
.update(e
, extra_props
);
608 var callback_plugin_pairs
= this.eventListeners_
[name
];
609 if (callback_plugin_pairs
) {
610 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
611 var plugin
= callback_plugin_pairs
[i
][0];
612 var callback
= callback_plugin_pairs
[i
][1];
613 callback
.call(plugin
, e
);
614 if (e
.propagationStopped
) break;
617 return e
.defaultPrevented
;
621 * Fetch a plugin instance of a particular class. Only for testing.
623 * @param {!Class} type The type of the plugin.
624 * @return {Object} Instance of the plugin, or null if there is none.
626 Dygraph
.prototype.getPluginInstance_
= function(type
) {
627 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
628 var p
= this.plugins_
[i
];
629 if (p
.plugin
instanceof type
) {
637 * Returns the zoomed status of the chart for one or both axes.
639 * Axis is an optional parameter. Can be set to 'x' or 'y'.
641 * The zoomed status for an axis is set whenever a user zooms using the mouse
642 * or when the dateWindow or valueRange are updated (unless the
643 * isZoomedIgnoreProgrammaticZoom option is also specified).
645 Dygraph
.prototype.isZoomed
= function(axis
) {
646 if (axis
=== null || axis
=== undefined
) {
647 return this.zoomed_x_
|| this.zoomed_y_
;
649 if (axis
=== 'x') return this.zoomed_x_
;
650 if (axis
=== 'y') return this.zoomed_y_
;
651 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
655 * Returns information about the Dygraph object, including its containing ID.
657 Dygraph
.prototype.toString
= function() {
658 var maindiv
= this.maindiv_
;
659 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
660 return "[Dygraph " + id
+ "]";
665 * Returns the value of an option. This may be set by the user (either in the
666 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
668 * @param {string} name The name of the option, e.g. 'rollPeriod'.
669 * @param {string} [seriesName] The name of the series to which the option
670 * will be applied. If no per-series value of this option is available, then
671 * the global value is returned. This is optional.
672 * @return { ... } The value of the option.
674 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
676 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
677 console
.error('Must include options reference JS for testing');
678 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
679 console
.error('Dygraphs is using property ' + name
+ ', which has no ' +
680 'entry in the Dygraphs.OPTIONS_REFERENCE listing.');
681 // Only log this error once.
682 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
685 return seriesName
? this.attributes_
.getForSeries(name
, seriesName
) : this.attributes_
.get(name
);
689 * Returns the current value for an option, as set in the constructor or via
690 * updateOptions. You may pass in an (optional) series name to get per-series
691 * values for the option.
693 * All values returned by this method should be considered immutable. If you
694 * modify them, there is no guarantee that the changes will be honored or that
695 * dygraphs will remain in a consistent state. If you want to modify an option,
696 * use updateOptions() instead.
698 * @param {string} name The name of the option (e.g. 'strokeWidth')
699 * @param {string=} opt_seriesName Series name to get per-series values.
700 * @return {*} The value of the option.
702 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
703 return this.attr_(name
, opt_seriesName
);
707 * Like getOption(), but specifically returns a number.
708 * This is a convenience function for working with the Closure Compiler.
709 * @param {string} name The name of the option (e.g. 'strokeWidth')
710 * @param {string=} opt_seriesName Series name to get per-series values.
711 * @return {number} The value of the option.
714 Dygraph
.prototype.getNumericOption
= function(name
, opt_seriesName
) {
715 return /** @type{number} */(this.getOption(name
, opt_seriesName
));
719 * Like getOption(), but specifically returns a string.
720 * This is a convenience function for working with the Closure Compiler.
721 * @param {string} name The name of the option (e.g. 'strokeWidth')
722 * @param {string=} opt_seriesName Series name to get per-series values.
723 * @return {string} The value of the option.
726 Dygraph
.prototype.getStringOption
= function(name
, opt_seriesName
) {
727 return /** @type{string} */(this.getOption(name
, opt_seriesName
));
731 * Like getOption(), but specifically returns a boolean.
732 * This is a convenience function for working with the Closure Compiler.
733 * @param {string} name The name of the option (e.g. 'strokeWidth')
734 * @param {string=} opt_seriesName Series name to get per-series values.
735 * @return {boolean} The value of the option.
738 Dygraph
.prototype.getBooleanOption
= function(name
, opt_seriesName
) {
739 return /** @type{boolean} */(this.getOption(name
, opt_seriesName
));
743 * Like getOption(), but specifically returns a function.
744 * This is a convenience function for working with the Closure Compiler.
745 * @param {string} name The name of the option (e.g. 'strokeWidth')
746 * @param {string=} opt_seriesName Series name to get per-series values.
747 * @return {function(...)} The value of the option.
750 Dygraph
.prototype.getFunctionOption
= function(name
, opt_seriesName
) {
751 return /** @type{function(...)} */(this.getOption(name
, opt_seriesName
));
754 Dygraph
.prototype.getOptionForAxis
= function(name
, axis
) {
755 return this.attributes_
.getForAxis(name
, axis
);
760 * @param {string} axis The name of the axis (i.e. 'x', 'y' or 'y2')
761 * @return { ... } A function mapping string -> option value
763 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
765 return function(opt
) {
766 var axis_opts
= self
.user_attrs_
.axes
;
767 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
768 return axis_opts
[axis
][opt
];
771 // I don't like that this is in a second spot.
772 if (axis
=== 'x' && opt
=== 'logscale') {
773 // return the default value.
774 // TODO(konigsberg): pull the default from a global default.
778 // user-specified attributes always trump defaults, even if they're less
780 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
781 return self
.user_attrs_
[opt
];
784 axis_opts
= self
.attrs_
.axes
;
785 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
786 return axis_opts
[axis
][opt
];
788 // check old-style axis options
789 // TODO(danvk): add a deprecation warning if either of these match.
790 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
791 return self
.axes_
[0][opt
];
792 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
793 return self
.axes_
[1][opt
];
795 return self
.attr_(opt
);
800 * Returns the current rolling period, as set by the user or an option.
801 * @return {number} The number of points in the rolling window
803 Dygraph
.prototype.rollPeriod
= function() {
804 return this.rollPeriod_
;
808 * Returns the currently-visible x-range. This can be affected by zooming,
809 * panning or a call to updateOptions.
810 * Returns a two-element array: [left, right].
811 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
813 Dygraph
.prototype.xAxisRange
= function() {
814 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
818 * Returns the lower- and upper-bound x-axis values of the
821 Dygraph
.prototype.xAxisExtremes
= function() {
822 var pad
= this.getNumericOption('xRangePad') / this.plotter_
.area
.w
;
823 if (this.numRows() === 0) {
824 return [0 - pad
, 1 + pad
];
826 var left
= this.rawData_
[0][0];
827 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
829 // Must keep this in sync with dygraph-layout _evaluateLimits()
830 var range
= right
- left
;
832 right
+= range
* pad
;
834 return [left
, right
];
838 * Returns the currently-visible y-range for an axis. This can be affected by
839 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
840 * called with no arguments, returns the range of the first axis.
841 * Returns a two-element array: [bottom, top].
843 Dygraph
.prototype.yAxisRange
= function(idx
) {
844 if (typeof(idx
) == "undefined") idx
= 0;
845 if (idx
< 0 || idx
>= this.axes_
.length
) {
848 var axis
= this.axes_
[idx
];
849 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
853 * Returns the currently-visible y-ranges for each axis. This can be affected by
854 * zooming, panning, calls to updateOptions, etc.
855 * Returns an array of [bottom, top] pairs, one for each y-axis.
857 Dygraph
.prototype.yAxisRanges
= function() {
859 for (var i
= 0; i
< this.axes_
.length
; i
++) {
860 ret
.push(this.yAxisRange(i
));
865 // TODO(danvk): use these functions throughout dygraphs.
867 * Convert from data coordinates to canvas/div X/Y coordinates.
868 * If specified, do this conversion for the coordinate system of a particular
869 * axis. Uses the first axis by default.
870 * Returns a two-element array: [X, Y]
872 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
873 * instead of toDomCoords(null, y, axis).
875 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
876 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
880 * Convert from data x coordinates to canvas/div X coordinate.
881 * If specified, do this conversion for the coordinate system of a particular
883 * Returns a single value or null if x is null.
885 Dygraph
.prototype.toDomXCoord
= function(x
) {
890 var area
= this.plotter_
.area
;
891 var xRange
= this.xAxisRange();
892 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
896 * Convert from data x coordinates to canvas/div Y coordinate and optional
897 * axis. Uses the first axis by default.
899 * returns a single value or null if y is null.
901 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
902 var pct
= this.toPercentYCoord(y
, axis
);
907 var area
= this.plotter_
.area
;
908 return area
.y
+ pct
* area
.h
;
912 * Convert from canvas/div coords to data coordinates.
913 * If specified, do this conversion for the coordinate system of a particular
914 * axis. Uses the first axis by default.
915 * Returns a two-element array: [X, Y].
917 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
918 * instead of toDataCoords(null, y, axis).
920 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
921 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
925 * Convert from canvas/div x coordinate to data coordinate.
927 * If x is null, this returns null.
929 Dygraph
.prototype.toDataXCoord
= function(x
) {
934 var area
= this.plotter_
.area
;
935 var xRange
= this.xAxisRange();
937 if (!this.attributes_
.getForAxis("logscale", 'x')) {
938 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
940 // TODO: remove duplicate code?
941 // Computing the inverse of toDomCoord.
942 var pct
= (x
- area
.x
) / area
.w
;
944 // Computing the inverse of toPercentXCoord. The function was arrived at with
945 // the following steps:
947 // Original calcuation:
948 // pct = (log(x) - log(xRange[0])) / (log(xRange
[1]) - log(xRange
[0])));
950 // Multiply both sides by the right-side demoninator.
951 // pct * (log(xRange[1] - log(xRange[0]))) = log(x) - log(xRange[0])
953 // add log(xRange[0]) to both sides
954 // log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])) = log(x);
956 // Swap both sides of the equation,
957 // log(x) = log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0]))
959 // Use both sides as the exponent in 10^exp and we're done.
960 // x = 10 ^ (log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])))
961 var logr0
= Dygraph
.log10(xRange
[0]);
962 var logr1
= Dygraph
.log10(xRange
[1]);
963 var exponent
= logr0
+ (pct
* (logr1
- logr0
));
964 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
970 * Convert from canvas/div y coord to value.
972 * If y is null, this returns null.
973 * if axis is null, this uses the first axis.
975 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
980 var area
= this.plotter_
.area
;
981 var yRange
= this.yAxisRange(axis
);
983 if (typeof(axis
) == "undefined") axis
= 0;
984 if (!this.attributes_
.getForAxis("logscale", axis
)) {
985 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
987 // Computing the inverse of toDomCoord.
988 var pct
= (y
- area
.y
) / area
.h
;
990 // Computing the inverse of toPercentYCoord. The function was arrived at with
991 // the following steps:
993 // Original calcuation:
994 // pct = (log(yRange[1]) - log(y)) / (log(yRange
[1]) - log(yRange
[0]));
996 // Multiply both sides by the right-side demoninator.
997 // pct * (log(yRange[1]) - log(yRange[0])) = log(yRange[1]) - log(y);
999 // subtract log(yRange[1]) from both sides.
1000 // (pct * (log(yRange[1]) - log(yRange[0]))) - log(yRange[1]) = -log(y);
1002 // and multiply both sides by -1.
1003 // log(yRange[1]) - (pct * (logr1 - log(yRange[0])) = log(y);
1005 // Swap both sides of the equation,
1006 // log(y) = log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0])));
1008 // Use both sides as the exponent in 10^exp and we're done.
1009 // y = 10 ^ (log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0]))));
1010 var logr0
= Dygraph
.log10(yRange
[0]);
1011 var logr1
= Dygraph
.log10(yRange
[1]);
1012 var exponent
= logr1
- (pct
* (logr1
- logr0
));
1013 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
1019 * Converts a y for an axis to a percentage from the top to the
1020 * bottom of the drawing area.
1022 * If the coordinate represents a value visible on the canvas, then
1023 * the value will be between 0 and 1, where 0 is the top of the canvas.
1024 * However, this method will return values outside the range, as
1025 * values can fall outside the canvas.
1027 * If y is null, this returns null.
1028 * if axis is null, this uses the first axis.
1030 * @param {number} y The data y-coordinate.
1031 * @param {number} [axis] The axis number on which the data coordinate lives.
1032 * @return {number} A fraction in [0, 1] where 0 = the top edge.
1034 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
1038 if (typeof(axis
) == "undefined") axis
= 0;
1040 var yRange
= this.yAxisRange(axis
);
1043 var logscale
= this.attributes_
.getForAxis("logscale", axis
);
1045 var logr0
= Dygraph
.log10(yRange
[0]);
1046 var logr1
= Dygraph
.log10(yRange
[1]);
1047 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- logr0
);
1049 // yRange[1] - y is unit distance from the bottom.
1050 // yRange[1] - yRange[0] is the scale of the range.
1051 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
1052 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
1058 * Converts an x value to a percentage from the left to the right of
1061 * If the coordinate represents a value visible on the canvas, then
1062 * the value will be between 0 and 1, where 0 is the left of the canvas.
1063 * However, this method will return values outside the range, as
1064 * values can fall outside the canvas.
1066 * If x is null, this returns null.
1067 * @param {number} x The data x-coordinate.
1068 * @return {number} A fraction in [0, 1] where 0 = the left edge.
1070 Dygraph
.prototype.toPercentXCoord
= function(x
) {
1075 var xRange
= this.xAxisRange();
1077 var logscale
= this.attributes_
.getForAxis("logscale", 'x') ;
1078 if (logscale
=== true) { // logscale can be null so we test for true explicitly.
1079 var logr0
= Dygraph
.log10(xRange
[0]);
1080 var logr1
= Dygraph
.log10(xRange
[1]);
1081 pct
= (Dygraph
.log10(x
) - logr0
) / (logr1
- logr0
);
1083 // x - xRange[0] is unit distance from the left.
1084 // xRange[1] - xRange[0] is the scale of the range.
1085 // The full expression below is the % from the left.
1086 pct
= (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
1092 * Returns the number of columns (including the independent variable).
1093 * @return {number} The number of columns.
1095 Dygraph
.prototype.numColumns
= function() {
1096 if (!this.rawData_
) return 0;
1097 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
1101 * Returns the number of rows (excluding any header/label row).
1102 * @return {number} The number of rows, less any header.
1104 Dygraph
.prototype.numRows
= function() {
1105 if (!this.rawData_
) return 0;
1106 return this.rawData_
.length
;
1110 * Returns the value in the given row and column. If the row and column exceed
1111 * the bounds on the data, returns null. Also returns null if the value is
1113 * @param {number} row The row number of the data (0-based). Row 0 is the
1114 * first row of data, not a header row.
1115 * @param {number} col The column number of the data (0-based)
1116 * @return {number} The value in the specified cell or null if the row/col
1117 * were out of range.
1119 Dygraph
.prototype.getValue
= function(row
, col
) {
1120 if (row
< 0 || row
> this.rawData_
.length
) return null;
1121 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
1123 return this.rawData_
[row
][col
];
1127 * Generates interface elements for the Dygraph: a containing div, a div to
1128 * display the current point, and a textbox to adjust the rolling average
1129 * period. Also creates the Renderer/Layout elements.
1132 Dygraph
.prototype.createInterface_
= function() {
1133 // Create the all-enclosing graph div
1134 var enclosing
= this.maindiv_
;
1136 this.graphDiv
= document
.createElement("div");
1138 // TODO(danvk): any other styles that are useful to set here?
1139 this.graphDiv
.style
.textAlign
= 'left'; // This is a CSS "reset"
1140 this.graphDiv
.style
.position
= 'relative';
1141 enclosing
.appendChild(this.graphDiv
);
1143 // Create the canvas for interactive parts of the chart.
1144 this.canvas_
= Dygraph
.createCanvas();
1145 this.canvas_
.style
.position
= "absolute";
1147 // ... and for static parts of the chart.
1148 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
1150 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
1151 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
1153 this.resizeElements_();
1155 // The interactive parts of the graph are drawn on top of the chart.
1156 this.graphDiv
.appendChild(this.hidden_
);
1157 this.graphDiv
.appendChild(this.canvas_
);
1158 this.mouseEventElement_
= this.createMouseEventElement_();
1160 // Create the grapher
1161 this.layout_
= new DygraphLayout(this);
1165 this.mouseMoveHandler_
= function(e
) {
1166 dygraph
.mouseMove_(e
);
1169 this.mouseOutHandler_
= function(e
) {
1170 // The mouse has left the chart if:
1171 // 1. e.target is inside the chart
1172 // 2. e.relatedTarget is outside the chart
1173 var target
= e
.target
|| e
.fromElement
;
1174 var relatedTarget
= e
.relatedTarget
|| e
.toElement
;
1175 if (Dygraph
.isNodeContainedBy(target
, dygraph
.graphDiv
) &&
1176 !Dygraph
.isNodeContainedBy(relatedTarget
, dygraph
.graphDiv
)) {
1177 dygraph
.mouseOut_(e
);
1181 this.addAndTrackEvent(window
, 'mouseout', this.mouseOutHandler_
);
1182 this.addAndTrackEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1184 // Don't recreate and register the resize handler on subsequent calls.
1185 // This happens when the graph is resized.
1186 if (!this.resizeHandler_
) {
1187 this.resizeHandler_
= function(e
) {
1191 // Update when the window is resized.
1192 // TODO(danvk): drop frames depending on complexity of the chart.
1193 this.addAndTrackEvent(window
, 'resize', this.resizeHandler_
);
1197 Dygraph
.prototype.resizeElements_
= function() {
1198 this.graphDiv
.style
.width
= this.width_
+ "px";
1199 this.graphDiv
.style
.height
= this.height_
+ "px";
1201 var canvasScale
= Dygraph
.getContextPixelRatio(this.canvas_ctx_
);
1202 this.canvas_
.width
= this.width_
* canvasScale
;
1203 this.canvas_
.height
= this.height_
* canvasScale
;
1204 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
1205 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
1206 if (canvasScale
!== 1) {
1207 this.canvas_ctx_
.scale(canvasScale
, canvasScale
);
1210 var hiddenScale
= Dygraph
.getContextPixelRatio(this.hidden_ctx_
);
1211 this.hidden_
.width
= this.width_
* hiddenScale
;
1212 this.hidden_
.height
= this.height_
* hiddenScale
;
1213 this.hidden_
.style
.width
= this.width_
+ "px"; // for IE
1214 this.hidden_
.style
.height
= this.height_
+ "px"; // for IE
1215 if (hiddenScale
!== 1) {
1216 this.hidden_ctx_
.scale(hiddenScale
, hiddenScale
);
1221 * Detach DOM elements in the dygraph and null out all data references.
1222 * Calling this when you're done with a dygraph can dramatically reduce memory
1223 * usage. See, e.g., the tests/perf.html example.
1225 Dygraph
.prototype.destroy
= function() {
1226 this.canvas_ctx_
.restore();
1227 this.hidden_ctx_
.restore();
1229 // Destroy any plugins, in the reverse order that they were registered.
1230 for (var i
= this.plugins_
.length
- 1; i
>= 0; i
--) {
1231 var p
= this.plugins_
.pop();
1232 if (p
.plugin
.destroy
) p
.plugin
.destroy();
1235 var removeRecursive
= function(node
) {
1236 while (node
.hasChildNodes()) {
1237 removeRecursive(node
.firstChild
);
1238 node
.removeChild(node
.firstChild
);
1242 this.removeTrackedEvents_();
1244 // remove mouse event handlers (This may not be necessary anymore)
1245 Dygraph
.removeEvent(window
, 'mouseout', this.mouseOutHandler_
);
1246 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1248 // remove window handlers
1249 Dygraph
.removeEvent(window
,'resize', this.resizeHandler_
);
1250 this.resizeHandler_
= null;
1252 removeRecursive(this.maindiv_
);
1254 var nullOut
= function(obj
) {
1255 for (var n
in obj
) {
1256 if (typeof(obj
[n
]) === 'object') {
1261 // These may not all be necessary, but it can't hurt...
1262 nullOut(this.layout_
);
1263 nullOut(this.plotter_
);
1268 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1269 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1270 * or the zoom rectangles) is done on this.canvas_.
1271 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1272 * @return {Object} The newly-created canvas
1275 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1276 var h
= Dygraph
.createCanvas();
1277 h
.style
.position
= "absolute";
1278 // TODO(danvk): h should be offset from canvas. canvas needs to include
1279 // some extra area to make it easier to zoom in on the far left and far
1280 // right. h needs to be precisely the plot area, so that clipping occurs.
1281 h
.style
.top
= canvas
.style
.top
;
1282 h
.style
.left
= canvas
.style
.left
;
1283 h
.width
= this.width_
;
1284 h
.height
= this.height_
;
1285 h
.style
.width
= this.width_
+ "px"; // for IE
1286 h
.style
.height
= this.height_
+ "px"; // for IE
1291 * Creates an overlay element used to handle mouse events.
1292 * @return {Object} The mouse event element.
1295 Dygraph
.prototype.createMouseEventElement_
= function() {
1296 if (this.isUsingExcanvas_
) {
1297 var elem
= document
.createElement("div");
1298 elem
.style
.position
= 'absolute';
1299 elem
.style
.backgroundColor
= 'white';
1300 elem
.style
.filter
= 'alpha(opacity=0)';
1301 elem
.style
.width
= this.width_
+ "px";
1302 elem
.style
.height
= this.height_
+ "px";
1303 this.graphDiv
.appendChild(elem
);
1306 return this.canvas_
;
1311 * Generate a set of distinct colors for the data series. This is done with a
1312 * color wheel. Saturation/Value are customizable, and the hue is
1313 * equally-spaced around the color wheel. If a custom set of colors is
1314 * specified, that is used instead.
1317 Dygraph
.prototype.setColors_
= function() {
1318 var labels
= this.getLabels();
1319 var num
= labels
.length
- 1;
1321 this.colorsMap_
= {};
1323 // These are used for when no custom colors are specified.
1324 var sat
= this.getNumericOption('colorSaturation') || 1.0;
1325 var val
= this.getNumericOption('colorValue') || 0.5;
1326 var half
= Math
.ceil(num
/ 2);
1328 var colors
= this.getOption('colors');
1329 var visibility
= this.visibility();
1330 for (var i
= 0; i
< num
; i
++) {
1331 if (!visibility
[i
]) {
1334 var label
= labels
[i
+ 1];
1335 var colorStr
= this.attributes_
.getForSeries('color', label
);
1338 colorStr
= colors
[i
% colors
.length
];
1340 // alternate colors for high contrast.
1341 var idx
= i
% 2 ? (half
+ (i
+ 1)/ 2) : Math.ceil((i + 1) / 2);
1342 var hue
= (1.0 * idx
/ (1 + num
));
1343 colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1346 this.colors_
.push(colorStr
);
1347 this.colorsMap_
[label
] = colorStr
;
1352 * Return the list of colors. This is either the list of colors passed in the
1353 * attributes or the autogenerated list of rgb(r,g,b) strings.
1354 * This does not return colors for invisible series.
1355 * @return {Array.<string>} The list of colors.
1357 Dygraph
.prototype.getColors
= function() {
1358 return this.colors_
;
1362 * Returns a few attributes of a series, i.e. its color, its visibility, which
1363 * axis it's assigned to, and its column in the original data.
1364 * Returns null if the series does not exist.
1365 * Otherwise, returns an object with column, visibility, color and axis properties.
1366 * The "axis" property will be set to 1 for y1 and 2 for y2.
1367 * The "column" property can be fed back into getValue(row, column) to get
1368 * values for this series.
1370 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1372 var labels
= this.getLabels();
1373 for (var i
= 1; i
< labels
.length
; i
++) {
1374 if (labels
[i
] == series_name
) {
1379 if (idx
== -1) return null;
1384 visible
: this.visibility()[idx
- 1],
1385 color
: this.colorsMap_
[series_name
],
1386 axis
: 1 + this.attributes_
.axisForSeries(series_name
)
1391 * Create the text box to adjust the averaging period
1394 Dygraph
.prototype.createRollInterface_
= function() {
1395 // Create a roller if one doesn't exist already.
1396 if (!this.roller_
) {
1397 this.roller_
= document
.createElement("input");
1398 this.roller_
.type
= "text";
1399 this.roller_
.style
.display
= "none";
1400 this.graphDiv
.appendChild(this.roller_
);
1403 var display
= this.getBooleanOption('showRoller') ? 'block' : 'none';
1405 var area
= this.plotter_
.area
;
1406 var textAttr
= { "position": "absolute",
1408 "top": (area
.y
+ area
.h
- 25) + "px",
1409 "left": (area
.x
+ 1) + "px",
1412 this.roller_
.size
= "2";
1413 this.roller_
.value
= this.rollPeriod_
;
1414 for (var name
in textAttr
) {
1415 if (textAttr
.hasOwnProperty(name
)) {
1416 this.roller_
.style
[name
] = textAttr
[name
];
1421 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1425 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1429 Dygraph
.prototype.createDragInterface_
= function() {
1431 // Tracks whether the mouse is down right now
1433 isPanning
: false, // is this drag part of a pan?
1434 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1435 dragStartX
: null, // pixel coordinates
1436 dragStartY
: null, // pixel coordinates
1437 dragEndX
: null, // pixel coordinates
1438 dragEndY
: null, // pixel coordinates
1439 dragDirection
: null,
1440 prevEndX
: null, // pixel coordinates
1441 prevEndY
: null, // pixel coordinates
1442 prevDragDirection
: null,
1443 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1445 // The value on the left side of the graph when a pan operation starts.
1446 initialLeftmostDate
: null,
1448 // The number of units each pixel spans. (This won't be valid for log
1450 xUnitsPerPixel
: null,
1452 // TODO(danvk): update this comment
1453 // The range in second/value units that the viewport encompasses during a
1454 // panning operation.
1457 // Top-left corner of the canvas, in DOM coords
1458 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1462 // Values for use with panEdgeFraction, which limit how far outside the
1463 // graph's data boundaries it can be panned.
1464 boundedDates
: null, // [minDate, maxDate]
1465 boundedValues
: null, // [[minValue, maxValue] ...]
1467 // We cover iframes during mouse interactions. See comments in
1468 // dygraph-utils.js for more info on why this is a good idea.
1469 tarp
: new Dygraph
.IFrameTarp(),
1471 // contextB is the same thing as this context object but renamed.
1472 initializeMouseDown
: function(event
, g
, contextB
) {
1473 // prevents mouse drags from selecting page text.
1474 if (event
.preventDefault
) {
1475 event
.preventDefault(); // Firefox, Chrome, etc.
1477 event
.returnValue
= false; // IE
1478 event
.cancelBubble
= true;
1481 var canvasPos
= Dygraph
.findPos(g
.canvas_
);
1482 contextB
.px
= canvasPos
.x
;
1483 contextB
.py
= canvasPos
.y
;
1484 contextB
.dragStartX
= Dygraph
.dragGetX_(event
, contextB
);
1485 contextB
.dragStartY
= Dygraph
.dragGetY_(event
, contextB
);
1486 contextB
.cancelNextDblclick
= false;
1487 contextB
.tarp
.cover();
1489 destroy
: function() {
1491 if (context
.isZooming
|| context
.isPanning
) {
1492 context
.isZooming
= false;
1493 context
.dragStartX
= null;
1494 context
.dragStartY
= null;
1497 if (context
.isPanning
) {
1498 context
.isPanning
= false;
1499 context
.draggingDate
= null;
1500 context
.dateRange
= null;
1501 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1502 delete self
.axes_
[i
].draggingValue
;
1503 delete self
.axes_
[i
].dragValueRange
;
1507 context
.tarp
.uncover();
1511 var interactionModel
= this.getOption("interactionModel");
1513 // Self is the graph.
1516 // Function that binds the graph and context to the handler.
1517 var bindHandler
= function(handler
) {
1518 return function(event
) {
1519 handler(event
, self
, context
);
1523 for (var eventName
in interactionModel
) {
1524 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1525 this.addAndTrackEvent(this.mouseEventElement_
, eventName
,
1526 bindHandler(interactionModel
[eventName
]));
1529 // If the user releases the mouse button during a drag, but not over the
1530 // canvas, then it doesn't count as a zooming action.
1531 if (!interactionModel
.willDestroyContextMyself
) {
1532 var mouseUpHandler
= function(event
) {
1536 this.addAndTrackEvent(document
, 'mouseup', mouseUpHandler
);
1541 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1542 * up any previous zoom rectangles that were drawn. This could be optimized to
1543 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1546 * @param {number} direction the direction of the zoom rectangle. Acceptable
1547 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1548 * @param {number} startX The X position where the drag started, in canvas
1550 * @param {number} endX The current X position of the drag, in canvas coords.
1551 * @param {number} startY The Y position where the drag started, in canvas
1553 * @param {number} endY The current Y position of the drag, in canvas coords.
1554 * @param {number} prevDirection the value of direction on the previous call to
1555 * this function. Used to avoid excess redrawing
1556 * @param {number} prevEndX The value of endX on the previous call to this
1557 * function. Used to avoid excess redrawing
1558 * @param {number} prevEndY The value of endY on the previous call to this
1559 * function. Used to avoid excess redrawing
1562 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1563 endY
, prevDirection
, prevEndX
,
1565 var ctx
= this.canvas_ctx_
;
1567 // Clean up from the previous rect if necessary
1568 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1569 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1570 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1571 } else if (prevDirection
== Dygraph
.VERTICAL
) {
1572 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1573 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1576 // Draw a light-grey rectangle to show the new viewing area
1577 if (direction
== Dygraph
.HORIZONTAL
) {
1578 if (endX
&& startX
) {
1579 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1580 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1581 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1583 } else if (direction
== Dygraph
.VERTICAL
) {
1584 if (endY
&& startY
) {
1585 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1586 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1587 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1591 if (this.isUsingExcanvas_
) {
1592 this.currentZoomRectArgs_
= [direction
, startX
, endX
, startY
, endY
, 0, 0, 0];
1597 * Clear the zoom rectangle (and perform no zoom).
1600 Dygraph
.prototype.clearZoomRect_
= function() {
1601 this.currentZoomRectArgs_
= null;
1602 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1606 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1607 * the canvas. The exact zoom window may be slightly larger if there are no data
1608 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1609 * which accepts dates that match the raw data. This function redraws the graph.
1611 * @param {number} lowX The leftmost pixel value that should be visible.
1612 * @param {number} highX The rightmost pixel value that should be visible.
1615 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1616 this.currentZoomRectArgs_
= null;
1617 // Find the earliest and latest dates contained in this canvasx range.
1618 // Convert the call to date ranges of the raw data.
1619 var minDate
= this.toDataXCoord(lowX
);
1620 var maxDate
= this.toDataXCoord(highX
);
1621 this.doZoomXDates_(minDate
, maxDate
);
1625 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1626 * method with doZoomX which accepts pixel coordinates. This function redraws
1629 * @param {number} minDate The minimum date that should be visible.
1630 * @param {number} maxDate The maximum date that should be visible.
1633 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1634 // TODO(danvk): when xAxisRange is null (i.e. "fit to data", the animation
1635 // can produce strange effects. Rather than the x-axis transitioning slowly
1636 // between values, it can jerk around.)
1637 var old_window
= this.xAxisRange();
1638 var new_window
= [minDate
, maxDate
];
1639 this.zoomed_x_
= true;
1641 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1642 if (that
.getFunctionOption("zoomCallback")) {
1643 that
.getFunctionOption("zoomCallback").call(that
,
1644 minDate
, maxDate
, that
.yAxisRanges());
1650 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1651 * the canvas. This function redraws the graph.
1653 * @param {number} lowY The topmost pixel value that should be visible.
1654 * @param {number} highY The lowest pixel value that should be visible.
1657 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1658 this.currentZoomRectArgs_
= null;
1659 // Find the highest and lowest values in pixel range for each axis.
1660 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1661 // This is because pixels increase as you go down on the screen, whereas data
1662 // coordinates increase as you go up the screen.
1663 var oldValueRanges
= this.yAxisRanges();
1664 var newValueRanges
= [];
1665 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1666 var hi
= this.toDataYCoord(lowY
, i
);
1667 var low
= this.toDataYCoord(highY
, i
);
1668 newValueRanges
.push([low
, hi
]);
1671 this.zoomed_y_
= true;
1673 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1674 if (that
.getFunctionOption("zoomCallback")) {
1675 var xRange
= that
.xAxisRange();
1676 that
.getFunctionOption("zoomCallback").call(that
,
1677 xRange
[0], xRange
[1], that
.yAxisRanges());
1683 * Transition function to use in animations. Returns values between 0.0
1684 * (totally old values) and 1.0 (totally new values) for each frame.
1687 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1689 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1693 * Reset the zoom to the original view coordinates. This is the same as
1694 * double-clicking on the graph.
1696 Dygraph
.prototype.resetZoom
= function() {
1697 var dirty
= false, dirtyX
= false, dirtyY
= false;
1698 if (this.dateWindow_
!== null) {
1703 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1704 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1710 // Clear any selection, since it's likely to be drawn in the wrong place.
1711 this.clearSelection();
1714 this.zoomed_x_
= false;
1715 this.zoomed_y_
= false;
1717 var minDate
= this.rawData_
[0][0];
1718 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1720 // With only one frame, don't bother calculating extreme ranges.
1721 // TODO(danvk): merge this block w/ the code below
.
1722 if (!this.getBooleanOption("animatedZooms")) {
1723 this.dateWindow_
= null;
1724 for (i
= 0; i
< this.axes_
.length
; i
++) {
1725 if (this.axes_
[i
].valueWindow
!== null) {
1726 delete this.axes_
[i
].valueWindow
;
1730 if (this.getFunctionOption("zoomCallback")) {
1731 this.getFunctionOption("zoomCallback").call(this,
1732 minDate
, maxDate
, this.yAxisRanges());
1737 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1739 oldWindow
= this.xAxisRange();
1740 newWindow
= [minDate
, maxDate
];
1744 oldValueRanges
= this.yAxisRanges();
1745 // TODO(danvk): this is pretty inefficient
1746 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1747 var extremes
= packed
.extremes
;
1749 // this has the side-effect of modifying this.axes_.
1750 // this doesn't make much sense in this context, but it's convenient (we
1751 // need this.axes_[*].extremeValues) and not harmful since we'll be
1752 // calling drawGraph_ shortly, which clobbers these values.
1753 this.computeYAxisRanges_(extremes
);
1755 newValueRanges
= [];
1756 for (i
= 0; i
< this.axes_
.length
; i
++) {
1757 var axis
= this.axes_
[i
];
1758 newValueRanges
.push((axis
.valueRange
!== null &&
1759 axis
.valueRange
!== undefined
) ?
1760 axis
.valueRange
: axis
.extremeRange
);
1765 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1767 that
.dateWindow_
= null;
1768 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1769 if (that
.axes_
[i
].valueWindow
!== null) {
1770 delete that
.axes_
[i
].valueWindow
;
1773 if (that
.getFunctionOption("zoomCallback")) {
1774 that
.getFunctionOption("zoomCallback").call(that
,
1775 minDate
, maxDate
, that
.yAxisRanges());
1782 * Combined animation logic for all zoom functions.
1783 * either the x parameters or y parameters may be null.
1786 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1787 var steps
= this.getBooleanOption("animatedZooms") ?
1788 Dygraph
.ANIMATION_STEPS
: 1;
1791 var valueRanges
= [];
1794 if (oldXRange
!== null && newXRange
!== null) {
1795 for (step
= 1; step
<= steps
; step
++) {
1796 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1797 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1798 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1802 if (oldYRanges
!== null && newYRanges
!== null) {
1803 for (step
= 1; step
<= steps
; step
++) {
1804 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1806 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1807 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1808 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1810 valueRanges
[step
-1] = thisRange
;
1815 Dygraph
.repeatAndCleanup(function(step
) {
1816 if (valueRanges
.length
) {
1817 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1818 var w
= valueRanges
[step
][i
];
1819 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1822 if (windows
.length
) {
1823 that
.dateWindow_
= windows
[step
];
1826 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1830 * Get the current graph's area object.
1832 * Returns: {x, y, w, h}
1834 Dygraph
.prototype.getArea
= function() {
1835 return this.plotter_
.area
;
1839 * Convert a mouse event to DOM coordinates relative to the graph origin.
1841 * Returns a two-element array: [X, Y].
1843 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1844 if (event
.offsetX
&& event
.offsetY
) {
1845 return [ event
.offsetX
, event
.offsetY
];
1847 var eventElementPos
= Dygraph
.findPos(this.mouseEventElement_
);
1848 var canvasx
= Dygraph
.pageX(event
) - eventElementPos
.x
;
1849 var canvasy
= Dygraph
.pageY(event
) - eventElementPos
.y
;
1850 return [canvasx
, canvasy
];
1855 * Given a canvas X coordinate, find the closest row.
1856 * @param {number} domX graph-relative DOM X coordinate
1857 * Returns {number} row number.
1860 Dygraph
.prototype.findClosestRow
= function(domX
) {
1861 var minDistX
= Infinity
;
1862 var closestRow
= -1;
1863 var sets
= this.layout_
.points
;
1864 for (var i
= 0; i
< sets
.length
; i
++) {
1865 var points
= sets
[i
];
1866 var len
= points
.length
;
1867 for (var j
= 0; j
< len
; j
++) {
1868 var point
= points
[j
];
1869 if (!Dygraph
.isValidPoint(point
, true)) continue;
1870 var dist
= Math
.abs(point
.canvasx
- domX
);
1871 if (dist
< minDistX
) {
1873 closestRow
= point
.idx
;
1882 * Given canvas X,Y coordinates, find the closest point.
1884 * This finds the individual data point across all visible series
1885 * that's closest to the supplied DOM coordinates using the standard
1886 * Euclidean X,Y distance.
1888 * @param {number} domX graph-relative DOM X coordinate
1889 * @param {number} domY graph-relative DOM Y coordinate
1890 * Returns: {row, seriesName, point}
1893 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1894 var minDist
= Infinity
;
1895 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
, closestRow
;
1896 for ( var setIdx
= this.layout_
.points
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1897 var points
= this.layout_
.points
[setIdx
];
1898 for (var i
= 0; i
< points
.length
; ++i
) {
1900 if (!Dygraph
.isValidPoint(point
)) continue;
1901 dx
= point
.canvasx
- domX
;
1902 dy
= point
.canvasy
- domY
;
1903 dist
= dx
* dx
+ dy
* dy
;
1904 if (dist
< minDist
) {
1906 closestPoint
= point
;
1907 closestSeries
= setIdx
;
1908 closestRow
= point
.idx
;
1912 var name
= this.layout_
.setNames
[closestSeries
];
1921 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1923 * This first finds the X data point closest to the supplied DOM X coordinate,
1924 * then finds the series which puts the Y coordinate on top of its filled area,
1925 * using linear interpolation between adjacent point pairs.
1927 * @param {number} domX graph-relative DOM X coordinate
1928 * @param {number} domY graph-relative DOM Y coordinate
1929 * Returns: {row, seriesName, point}
1932 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1933 var row
= this.findClosestRow(domX
);
1934 var closestPoint
, closestSeries
;
1935 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
1936 var boundary
= this.getLeftBoundary_(setIdx
);
1937 var rowIdx
= row
- boundary
;
1938 var points
= this.layout_
.points
[setIdx
];
1939 if (rowIdx
>= points
.length
) continue;
1940 var p1
= points
[rowIdx
];
1941 if (!Dygraph
.isValidPoint(p1
)) continue;
1942 var py
= p1
.canvasy
;
1943 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1944 // interpolate series Y value using next point
1945 var p2
= points
[rowIdx
+ 1];
1946 if (Dygraph
.isValidPoint(p2
)) {
1947 var dx
= p2
.canvasx
- p1
.canvasx
;
1949 var r
= (domX
- p1
.canvasx
) / dx
;
1950 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1953 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1954 // interpolate series Y value using previous point
1955 var p0
= points
[rowIdx
- 1];
1956 if (Dygraph
.isValidPoint(p0
)) {
1957 var dx
= p1
.canvasx
- p0
.canvasx
;
1959 var r
= (p1
.canvasx
- domX
) / dx
;
1960 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1964 // Stop if the point (domX, py) is above this series' upper edge
1965 if (setIdx
=== 0 || py
< domY
) {
1967 closestSeries
= setIdx
;
1970 var name
= this.layout_
.setNames
[closestSeries
];
1979 * When the mouse moves in the canvas, display information about a nearby data
1980 * point and draw dots over those points in the data series. This function
1981 * takes care of cleanup of previously-drawn dots.
1982 * @param {Object} event The mousemove event from the browser.
1985 Dygraph
.prototype.mouseMove_
= function(event
) {
1986 // This prevents JS errors when mousing over the canvas before data loads.
1987 var points
= this.layout_
.points
;
1988 if (points
=== undefined
|| points
=== null) return;
1990 var canvasCoords
= this.eventToDomCoords(event
);
1991 var canvasx
= canvasCoords
[0];
1992 var canvasy
= canvasCoords
[1];
1994 var highlightSeriesOpts
= this.getOption("highlightSeriesOpts");
1995 var selectionChanged
= false;
1996 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1998 if (this.getBooleanOption("stackedGraph")) {
1999 closest
= this.findStackedPoint(canvasx
, canvasy
);
2001 closest
= this.findClosestPoint(canvasx
, canvasy
);
2003 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
2005 var idx
= this.findClosestRow(canvasx
);
2006 selectionChanged
= this.setSelection(idx
);
2009 var callback
= this.getFunctionOption("highlightCallback");
2010 if (callback
&& selectionChanged
) {
2011 callback
.call(this, event
,
2015 this.highlightSet_
);
2020 * Fetch left offset from the specified set index or if not passed, the
2021 * first defined boundaryIds record (see bug #236).
2024 Dygraph
.prototype.getLeftBoundary_
= function(setIdx
) {
2025 if (this.boundaryIds_
[setIdx
]) {
2026 return this.boundaryIds_
[setIdx
][0];
2028 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
2029 if (this.boundaryIds_
[i
] !== undefined
) {
2030 return this.boundaryIds_
[i
][0];
2037 Dygraph
.prototype.animateSelection_
= function(direction
) {
2038 var totalSteps
= 10;
2040 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
2041 if (this.animateId
=== undefined
) this.animateId
= 0;
2042 var start
= this.fadeLevel
;
2043 var steps
= direction
< 0 ? start
: totalSteps
- start
;
2045 if (this.fadeLevel
) {
2046 this.updateSelection_(1.0);
2051 var thisId
= ++this.animateId
;
2053 Dygraph
.repeatAndCleanup(
2055 // ignore simultaneous animations
2056 if (that
.animateId
!= thisId
) return;
2058 that
.fadeLevel
+= direction
;
2059 if (that
.fadeLevel
=== 0) {
2060 that
.clearSelection();
2062 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
2065 steps
, millis
, function() {});
2069 * Draw dots over the selectied points in the data series. This function
2070 * takes care of cleanup of previously-drawn dots.
2073 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
2074 /*var defaultPrevented = */
2075 this.cascadeEvents_('select', {
2076 selectedX
: this.lastx_
,
2077 selectedPoints
: this.selPoints_
2079 // TODO(danvk): use defaultPrevented here?
2081 // Clear the previously drawn vertical, if there is one
2083 var ctx
= this.canvas_ctx_
;
2084 if (this.getOption('highlightSeriesOpts')) {
2085 ctx
.clearRect(0, 0, this.width_
, this.height_
);
2086 var alpha
= 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha');
2088 // Activating background fade includes an animation effect for a gradual
2089 // fade. TODO(klausw): make this independently configurable if it causes
2090 // issues? Use a shared preference to control animations?
2091 var animateBackgroundFade
= true;
2092 if (animateBackgroundFade
) {
2093 if (opt_animFraction
=== undefined
) {
2094 // start a new animation
2095 this.animateSelection_(1);
2098 alpha
*= opt_animFraction
;
2100 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
2101 ctx
.fillRect(0, 0, this.width_
, this.height_
);
2104 // Redraw only the highlighted series in the interactive canvas (not the
2105 // static plot canvas, which is where series are usually drawn).
2106 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
2107 } else if (this.previousVerticalX_
>= 0) {
2108 // Determine the maximum highlight circle size.
2109 var maxCircleSize
= 0;
2110 var labels
= this.attr_('labels');
2111 for (i
= 1; i
< labels
.length
; i
++) {
2112 var r
= this.getNumericOption('highlightCircleSize', labels
[i
]);
2113 if (r
> maxCircleSize
) maxCircleSize
= r
;
2115 var px
= this.previousVerticalX_
;
2116 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
2117 2 * maxCircleSize
+ 2, this.height_
);
2120 if (this.isUsingExcanvas_
&& this.currentZoomRectArgs_
) {
2121 Dygraph
.prototype.drawZoomRect_
.apply(this, this.currentZoomRectArgs_
);
2124 if (this.selPoints_
.length
> 0) {
2125 // Draw colored circles over the center of each selected point
2126 var canvasx
= this.selPoints_
[0].canvasx
;
2128 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
2129 var pt
= this.selPoints_
[i
];
2130 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
2132 var circleSize
= this.getNumericOption('highlightCircleSize', pt
.name
);
2133 var callback
= this.getFunctionOption("drawHighlightPointCallback", pt
.name
);
2134 var color
= this.plotter_
.colors
[pt
.name
];
2136 callback
= Dygraph
.Circles
.DEFAULT
;
2138 ctx
.lineWidth
= this.getNumericOption('strokeWidth', pt
.name
);
2139 ctx
.strokeStyle
= color
;
2140 ctx
.fillStyle
= color
;
2141 callback
.call(this, this, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
2142 color
, circleSize
, pt
.idx
);
2146 this.previousVerticalX_
= canvasx
;
2151 * Manually set the selected points and display information about them in the
2152 * legend. The selection can be cleared using clearSelection() and queried
2153 * using getSelection().
2154 * @param {number} row Row number that should be highlighted (i.e. appear with
2155 * hover dots on the chart). Set to false to clear any selection.
2156 * @param {seriesName} optional series name to highlight that series with the
2157 * the highlightSeriesOpts setting.
2158 * @param { locked } optional If true, keep seriesName selected when mousing
2159 * over the graph, disabling closest-series highlighting. Call clearSelection()
2162 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
2163 // Extract the points we've selected
2164 this.selPoints_
= [];
2166 var changed
= false;
2167 if (row
!== false && row
>= 0) {
2168 if (row
!= this.lastRow_
) changed
= true;
2169 this.lastRow_
= row
;
2170 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
2171 var points
= this.layout_
.points
[setIdx
];
2172 // Check if the point at the appropriate index is the point we're looking
2173 // for. If it is, just use it, otherwise search the array for a point
2174 // in the proper place.
2175 var setRow
= row
- this.getLeftBoundary_(setIdx
);
2176 if (setRow
< points
.length
&& points
[setRow
].idx
== row
) {
2177 var point
= points
[setRow
];
2178 if (point
.yval
!== null) this.selPoints_
.push(point
);
2180 for (var pointIdx
= 0; pointIdx
< points
.length
; ++pointIdx
) {
2181 var point
= points
[pointIdx
];
2182 if (point
.idx
== row
) {
2183 if (point
.yval
!== null) {
2184 this.selPoints_
.push(point
);
2192 if (this.lastRow_
>= 0) changed
= true;
2196 if (this.selPoints_
.length
) {
2197 this.lastx_
= this.selPoints_
[0].xval
;
2202 if (opt_seriesName
!== undefined
) {
2203 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
2204 this.highlightSet_
= opt_seriesName
;
2207 if (opt_locked
!== undefined
) {
2208 this.lockedSet_
= opt_locked
;
2212 this.updateSelection_(undefined
);
2218 * The mouse has left the canvas. Clear out whatever artifacts remain
2219 * @param {Object} event the mouseout event from the browser.
2222 Dygraph
.prototype.mouseOut_
= function(event
) {
2223 if (this.getFunctionOption("unhighlightCallback")) {
2224 this.getFunctionOption("unhighlightCallback").call(this, event
);
2227 if (this.getBooleanOption("hideOverlayOnMouseOut") && !this.lockedSet_
) {
2228 this.clearSelection();
2233 * Clears the current selection (i.e. points that were highlighted by moving
2234 * the mouse over the chart).
2236 Dygraph
.prototype.clearSelection
= function() {
2237 this.cascadeEvents_('deselect', {});
2239 this.lockedSet_
= false;
2240 // Get rid of the overlay data
2241 if (this.fadeLevel
) {
2242 this.animateSelection_(-1);
2245 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2247 this.selPoints_
= [];
2250 this.highlightSet_
= null;
2254 * Returns the number of the currently selected row. To get data for this row,
2255 * you can use the getValue method.
2256 * @return {number} row number, or -1 if nothing is selected
2258 Dygraph
.prototype.getSelection
= function() {
2259 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2263 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2264 var points
= this.layout_
.points
[setIdx
];
2265 for (var row
= 0; row
< points
.length
; row
++) {
2266 if (points
[row
].x
== this.selPoints_
[0].x
) {
2267 return points
[row
].idx
;
2275 * Returns the name of the currently-highlighted series.
2276 * Only available when the highlightSeriesOpts option is in use.
2278 Dygraph
.prototype.getHighlightSeries
= function() {
2279 return this.highlightSet_
;
2283 * Returns true if the currently-highlighted series was locked
2284 * via setSelection(..., seriesName, true).
2286 Dygraph
.prototype.isSeriesLocked
= function() {
2287 return this.lockedSet_
;
2291 * Fires when there's data available to be graphed.
2292 * @param {string} data Raw CSV data to be plotted
2295 Dygraph
.prototype.loadedEvent_
= function(data
) {
2296 this.rawData_
= this.parseCSV_(data
);
2297 this.cascadeDataDidUpdateEvent_();
2302 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2305 Dygraph
.prototype.addXTicks_
= function() {
2306 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2308 if (this.dateWindow_
) {
2309 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2311 range
= this.xAxisExtremes();
2314 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2315 var xTicks
= xAxisOptionsView('ticker')(
2318 this.width_
, // TODO(danvk): should be area.width
2321 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2322 // console.log(msg);
2323 this.layout_
.setXTicks(xTicks
);
2327 * Returns the correct handler class for the currently set options.
2330 Dygraph
.prototype.getHandlerClass_
= function() {
2332 if (this.attr_('dataHandler')) {
2333 handlerClass
= this.attr_('dataHandler');
2334 } else if (this.fractions_
) {
2335 if (this.getBooleanOption('errorBars')) {
2336 handlerClass
= Dygraph
.DataHandlers
.FractionsBarsHandler
;
2338 handlerClass
= Dygraph
.DataHandlers
.DefaultFractionHandler
;
2340 } else if (this.getBooleanOption('customBars')) {
2341 handlerClass
= Dygraph
.DataHandlers
.CustomBarsHandler
;
2342 } else if (this.getBooleanOption('errorBars')) {
2343 handlerClass
= Dygraph
.DataHandlers
.ErrorBarsHandler
;
2345 handlerClass
= Dygraph
.DataHandlers
.DefaultHandler
;
2347 return handlerClass
;
2352 * This function is called once when the chart's data is changed or the options
2353 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2354 * idea is that values derived from the chart's data can be computed here,
2355 * rather than every time the chart is drawn. This includes things like the
2356 * number of axes, rolling averages, etc.
2358 Dygraph
.prototype.predraw_
= function() {
2359 var start
= new Date();
2361 // Create the correct dataHandler
2362 this.dataHandler_
= new (this.getHandlerClass_())();
2364 this.layout_
.computePlotArea();
2366 // TODO(danvk): move more computations out of drawGraph_ and into here.
2367 this.computeYAxes_();
2369 if (!this.is_initial_draw_
) {
2370 this.canvas_ctx_
.restore();
2371 this.hidden_ctx_
.restore();
2374 this.canvas_ctx_
.save();
2375 this.hidden_ctx_
.save();
2377 // Create a new plotter.
2378 this.plotter_
= new DygraphCanvasRenderer(this,
2383 // The roller sits in the bottom left corner of the chart. We don't know where
2384 // this will be until the options are available, so it's positioned here.
2385 this.createRollInterface_();
2387 this.cascadeEvents_('predraw');
2389 // Convert the raw data (a 2D array) into the internal format and compute
2390 // rolling averages.
2391 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2392 for (var i
= 1; i
< this.numColumns(); i
++) {
2393 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2394 var series
= this.dataHandler_
.extractSeries(this.rawData_
, i
, this.attributes_
);
2395 if (this.rollPeriod_
> 1) {
2396 series
= this.dataHandler_
.rollingAverage(series
, this.rollPeriod_
, this.attributes_
);
2399 this.rolledSeries_
.push(series
);
2402 // If the data or options have changed, then we'd better redraw.
2405 // This is used to determine whether to do various animations.
2406 var end
= new Date();
2407 this.drawingTimeMs_
= (end
- start
);
2413 * xval_* and yval_* are the original unscaled data values,
2414 * while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
2415 * yval_stacked is the cumulative Y value used for stacking graphs,
2416 * and bottom/top/minus/plus are used for error bar graphs.
2423 * y_bottom: ?number,
2425 * y_stacked: ?number,
2427 * yval_minus: ?number,
2429 * yval_plus: ?number,
2433 Dygraph
.PointType
= undefined
;
2436 * Calculates point stacking for stackedGraph=true.
2438 * For stacking purposes, interpolate or extend neighboring data across
2439 * NaN values based on stackedGraphNaNFill settings. This is for display
2440 * only, the underlying data value as shown in the legend remains NaN.
2442 * @param {Array.<Dygraph.PointType>} points Point array for a single series.
2443 * Updates each Point's yval_stacked property.
2444 * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y
2445 * values for the series seen so far. Index is the row number. Updated
2446 * based on the current series's values.
2447 * @param {Array.<number>} seriesExtremes Min and max values, updated
2448 * to reflect the stacked values.
2449 * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or
2453 Dygraph
.stackPoints_
= function(
2454 points
, cumulativeYval
, seriesExtremes
, fillMethod
) {
2455 var lastXval
= null;
2456 var prevPoint
= null;
2457 var nextPoint
= null;
2458 var nextPointIdx
= -1;
2460 // Find the next stackable point starting from the given index.
2461 var updateNextPoint
= function(idx
) {
2462 // If we've previously found a non-NaN point and haven't gone past it yet,
2464 if (nextPointIdx
>= idx
) return;
2466 // We haven't found a non-NaN point yet or have moved past it,
2467 // look towards the right to find a non-NaN point.
2468 for (var j
= idx
; j
< points
.length
; ++j
) {
2469 // Clear out a previously-found point (if any) since it's no longer
2470 // valid, we shouldn't use it for interpolation anymore.
2472 if (!isNaN(points
[j
].yval
) && points
[j
].yval
!== null) {
2474 nextPoint
= points
[j
];
2480 for (var i
= 0; i
< points
.length
; ++i
) {
2481 var point
= points
[i
];
2482 var xval
= point
.xval
;
2483 if (cumulativeYval
[xval
] === undefined
) {
2484 cumulativeYval
[xval
] = 0;
2487 var actualYval
= point
.yval
;
2488 if (isNaN(actualYval
) || actualYval
=== null) {
2489 if(fillMethod
== 'none') {
2492 // Interpolate/extend
for stacking purposes
if possible
.
2494 if (prevPoint
&& nextPoint
&& fillMethod
!= 'none') {
2495 // Use linear interpolation between prevPoint and nextPoint.
2496 actualYval
= prevPoint
.yval
+ (nextPoint
.yval
- prevPoint
.yval
) *
2497 ((xval
- prevPoint
.xval
) / (nextPoint
.xval
- prevPoint
.xval
));
2498 } else if (prevPoint
&& fillMethod
== 'all') {
2499 actualYval
= prevPoint
.yval
;
2500 } else if (nextPoint
&& fillMethod
== 'all') {
2501 actualYval
= nextPoint
.yval
;
2510 var stackedYval
= cumulativeYval
[xval
];
2511 if (lastXval
!= xval
) {
2512 // If an x-value is repeated, we ignore the duplicates.
2513 stackedYval
+= actualYval
;
2514 cumulativeYval
[xval
] = stackedYval
;
2518 point
.yval_stacked
= stackedYval
;
2520 if (stackedYval
> seriesExtremes
[1]) {
2521 seriesExtremes
[1] = stackedYval
;
2523 if (stackedYval
< seriesExtremes
[0]) {
2524 seriesExtremes
[0] = stackedYval
;
2531 * Loop over all fields and create datasets, calculating extreme y-values for
2532 * each series and extreme x-indices as we go.
2534 * dateWindow is passed in as an explicit parameter so that we can compute
2535 * extreme values "speculatively", i.e. without actually setting state on the
2538 * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2539 * rolledSeries[seriesIndex][row] = raw point, where
2540 * seriesIndex is the column number starting with 1, and
2541 * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2542 * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2544 * points: Array.<Array.<Dygraph.PointType>>,
2545 * seriesExtremes: Array.<Array.<number>>,
2546 * boundaryIds: Array.<number>}}
2549 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2550 var boundaryIds
= [];
2552 var cumulativeYval
= []; // For stacked series.
2553 var extremes
= {}; // series name -> [low, high]
2554 var seriesIdx
, sampleIdx
;
2555 var firstIdx
, lastIdx
;
2558 // Loop over the fields (series). Go from the last to the first,
2559 // because if they're stacked that's how we accumulate the values.
2560 var num_series
= rolledSeries
.length
- 1;
2562 for (seriesIdx
= num_series
; seriesIdx
>= 1; seriesIdx
--) {
2563 if (!this.visibility()[seriesIdx
- 1]) continue;
2565 // Prune down to the desired range, if necessary (for zooming)
2566 // Because there can be lines going to points outside of the visible area,
2567 // we actually prune to visible points, plus one on either side.
2569 series
= rolledSeries
[seriesIdx
];
2570 var low
= dateWindow
[0];
2571 var high
= dateWindow
[1];
2573 // TODO(danvk): do binary search instead of linear search.
2574 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2577 for (sampleIdx
= 0; sampleIdx
< series
.length
; sampleIdx
++) {
2578 if (series
[sampleIdx
][0] >= low
&& firstIdx
=== null) {
2579 firstIdx
= sampleIdx
;
2581 if (series
[sampleIdx
][0] <= high
) {
2582 lastIdx
= sampleIdx
;
2586 if (firstIdx
=== null) firstIdx
= 0;
2587 var correctedFirstIdx
= firstIdx
;
2588 var isInvalidValue
= true;
2589 while (isInvalidValue
&& correctedFirstIdx
> 0) {
2590 correctedFirstIdx
--;
2591 // check if the y value is null.
2592 isInvalidValue
= series
[correctedFirstIdx
][1] === null;
2595 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2596 var correctedLastIdx
= lastIdx
;
2597 isInvalidValue
= true;
2598 while (isInvalidValue
&& correctedLastIdx
< series
.length
- 1) {
2600 isInvalidValue
= series
[correctedLastIdx
][1] === null;
2603 if (correctedFirstIdx
!==firstIdx
) {
2604 firstIdx
= correctedFirstIdx
;
2606 if (correctedLastIdx
!== lastIdx
) {
2607 lastIdx
= correctedLastIdx
;
2610 boundaryIds
[seriesIdx
-1] = [firstIdx
, lastIdx
];
2612 // .slice's end is exclusive, we want to include lastIdx.
2613 series
= series
.slice(firstIdx
, lastIdx
+ 1);
2615 series
= rolledSeries
[seriesIdx
];
2616 boundaryIds
[seriesIdx
-1] = [0, series
.length
-1];
2619 var seriesName
= this.attr_("labels")[seriesIdx
];
2620 var seriesExtremes
= this.dataHandler_
.getExtremeYValues(series
,
2621 dateWindow
, this.getBooleanOption("stepPlot",seriesName
));
2623 var seriesPoints
= this.dataHandler_
.seriesToPoints(series
,
2624 seriesName
, boundaryIds
[seriesIdx
-1][0]);
2626 if (this.getBooleanOption("stackedGraph")) {
2627 axisIdx
= this.attributes_
.axisForSeries(seriesName
);
2628 if (cumulativeYval
[axisIdx
] === undefined
) {
2629 cumulativeYval
[axisIdx
] = [];
2631 Dygraph
.stackPoints_(seriesPoints
, cumulativeYval
[axisIdx
], seriesExtremes
,
2632 this.getBooleanOption("stackedGraphNaNFill"));
2635 extremes
[seriesName
] = seriesExtremes
;
2636 points
[seriesIdx
] = seriesPoints
;
2639 return { points
: points
, extremes
: extremes
, boundaryIds
: boundaryIds
};
2643 * Update the graph with new data. This method is called when the viewing area
2644 * has changed. If the underlying data or options have changed, predraw_ will
2645 * be called before drawGraph_ is called.
2649 Dygraph
.prototype.drawGraph_
= function() {
2650 var start
= new Date();
2652 // This is used to set the second parameter to drawCallback, below.
2653 var is_initial_draw
= this.is_initial_draw_
;
2654 this.is_initial_draw_
= false;
2656 this.layout_
.removeAllDatasets();
2658 this.attrs_
.pointSize
= 0.5 * this.getNumericOption('highlightCircleSize');
2660 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2661 var points
= packed
.points
;
2662 var extremes
= packed
.extremes
;
2663 this.boundaryIds_
= packed
.boundaryIds
;
2665 this.setIndexByName_
= {};
2666 var labels
= this.attr_("labels");
2667 if (labels
.length
> 0) {
2668 this.setIndexByName_
[labels
[0]] = 0;
2671 for (var i
= 1; i
< points
.length
; i
++) {
2672 this.setIndexByName_
[labels
[i
]] = i
;
2673 if (!this.visibility()[i
- 1]) continue;
2674 this.layout_
.addDataset(labels
[i
], points
[i
]);
2675 this.datasetIndex_
[i
] = dataIdx
++;
2678 this.computeYAxisRanges_(extremes
);
2679 this.layout_
.setYAxes(this.axes_
);
2683 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2684 var tmp_zoomed_x
= this.zoomed_x_
;
2685 // Tell PlotKit to use this new data and render itself
2686 this.zoomed_x_
= tmp_zoomed_x
;
2687 this.layout_
.evaluate();
2688 this.renderGraph_(is_initial_draw
);
2690 if (this.getStringOption("timingName")) {
2691 var end
= new Date();
2692 console
.log(this.getStringOption("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2697 * This does the work of drawing the chart. It assumes that the layout and axis
2698 * scales have already been set (e.g. by predraw_).
2702 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2703 this.cascadeEvents_('clearChart');
2704 this.plotter_
.clear();
2706 if (this.getFunctionOption('underlayCallback')) {
2707 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2708 // users who expect a deprecated form of this callback.
2709 this.getFunctionOption('underlayCallback').call(this,
2710 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2714 canvas
: this.hidden_
,
2715 drawingContext
: this.hidden_ctx_
2717 this.cascadeEvents_('willDrawChart', e
);
2718 this.plotter_
.render();
2719 this.cascadeEvents_('didDrawChart', e
);
2720 this.lastRow_
= -1; // because plugins/legend.js clears the legend
2722 // TODO(danvk): is this a performance bottleneck when panning?
2723 // The interaction canvas should already be empty in that situation.
2724 this.canvas_
.getContext('2d').clearRect(0, 0, this.width_
, this.height_
);
2726 if (this.getFunctionOption("drawCallback") !== null) {
2727 this.getFunctionOption("drawCallback")(this, is_initial_draw
);
2729 if (is_initial_draw
) {
2730 this.readyFired_
= true;
2731 while (this.readyFns_
.length
> 0) {
2732 var fn
= this.readyFns_
.pop();
2740 * Determine properties of the y-axes which are independent of the data
2741 * currently being displayed. This includes things like the number of axes and
2742 * the style of the axes. It does not include the range of each axis and its
2744 * This fills in this.axes_.
2745 * axes_ = [ { options } ]
2746 * indices are into the axes_ array.
2748 Dygraph
.prototype.computeYAxes_
= function() {
2749 // Preserve valueWindow settings if they exist, and if the user hasn't
2750 // specified a new valueRange.
2751 var valueWindows
, axis
, index
, opts
, v
;
2752 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2754 for (index
= 0; index
< this.axes_
.length
; index
++) {
2755 valueWindows
.push(this.axes_
[index
].valueWindow
);
2759 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2760 // data computation as well as options storage.
2761 // Go through once and add all the axes.
2764 for (axis
= 0; axis
< this.attributes_
.numAxes(); axis
++) {
2765 // Add a new axis, making a copy of its per-axis options.
2766 opts
= { g
: this };
2767 Dygraph
.update(opts
, this.attributes_
.axisOptions(axis
));
2768 this.axes_
[axis
] = opts
;
2772 // Copy global valueRange option over to the first axis.
2773 // NOTE(konigsberg): Are these two statements necessary?
2774 // I tried removing it. The automated tests pass, and manually
2775 // messing with tests/zoom
.html showed no trouble
.
2776 v
= this.attr_('valueRange');
2777 if (v
) this.axes_
[0].valueRange
= v
;
2779 if (valueWindows
!== undefined
) {
2780 // Restore valueWindow settings.
2782 // When going from two axes back to one, we only restore
2784 var idxCount
= Math
.min(valueWindows
.length
, this.axes_
.length
);
2786 for (index
= 0; index
< idxCount
; index
++) {
2787 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2791 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2793 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2794 v
= opts("valueRange");
2795 if (v
) this.axes_
[axis
].valueRange
= v
;
2796 } else { // To keep old behavior
2797 var axes
= this.user_attrs_
.axes
;
2798 if (axes
&& axes
.y2
) {
2799 v
= axes
.y2
.valueRange
;
2800 if (v
) this.axes_
[axis
].valueRange
= v
;
2807 * Returns the number of y-axes on the chart.
2808 * @return {number} the number of axes.
2810 Dygraph
.prototype.numAxes
= function() {
2811 return this.attributes_
.numAxes();
2816 * Returns axis properties for the given series.
2817 * @param {string} setName The name of the series for which to get axis
2818 * properties, e.g. 'Y1'.
2819 * @return {Object} The axis properties.
2821 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2822 // TODO(danvk): handle errors.
2823 return this.axes_
[this.attributes_
.axisForSeries(series
)];
2828 * Determine the value range and tick marks for each axis.
2829 * @param {Object} extremes A mapping from seriesName -> [low, high]
2830 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2832 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2833 var isNullUndefinedOrNaN
= function(num
) {
2834 return isNaN(parseFloat(num
));
2836 var numAxes
= this.attributes_
.numAxes();
2837 var ypadCompat
, span
, series
, ypad
;
2841 // Compute extreme values, a span and tick marks for each axis.
2842 for (var i
= 0; i
< numAxes
; i
++) {
2843 var axis
= this.axes_
[i
];
2844 var logscale
= this.attributes_
.getForAxis("logscale", i
);
2845 var includeZero
= this.attributes_
.getForAxis("includeZero", i
);
2846 var independentTicks
= this.attributes_
.getForAxis("independentTicks", i
);
2847 series
= this.attributes_
.seriesForAxis(i
);
2849 // Add some padding. This supports two Y padding operation modes:
2851 // - backwards compatible (yRangePad not set):
2852 // 10% padding for automatic Y ranges, but not for user-supplied
2853 // ranges, and move a close-to-zero edge to zero except if
2854 // avoidMinZero is set, since drawing at the edge results in
2855 // invisible lines. Unfortunately lines drawn at the edge of a
2856 // user-supplied range will still be invisible. If logscale is
2857 // set, add a variable amount of padding at the top but
2858 // none at the bottom.
2860 // - new-style (yRangePad set by the user):
2861 // always add the specified Y padding.
2864 ypad
= 0.1; // add 10%
2865 if (this.getNumericOption('yRangePad') !== null) {
2867 // Convert pixel padding to ratio
2868 ypad
= this.getNumericOption('yRangePad') / this.plotter_
.area
.h
;
2871 if (series
.length
=== 0) {
2872 // If no series are defined or visible then use a reasonable default
2873 axis
.extremeRange
= [0, 1];
2875 // Calculate the extremes of extremes.
2876 var minY
= Infinity
; // extremes[series[0]][0];
2877 var maxY
= -Infinity
; // extremes[series[0]][1];
2878 var extremeMinY
, extremeMaxY
;
2880 for (var j
= 0; j
< series
.length
; j
++) {
2881 // this skips invisible series
2882 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2884 // Only use valid extremes to stop null data series' from corrupting the scale.
2885 extremeMinY
= extremes
[series
[j
]][0];
2886 if (extremeMinY
!== null) {
2887 minY
= Math
.min(extremeMinY
, minY
);
2889 extremeMaxY
= extremes
[series
[j
]][1];
2890 if (extremeMaxY
!== null) {
2891 maxY
= Math
.max(extremeMaxY
, maxY
);
2895 // Include zero if requested by the user.
2896 if (includeZero
&& !logscale
) {
2897 if (minY
> 0) minY
= 0;
2898 if (maxY
< 0) maxY
= 0;
2901 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2902 if (minY
== Infinity
) minY
= 0;
2903 if (maxY
== -Infinity
) maxY
= 1;
2906 // special case: if we have no sense of scale, center on the sole value.
2909 span
= Math
.abs(maxY
);
2911 // ... and if the sole value is zero, use range 0-1.
2917 var maxAxisY
, minAxisY
;
2920 maxAxisY
= maxY
+ ypad
* span
;
2923 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2924 maxAxisY
= maxY
* logpad
;
2925 minAxisY
= minY
/ logpad
;
2928 maxAxisY
= maxY
+ ypad
* span
;
2929 minAxisY
= minY
- ypad
* span
;
2931 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2932 // close to zero, but not if avoidMinZero is set.
2933 if (ypadCompat
&& !this.getBooleanOption("avoidMinZero")) {
2934 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2935 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2938 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2940 if (axis
.valueWindow
) {
2941 // This is only set if the user has zoomed on the y-axis. It is never set
2942 // by a user. It takes precedence over axis.valueRange because, if you set
2943 // valueRange, you'd still expect to be able to pan.
2944 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2945 } else if (axis
.valueRange
) {
2946 // This is a user-set value range for this axis.
2947 var y0
= isNullUndefinedOrNaN(axis
.valueRange
[0]) ? axis
.extremeRange
[0] : axis
.valueRange
[0];
2948 var y1
= isNullUndefinedOrNaN(axis
.valueRange
[1]) ? axis
.extremeRange
[1] : axis
.valueRange
[1];
2950 if (axis
.logscale
) {
2951 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2960 axis
.computedValueRange
= [y0
, y1
];
2962 axis
.computedValueRange
= axis
.extremeRange
;
2966 if (independentTicks
) {
2967 axis
.independentTicks
= independentTicks
;
2968 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2969 var ticker
= opts('ticker');
2970 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2971 axis
.computedValueRange
[1],
2972 this.height_
, // TODO(danvk): should be area.height
2975 // Define the first independent axis as primary axis.
2976 if (!p_axis
) p_axis
= axis
;
2979 if (p_axis
=== undefined
) {
2980 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
2982 // Add ticks. By default, all axes inherit the tick positions of the
2983 // primary axis. However, if an axis is specifically marked as having
2984 // independent ticks, then that is permissible as well.
2985 for (var i
= 0; i
< numAxes
; i
++) {
2986 var axis
= this.axes_
[i
];
2988 if (!axis
.independentTicks
) {
2989 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2990 var ticker
= opts('ticker');
2991 var p_ticks
= p_axis
.ticks
;
2992 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2993 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2994 var tick_values
= [];
2995 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2996 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2997 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2998 tick_values
.push(y_val
);
3001 axis
.ticks
= ticker(axis
.computedValueRange
[0],
3002 axis
.computedValueRange
[1],
3003 this.height_
, // TODO(danvk): should be area.height
3012 * Detects the type of the str (date or numeric) and sets the various
3013 * formatting attributes in this.attrs_ based on this type.
3014 * @param {string} str An x value.
3017 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3019 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
3020 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
3021 str
.indexOf('/') >= 0 ||
3022 isNaN(parseFloat(str
))) {
3024 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3025 // TODO(danvk): remove support for this format.
3029 this.setXAxisOptions_(isDate
);
3032 Dygraph
.prototype.setXAxisOptions_
= function(isDate
) {
3034 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3035 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateValueFormatter
;
3036 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3037 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisLabelFormatter
;
3039 /** @private (shut up, jsdoc!) */
3040 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3041 // TODO(danvk): use Dygraph.numberValueFormatter here?
3042 /** @private (shut up, jsdoc!) */
3043 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3044 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3045 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3051 * Parses a string in a special csv format. We expect a csv file where each
3052 * line is a date point, and the first field in each line is the date string.
3053 * We also expect that all remaining fields represent series.
3054 * if the errorBars attribute is set, then interpret the fields as:
3055 * date, series1, stddev1, series2, stddev2, ...
3056 * @param {[Object]} data See above.
3058 * @return [Object] An array with one entry for each row. These entries
3059 * are an array of cells in that row. The first entry is the parsed x-value for
3060 * the row. The second, third, etc. are the y-values. These can take on one of
3061 * three forms, depending on the CSV and constructor parameters:
3063 * 2. [ value, stddev ]
3064 * 3. [ low value, center value, high value ]
3066 Dygraph
.prototype.parseCSV_
= function(data
) {
3068 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3069 var lines
= data
.split(line_delimiter
|| "\n");
3072 // Use the default delimiter or fall back to a tab if that makes sense.
3073 var delim
= this.getStringOption('delimiter');
3074 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3079 if (!('labels' in this.user_attrs_
)) {
3080 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
3082 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
3083 this.attributes_
.reparseSeries();
3088 var defaultParserSet
= false; // attempt to auto-detect x value type
3089 var expectedCols
= this.attr_("labels").length
;
3090 var outOfOrder
= false;
3091 for (var i
= start
; i
< lines
.length
; i
++) {
3092 var line
= lines
[i
];
3094 if (line
.length
=== 0) continue; // skip blank lines
3095 if (line
[0] == '#') continue; // skip comment lines
3096 var inFields
= line
.split(delim
);
3097 if (inFields
.length
< 2) continue;
3100 if (!defaultParserSet
) {
3101 this.detectTypeFromString_(inFields
[0]);
3102 xParser
= this.getFunctionOption("xValueParser");
3103 defaultParserSet
= true;
3105 fields
[0] = xParser(inFields
[0], this);
3107 // If fractions are expected, parse the numbers as "A/B
"
3108 if (this.fractions_) {
3109 for (j = 1; j < inFields.length; j++) {
3110 // TODO(danvk): figure out an appropriate way to flag parse errors.
3111 vals = inFields[j].split("/");
3112 if (vals.length != 2) {
3113 console.error('Expected fractional "num
/den
" values in CSV data ' +
3114 "but found a value
'" + inFields[j] + "' on line
" +
3115 (1 + i) + " ('" + line + "') which is not of
this form
.");
3118 fields[j] = [Dygraph.parseFloat_(vals[0], i, line),
3119 Dygraph.parseFloat_(vals[1], i, line)];
3122 } else if (this.getBooleanOption("errorBars
")) {
3123 // If there are error bars, values are (value, stddev) pairs
3124 if (inFields.length % 2 != 1) {
3125 console.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3126 'but line ' + (1 + i) + ' has an odd number of values (' +
3127 (inFields.length - 1) + "): '" + line + "'");
3129 for (j = 1; j < inFields.length; j += 2) {
3130 fields[(j + 1) / 2] = [Dygraph.parseFloat_(inFields[j], i, line),
3131 Dygraph.parseFloat_(inFields[j + 1], i, line)];
3133 } else if (this.getBooleanOption("customBars
")) {
3134 // Bars are a low;center;high tuple
3135 for (j = 1; j < inFields.length; j++) {
3136 var val = inFields[j];
3137 if (/^ *$/.test(val)) {
3138 fields[j] = [null, null, null];
3140 vals = val.split(";");
3141 if (vals.length == 3) {
3142 fields[j] = [ Dygraph.parseFloat_(vals[0], i, line),
3143 Dygraph.parseFloat_(vals[1], i, line),
3144 Dygraph.parseFloat_(vals[2], i, line) ];
3146 console.warn('When using customBars, values must be either blank ' +
3147 'or "low
;center
;high
" tuples (got "' + val +
3148 '" on line ' + (1+i));
3153 // Values are just numbers
3154 for (j = 1; j < inFields.length; j++) {
3155 fields[j] = Dygraph.parseFloat_(inFields[j], i, line);
3158 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3162 if (fields.length != expectedCols) {
3163 console.error("Number of columns
in line
" + i + " (" + fields.length +
3164 ") does not agree
with number of
labels (" + expectedCols +
3168 // If the user specified the 'labels' option and none of the cells of the
3169 // first row parsed correctly, then they probably double-specified the
3170 // labels. We go with the values set in the option, discard this row and
3171 // log a warning to the JS console.
3172 if (i === 0 && this.attr_('labels')) {
3173 var all_null = true;
3174 for (j = 0; all_null && j < fields.length; j++) {
3175 if (fields[j]) all_null = false;
3178 console.warn("The dygraphs
'labels' option is set
, but the first row
" +
3179 "of CSV
data ('" + line + "') appears to also contain
" +
3180 "labels
. Will drop the CSV labels and
use the option
" +
3189 console.warn("CSV is out of order
; order it correctly to speed loading
.");
3190 ret.sort(function(a,b) { return a[0] - b[0]; });
3197 * The user has provided their data as a pre-packaged JS array. If the x values
3198 * are numeric, this is the same as dygraphs' internal format. If the x values
3199 * are dates, we need to convert them from Date objects to ms since epoch.
3200 * @param {!Array} data
3201 * @return {Object} data with numeric x values.
3204 Dygraph.prototype.parseArray_ = function(data) {
3205 // Peek at the first x value to see if it's numeric.
3206 if (data.length === 0) {
3207 console.error("Can
't plot empty data set");
3210 if (data[0].length === 0) {
3211 console.error("Data set cannot contain an empty row");
3216 if (this.attr_("labels") === null) {
3217 console.warn("Using default labels. Set labels explicitly via 'labels
' " +
3218 "in the options parameter");
3219 this.attrs_.labels = [ "X" ];
3220 for (i = 1; i < data[0].length; i++) {
3221 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
3223 this.attributes_.reparseSeries();
3225 var num_labels = this.attr_("labels");
3226 if (num_labels.length != data[0].length) {
3227 console.error("Mismatch between number of labels (" + num_labels + ")" +
3228 " and number of columns in array (" + data[0].length + ")");
3233 if (Dygraph.isDateLike(data[0][0])) {
3234 // Some intelligent defaults for a date x-axis.
3235 this.attrs_.axes.x.valueFormatter = Dygraph.dateValueFormatter;
3236 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3237 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisLabelFormatter;
3239 // Assume they're all dates
.
3240 var parsedData
= Dygraph
.clone(data
);
3241 for (i
= 0; i
< data
.length
; i
++) {
3242 if (parsedData
[i
].length
=== 0) {
3243 console
.error("Row " + (1 + i
) + " of data is empty");
3246 if (parsedData
[i
][0] === null ||
3247 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3248 isNaN(parsedData
[i
][0].getTime())) {
3249 console
.error("x value in row " + (1 + i
) + " is not a Date");
3252 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3256 // Some intelligent defaults for a numeric x-axis.
3257 /** @private (shut up, jsdoc!) */
3258 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3259 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3260 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3266 * Parses a DataTable object from gviz.
3267 * The data is expected to have a first column that is either a date or a
3268 * number. All subsequent columns must be numbers. If there is a clear mismatch
3269 * between this.xValueParser_ and the type of the first column, it will be
3270 * fixed. Fills out rawData_.
3271 * @param {!google.visualization.DataTable} data See above.
3274 Dygraph
.prototype.parseDataTable_
= function(data
) {
3275 var shortTextForAnnotationNum
= function(num
) {
3276 // converts [0-9]+ [A-Z][a-z]*
3277 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3278 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3279 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3280 num
= Math
.floor(num
/ 26);
3282 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3283 num
= Math
.floor((num
- 1) / 26);
3288 var cols
= data
.getNumberOfColumns();
3289 var rows
= data
.getNumberOfRows();
3291 var indepType
= data
.getColumnType(0);
3292 if (indepType
== 'date' || indepType
== 'datetime') {
3293 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3294 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateValueFormatter
;
3295 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3296 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisLabelFormatter
;
3297 } else if (indepType
== 'number') {
3298 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3299 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3300 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3301 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3303 console
.error("only 'date', 'datetime' and 'number' types are supported " +
3304 "for column 1 of DataTable input (Got '" + indepType
+ "')");
3308 // Array of the column indices which contain data (and not annotations).
3310 var annotationCols
= {}; // data index -> [annotation cols]
3311 var hasAnnotations
= false;
3313 for (i
= 1; i
< cols
; i
++) {
3314 var type
= data
.getColumnType(i
);
3315 if (type
== 'number') {
3317 } else if (type
== 'string' && this.getBooleanOption('displayAnnotations')) {
3318 // This is OK -- it's an annotation column.
3319 var dataIdx
= colIdx
[colIdx
.length
- 1];
3320 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3321 annotationCols
[dataIdx
] = [i
];
3323 annotationCols
[dataIdx
].push(i
);
3325 hasAnnotations
= true;
3327 console
.error("Only 'number' is supported as a dependent type with Gviz." +
3328 " 'string' is only supported if displayAnnotations is true");
3332 // Read column labels
3333 // TODO(danvk): add support back for errorBars
3334 var labels
= [data
.getColumnLabel(0)];
3335 for (i
= 0; i
< colIdx
.length
; i
++) {
3336 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3337 if (this.getBooleanOption("errorBars")) i
+= 1;
3339 this.attrs_
.labels
= labels
;
3340 cols
= labels
.length
;
3343 var outOfOrder
= false;
3344 var annotations
= [];
3345 for (i
= 0; i
< rows
; i
++) {
3347 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3348 data
.getValue(i
, 0) === null) {
3349 console
.warn("Ignoring row " + i
+
3350 " of DataTable because of undefined or null first column.");
3354 if (indepType
== 'date' || indepType
== 'datetime') {
3355 row
.push(data
.getValue(i
, 0).getTime());
3357 row
.push(data
.getValue(i
, 0));
3359 if (!this.getBooleanOption("errorBars")) {
3360 for (j
= 0; j
< colIdx
.length
; j
++) {
3361 var col
= colIdx
[j
];
3362 row
.push(data
.getValue(i
, col
));
3363 if (hasAnnotations
&&
3364 annotationCols
.hasOwnProperty(col
) &&
3365 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3367 ann
.series
= data
.getColumnLabel(col
);
3369 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3371 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3372 if (k
) ann
.text
+= "\n";
3373 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3375 annotations
.push(ann
);
3379 // Strip out infinities, which give dygraphs problems later on.
3380 for (j
= 0; j
< row
.length
; j
++) {
3381 if (!isFinite(row
[j
])) row
[j
] = null;
3384 for (j
= 0; j
< cols
- 1; j
++) {
3385 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3388 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3395 console
.warn("DataTable is out of order; order it correctly to speed loading.");
3396 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3398 this.rawData_
= ret
;
3400 if (annotations
.length
> 0) {
3401 this.setAnnotations(annotations
, true);
3403 this.attributes_
.reparseSeries();
3407 * Signals to plugins that the chart data has updated.
3408 * This happens after the data has updated but before the chart has redrawn.
3410 Dygraph
.prototype.cascadeDataDidUpdateEvent_
= function() {
3411 // TODO(danvk): there are some issues checking xAxisRange() and using
3412 // toDomCoords from handlers of this event. The visible range should be set
3413 // when the chart is drawn, not derived from the data.
3414 this.cascadeEvents_('dataDidUpdate', {});
3418 * Get the CSV data. If it's in a function, call that function. If it's in a
3419 * file, do an XMLHttpRequest to get it.
3422 Dygraph
.prototype.start_
= function() {
3423 var data
= this.file_
;
3425 // Functions can return references of all other types.
3426 if (typeof data
== 'function') {
3430 if (Dygraph
.isArrayLike(data
)) {
3431 this.rawData_
= this.parseArray_(data
);
3432 this.cascadeDataDidUpdateEvent_();
3434 } else if (typeof data
== 'object' &&
3435 typeof data
.getColumnRange
== 'function') {
3436 // must be a DataTable from gviz.
3437 this.parseDataTable_(data
);
3438 this.cascadeDataDidUpdateEvent_();
3440 } else if (typeof data
== 'string') {
3441 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3442 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3443 if (line_delimiter
) {
3444 this.loadedEvent_(data
);
3448 if (window
.XMLHttpRequest
) {
3449 // Firefox, Opera, IE7, and other browsers will use the native object
3450 req
= new XMLHttpRequest();
3452 // IE 5 and 6 will use the ActiveX control
3453 req
= new ActiveXObject("Microsoft.XMLHTTP");
3457 req
.onreadystatechange
= function () {
3458 if (req
.readyState
== 4) {
3459 if (req
.status
=== 200 || // Normal http
3460 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3461 caller
.loadedEvent_(req
.responseText
);
3466 req
.open("GET", data
, true);
3470 console
.error("Unknown data format: " + (typeof data
));
3475 * Changes various properties of the graph. These can include:
3477 * <li>file: changes the source data for the graph</li>
3478 * <li>errorBars: changes whether the data contains stddev</li>
3481 * There's a huge variety of options that can be passed to this method. For a
3482 * full list, see http://dygraphs.com/options.html.
3484 * @param {Object} input_attrs The new properties and values
3485 * @param {boolean} block_redraw Usually the chart is redrawn after every
3486 * call to updateOptions(). If you know better, you can pass true to
3487 * explicitly block the redraw. This can be useful for chaining
3488 * updateOptions() calls, avoiding the occasional infinite loop and
3489 * preventing redraws when it's not necessary (e.g. when updating a
3492 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3493 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3495 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
3496 var file
= input_attrs
.file
;
3497 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
3499 // TODO(danvk): this is a mess. Move these options into attr_.
3500 if ('rollPeriod' in attrs
) {
3501 this.rollPeriod_
= attrs
.rollPeriod
;
3503 if ('dateWindow' in attrs
) {
3504 this.dateWindow_
= attrs
.dateWindow
;
3505 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3506 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3509 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3510 this.zoomed_y_
= (attrs
.valueRange
!== null);
3513 // TODO(danvk): validate per-series options.
3518 // highlightCircleSize
3520 // Check if this set options will require new points.
3521 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3523 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3525 this.attributes_
.reparseSeries();
3528 // This event indicates that the data is about to change, but hasn't yet.
3529 // TODO(danvk): support cancelation of the update via this event.
3530 this.cascadeEvents_('dataWillUpdate', {});
3533 if (!block_redraw
) this.start_();
3535 if (!block_redraw
) {
3536 if (requiresNewPoints
) {
3539 this.renderGraph_(false);
3546 * Returns a copy of the options with deprecated names converted into current
3547 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3548 * interested in that, they should save a copy before calling this.
3551 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3553 for (var k
in attrs
) {
3554 if (!attrs
.hasOwnProperty(k
)) continue;
3555 if (k
== 'file') continue;
3556 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3559 var set
= function(axis
, opt
, value
) {
3560 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3561 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3562 my_attrs
.axes
[axis
][opt
] = value
;
3564 var map
= function(opt
, axis
, new_opt
) {
3565 if (typeof(attrs
[opt
]) != 'undefined') {
3566 console
.warn("Option " + opt
+ " is deprecated. Use the " +
3567 new_opt
+ " option for the " + axis
+ " axis instead. " +
3568 "(e.g. { axes : { " + axis
+ " : { " + new_opt
+ " : ... } } } " +
3569 "(see http://dygraphs.com/per-axis.html for more information.");
3570 set(axis
, new_opt
, attrs
[opt
]);
3571 delete my_attrs
[opt
];
3575 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3576 map('xValueFormatter', 'x', 'valueFormatter');
3577 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3578 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3579 map('xTicker', 'x', 'ticker');
3580 map('yValueFormatter', 'y', 'valueFormatter');
3581 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3582 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3583 map('yTicker', 'y', 'ticker');
3584 map('drawXGrid', 'x', 'drawGrid');
3585 map('drawXAxis', 'x', 'drawAxis');
3586 map('drawYGrid', 'y', 'drawGrid');
3587 map('drawYAxis', 'y', 'drawAxis');
3592 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3593 * containing div (which has presumably changed size since the dygraph was
3594 * instantiated. If the width/height are specified, the div will be resized.
3596 * This is far more efficient than destroying and re-instantiating a
3597 * Dygraph, since it doesn't have to reparse the underlying data.
3599 * @param {number} width Width (in pixels)
3600 * @param {number} height Height (in pixels)
3602 Dygraph
.prototype.resize
= function(width
, height
) {
3603 if (this.resize_lock
) {
3606 this.resize_lock
= true;
3608 if ((width
=== null) != (height
=== null)) {
3609 console
.warn("Dygraph.resize() should be called with zero parameters or " +
3610 "two non-NULL parameters. Pretending it was zero.");
3611 width
= height
= null;
3614 var old_width
= this.width_
;
3615 var old_height
= this.height_
;
3618 this.maindiv_
.style
.width
= width
+ "px";
3619 this.maindiv_
.style
.height
= height
+ "px";
3620 this.width_
= width
;
3621 this.height_
= height
;
3623 this.width_
= this.maindiv_
.clientWidth
;
3624 this.height_
= this.maindiv_
.clientHeight
;
3627 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3628 // Resizing a canvas erases it, even when the size doesn't change, so
3629 // any resize needs to be followed by a redraw.
3630 this.resizeElements_();
3634 this.resize_lock
= false;
3638 * Adjusts the number of points in the rolling average. Updates the graph to
3639 * reflect the new averaging period.
3640 * @param {number} length Number of points over which to average the data.
3642 Dygraph
.prototype.adjustRoll
= function(length
) {
3643 this.rollPeriod_
= length
;
3648 * Returns a boolean array of visibility statuses.
3650 Dygraph
.prototype.visibility
= function() {
3651 // Do lazy-initialization, so that this happens after we know the number of
3653 if (!this.getOption("visibility")) {
3654 this.attrs_
.visibility
= [];
3656 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3657 while (this.getOption("visibility").length
< this.numColumns() - 1) {
3658 this.attrs_
.visibility
.push(true);
3660 return this.getOption("visibility");
3664 * Changes the visiblity of a series.
3666 * @param {number} num the series index
3667 * @param {boolean} value true or false, identifying the visibility.
3669 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3670 var x
= this.visibility();
3671 if (num
< 0 || num
>= x
.length
) {
3672 console
.warn("invalid series number in setVisibility: " + num
);
3680 * How large of an area will the dygraph render itself in?
3681 * This is used for testing.
3682 * @return A {width: w, height: h} object.
3685 Dygraph
.prototype.size
= function() {
3686 return { width
: this.width_
, height
: this.height_
};
3690 * Update the list of annotations and redraw the chart.
3691 * See dygraphs.com/annotations.html for more info on how to use annotations.
3692 * @param ann {Array} An array of annotation objects.
3693 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3695 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3696 // Only add the annotation CSS rule once we know it will be used.
3697 Dygraph
.addAnnotationRule();
3698 this.annotations_
= ann
;
3699 if (!this.layout_
) {
3700 console
.warn("Tried to setAnnotations before dygraph was ready. " +
3701 "Try setting them in a ready() block. See " +
3702 "dygraphs.com/tests/annotation.html");
3706 this.layout_
.setAnnotations(this.annotations_
);
3707 if (!suppressDraw
) {
3713 * Return the list of annotations.
3715 Dygraph
.prototype.annotations
= function() {
3716 return this.annotations_
;
3720 * Get the list of label names for this graph. The first column is the
3721 * x-axis, so the data series names start at index 1.
3723 * Returns null when labels have not yet been defined.
3725 Dygraph
.prototype.getLabels
= function() {
3726 var labels
= this.attr_("labels");
3727 return labels
? labels
.slice() : null;
3731 * Get the index of a series (column) given its name. The first column is the
3732 * x-axis, so the data series start with index 1.
3734 Dygraph
.prototype.indexFromSetName
= function(name
) {
3735 return this.setIndexByName_
[name
];
3739 * Trigger a callback when the dygraph has drawn itself and is ready to be
3740 * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3741 * data (i.e. a URL is passed as the data source) and the chart is drawn
3742 * asynchronously. If the chart has already drawn, the callback will fire
3745 * This is a good place to call setAnnotation().
3747 * @param {function(!Dygraph)} callback The callback to trigger when the chart
3750 Dygraph
.prototype.ready
= function(callback
) {
3751 if (this.is_initial_draw_
) {
3752 this.readyFns_
.push(callback
);
3754 callback
.call(this, this);
3760 * Adds a default style for the annotation CSS classes to the document. This is
3761 * only executed when annotations are actually used. It is designed to only be
3762 * called once -- all calls after the first will return immediately.
3764 Dygraph
.addAnnotationRule
= function() {
3765 // TODO(danvk): move this function into plugins/annotations.js
?
3766 if (Dygraph
.addedAnnotationCSS
) return;
3768 var rule
= "border: 1px solid black; " +
3769 "background-color: white; " +
3770 "text-align: center;";
3772 var styleSheetElement
= document
.createElement("style");
3773 styleSheetElement
.type
= "text/css";
3774 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3776 // Find the first style sheet that we can access.
3777 // We may not add a rule to a style sheet from another domain for security
3778 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3779 // adds its own style sheets from google.com.
3780 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3781 if (document
.styleSheets
[i
].disabled
) continue;
3782 var mysheet
= document
.styleSheets
[i
];
3784 if (mysheet
.insertRule
) { // Firefox
3785 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3786 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3787 } else if (mysheet
.addRule
) { // IE
3788 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3790 Dygraph
.addedAnnotationCSS
= true;
3793 // Was likely a security exception.
3797 console
.warn("Unable to add default annotation CSS rule; display may be off.");