3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
8 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
9 * string. Dygraph can handle multiple series with or without error bars. The
10 * date/value ranges will be automatically set. Dygraph uses the
11 * <canvas> tag, so it only works in FF1.5+.
12 * @author danvdk@gmail.com (Dan Vanderkam)
15 <div id="graphdiv" style="width:800px; height:500px;"></div>
16 <script type="text/javascript">
17 new Dygraph(document.getElementById("graphdiv"),
18 "datafile.csv", // CSV file with headers
22 The CSV file is of the form
24 Date,SeriesA,SeriesB,SeriesC
28 If the 'errorBars' option is set in the constructor, the input should be of
30 Date,SeriesA,SeriesB,...
31 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
32 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
34 If the 'fractions' option is set, the input should be of the form:
36 Date,SeriesA,SeriesB,...
37 YYYYMMDD,A1/B1,A2/B2,...
38 YYYYMMDD,A1/B1,A2/B2,...
40 And error bars will be calculated automatically using a binomial distribution.
42 For further documentation and examples, see http://dygraphs.com/
46 // For "production" code, this gets set to false by uglifyjs.
47 if (typeof(DEBUG
) === 'undefined') DEBUG
=true;
49 var Dygraph
= (function() {
50 /*global DygraphLayout:false, DygraphCanvasRenderer:false, DygraphOptions:false, G_vmlCanvasManager:false,ActiveXObject:false */
54 * Creates an interactive, zoomable chart.
57 * @param {div | String} div A div or the id of a div into which to construct
59 * @param {String | Function} file A file containing CSV data or a function
60 * that returns this data. The most basic expected format for each line is
61 * "YYYY/MM/DD,val1,val2,...". For more information, see
62 * http://dygraphs.com/data.html.
63 * @param {Object} attrs Various other attributes, e.g. errorBars determines
64 * whether the input data contains error ranges. For a complete list of
65 * options, see http://dygraphs.com/options.html.
67 var Dygraph
= function(div
, data
, opts
, opt_fourth_param
) {
68 // These have to go above the "Hack for IE" in __init__ since .ready() can be
69 // called as soon as the constructor returns. Once support for OldIE is
70 // dropped, this can go down with the rest of the initializers.
71 this.is_initial_draw_
= true;
74 if (opt_fourth_param
!== undefined
) {
75 // Old versions of dygraphs took in the series labels as a constructor
76 // parameter. This doesn't make sense anymore, but it's easy to continue
77 // to support this usage.
78 console
.warn("Using deprecated four-argument dygraph constructor");
79 this.__old_init__(div
, data
, opts
, opt_fourth_param
);
81 this.__init__(div
, data
, opts
);
85 Dygraph
.NAME
= "Dygraph";
86 Dygraph
.VERSION
= "1.1.0";
87 Dygraph
.__repr__
= function() {
88 return "[" + Dygraph
.NAME
+ " " + Dygraph
.VERSION
+ "]";
92 * Returns information about the Dygraph class.
94 Dygraph
.toString
= function() {
95 return Dygraph
.__repr__();
98 // Various default values
99 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
100 Dygraph
.DEFAULT_WIDTH
= 480;
101 Dygraph
.DEFAULT_HEIGHT
= 320;
103 // For max 60 Hz. animation:
104 Dygraph
.ANIMATION_STEPS
= 12;
105 Dygraph
.ANIMATION_DURATION
= 200;
107 // Label constants for the labelsKMB and labelsKMG2 options.
108 // (i.e. '100000' -> '100K')
109 Dygraph
.KMB_LABELS
= [ 'K', 'M', 'B', 'T', 'Q' ];
110 Dygraph
.KMG2_BIG_LABELS
= [ 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y' ];
111 Dygraph
.KMG2_SMALL_LABELS
= [ 'm', 'u', 'n', 'p', 'f', 'a', 'z', 'y' ];
113 // These are defined before DEFAULT_ATTRS so that it can refer to them.
116 * Return a string version of a number. This respects the digitsAfterDecimal
117 * and maxNumberWidth options.
118 * @param {number} x The number to be formatted
119 * @param {Dygraph} opts An options view
121 Dygraph
.numberValueFormatter
= function(x
, opts
) {
122 var sigFigs
= opts('sigFigs');
124 if (sigFigs
!== null) {
125 // User has opted for a fixed number of significant figures.
126 return Dygraph
.floatFormat(x
, sigFigs
);
129 var digits
= opts('digitsAfterDecimal');
130 var maxNumberWidth
= opts('maxNumberWidth');
132 var kmb
= opts('labelsKMB');
133 var kmg2
= opts('labelsKMG2');
137 // switch to scientific notation if we underflow or overflow fixed display.
139 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
140 Math
.abs(x
) < Math
.pow(10, -digits
))) {
141 label
= x
.toExponential(digits
);
143 label
= '' + Dygraph
.round_(x
, digits
);
152 k_labels
= Dygraph
.KMB_LABELS
;
155 if (kmb
) console
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
157 k_labels
= Dygraph
.KMG2_BIG_LABELS
;
158 m_labels
= Dygraph
.KMG2_SMALL_LABELS
;
161 var absx
= Math
.abs(x
);
162 var n
= Dygraph
.pow(k
, k_labels
.length
);
163 for (var j
= k_labels
.length
- 1; j
>= 0; j
--, n
/= k
) {
165 label
= Dygraph
.round_(x
/ n
, digits
) + k_labels
[j
];
170 // TODO(danvk): clean up this logic. Why so different than kmb?
171 var x_parts
= String(x
.toExponential()).split('e-');
172 if (x_parts
.length
=== 2 && x_parts
[1] >= 3 && x_parts
[1] <= 24) {
173 if (x_parts
[1] % 3 > 0) {
174 label
= Dygraph
.round_(x_parts
[0] /
175 Dygraph
.pow(10, (x_parts
[1] % 3)),
178 label
= Number(x_parts
[0]).toFixed(2);
180 label
+= m_labels
[Math
.floor(x_parts
[1] / 3) - 1];
189 * variant for use as an axisLabelFormatter.
192 Dygraph
.numberAxisLabelFormatter
= function(x
, granularity
, opts
) {
193 return Dygraph
.numberValueFormatter
.call(this, x
, opts
);
197 * @type {!Array.<string>}
201 Dygraph
.SHORT_MONTH_NAMES_
= ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
205 * Convert a JS date to a string appropriate to display on an axis that
206 * is displaying values at the stated granularity. This respects the
208 * @param {Date} date The date to format
209 * @param {number} granularity One of the Dygraph granularity constants
210 * @param {Dygraph} opts An options view
211 * @return {string} The date formatted as local time
214 Dygraph
.dateAxisLabelFormatter
= function(date
, granularity
, opts
) {
215 var utc
= opts('labelsUTC');
216 var accessors
= utc
? Dygraph
.DateAccessorsUTC
: Dygraph
.DateAccessorsLocal
;
218 var year
= accessors
.getFullYear(date
),
219 month
= accessors
.getMonth(date
),
220 day
= accessors
.getDate(date
),
221 hours
= accessors
.getHours(date
),
222 mins
= accessors
.getMinutes(date
),
223 secs
= accessors
.getSeconds(date
),
224 millis
= accessors
.getSeconds(date
);
226 if (granularity
>= Dygraph
.DECADAL
) {
228 } else if (granularity
>= Dygraph
.MONTHLY
) {
229 return Dygraph
.SHORT_MONTH_NAMES_
[month
] + ' ' + year
;
231 var frac
= hours
* 3600 + mins
* 60 + secs
+ 1e-3 * millis
;
232 if (frac
=== 0 || granularity
>= Dygraph
.DAILY
) {
233 // e.g. '21 Jan' (%d%b)
234 return Dygraph
.zeropad(day
) + ' ' + Dygraph
.SHORT_MONTH_NAMES_
[month
];
236 return Dygraph
.hmsString_(hours
, mins
, secs
);
240 // alias in case anyone is referencing the old method.
241 Dygraph
.dateAxisFormatter
= Dygraph
.dateAxisLabelFormatter
;
244 * Return a string version of a JS date for a value label. This respects the
246 * @param {Date} date The date to be formatted
247 * @param {Dygraph} opts An options view
250 Dygraph
.dateValueFormatter
= function(d
, opts
) {
251 return Dygraph
.dateString_(d
, opts('labelsUTC'));
255 * Standard plotters. These may be used by clients.
256 * Available plotters are:
257 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
258 * - Dygraph.Plotters.errorPlotter: draws error bars
259 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
261 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
262 * This causes all the lines to be drawn over all the fills/error bars.
264 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
267 // Default attribute values.
268 Dygraph
.DEFAULT_ATTRS
= {
269 highlightCircleSize
: 3,
270 highlightSeriesOpts
: null,
271 highlightSeriesBackgroundAlpha
: 0.5,
275 // TODO(danvk): move defaults from createStatusMessage_ here.
277 labelsSeparateLines
: false,
278 labelsShowZeroValues
: true,
281 showLabelsOnHighlight
: true,
283 digitsAfterDecimal
: 2,
288 strokeBorderWidth
: 0,
289 strokeBorderColor
: "white",
292 axisLabelFontSize
: 14,
296 xValueParser
: Dygraph
.dateParser
,
303 wilsonInterval
: true, // only relevant if fractions is true
307 connectSeparatedPoints
: false,
310 stackedGraphNaNFill
: 'all',
311 hideOverlayOnMouseOut
: true,
313 legend
: 'onmouseover',
318 drawAxesAtZero
: false,
320 // Sizes of the various chart labels.
325 axisLineColor
: "black",
328 axisLabelColor
: "black",
330 gridLineColor
: "rgb(128,128,128)",
332 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
333 animatedZooms
: false, // (for now)
335 // Range selector options
336 showRangeSelector
: false,
337 rangeSelectorHeight
: 40,
338 rangeSelectorPlotStrokeColor
: "#808FAB",
339 rangeSelectorPlotFillColor
: "#A7B1C4",
340 rangeSelectorBGStrokeColor
: "gray",
341 rangeSelectorBGLineWidth
: 1,
342 rangeSelectorPlotLineWidth
:1.5,
343 rangeSelectorFGStrokeColor
: "black",
344 rangeSelectorFGLineWidth
: 1,
345 rangeSelectorAlpha
: 0.6,
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
363 axisLabelFormatter
: Dygraph
.dateAxisLabelFormatter
,
364 valueFormatter
: Dygraph
.dateValueFormatter
,
367 independentTicks
: true,
368 ticker
: null // will be set in dygraph-tickers.js
373 valueFormatter
: Dygraph
.numberValueFormatter
,
374 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
377 independentTicks
: true,
378 ticker
: null // will be set in dygraph-tickers.js
383 valueFormatter
: Dygraph
.numberValueFormatter
,
384 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
385 drawAxis
: true, // only applies when there are two axes of data.
387 independentTicks
: false,
388 ticker
: null // will be set in dygraph-tickers.js
393 // Directions for panning and zooming. Use bit operations when combined
394 // values are possible.
395 Dygraph
.HORIZONTAL
= 1;
396 Dygraph
.VERTICAL
= 2;
398 // Installed plugins, in order of precedence (most-general to most-specific).
399 // Plugins are installed after they are defined, in plugins/install.js
.
403 // Used for initializing annotation CSS rules only once.
404 Dygraph
.addedAnnotationCSS
= false;
406 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
407 // Labels is no longer a constructor parameter, since it's typically set
408 // directly from the data source. It also conains a name for the x-axis,
409 // which the previous constructor form did not.
410 if (labels
!== null) {
411 var new_labels
= ["Date"];
412 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
413 Dygraph
.update(attrs
, { 'labels': new_labels
});
415 this.__init__(div
, file
, attrs
);
419 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
420 * and context <canvas> inside of it. See the constructor for details.
422 * @param {Element} div the Element to render the graph into.
423 * @param {string | Function} file Source data
424 * @param {Object} attrs Miscellaneous other options
427 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
428 // Support two-argument constructor
429 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
431 attrs
= Dygraph
.copyUserAttrs_(attrs
);
433 if (typeof(div
) == 'string') {
434 div
= document
.getElementById(div
);
438 console
.error("Constructing dygraph with a non-existent div!");
442 // Copy the important bits into the object
443 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
446 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
447 this.previousVerticalX_
= -1;
448 this.fractions_
= attrs
.fractions
|| false;
449 this.dateWindow_
= attrs
.dateWindow
|| null;
451 this.annotations_
= [];
453 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
454 this.zoomed_x_
= false;
455 this.zoomed_y_
= false;
457 // Clear the div. This ensure that, if multiple dygraphs are passed the same
458 // div, then only one will be drawn.
461 // For historical reasons, the 'width' and 'height' options trump all CSS
462 // rules _except_ for an explicit 'width' or 'height' on the div.
463 // As an added convenience, if the div has zero height (like <div></div> does
464 // without any styles), then we use a default height/width
.
465 if (div
.style
.width
=== '' && attrs
.width
) {
466 div
.style
.width
= attrs
.width
+ "px";
468 if (div
.style
.height
=== '' && attrs
.height
) {
469 div
.style
.height
= attrs
.height
+ "px";
471 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
472 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
473 if (div
.style
.width
=== '') {
474 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
477 // These will be zero if the dygraph's div is hidden. In that case,
478 // use the user-specified attributes if present. If not, use zero
479 // and assume the user will call resize to fix things later.
480 this.width_
= div
.clientWidth
|| attrs
.width
|| 0;
481 this.height_
= div
.clientHeight
|| attrs
.height
|| 0;
483 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
484 if (attrs
.stackedGraph
) {
485 attrs
.fillGraph
= true;
486 // TODO(nikhilk): Add any other stackedGraph checks here.
489 // DEPRECATION WARNING: All option processing should be moved from
490 // attrs_ and user_attrs_ to options_, which holds all this information.
492 // Dygraphs has many options, some of which interact with one another.
493 // To keep track of everything, we maintain two sets of options:
495 // this.user_attrs_ only options explicitly set by the user.
496 // this.attrs_ defaults, options derived from user_attrs_, data.
498 // Options are then accessed this.attr_('attr'), which first looks at
499 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
500 // defaults without overriding behavior that the user specifically asks for.
501 this.user_attrs_
= {};
502 Dygraph
.update(this.user_attrs_
, attrs
);
504 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
506 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
508 this.boundaryIds_
= [];
509 this.setIndexByName_
= {};
510 this.datasetIndex_
= [];
512 this.registeredEvents_
= [];
513 this.eventListeners_
= {};
515 this.attributes_
= new DygraphOptions(this);
517 // Create the containing DIV and other interactive elements
518 this.createInterface_();
522 var plugins
= Dygraph
.PLUGINS
.concat(this.getOption('plugins'));
523 for (var i
= 0; i
< plugins
.length
; i
++) {
524 // the plugins option may contain either plugin classes or instances.
525 // Plugin instances contain an activate method.
526 var Plugin
= plugins
[i
]; // either a constructor or an instance.
528 if (typeof(Plugin
.activate
) !== 'undefined') {
529 pluginInstance
= Plugin
;
531 pluginInstance
= new Plugin();
535 plugin
: pluginInstance
,
541 var handlers
= pluginInstance
.activate(this);
542 for (var eventName
in handlers
) {
543 if (!handlers
.hasOwnProperty(eventName
)) continue;
544 // TODO(danvk): validate eventName.
545 pluginDict
.events
[eventName
] = handlers
[eventName
];
548 this.plugins_
.push(pluginDict
);
551 // At this point, plugins can no longer register event handlers.
552 // Construct a map from event -> ordered list of [callback, plugin].
553 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
554 var plugin_dict
= this.plugins_
[i
];
555 for (var eventName
in plugin_dict
.events
) {
556 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
557 var callback
= plugin_dict
.events
[eventName
];
559 var pair
= [plugin_dict
.plugin
, callback
];
560 if (!(eventName
in this.eventListeners_
)) {
561 this.eventListeners_
[eventName
] = [pair
];
563 this.eventListeners_
[eventName
].push(pair
);
568 this.createDragInterface_();
574 * Triggers a cascade of events to the various plugins which are interested in them.
575 * Returns true if the "default behavior" should be prevented, i.e. if one
576 * of the event listeners called event.preventDefault().
579 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
580 if (!(name
in this.eventListeners_
)) return false;
582 // QUESTION: can we use objects & prototypes to speed this up?
586 defaultPrevented
: false,
587 preventDefault
: function() {
588 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
589 e
.defaultPrevented
= true;
591 propagationStopped
: false,
592 stopPropagation
: function() {
593 e
.propagationStopped
= true;
596 Dygraph
.update(e
, extra_props
);
598 var callback_plugin_pairs
= this.eventListeners_
[name
];
599 if (callback_plugin_pairs
) {
600 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
601 var plugin
= callback_plugin_pairs
[i
][0];
602 var callback
= callback_plugin_pairs
[i
][1];
603 callback
.call(plugin
, e
);
604 if (e
.propagationStopped
) break;
607 return e
.defaultPrevented
;
611 * Fetch a plugin instance of a particular class. Only for testing.
613 * @param {!Class} type The type of the plugin.
614 * @return {Object} Instance of the plugin, or null if there is none.
616 Dygraph
.prototype.getPluginInstance_
= function(type
) {
617 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
618 var p
= this.plugins_
[i
];
619 if (p
.plugin
instanceof type
) {
627 * Returns the zoomed status of the chart for one or both axes.
629 * Axis is an optional parameter. Can be set to 'x' or 'y'.
631 * The zoomed status for an axis is set whenever a user zooms using the mouse
632 * or when the dateWindow or valueRange are updated (unless the
633 * isZoomedIgnoreProgrammaticZoom option is also specified).
635 Dygraph
.prototype.isZoomed
= function(axis
) {
636 if (axis
=== null || axis
=== undefined
) {
637 return this.zoomed_x_
|| this.zoomed_y_
;
639 if (axis
=== 'x') return this.zoomed_x_
;
640 if (axis
=== 'y') return this.zoomed_y_
;
641 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
645 * Returns information about the Dygraph object, including its containing ID.
647 Dygraph
.prototype.toString
= function() {
648 var maindiv
= this.maindiv_
;
649 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
650 return "[Dygraph " + id
+ "]";
655 * Returns the value of an option. This may be set by the user (either in the
656 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
658 * @param {string} name The name of the option, e.g. 'rollPeriod'.
659 * @param {string} [seriesName] The name of the series to which the option
660 * will be applied. If no per-series value of this option is available, then
661 * the global value is returned. This is optional.
662 * @return { ... } The value of the option.
664 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
666 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
667 console
.error('Must include options reference JS for testing');
668 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
669 console
.error('Dygraphs is using property ' + name
+ ', which has no ' +
670 'entry in the Dygraphs.OPTIONS_REFERENCE listing.');
671 // Only log this error once.
672 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
675 return seriesName
? this.attributes_
.getForSeries(name
, seriesName
) : this.attributes_
.get(name
);
679 * Returns the current value for an option, as set in the constructor or via
680 * updateOptions. You may pass in an (optional) series name to get per-series
681 * values for the option.
683 * All values returned by this method should be considered immutable. If you
684 * modify them, there is no guarantee that the changes will be honored or that
685 * dygraphs will remain in a consistent state. If you want to modify an option,
686 * use updateOptions() instead.
688 * @param {string} name The name of the option (e.g. 'strokeWidth')
689 * @param {string=} opt_seriesName Series name to get per-series values.
690 * @return {*} The value of the option.
692 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
693 return this.attr_(name
, opt_seriesName
);
697 * Like getOption(), but specifically returns a number.
698 * This is a convenience function for working with the Closure Compiler.
699 * @param {string} name The name of the option (e.g. 'strokeWidth')
700 * @param {string=} opt_seriesName Series name to get per-series values.
701 * @return {number} The value of the option.
704 Dygraph
.prototype.getNumericOption
= function(name
, opt_seriesName
) {
705 return /** @type{number} */(this.getOption(name
, opt_seriesName
));
709 * Like getOption(), but specifically returns a string.
710 * This is a convenience function for working with the Closure Compiler.
711 * @param {string} name The name of the option (e.g. 'strokeWidth')
712 * @param {string=} opt_seriesName Series name to get per-series values.
713 * @return {string} The value of the option.
716 Dygraph
.prototype.getStringOption
= function(name
, opt_seriesName
) {
717 return /** @type{string} */(this.getOption(name
, opt_seriesName
));
721 * Like getOption(), but specifically returns a boolean.
722 * This is a convenience function for working with the Closure Compiler.
723 * @param {string} name The name of the option (e.g. 'strokeWidth')
724 * @param {string=} opt_seriesName Series name to get per-series values.
725 * @return {boolean} The value of the option.
728 Dygraph
.prototype.getBooleanOption
= function(name
, opt_seriesName
) {
729 return /** @type{boolean} */(this.getOption(name
, opt_seriesName
));
733 * Like getOption(), but specifically returns a function.
734 * This is a convenience function for working with the Closure Compiler.
735 * @param {string} name The name of the option (e.g. 'strokeWidth')
736 * @param {string=} opt_seriesName Series name to get per-series values.
737 * @return {function(...)} The value of the option.
740 Dygraph
.prototype.getFunctionOption
= function(name
, opt_seriesName
) {
741 return /** @type{function(...)} */(this.getOption(name
, opt_seriesName
));
744 Dygraph
.prototype.getOptionForAxis
= function(name
, axis
) {
745 return this.attributes_
.getForAxis(name
, axis
);
750 * @param {string} axis The name of the axis (i.e. 'x', 'y' or 'y2')
751 * @return { ... } A function mapping string -> option value
753 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
755 return function(opt
) {
756 var axis_opts
= self
.user_attrs_
.axes
;
757 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
758 return axis_opts
[axis
][opt
];
761 // I don't like that this is in a second spot.
762 if (axis
=== 'x' && opt
=== 'logscale') {
763 // return the default value.
764 // TODO(konigsberg): pull the default from a global default.
768 // user-specified attributes always trump defaults, even if they're less
770 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
771 return self
.user_attrs_
[opt
];
774 axis_opts
= self
.attrs_
.axes
;
775 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
776 return axis_opts
[axis
][opt
];
778 // check old-style axis options
779 // TODO(danvk): add a deprecation warning if either of these match.
780 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
781 return self
.axes_
[0][opt
];
782 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
783 return self
.axes_
[1][opt
];
785 return self
.attr_(opt
);
790 * Returns the current rolling period, as set by the user or an option.
791 * @return {number} The number of points in the rolling window
793 Dygraph
.prototype.rollPeriod
= function() {
794 return this.rollPeriod_
;
798 * Returns the currently-visible x-range. This can be affected by zooming,
799 * panning or a call to updateOptions.
800 * Returns a two-element array: [left, right].
801 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
803 Dygraph
.prototype.xAxisRange
= function() {
804 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
808 * Returns the lower- and upper-bound x-axis values of the
811 Dygraph
.prototype.xAxisExtremes
= function() {
812 var pad
= this.getNumericOption('xRangePad') / this.plotter_
.area
.w
;
813 if (this.numRows() === 0) {
814 return [0 - pad
, 1 + pad
];
816 var left
= this.rawData_
[0][0];
817 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
819 // Must keep this in sync with dygraph-layout _evaluateLimits()
820 var range
= right
- left
;
822 right
+= range
* pad
;
824 return [left
, right
];
828 * Returns the currently-visible y-range for an axis. This can be affected by
829 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
830 * called with no arguments, returns the range of the first axis.
831 * Returns a two-element array: [bottom, top].
833 Dygraph
.prototype.yAxisRange
= function(idx
) {
834 if (typeof(idx
) == "undefined") idx
= 0;
835 if (idx
< 0 || idx
>= this.axes_
.length
) {
838 var axis
= this.axes_
[idx
];
839 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
843 * Returns the currently-visible y-ranges for each axis. This can be affected by
844 * zooming, panning, calls to updateOptions, etc.
845 * Returns an array of [bottom, top] pairs, one for each y-axis.
847 Dygraph
.prototype.yAxisRanges
= function() {
849 for (var i
= 0; i
< this.axes_
.length
; i
++) {
850 ret
.push(this.yAxisRange(i
));
855 // TODO(danvk): use these functions throughout dygraphs.
857 * Convert from data coordinates to canvas/div X/Y coordinates.
858 * If specified, do this conversion for the coordinate system of a particular
859 * axis. Uses the first axis by default.
860 * Returns a two-element array: [X, Y]
862 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
863 * instead of toDomCoords(null, y, axis).
865 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
866 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
870 * Convert from data x coordinates to canvas/div X coordinate.
871 * If specified, do this conversion for the coordinate system of a particular
873 * Returns a single value or null if x is null.
875 Dygraph
.prototype.toDomXCoord
= function(x
) {
880 var area
= this.plotter_
.area
;
881 var xRange
= this.xAxisRange();
882 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
886 * Convert from data x coordinates to canvas/div Y coordinate and optional
887 * axis. Uses the first axis by default.
889 * returns a single value or null if y is null.
891 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
892 var pct
= this.toPercentYCoord(y
, axis
);
897 var area
= this.plotter_
.area
;
898 return area
.y
+ pct
* area
.h
;
902 * Convert from canvas/div coords to data coordinates.
903 * If specified, do this conversion for the coordinate system of a particular
904 * axis. Uses the first axis by default.
905 * Returns a two-element array: [X, Y].
907 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
908 * instead of toDataCoords(null, y, axis).
910 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
911 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
915 * Convert from canvas/div x coordinate to data coordinate.
917 * If x is null, this returns null.
919 Dygraph
.prototype.toDataXCoord
= function(x
) {
924 var area
= this.plotter_
.area
;
925 var xRange
= this.xAxisRange();
927 if (!this.attributes_
.getForAxis("logscale", 'x')) {
928 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
930 // TODO: remove duplicate code?
931 // Computing the inverse of toDomCoord.
932 var pct
= (x
- area
.x
) / area
.w
;
934 // Computing the inverse of toPercentXCoord. The function was arrived at with
935 // the following steps:
937 // Original calcuation:
938 // pct = (log(x) - log(xRange[0])) / (log(xRange
[1]) - log(xRange
[0])));
940 // Multiply both sides by the right-side demoninator.
941 // pct * (log(xRange[1] - log(xRange[0]))) = log(x) - log(xRange[0])
943 // add log(xRange[0]) to both sides
944 // log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])) = log(x);
946 // Swap both sides of the equation,
947 // log(x) = log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0]))
949 // Use both sides as the exponent in 10^exp and we're done.
950 // x = 10 ^ (log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])))
951 var logr0
= Dygraph
.log10(xRange
[0]);
952 var logr1
= Dygraph
.log10(xRange
[1]);
953 var exponent
= logr0
+ (pct
* (logr1
- logr0
));
954 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
960 * Convert from canvas/div y coord to value.
962 * If y is null, this returns null.
963 * if axis is null, this uses the first axis.
965 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
970 var area
= this.plotter_
.area
;
971 var yRange
= this.yAxisRange(axis
);
973 if (typeof(axis
) == "undefined") axis
= 0;
974 if (!this.attributes_
.getForAxis("logscale", axis
)) {
975 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
977 // Computing the inverse of toDomCoord.
978 var pct
= (y
- area
.y
) / area
.h
;
980 // Computing the inverse of toPercentYCoord. The function was arrived at with
981 // the following steps:
983 // Original calcuation:
984 // pct = (log(yRange[1]) - log(y)) / (log(yRange
[1]) - log(yRange
[0]));
986 // Multiply both sides by the right-side demoninator.
987 // pct * (log(yRange[1]) - log(yRange[0])) = log(yRange[1]) - log(y);
989 // subtract log(yRange[1]) from both sides.
990 // (pct * (log(yRange[1]) - log(yRange[0]))) - log(yRange[1]) = -log(y);
992 // and multiply both sides by -1.
993 // log(yRange[1]) - (pct * (logr1 - log(yRange[0])) = log(y);
995 // Swap both sides of the equation,
996 // log(y) = log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0])));
998 // Use both sides as the exponent in 10^exp and we're done.
999 // y = 10 ^ (log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0]))));
1000 var logr0
= Dygraph
.log10(yRange
[0]);
1001 var logr1
= Dygraph
.log10(yRange
[1]);
1002 var exponent
= logr1
- (pct
* (logr1
- logr0
));
1003 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
1009 * Converts a y for an axis to a percentage from the top to the
1010 * bottom of the drawing area.
1012 * If the coordinate represents a value visible on the canvas, then
1013 * the value will be between 0 and 1, where 0 is the top of the canvas.
1014 * However, this method will return values outside the range, as
1015 * values can fall outside the canvas.
1017 * If y is null, this returns null.
1018 * if axis is null, this uses the first axis.
1020 * @param {number} y The data y-coordinate.
1021 * @param {number} [axis] The axis number on which the data coordinate lives.
1022 * @return {number} A fraction in [0, 1] where 0 = the top edge.
1024 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
1028 if (typeof(axis
) == "undefined") axis
= 0;
1030 var yRange
= this.yAxisRange(axis
);
1033 var logscale
= this.attributes_
.getForAxis("logscale", axis
);
1035 var logr0
= Dygraph
.log10(yRange
[0]);
1036 var logr1
= Dygraph
.log10(yRange
[1]);
1037 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- logr0
);
1039 // yRange[1] - y is unit distance from the bottom.
1040 // yRange[1] - yRange[0] is the scale of the range.
1041 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
1042 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
1048 * Converts an x value to a percentage from the left to the right of
1051 * If the coordinate represents a value visible on the canvas, then
1052 * the value will be between 0 and 1, where 0 is the left of the canvas.
1053 * However, this method will return values outside the range, as
1054 * values can fall outside the canvas.
1056 * If x is null, this returns null.
1057 * @param {number} x The data x-coordinate.
1058 * @return {number} A fraction in [0, 1] where 0 = the left edge.
1060 Dygraph
.prototype.toPercentXCoord
= function(x
) {
1065 var xRange
= this.xAxisRange();
1067 var logscale
= this.attributes_
.getForAxis("logscale", 'x') ;
1068 if (logscale
=== true) { // logscale can be null so we test for true explicitly.
1069 var logr0
= Dygraph
.log10(xRange
[0]);
1070 var logr1
= Dygraph
.log10(xRange
[1]);
1071 pct
= (Dygraph
.log10(x
) - logr0
) / (logr1
- logr0
);
1073 // x - xRange[0] is unit distance from the left.
1074 // xRange[1] - xRange[0] is the scale of the range.
1075 // The full expression below is the % from the left.
1076 pct
= (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
1082 * Returns the number of columns (including the independent variable).
1083 * @return {number} The number of columns.
1085 Dygraph
.prototype.numColumns
= function() {
1086 if (!this.rawData_
) return 0;
1087 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
1091 * Returns the number of rows (excluding any header/label row).
1092 * @return {number} The number of rows, less any header.
1094 Dygraph
.prototype.numRows
= function() {
1095 if (!this.rawData_
) return 0;
1096 return this.rawData_
.length
;
1100 * Returns the value in the given row and column. If the row and column exceed
1101 * the bounds on the data, returns null. Also returns null if the value is
1103 * @param {number} row The row number of the data (0-based). Row 0 is the
1104 * first row of data, not a header row.
1105 * @param {number} col The column number of the data (0-based)
1106 * @return {number} The value in the specified cell or null if the row/col
1107 * were out of range.
1109 Dygraph
.prototype.getValue
= function(row
, col
) {
1110 if (row
< 0 || row
> this.rawData_
.length
) return null;
1111 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
1113 return this.rawData_
[row
][col
];
1117 * Generates interface elements for the Dygraph: a containing div, a div to
1118 * display the current point, and a textbox to adjust the rolling average
1119 * period. Also creates the Renderer/Layout elements.
1122 Dygraph
.prototype.createInterface_
= function() {
1123 // Create the all-enclosing graph div
1124 var enclosing
= this.maindiv_
;
1126 this.graphDiv
= document
.createElement("div");
1128 // TODO(danvk): any other styles that are useful to set here?
1129 this.graphDiv
.style
.textAlign
= 'left'; // This is a CSS "reset"
1130 this.graphDiv
.style
.position
= 'relative';
1131 enclosing
.appendChild(this.graphDiv
);
1133 // Create the canvas for interactive parts of the chart.
1134 this.canvas_
= Dygraph
.createCanvas();
1135 this.canvas_
.style
.position
= "absolute";
1137 // ... and for static parts of the chart.
1138 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
1140 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
1141 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
1143 this.resizeElements_();
1145 // The interactive parts of the graph are drawn on top of the chart.
1146 this.graphDiv
.appendChild(this.hidden_
);
1147 this.graphDiv
.appendChild(this.canvas_
);
1148 this.mouseEventElement_
= this.createMouseEventElement_();
1150 // Create the grapher
1151 this.layout_
= new DygraphLayout(this);
1155 this.mouseMoveHandler_
= function(e
) {
1156 dygraph
.mouseMove_(e
);
1159 this.mouseOutHandler_
= function(e
) {
1160 // The mouse has left the chart if:
1161 // 1. e.target is inside the chart
1162 // 2. e.relatedTarget is outside the chart
1163 var target
= e
.target
|| e
.fromElement
;
1164 var relatedTarget
= e
.relatedTarget
|| e
.toElement
;
1165 if (Dygraph
.isNodeContainedBy(target
, dygraph
.graphDiv
) &&
1166 !Dygraph
.isNodeContainedBy(relatedTarget
, dygraph
.graphDiv
)) {
1167 dygraph
.mouseOut_(e
);
1171 this.addAndTrackEvent(window
, 'mouseout', this.mouseOutHandler_
);
1172 this.addAndTrackEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1174 // Don't recreate and register the resize handler on subsequent calls.
1175 // This happens when the graph is resized.
1176 if (!this.resizeHandler_
) {
1177 this.resizeHandler_
= function(e
) {
1181 // Update when the window is resized.
1182 // TODO(danvk): drop frames depending on complexity of the chart.
1183 this.addAndTrackEvent(window
, 'resize', this.resizeHandler_
);
1187 Dygraph
.prototype.resizeElements_
= function() {
1188 this.graphDiv
.style
.width
= this.width_
+ "px";
1189 this.graphDiv
.style
.height
= this.height_
+ "px";
1191 var canvasScale
= Dygraph
.getContextPixelRatio(this.canvas_ctx_
);
1192 this.canvas_
.width
= this.width_
* canvasScale
;
1193 this.canvas_
.height
= this.height_
* canvasScale
;
1194 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
1195 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
1196 if (canvasScale
!== 1) {
1197 this.canvas_ctx_
.scale(canvasScale
, canvasScale
);
1200 var hiddenScale
= Dygraph
.getContextPixelRatio(this.hidden_ctx_
);
1201 this.hidden_
.width
= this.width_
* hiddenScale
;
1202 this.hidden_
.height
= this.height_
* hiddenScale
;
1203 this.hidden_
.style
.width
= this.width_
+ "px"; // for IE
1204 this.hidden_
.style
.height
= this.height_
+ "px"; // for IE
1205 if (hiddenScale
!== 1) {
1206 this.hidden_ctx_
.scale(hiddenScale
, hiddenScale
);
1211 * Detach DOM elements in the dygraph and null out all data references.
1212 * Calling this when you're done with a dygraph can dramatically reduce memory
1213 * usage. See, e.g., the tests/perf.html example.
1215 Dygraph
.prototype.destroy
= function() {
1216 this.canvas_ctx_
.restore();
1217 this.hidden_ctx_
.restore();
1219 // Destroy any plugins, in the reverse order that they were registered.
1220 for (var i
= this.plugins_
.length
- 1; i
>= 0; i
--) {
1221 var p
= this.plugins_
.pop();
1222 if (p
.plugin
.destroy
) p
.plugin
.destroy();
1225 var removeRecursive
= function(node
) {
1226 while (node
.hasChildNodes()) {
1227 removeRecursive(node
.firstChild
);
1228 node
.removeChild(node
.firstChild
);
1232 this.removeTrackedEvents_();
1234 // remove mouse event handlers (This may not be necessary anymore)
1235 Dygraph
.removeEvent(window
, 'mouseout', this.mouseOutHandler_
);
1236 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1238 // remove window handlers
1239 Dygraph
.removeEvent(window
,'resize', this.resizeHandler_
);
1240 this.resizeHandler_
= null;
1242 removeRecursive(this.maindiv_
);
1244 var nullOut
= function(obj
) {
1245 for (var n
in obj
) {
1246 if (typeof(obj
[n
]) === 'object') {
1251 // These may not all be necessary, but it can't hurt...
1252 nullOut(this.layout_
);
1253 nullOut(this.plotter_
);
1258 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1259 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1260 * or the zoom rectangles) is done on this.canvas_.
1261 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1262 * @return {Object} The newly-created canvas
1265 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1266 var h
= Dygraph
.createCanvas();
1267 h
.style
.position
= "absolute";
1268 // TODO(danvk): h should be offset from canvas. canvas needs to include
1269 // some extra area to make it easier to zoom in on the far left and far
1270 // right. h needs to be precisely the plot area, so that clipping occurs.
1271 h
.style
.top
= canvas
.style
.top
;
1272 h
.style
.left
= canvas
.style
.left
;
1273 h
.width
= this.width_
;
1274 h
.height
= this.height_
;
1275 h
.style
.width
= this.width_
+ "px"; // for IE
1276 h
.style
.height
= this.height_
+ "px"; // for IE
1281 * Creates an overlay element used to handle mouse events.
1282 * @return {Object} The mouse event element.
1285 Dygraph
.prototype.createMouseEventElement_
= function() {
1286 return this.canvas_
;
1290 * Generate a set of distinct colors for the data series. This is done with a
1291 * color wheel. Saturation/Value are customizable, and the hue is
1292 * equally-spaced around the color wheel. If a custom set of colors is
1293 * specified, that is used instead.
1296 Dygraph
.prototype.setColors_
= function() {
1297 var labels
= this.getLabels();
1298 var num
= labels
.length
- 1;
1300 this.colorsMap_
= {};
1302 // These are used for when no custom colors are specified.
1303 var sat
= this.getNumericOption('colorSaturation') || 1.0;
1304 var val
= this.getNumericOption('colorValue') || 0.5;
1305 var half
= Math
.ceil(num
/ 2);
1307 var colors
= this.getOption('colors');
1308 var visibility
= this.visibility();
1309 for (var i
= 0; i
< num
; i
++) {
1310 if (!visibility
[i
]) {
1313 var label
= labels
[i
+ 1];
1314 var colorStr
= this.attributes_
.getForSeries('color', label
);
1317 colorStr
= colors
[i
% colors
.length
];
1319 // alternate colors for high contrast.
1320 var idx
= i
% 2 ? (half
+ (i
+ 1)/ 2) : Math.ceil((i + 1) / 2);
1321 var hue
= (1.0 * idx
/ (1 + num
));
1322 colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1325 this.colors_
.push(colorStr
);
1326 this.colorsMap_
[label
] = colorStr
;
1331 * Return the list of colors. This is either the list of colors passed in the
1332 * attributes or the autogenerated list of rgb(r,g,b) strings.
1333 * This does not return colors for invisible series.
1334 * @return {Array.<string>} The list of colors.
1336 Dygraph
.prototype.getColors
= function() {
1337 return this.colors_
;
1341 * Returns a few attributes of a series, i.e. its color, its visibility, which
1342 * axis it's assigned to, and its column in the original data.
1343 * Returns null if the series does not exist.
1344 * Otherwise, returns an object with column, visibility, color and axis properties.
1345 * The "axis" property will be set to 1 for y1 and 2 for y2.
1346 * The "column" property can be fed back into getValue(row, column) to get
1347 * values for this series.
1349 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1351 var labels
= this.getLabels();
1352 for (var i
= 1; i
< labels
.length
; i
++) {
1353 if (labels
[i
] == series_name
) {
1358 if (idx
== -1) return null;
1363 visible
: this.visibility()[idx
- 1],
1364 color
: this.colorsMap_
[series_name
],
1365 axis
: 1 + this.attributes_
.axisForSeries(series_name
)
1370 * Create the text box to adjust the averaging period
1373 Dygraph
.prototype.createRollInterface_
= function() {
1374 // Create a roller if one doesn't exist already.
1375 if (!this.roller_
) {
1376 this.roller_
= document
.createElement("input");
1377 this.roller_
.type
= "text";
1378 this.roller_
.style
.display
= "none";
1379 this.graphDiv
.appendChild(this.roller_
);
1382 var display
= this.getBooleanOption('showRoller') ? 'block' : 'none';
1384 var area
= this.plotter_
.area
;
1385 var textAttr
= { "position": "absolute",
1387 "top": (area
.y
+ area
.h
- 25) + "px",
1388 "left": (area
.x
+ 1) + "px",
1391 this.roller_
.size
= "2";
1392 this.roller_
.value
= this.rollPeriod_
;
1393 for (var name
in textAttr
) {
1394 if (textAttr
.hasOwnProperty(name
)) {
1395 this.roller_
.style
[name
] = textAttr
[name
];
1400 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1404 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1408 Dygraph
.prototype.createDragInterface_
= function() {
1410 // Tracks whether the mouse is down right now
1412 isPanning
: false, // is this drag part of a pan?
1413 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1414 dragStartX
: null, // pixel coordinates
1415 dragStartY
: null, // pixel coordinates
1416 dragEndX
: null, // pixel coordinates
1417 dragEndY
: null, // pixel coordinates
1418 dragDirection
: null,
1419 prevEndX
: null, // pixel coordinates
1420 prevEndY
: null, // pixel coordinates
1421 prevDragDirection
: null,
1422 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1424 // The value on the left side of the graph when a pan operation starts.
1425 initialLeftmostDate
: null,
1427 // The number of units each pixel spans. (This won't be valid for log
1429 xUnitsPerPixel
: null,
1431 // TODO(danvk): update this comment
1432 // The range in second/value units that the viewport encompasses during a
1433 // panning operation.
1436 // Top-left corner of the canvas, in DOM coords
1437 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1441 // Values for use with panEdgeFraction, which limit how far outside the
1442 // graph's data boundaries it can be panned.
1443 boundedDates
: null, // [minDate, maxDate]
1444 boundedValues
: null, // [[minValue, maxValue] ...]
1446 // We cover iframes during mouse interactions. See comments in
1447 // dygraph-utils.js for more info on why this is a good idea.
1448 tarp
: new Dygraph
.IFrameTarp(),
1450 // contextB is the same thing as this context object but renamed.
1451 initializeMouseDown
: function(event
, g
, contextB
) {
1452 // prevents mouse drags from selecting page text.
1453 if (event
.preventDefault
) {
1454 event
.preventDefault(); // Firefox, Chrome, etc.
1456 event
.returnValue
= false; // IE
1457 event
.cancelBubble
= true;
1460 var canvasPos
= Dygraph
.findPos(g
.canvas_
);
1461 contextB
.px
= canvasPos
.x
;
1462 contextB
.py
= canvasPos
.y
;
1463 contextB
.dragStartX
= Dygraph
.dragGetX_(event
, contextB
);
1464 contextB
.dragStartY
= Dygraph
.dragGetY_(event
, contextB
);
1465 contextB
.cancelNextDblclick
= false;
1466 contextB
.tarp
.cover();
1468 destroy
: function() {
1470 if (context
.isZooming
|| context
.isPanning
) {
1471 context
.isZooming
= false;
1472 context
.dragStartX
= null;
1473 context
.dragStartY
= null;
1476 if (context
.isPanning
) {
1477 context
.isPanning
= false;
1478 context
.draggingDate
= null;
1479 context
.dateRange
= null;
1480 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1481 delete self
.axes_
[i
].draggingValue
;
1482 delete self
.axes_
[i
].dragValueRange
;
1486 context
.tarp
.uncover();
1490 var interactionModel
= this.getOption("interactionModel");
1492 // Self is the graph.
1495 // Function that binds the graph and context to the handler.
1496 var bindHandler
= function(handler
) {
1497 return function(event
) {
1498 handler(event
, self
, context
);
1502 for (var eventName
in interactionModel
) {
1503 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1504 this.addAndTrackEvent(this.mouseEventElement_
, eventName
,
1505 bindHandler(interactionModel
[eventName
]));
1508 // If the user releases the mouse button during a drag, but not over the
1509 // canvas, then it doesn't count as a zooming action.
1510 if (!interactionModel
.willDestroyContextMyself
) {
1511 var mouseUpHandler
= function(event
) {
1515 this.addAndTrackEvent(document
, 'mouseup', mouseUpHandler
);
1520 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1521 * up any previous zoom rectangles that were drawn. This could be optimized to
1522 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1525 * @param {number} direction the direction of the zoom rectangle. Acceptable
1526 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1527 * @param {number} startX The X position where the drag started, in canvas
1529 * @param {number} endX The current X position of the drag, in canvas coords.
1530 * @param {number} startY The Y position where the drag started, in canvas
1532 * @param {number} endY The current Y position of the drag, in canvas coords.
1533 * @param {number} prevDirection the value of direction on the previous call to
1534 * this function. Used to avoid excess redrawing
1535 * @param {number} prevEndX The value of endX on the previous call to this
1536 * function. Used to avoid excess redrawing
1537 * @param {number} prevEndY The value of endY on the previous call to this
1538 * function. Used to avoid excess redrawing
1541 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1542 endY
, prevDirection
, prevEndX
,
1544 var ctx
= this.canvas_ctx_
;
1546 // Clean up from the previous rect if necessary
1547 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1548 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1549 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1550 } else if (prevDirection
== Dygraph
.VERTICAL
) {
1551 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1552 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1555 // Draw a light-grey rectangle to show the new viewing area
1556 if (direction
== Dygraph
.HORIZONTAL
) {
1557 if (endX
&& startX
) {
1558 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1559 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1560 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1562 } else if (direction
== Dygraph
.VERTICAL
) {
1563 if (endY
&& startY
) {
1564 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1565 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1566 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1572 * Clear the zoom rectangle (and perform no zoom).
1575 Dygraph
.prototype.clearZoomRect_
= function() {
1576 this.currentZoomRectArgs_
= null;
1577 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1581 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1582 * the canvas. The exact zoom window may be slightly larger if there are no data
1583 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1584 * which accepts dates that match the raw data. This function redraws the graph.
1586 * @param {number} lowX The leftmost pixel value that should be visible.
1587 * @param {number} highX The rightmost pixel value that should be visible.
1590 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1591 this.currentZoomRectArgs_
= null;
1592 // Find the earliest and latest dates contained in this canvasx range.
1593 // Convert the call to date ranges of the raw data.
1594 var minDate
= this.toDataXCoord(lowX
);
1595 var maxDate
= this.toDataXCoord(highX
);
1596 this.doZoomXDates_(minDate
, maxDate
);
1600 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1601 * method with doZoomX which accepts pixel coordinates. This function redraws
1604 * @param {number} minDate The minimum date that should be visible.
1605 * @param {number} maxDate The maximum date that should be visible.
1608 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1609 // TODO(danvk): when xAxisRange is null (i.e. "fit to data", the animation
1610 // can produce strange effects. Rather than the x-axis transitioning slowly
1611 // between values, it can jerk around.)
1612 var old_window
= this.xAxisRange();
1613 var new_window
= [minDate
, maxDate
];
1614 this.zoomed_x_
= true;
1616 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1617 if (that
.getFunctionOption("zoomCallback")) {
1618 that
.getFunctionOption("zoomCallback").call(that
,
1619 minDate
, maxDate
, that
.yAxisRanges());
1625 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1626 * the canvas. This function redraws the graph.
1628 * @param {number} lowY The topmost pixel value that should be visible.
1629 * @param {number} highY The lowest pixel value that should be visible.
1632 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1633 this.currentZoomRectArgs_
= null;
1634 // Find the highest and lowest values in pixel range for each axis.
1635 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1636 // This is because pixels increase as you go down on the screen, whereas data
1637 // coordinates increase as you go up the screen.
1638 var oldValueRanges
= this.yAxisRanges();
1639 var newValueRanges
= [];
1640 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1641 var hi
= this.toDataYCoord(lowY
, i
);
1642 var low
= this.toDataYCoord(highY
, i
);
1643 newValueRanges
.push([low
, hi
]);
1646 this.zoomed_y_
= true;
1648 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1649 if (that
.getFunctionOption("zoomCallback")) {
1650 var xRange
= that
.xAxisRange();
1651 that
.getFunctionOption("zoomCallback").call(that
,
1652 xRange
[0], xRange
[1], that
.yAxisRanges());
1658 * Transition function to use in animations. Returns values between 0.0
1659 * (totally old values) and 1.0 (totally new values) for each frame.
1662 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1664 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1668 * Reset the zoom to the original view coordinates. This is the same as
1669 * double-clicking on the graph.
1671 Dygraph
.prototype.resetZoom
= function() {
1672 var dirty
= false, dirtyX
= false, dirtyY
= false;
1673 if (this.dateWindow_
!== null) {
1678 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1679 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1685 // Clear any selection, since it's likely to be drawn in the wrong place.
1686 this.clearSelection();
1689 this.zoomed_x_
= false;
1690 this.zoomed_y_
= false;
1692 var minDate
= this.rawData_
[0][0];
1693 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1695 // With only one frame, don't bother calculating extreme ranges.
1696 // TODO(danvk): merge this block w/ the code below
.
1697 if (!this.getBooleanOption("animatedZooms")) {
1698 this.dateWindow_
= null;
1699 for (i
= 0; i
< this.axes_
.length
; i
++) {
1700 if (this.axes_
[i
].valueWindow
!== null) {
1701 delete this.axes_
[i
].valueWindow
;
1705 if (this.getFunctionOption("zoomCallback")) {
1706 this.getFunctionOption("zoomCallback").call(this,
1707 minDate
, maxDate
, this.yAxisRanges());
1712 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1714 oldWindow
= this.xAxisRange();
1715 newWindow
= [minDate
, maxDate
];
1719 oldValueRanges
= this.yAxisRanges();
1720 // TODO(danvk): this is pretty inefficient
1721 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1722 var extremes
= packed
.extremes
;
1724 // this has the side-effect of modifying this.axes_.
1725 // this doesn't make much sense in this context, but it's convenient (we
1726 // need this.axes_[*].extremeValues) and not harmful since we'll be
1727 // calling drawGraph_ shortly, which clobbers these values.
1728 this.computeYAxisRanges_(extremes
);
1730 newValueRanges
= [];
1731 for (i
= 0; i
< this.axes_
.length
; i
++) {
1732 var axis
= this.axes_
[i
];
1733 newValueRanges
.push((axis
.valueRange
!== null &&
1734 axis
.valueRange
!== undefined
) ?
1735 axis
.valueRange
: axis
.extremeRange
);
1740 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1742 that
.dateWindow_
= null;
1743 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1744 if (that
.axes_
[i
].valueWindow
!== null) {
1745 delete that
.axes_
[i
].valueWindow
;
1748 if (that
.getFunctionOption("zoomCallback")) {
1749 that
.getFunctionOption("zoomCallback").call(that
,
1750 minDate
, maxDate
, that
.yAxisRanges());
1757 * Combined animation logic for all zoom functions.
1758 * either the x parameters or y parameters may be null.
1761 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1762 var steps
= this.getBooleanOption("animatedZooms") ?
1763 Dygraph
.ANIMATION_STEPS
: 1;
1766 var valueRanges
= [];
1769 if (oldXRange
!== null && newXRange
!== null) {
1770 for (step
= 1; step
<= steps
; step
++) {
1771 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1772 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1773 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1777 if (oldYRanges
!== null && newYRanges
!== null) {
1778 for (step
= 1; step
<= steps
; step
++) {
1779 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1781 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1782 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1783 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1785 valueRanges
[step
-1] = thisRange
;
1790 Dygraph
.repeatAndCleanup(function(step
) {
1791 if (valueRanges
.length
) {
1792 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1793 var w
= valueRanges
[step
][i
];
1794 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1797 if (windows
.length
) {
1798 that
.dateWindow_
= windows
[step
];
1801 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1805 * Get the current graph's area object.
1807 * Returns: {x, y, w, h}
1809 Dygraph
.prototype.getArea
= function() {
1810 return this.plotter_
.area
;
1814 * Convert a mouse event to DOM coordinates relative to the graph origin.
1816 * Returns a two-element array: [X, Y].
1818 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1819 if (event
.offsetX
&& event
.offsetY
) {
1820 return [ event
.offsetX
, event
.offsetY
];
1822 var eventElementPos
= Dygraph
.findPos(this.mouseEventElement_
);
1823 var canvasx
= Dygraph
.pageX(event
) - eventElementPos
.x
;
1824 var canvasy
= Dygraph
.pageY(event
) - eventElementPos
.y
;
1825 return [canvasx
, canvasy
];
1830 * Given a canvas X coordinate, find the closest row.
1831 * @param {number} domX graph-relative DOM X coordinate
1832 * Returns {number} row number.
1835 Dygraph
.prototype.findClosestRow
= function(domX
) {
1836 var minDistX
= Infinity
;
1837 var closestRow
= -1;
1838 var sets
= this.layout_
.points
;
1839 for (var i
= 0; i
< sets
.length
; i
++) {
1840 var points
= sets
[i
];
1841 var len
= points
.length
;
1842 for (var j
= 0; j
< len
; j
++) {
1843 var point
= points
[j
];
1844 if (!Dygraph
.isValidPoint(point
, true)) continue;
1845 var dist
= Math
.abs(point
.canvasx
- domX
);
1846 if (dist
< minDistX
) {
1848 closestRow
= point
.idx
;
1857 * Given canvas X,Y coordinates, find the closest point.
1859 * This finds the individual data point across all visible series
1860 * that's closest to the supplied DOM coordinates using the standard
1861 * Euclidean X,Y distance.
1863 * @param {number} domX graph-relative DOM X coordinate
1864 * @param {number} domY graph-relative DOM Y coordinate
1865 * Returns: {row, seriesName, point}
1868 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1869 var minDist
= Infinity
;
1870 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
, closestRow
;
1871 for ( var setIdx
= this.layout_
.points
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1872 var points
= this.layout_
.points
[setIdx
];
1873 for (var i
= 0; i
< points
.length
; ++i
) {
1875 if (!Dygraph
.isValidPoint(point
)) continue;
1876 dx
= point
.canvasx
- domX
;
1877 dy
= point
.canvasy
- domY
;
1878 dist
= dx
* dx
+ dy
* dy
;
1879 if (dist
< minDist
) {
1881 closestPoint
= point
;
1882 closestSeries
= setIdx
;
1883 closestRow
= point
.idx
;
1887 var name
= this.layout_
.setNames
[closestSeries
];
1896 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1898 * This first finds the X data point closest to the supplied DOM X coordinate,
1899 * then finds the series which puts the Y coordinate on top of its filled area,
1900 * using linear interpolation between adjacent point pairs.
1902 * @param {number} domX graph-relative DOM X coordinate
1903 * @param {number} domY graph-relative DOM Y coordinate
1904 * Returns: {row, seriesName, point}
1907 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1908 var row
= this.findClosestRow(domX
);
1909 var closestPoint
, closestSeries
;
1910 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
1911 var boundary
= this.getLeftBoundary_(setIdx
);
1912 var rowIdx
= row
- boundary
;
1913 var points
= this.layout_
.points
[setIdx
];
1914 if (rowIdx
>= points
.length
) continue;
1915 var p1
= points
[rowIdx
];
1916 if (!Dygraph
.isValidPoint(p1
)) continue;
1917 var py
= p1
.canvasy
;
1918 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1919 // interpolate series Y value using next point
1920 var p2
= points
[rowIdx
+ 1];
1921 if (Dygraph
.isValidPoint(p2
)) {
1922 var dx
= p2
.canvasx
- p1
.canvasx
;
1924 var r
= (domX
- p1
.canvasx
) / dx
;
1925 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1928 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1929 // interpolate series Y value using previous point
1930 var p0
= points
[rowIdx
- 1];
1931 if (Dygraph
.isValidPoint(p0
)) {
1932 var dx
= p1
.canvasx
- p0
.canvasx
;
1934 var r
= (p1
.canvasx
- domX
) / dx
;
1935 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1939 // Stop if the point (domX, py) is above this series' upper edge
1940 if (setIdx
=== 0 || py
< domY
) {
1942 closestSeries
= setIdx
;
1945 var name
= this.layout_
.setNames
[closestSeries
];
1954 * When the mouse moves in the canvas, display information about a nearby data
1955 * point and draw dots over those points in the data series. This function
1956 * takes care of cleanup of previously-drawn dots.
1957 * @param {Object} event The mousemove event from the browser.
1960 Dygraph
.prototype.mouseMove_
= function(event
) {
1961 // This prevents JS errors when mousing over the canvas before data loads.
1962 var points
= this.layout_
.points
;
1963 if (points
=== undefined
|| points
=== null) return;
1965 var canvasCoords
= this.eventToDomCoords(event
);
1966 var canvasx
= canvasCoords
[0];
1967 var canvasy
= canvasCoords
[1];
1969 var highlightSeriesOpts
= this.getOption("highlightSeriesOpts");
1970 var selectionChanged
= false;
1971 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1973 if (this.getBooleanOption("stackedGraph")) {
1974 closest
= this.findStackedPoint(canvasx
, canvasy
);
1976 closest
= this.findClosestPoint(canvasx
, canvasy
);
1978 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1980 var idx
= this.findClosestRow(canvasx
);
1981 selectionChanged
= this.setSelection(idx
);
1984 var callback
= this.getFunctionOption("highlightCallback");
1985 if (callback
&& selectionChanged
) {
1986 callback
.call(this, event
,
1990 this.highlightSet_
);
1995 * Fetch left offset from the specified set index or if not passed, the
1996 * first defined boundaryIds record (see bug #236).
1999 Dygraph
.prototype.getLeftBoundary_
= function(setIdx
) {
2000 if (this.boundaryIds_
[setIdx
]) {
2001 return this.boundaryIds_
[setIdx
][0];
2003 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
2004 if (this.boundaryIds_
[i
] !== undefined
) {
2005 return this.boundaryIds_
[i
][0];
2012 Dygraph
.prototype.animateSelection_
= function(direction
) {
2013 var totalSteps
= 10;
2015 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
2016 if (this.animateId
=== undefined
) this.animateId
= 0;
2017 var start
= this.fadeLevel
;
2018 var steps
= direction
< 0 ? start
: totalSteps
- start
;
2020 if (this.fadeLevel
) {
2021 this.updateSelection_(1.0);
2026 var thisId
= ++this.animateId
;
2028 Dygraph
.repeatAndCleanup(
2030 // ignore simultaneous animations
2031 if (that
.animateId
!= thisId
) return;
2033 that
.fadeLevel
+= direction
;
2034 if (that
.fadeLevel
=== 0) {
2035 that
.clearSelection();
2037 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
2040 steps
, millis
, function() {});
2044 * Draw dots over the selectied points in the data series. This function
2045 * takes care of cleanup of previously-drawn dots.
2048 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
2049 /*var defaultPrevented = */
2050 this.cascadeEvents_('select', {
2051 selectedRow
: this.lastRow_
,
2052 selectedX
: this.lastx_
,
2053 selectedPoints
: this.selPoints_
2055 // TODO(danvk): use defaultPrevented here?
2057 // Clear the previously drawn vertical, if there is one
2059 var ctx
= this.canvas_ctx_
;
2060 if (this.getOption('highlightSeriesOpts')) {
2061 ctx
.clearRect(0, 0, this.width_
, this.height_
);
2062 var alpha
= 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha');
2064 // Activating background fade includes an animation effect for a gradual
2065 // fade. TODO(klausw): make this independently configurable if it causes
2066 // issues? Use a shared preference to control animations?
2067 var animateBackgroundFade
= true;
2068 if (animateBackgroundFade
) {
2069 if (opt_animFraction
=== undefined
) {
2070 // start a new animation
2071 this.animateSelection_(1);
2074 alpha
*= opt_animFraction
;
2076 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
2077 ctx
.fillRect(0, 0, this.width_
, this.height_
);
2080 // Redraw only the highlighted series in the interactive canvas (not the
2081 // static plot canvas, which is where series are usually drawn).
2082 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
2083 } else if (this.previousVerticalX_
>= 0) {
2084 // Determine the maximum highlight circle size.
2085 var maxCircleSize
= 0;
2086 var labels
= this.attr_('labels');
2087 for (i
= 1; i
< labels
.length
; i
++) {
2088 var r
= this.getNumericOption('highlightCircleSize', labels
[i
]);
2089 if (r
> maxCircleSize
) maxCircleSize
= r
;
2091 var px
= this.previousVerticalX_
;
2092 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
2093 2 * maxCircleSize
+ 2, this.height_
);
2096 if (this.selPoints_
.length
> 0) {
2097 // Draw colored circles over the center of each selected point
2098 var canvasx
= this.selPoints_
[0].canvasx
;
2100 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
2101 var pt
= this.selPoints_
[i
];
2102 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
2104 var circleSize
= this.getNumericOption('highlightCircleSize', pt
.name
);
2105 var callback
= this.getFunctionOption("drawHighlightPointCallback", pt
.name
);
2106 var color
= this.plotter_
.colors
[pt
.name
];
2108 callback
= Dygraph
.Circles
.DEFAULT
;
2110 ctx
.lineWidth
= this.getNumericOption('strokeWidth', pt
.name
);
2111 ctx
.strokeStyle
= color
;
2112 ctx
.fillStyle
= color
;
2113 callback
.call(this, this, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
2114 color
, circleSize
, pt
.idx
);
2118 this.previousVerticalX_
= canvasx
;
2123 * Manually set the selected points and display information about them in the
2124 * legend. The selection can be cleared using clearSelection() and queried
2125 * using getSelection().
2126 * @param {number} row Row number that should be highlighted (i.e. appear with
2127 * hover dots on the chart).
2128 * @param {seriesName} optional series name to highlight that series with the
2129 * the highlightSeriesOpts setting.
2130 * @param { locked } optional If true, keep seriesName selected when mousing
2131 * over the graph, disabling closest-series highlighting. Call clearSelection()
2134 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
2135 // Extract the points we've selected
2136 this.selPoints_
= [];
2138 var changed
= false;
2139 if (row
!== false && row
>= 0) {
2140 if (row
!= this.lastRow_
) changed
= true;
2141 this.lastRow_
= row
;
2142 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
2143 var points
= this.layout_
.points
[setIdx
];
2144 // Check if the point at the appropriate index is the point we're looking
2145 // for. If it is, just use it, otherwise search the array for a point
2146 // in the proper place.
2147 var setRow
= row
- this.getLeftBoundary_(setIdx
);
2148 if (setRow
< points
.length
&& points
[setRow
].idx
== row
) {
2149 var point
= points
[setRow
];
2150 if (point
.yval
!== null) this.selPoints_
.push(point
);
2152 for (var pointIdx
= 0; pointIdx
< points
.length
; ++pointIdx
) {
2153 var point
= points
[pointIdx
];
2154 if (point
.idx
== row
) {
2155 if (point
.yval
!== null) {
2156 this.selPoints_
.push(point
);
2164 if (this.lastRow_
>= 0) changed
= true;
2168 if (this.selPoints_
.length
) {
2169 this.lastx_
= this.selPoints_
[0].xval
;
2174 if (opt_seriesName
!== undefined
) {
2175 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
2176 this.highlightSet_
= opt_seriesName
;
2179 if (opt_locked
!== undefined
) {
2180 this.lockedSet_
= opt_locked
;
2184 this.updateSelection_(undefined
);
2190 * The mouse has left the canvas. Clear out whatever artifacts remain
2191 * @param {Object} event the mouseout event from the browser.
2194 Dygraph
.prototype.mouseOut_
= function(event
) {
2195 if (this.getFunctionOption("unhighlightCallback")) {
2196 this.getFunctionOption("unhighlightCallback").call(this, event
);
2199 if (this.getBooleanOption("hideOverlayOnMouseOut") && !this.lockedSet_
) {
2200 this.clearSelection();
2205 * Clears the current selection (i.e. points that were highlighted by moving
2206 * the mouse over the chart).
2208 Dygraph
.prototype.clearSelection
= function() {
2209 this.cascadeEvents_('deselect', {});
2211 this.lockedSet_
= false;
2212 // Get rid of the overlay data
2213 if (this.fadeLevel
) {
2214 this.animateSelection_(-1);
2217 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2219 this.selPoints_
= [];
2222 this.highlightSet_
= null;
2226 * Returns the number of the currently selected row. To get data for this row,
2227 * you can use the getValue method.
2228 * @return {number} row number, or -1 if nothing is selected
2230 Dygraph
.prototype.getSelection
= function() {
2231 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2235 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2236 var points
= this.layout_
.points
[setIdx
];
2237 for (var row
= 0; row
< points
.length
; row
++) {
2238 if (points
[row
].x
== this.selPoints_
[0].x
) {
2239 return points
[row
].idx
;
2247 * Returns the name of the currently-highlighted series.
2248 * Only available when the highlightSeriesOpts option is in use.
2250 Dygraph
.prototype.getHighlightSeries
= function() {
2251 return this.highlightSet_
;
2255 * Returns true if the currently-highlighted series was locked
2256 * via setSelection(..., seriesName, true).
2258 Dygraph
.prototype.isSeriesLocked
= function() {
2259 return this.lockedSet_
;
2263 * Fires when there's data available to be graphed.
2264 * @param {string} data Raw CSV data to be plotted
2267 Dygraph
.prototype.loadedEvent_
= function(data
) {
2268 this.rawData_
= this.parseCSV_(data
);
2269 this.cascadeDataDidUpdateEvent_();
2274 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2277 Dygraph
.prototype.addXTicks_
= function() {
2278 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2280 if (this.dateWindow_
) {
2281 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2283 range
= this.xAxisExtremes();
2286 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2287 var xTicks
= xAxisOptionsView('ticker')(
2290 this.plotter_
.area
.w
, // TODO(danvk): should be area.width
2293 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2294 // console.log(msg);
2295 this.layout_
.setXTicks(xTicks
);
2299 * Returns the correct handler class for the currently set options.
2302 Dygraph
.prototype.getHandlerClass_
= function() {
2304 if (this.attr_('dataHandler')) {
2305 handlerClass
= this.attr_('dataHandler');
2306 } else if (this.fractions_
) {
2307 if (this.getBooleanOption('errorBars')) {
2308 handlerClass
= Dygraph
.DataHandlers
.FractionsBarsHandler
;
2310 handlerClass
= Dygraph
.DataHandlers
.DefaultFractionHandler
;
2312 } else if (this.getBooleanOption('customBars')) {
2313 handlerClass
= Dygraph
.DataHandlers
.CustomBarsHandler
;
2314 } else if (this.getBooleanOption('errorBars')) {
2315 handlerClass
= Dygraph
.DataHandlers
.ErrorBarsHandler
;
2317 handlerClass
= Dygraph
.DataHandlers
.DefaultHandler
;
2319 return handlerClass
;
2324 * This function is called once when the chart's data is changed or the options
2325 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2326 * idea is that values derived from the chart's data can be computed here,
2327 * rather than every time the chart is drawn. This includes things like the
2328 * number of axes, rolling averages, etc.
2330 Dygraph
.prototype.predraw_
= function() {
2331 var start
= new Date();
2333 // Create the correct dataHandler
2334 this.dataHandler_
= new (this.getHandlerClass_())();
2336 this.layout_
.computePlotArea();
2338 // TODO(danvk): move more computations out of drawGraph_ and into here.
2339 this.computeYAxes_();
2341 if (!this.is_initial_draw_
) {
2342 this.canvas_ctx_
.restore();
2343 this.hidden_ctx_
.restore();
2346 this.canvas_ctx_
.save();
2347 this.hidden_ctx_
.save();
2349 // Create a new plotter.
2350 this.plotter_
= new DygraphCanvasRenderer(this,
2355 // The roller sits in the bottom left corner of the chart. We don't know where
2356 // this will be until the options are available, so it's positioned here.
2357 this.createRollInterface_();
2359 this.cascadeEvents_('predraw');
2361 // Convert the raw data (a 2D array) into the internal format and compute
2362 // rolling averages.
2363 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2364 for (var i
= 1; i
< this.numColumns(); i
++) {
2365 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2366 var series
= this.dataHandler_
.extractSeries(this.rawData_
, i
, this.attributes_
);
2367 if (this.rollPeriod_
> 1) {
2368 series
= this.dataHandler_
.rollingAverage(series
, this.rollPeriod_
, this.attributes_
);
2371 this.rolledSeries_
.push(series
);
2374 // If the data or options have changed, then we'd better redraw.
2377 // This is used to determine whether to do various animations.
2378 var end
= new Date();
2379 this.drawingTimeMs_
= (end
- start
);
2385 * xval_* and yval_* are the original unscaled data values,
2386 * while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
2387 * yval_stacked is the cumulative Y value used for stacking graphs,
2388 * and bottom/top/minus/plus are used for error bar graphs.
2395 * y_bottom: ?number,
2397 * y_stacked: ?number,
2399 * yval_minus: ?number,
2401 * yval_plus: ?number,
2405 Dygraph
.PointType
= undefined
;
2408 * Calculates point stacking for stackedGraph=true.
2410 * For stacking purposes, interpolate or extend neighboring data across
2411 * NaN values based on stackedGraphNaNFill settings. This is for display
2412 * only, the underlying data value as shown in the legend remains NaN.
2414 * @param {Array.<Dygraph.PointType>} points Point array for a single series.
2415 * Updates each Point's yval_stacked property.
2416 * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y
2417 * values for the series seen so far. Index is the row number. Updated
2418 * based on the current series's values.
2419 * @param {Array.<number>} seriesExtremes Min and max values, updated
2420 * to reflect the stacked values.
2421 * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or
2425 Dygraph
.stackPoints_
= function(
2426 points
, cumulativeYval
, seriesExtremes
, fillMethod
) {
2427 var lastXval
= null;
2428 var prevPoint
= null;
2429 var nextPoint
= null;
2430 var nextPointIdx
= -1;
2432 // Find the next stackable point starting from the given index.
2433 var updateNextPoint
= function(idx
) {
2434 // If we've previously found a non-NaN point and haven't gone past it yet,
2436 if (nextPointIdx
>= idx
) return;
2438 // We haven't found a non-NaN point yet or have moved past it,
2439 // look towards the right to find a non-NaN point.
2440 for (var j
= idx
; j
< points
.length
; ++j
) {
2441 // Clear out a previously-found point (if any) since it's no longer
2442 // valid, we shouldn't use it for interpolation anymore.
2444 if (!isNaN(points
[j
].yval
) && points
[j
].yval
!== null) {
2446 nextPoint
= points
[j
];
2452 for (var i
= 0; i
< points
.length
; ++i
) {
2453 var point
= points
[i
];
2454 var xval
= point
.xval
;
2455 if (cumulativeYval
[xval
] === undefined
) {
2456 cumulativeYval
[xval
] = 0;
2459 var actualYval
= point
.yval
;
2460 if (isNaN(actualYval
) || actualYval
=== null) {
2461 if(fillMethod
== 'none') {
2464 // Interpolate/extend
for stacking purposes
if possible
.
2466 if (prevPoint
&& nextPoint
&& fillMethod
!= 'none') {
2467 // Use linear interpolation between prevPoint and nextPoint.
2468 actualYval
= prevPoint
.yval
+ (nextPoint
.yval
- prevPoint
.yval
) *
2469 ((xval
- prevPoint
.xval
) / (nextPoint
.xval
- prevPoint
.xval
));
2470 } else if (prevPoint
&& fillMethod
== 'all') {
2471 actualYval
= prevPoint
.yval
;
2472 } else if (nextPoint
&& fillMethod
== 'all') {
2473 actualYval
= nextPoint
.yval
;
2482 var stackedYval
= cumulativeYval
[xval
];
2483 if (lastXval
!= xval
) {
2484 // If an x-value is repeated, we ignore the duplicates.
2485 stackedYval
+= actualYval
;
2486 cumulativeYval
[xval
] = stackedYval
;
2490 point
.yval_stacked
= stackedYval
;
2492 if (stackedYval
> seriesExtremes
[1]) {
2493 seriesExtremes
[1] = stackedYval
;
2495 if (stackedYval
< seriesExtremes
[0]) {
2496 seriesExtremes
[0] = stackedYval
;
2503 * Loop over all fields and create datasets, calculating extreme y-values for
2504 * each series and extreme x-indices as we go.
2506 * dateWindow is passed in as an explicit parameter so that we can compute
2507 * extreme values "speculatively", i.e. without actually setting state on the
2510 * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2511 * rolledSeries[seriesIndex][row] = raw point, where
2512 * seriesIndex is the column number starting with 1, and
2513 * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2514 * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2516 * points: Array.<Array.<Dygraph.PointType>>,
2517 * seriesExtremes: Array.<Array.<number>>,
2518 * boundaryIds: Array.<number>}}
2521 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2522 var boundaryIds
= [];
2524 var cumulativeYval
= []; // For stacked series.
2525 var extremes
= {}; // series name -> [low, high]
2526 var seriesIdx
, sampleIdx
;
2527 var firstIdx
, lastIdx
;
2530 // Loop over the fields (series). Go from the last to the first,
2531 // because if they're stacked that's how we accumulate the values.
2532 var num_series
= rolledSeries
.length
- 1;
2534 for (seriesIdx
= num_series
; seriesIdx
>= 1; seriesIdx
--) {
2535 if (!this.visibility()[seriesIdx
- 1]) continue;
2537 // Prune down to the desired range, if necessary (for zooming)
2538 // Because there can be lines going to points outside of the visible area,
2539 // we actually prune to visible points, plus one on either side.
2541 series
= rolledSeries
[seriesIdx
];
2542 var low
= dateWindow
[0];
2543 var high
= dateWindow
[1];
2545 // TODO(danvk): do binary search instead of linear search.
2546 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2549 for (sampleIdx
= 0; sampleIdx
< series
.length
; sampleIdx
++) {
2550 if (series
[sampleIdx
][0] >= low
&& firstIdx
=== null) {
2551 firstIdx
= sampleIdx
;
2553 if (series
[sampleIdx
][0] <= high
) {
2554 lastIdx
= sampleIdx
;
2558 if (firstIdx
=== null) firstIdx
= 0;
2559 var correctedFirstIdx
= firstIdx
;
2560 var isInvalidValue
= true;
2561 while (isInvalidValue
&& correctedFirstIdx
> 0) {
2562 correctedFirstIdx
--;
2563 // check if the y value is null.
2564 isInvalidValue
= series
[correctedFirstIdx
][1] === null;
2567 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2568 var correctedLastIdx
= lastIdx
;
2569 isInvalidValue
= true;
2570 while (isInvalidValue
&& correctedLastIdx
< series
.length
- 1) {
2572 isInvalidValue
= series
[correctedLastIdx
][1] === null;
2575 if (correctedFirstIdx
!==firstIdx
) {
2576 firstIdx
= correctedFirstIdx
;
2578 if (correctedLastIdx
!== lastIdx
) {
2579 lastIdx
= correctedLastIdx
;
2582 boundaryIds
[seriesIdx
-1] = [firstIdx
, lastIdx
];
2584 // .slice's end is exclusive, we want to include lastIdx.
2585 series
= series
.slice(firstIdx
, lastIdx
+ 1);
2587 series
= rolledSeries
[seriesIdx
];
2588 boundaryIds
[seriesIdx
-1] = [0, series
.length
-1];
2591 var seriesName
= this.attr_("labels")[seriesIdx
];
2592 var seriesExtremes
= this.dataHandler_
.getExtremeYValues(series
,
2593 dateWindow
, this.getBooleanOption("stepPlot",seriesName
));
2595 var seriesPoints
= this.dataHandler_
.seriesToPoints(series
,
2596 seriesName
, boundaryIds
[seriesIdx
-1][0]);
2598 if (this.getBooleanOption("stackedGraph")) {
2599 axisIdx
= this.attributes_
.axisForSeries(seriesName
);
2600 if (cumulativeYval
[axisIdx
] === undefined
) {
2601 cumulativeYval
[axisIdx
] = [];
2603 Dygraph
.stackPoints_(seriesPoints
, cumulativeYval
[axisIdx
], seriesExtremes
,
2604 this.getBooleanOption("stackedGraphNaNFill"));
2607 extremes
[seriesName
] = seriesExtremes
;
2608 points
[seriesIdx
] = seriesPoints
;
2611 return { points
: points
, extremes
: extremes
, boundaryIds
: boundaryIds
};
2615 * Update the graph with new data. This method is called when the viewing area
2616 * has changed. If the underlying data or options have changed, predraw_ will
2617 * be called before drawGraph_ is called.
2621 Dygraph
.prototype.drawGraph_
= function() {
2622 var start
= new Date();
2624 // This is used to set the second parameter to drawCallback, below.
2625 var is_initial_draw
= this.is_initial_draw_
;
2626 this.is_initial_draw_
= false;
2628 this.layout_
.removeAllDatasets();
2630 this.attrs_
.pointSize
= 0.5 * this.getNumericOption('highlightCircleSize');
2632 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2633 var points
= packed
.points
;
2634 var extremes
= packed
.extremes
;
2635 this.boundaryIds_
= packed
.boundaryIds
;
2637 this.setIndexByName_
= {};
2638 var labels
= this.attr_("labels");
2639 if (labels
.length
> 0) {
2640 this.setIndexByName_
[labels
[0]] = 0;
2643 for (var i
= 1; i
< points
.length
; i
++) {
2644 this.setIndexByName_
[labels
[i
]] = i
;
2645 if (!this.visibility()[i
- 1]) continue;
2646 this.layout_
.addDataset(labels
[i
], points
[i
]);
2647 this.datasetIndex_
[i
] = dataIdx
++;
2650 this.computeYAxisRanges_(extremes
);
2651 this.layout_
.setYAxes(this.axes_
);
2655 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2656 var tmp_zoomed_x
= this.zoomed_x_
;
2657 // Tell PlotKit to use this new data and render itself
2658 this.zoomed_x_
= tmp_zoomed_x
;
2659 this.layout_
.evaluate();
2660 this.renderGraph_(is_initial_draw
);
2662 if (this.getStringOption("timingName")) {
2663 var end
= new Date();
2664 console
.log(this.getStringOption("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2669 * This does the work of drawing the chart. It assumes that the layout and axis
2670 * scales have already been set (e.g. by predraw_).
2674 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2675 this.cascadeEvents_('clearChart');
2676 this.plotter_
.clear();
2678 if (this.getFunctionOption('underlayCallback')) {
2679 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2680 // users who expect a deprecated form of this callback.
2681 this.getFunctionOption('underlayCallback').call(this,
2682 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2686 canvas
: this.hidden_
,
2687 drawingContext
: this.hidden_ctx_
2689 this.cascadeEvents_('willDrawChart', e
);
2690 this.plotter_
.render();
2691 this.cascadeEvents_('didDrawChart', e
);
2692 this.lastRow_
= -1; // because plugins/legend.js clears the legend
2694 // TODO(danvk): is this a performance bottleneck when panning?
2695 // The interaction canvas should already be empty in that situation.
2696 this.canvas_
.getContext('2d').clearRect(0, 0, this.width_
, this.height_
);
2698 if (this.getFunctionOption("drawCallback") !== null) {
2699 this.getFunctionOption("drawCallback")(this, is_initial_draw
);
2701 if (is_initial_draw
) {
2702 this.readyFired_
= true;
2703 while (this.readyFns_
.length
> 0) {
2704 var fn
= this.readyFns_
.pop();
2712 * Determine properties of the y-axes which are independent of the data
2713 * currently being displayed. This includes things like the number of axes and
2714 * the style of the axes. It does not include the range of each axis and its
2716 * This fills in this.axes_.
2717 * axes_ = [ { options } ]
2718 * indices are into the axes_ array.
2720 Dygraph
.prototype.computeYAxes_
= function() {
2721 // Preserve valueWindow settings if they exist, and if the user hasn't
2722 // specified a new valueRange.
2723 var valueWindows
, axis
, index
, opts
, v
;
2724 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2726 for (index
= 0; index
< this.axes_
.length
; index
++) {
2727 valueWindows
.push(this.axes_
[index
].valueWindow
);
2731 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2732 // data computation as well as options storage.
2733 // Go through once and add all the axes.
2736 for (axis
= 0; axis
< this.attributes_
.numAxes(); axis
++) {
2737 // Add a new axis, making a copy of its per-axis options.
2738 opts
= { g
: this };
2739 Dygraph
.update(opts
, this.attributes_
.axisOptions(axis
));
2740 this.axes_
[axis
] = opts
;
2744 // Copy global valueRange option over to the first axis.
2745 // NOTE(konigsberg): Are these two statements necessary?
2746 // I tried removing it. The automated tests pass, and manually
2747 // messing with tests/zoom
.html showed no trouble
.
2748 v
= this.attr_('valueRange');
2749 if (v
) this.axes_
[0].valueRange
= v
;
2751 if (valueWindows
!== undefined
) {
2752 // Restore valueWindow settings.
2754 // When going from two axes back to one, we only restore
2756 var idxCount
= Math
.min(valueWindows
.length
, this.axes_
.length
);
2758 for (index
= 0; index
< idxCount
; index
++) {
2759 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2763 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2765 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2766 v
= opts("valueRange");
2767 if (v
) this.axes_
[axis
].valueRange
= v
;
2768 } else { // To keep old behavior
2769 var axes
= this.user_attrs_
.axes
;
2770 if (axes
&& axes
.y2
) {
2771 v
= axes
.y2
.valueRange
;
2772 if (v
) this.axes_
[axis
].valueRange
= v
;
2779 * Returns the number of y-axes on the chart.
2780 * @return {number} the number of axes.
2782 Dygraph
.prototype.numAxes
= function() {
2783 return this.attributes_
.numAxes();
2788 * Returns axis properties for the given series.
2789 * @param {string} setName The name of the series for which to get axis
2790 * properties, e.g. 'Y1'.
2791 * @return {Object} The axis properties.
2793 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2794 // TODO(danvk): handle errors.
2795 return this.axes_
[this.attributes_
.axisForSeries(series
)];
2800 * Determine the value range and tick marks for each axis.
2801 * @param {Object} extremes A mapping from seriesName -> [low, high]
2802 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2804 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2805 var isNullUndefinedOrNaN
= function(num
) {
2806 return isNaN(parseFloat(num
));
2808 var numAxes
= this.attributes_
.numAxes();
2809 var ypadCompat
, span
, series
, ypad
;
2813 // Compute extreme values, a span and tick marks for each axis.
2814 for (var i
= 0; i
< numAxes
; i
++) {
2815 var axis
= this.axes_
[i
];
2816 var logscale
= this.attributes_
.getForAxis("logscale", i
);
2817 var includeZero
= this.attributes_
.getForAxis("includeZero", i
);
2818 var independentTicks
= this.attributes_
.getForAxis("independentTicks", i
);
2819 series
= this.attributes_
.seriesForAxis(i
);
2821 // Add some padding. This supports two Y padding operation modes:
2823 // - backwards compatible (yRangePad not set):
2824 // 10% padding for automatic Y ranges, but not for user-supplied
2825 // ranges, and move a close-to-zero edge to zero except if
2826 // avoidMinZero is set, since drawing at the edge results in
2827 // invisible lines. Unfortunately lines drawn at the edge of a
2828 // user-supplied range will still be invisible. If logscale is
2829 // set, add a variable amount of padding at the top but
2830 // none at the bottom.
2832 // - new-style (yRangePad set by the user):
2833 // always add the specified Y padding.
2836 ypad
= 0.1; // add 10%
2837 if (this.getNumericOption('yRangePad') !== null) {
2839 // Convert pixel padding to ratio
2840 ypad
= this.getNumericOption('yRangePad') / this.plotter_
.area
.h
;
2843 if (series
.length
=== 0) {
2844 // If no series are defined or visible then use a reasonable default
2845 axis
.extremeRange
= [0, 1];
2847 // Calculate the extremes of extremes.
2848 var minY
= Infinity
; // extremes[series[0]][0];
2849 var maxY
= -Infinity
; // extremes[series[0]][1];
2850 var extremeMinY
, extremeMaxY
;
2852 for (var j
= 0; j
< series
.length
; j
++) {
2853 // this skips invisible series
2854 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2856 // Only use valid extremes to stop null data series' from corrupting the scale.
2857 extremeMinY
= extremes
[series
[j
]][0];
2858 if (extremeMinY
!== null) {
2859 minY
= Math
.min(extremeMinY
, minY
);
2861 extremeMaxY
= extremes
[series
[j
]][1];
2862 if (extremeMaxY
!== null) {
2863 maxY
= Math
.max(extremeMaxY
, maxY
);
2867 // Include zero if requested by the user.
2868 if (includeZero
&& !logscale
) {
2869 if (minY
> 0) minY
= 0;
2870 if (maxY
< 0) maxY
= 0;
2873 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2874 if (minY
== Infinity
) minY
= 0;
2875 if (maxY
== -Infinity
) maxY
= 1;
2878 // special case: if we have no sense of scale, center on the sole value.
2881 span
= Math
.abs(maxY
);
2883 // ... and if the sole value is zero, use range 0-1.
2889 var maxAxisY
, minAxisY
;
2892 maxAxisY
= maxY
+ ypad
* span
;
2895 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2896 maxAxisY
= maxY
* logpad
;
2897 minAxisY
= minY
/ logpad
;
2900 maxAxisY
= maxY
+ ypad
* span
;
2901 minAxisY
= minY
- ypad
* span
;
2903 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2904 // close to zero, but not if avoidMinZero is set.
2905 if (ypadCompat
&& !this.getBooleanOption("avoidMinZero")) {
2906 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2907 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2910 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2912 if (axis
.valueWindow
) {
2913 // This is only set if the user has zoomed on the y-axis. It is never set
2914 // by a user. It takes precedence over axis.valueRange because, if you set
2915 // valueRange, you'd still expect to be able to pan.
2916 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2917 } else if (axis
.valueRange
) {
2918 // This is a user-set value range for this axis.
2919 var y0
= isNullUndefinedOrNaN(axis
.valueRange
[0]) ? axis
.extremeRange
[0] : axis
.valueRange
[0];
2920 var y1
= isNullUndefinedOrNaN(axis
.valueRange
[1]) ? axis
.extremeRange
[1] : axis
.valueRange
[1];
2922 if (axis
.logscale
) {
2923 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2932 axis
.computedValueRange
= [y0
, y1
];
2934 axis
.computedValueRange
= axis
.extremeRange
;
2938 if (independentTicks
) {
2939 axis
.independentTicks
= independentTicks
;
2940 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2941 var ticker
= opts('ticker');
2942 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2943 axis
.computedValueRange
[1],
2944 this.plotter_
.area
.h
,
2947 // Define the first independent axis as primary axis.
2948 if (!p_axis
) p_axis
= axis
;
2951 if (p_axis
=== undefined
) {
2952 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
2954 // Add ticks. By default, all axes inherit the tick positions of the
2955 // primary axis. However, if an axis is specifically marked as having
2956 // independent ticks, then that is permissible as well.
2957 for (var i
= 0; i
< numAxes
; i
++) {
2958 var axis
= this.axes_
[i
];
2960 if (!axis
.independentTicks
) {
2961 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2962 var ticker
= opts('ticker');
2963 var p_ticks
= p_axis
.ticks
;
2964 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2965 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2966 var tick_values
= [];
2967 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2968 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2969 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2970 tick_values
.push(y_val
);
2973 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2974 axis
.computedValueRange
[1],
2975 this.plotter_
.area
.h
,
2984 * Detects the type of the str (date or numeric) and sets the various
2985 * formatting attributes in this.attrs_ based on this type.
2986 * @param {string} str An x value.
2989 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2991 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2992 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
2993 str
.indexOf('/') >= 0 ||
2994 isNaN(parseFloat(str
))) {
2996 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2997 // TODO(danvk): remove support for this format.
3001 this.setXAxisOptions_(isDate
);
3004 Dygraph
.prototype.setXAxisOptions_
= function(isDate
) {
3006 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3007 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateValueFormatter
;
3008 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3009 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisLabelFormatter
;
3011 /** @private (shut up, jsdoc!) */
3012 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3013 // TODO(danvk): use Dygraph.numberValueFormatter here?
3014 /** @private (shut up, jsdoc!) */
3015 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3016 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3017 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3023 * Parses a string in a special csv format. We expect a csv file where each
3024 * line is a date point, and the first field in each line is the date string.
3025 * We also expect that all remaining fields represent series.
3026 * if the errorBars attribute is set, then interpret the fields as:
3027 * date, series1, stddev1, series2, stddev2, ...
3028 * @param {[Object]} data See above.
3030 * @return [Object] An array with one entry for each row. These entries
3031 * are an array of cells in that row. The first entry is the parsed x-value for
3032 * the row. The second, third, etc. are the y-values. These can take on one of
3033 * three forms, depending on the CSV and constructor parameters:
3035 * 2. [ value, stddev ]
3036 * 3. [ low value, center value, high value ]
3038 Dygraph
.prototype.parseCSV_
= function(data
) {
3040 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3041 var lines
= data
.split(line_delimiter
|| "\n");
3044 // Use the default delimiter or fall back to a tab if that makes sense.
3045 var delim
= this.getStringOption('delimiter');
3046 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3051 if (!('labels' in this.user_attrs_
)) {
3052 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
3054 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
3055 this.attributes_
.reparseSeries();
3060 var defaultParserSet
= false; // attempt to auto-detect x value type
3061 var expectedCols
= this.attr_("labels").length
;
3062 var outOfOrder
= false;
3063 for (var i
= start
; i
< lines
.length
; i
++) {
3064 var line
= lines
[i
];
3066 if (line
.length
=== 0) continue; // skip blank lines
3067 if (line
[0] == '#') continue; // skip comment lines
3068 var inFields
= line
.split(delim
);
3069 if (inFields
.length
< 2) continue;
3072 if (!defaultParserSet
) {
3073 this.detectTypeFromString_(inFields
[0]);
3074 xParser
= this.getFunctionOption("xValueParser");
3075 defaultParserSet
= true;
3077 fields
[0] = xParser(inFields
[0], this);
3079 // If fractions are expected, parse the numbers as "A/B
"
3080 if (this.fractions_) {
3081 for (j = 1; j < inFields.length; j++) {
3082 // TODO(danvk): figure out an appropriate way to flag parse errors.
3083 vals = inFields[j].split("/");
3084 if (vals.length != 2) {
3085 console.error('Expected fractional "num
/den
" values in CSV data ' +
3086 "but found a value
'" + inFields[j] + "' on line
" +
3087 (1 + i) + " ('" + line + "') which is not of
this form
.");
3090 fields[j] = [Dygraph.parseFloat_(vals[0], i, line),
3091 Dygraph.parseFloat_(vals[1], i, line)];
3094 } else if (this.getBooleanOption("errorBars
")) {
3095 // If there are error bars, values are (value, stddev) pairs
3096 if (inFields.length % 2 != 1) {
3097 console.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3098 'but line ' + (1 + i) + ' has an odd number of values (' +
3099 (inFields.length - 1) + "): '" + line + "'");
3101 for (j = 1; j < inFields.length; j += 2) {
3102 fields[(j + 1) / 2] = [Dygraph.parseFloat_(inFields[j], i, line),
3103 Dygraph.parseFloat_(inFields[j + 1], i, line)];
3105 } else if (this.getBooleanOption("customBars
")) {
3106 // Bars are a low;center;high tuple
3107 for (j = 1; j < inFields.length; j++) {
3108 var val = inFields[j];
3109 if (/^ *$/.test(val)) {
3110 fields[j] = [null, null, null];
3112 vals = val.split(";");
3113 if (vals.length == 3) {
3114 fields[j] = [ Dygraph.parseFloat_(vals[0], i, line),
3115 Dygraph.parseFloat_(vals[1], i, line),
3116 Dygraph.parseFloat_(vals[2], i, line) ];
3118 console.warn('When using customBars, values must be either blank ' +
3119 'or "low
;center
;high
" tuples (got "' + val +
3120 '" on line ' + (1+i));
3125 // Values are just numbers
3126 for (j = 1; j < inFields.length; j++) {
3127 fields[j] = Dygraph.parseFloat_(inFields[j], i, line);
3130 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3134 if (fields.length != expectedCols) {
3135 console.error("Number of columns
in line
" + i + " (" + fields.length +
3136 ") does not agree
with number of
labels (" + expectedCols +
3140 // If the user specified the 'labels' option and none of the cells of the
3141 // first row parsed correctly, then they probably double-specified the
3142 // labels. We go with the values set in the option, discard this row and
3143 // log a warning to the JS console.
3144 if (i === 0 && this.attr_('labels')) {
3145 var all_null = true;
3146 for (j = 0; all_null && j < fields.length; j++) {
3147 if (fields[j]) all_null = false;
3150 console.warn("The dygraphs
'labels' option is set
, but the first row
" +
3151 "of CSV
data ('" + line + "') appears to also contain
" +
3152 "labels
. Will drop the CSV labels and
use the option
" +
3161 console.warn("CSV is out of order
; order it correctly to speed loading
.");
3162 ret.sort(function(a,b) { return a[0] - b[0]; });
3169 * The user has provided their data as a pre-packaged JS array. If the x values
3170 * are numeric, this is the same as dygraphs' internal format. If the x values
3171 * are dates, we need to convert them from Date objects to ms since epoch.
3172 * @param {!Array} data
3173 * @return {Object} data with numeric x values.
3176 Dygraph.prototype.parseArray_ = function(data) {
3177 // Peek at the first x value to see if it's numeric.
3178 if (data.length === 0) {
3179 console.error("Can
't plot empty data set");
3182 if (data[0].length === 0) {
3183 console.error("Data set cannot contain an empty row");
3188 if (this.attr_("labels") === null) {
3189 console.warn("Using default labels. Set labels explicitly via 'labels
' " +
3190 "in the options parameter");
3191 this.attrs_.labels = [ "X" ];
3192 for (i = 1; i < data[0].length; i++) {
3193 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
3195 this.attributes_.reparseSeries();
3197 var num_labels = this.attr_("labels");
3198 if (num_labels.length != data[0].length) {
3199 console.error("Mismatch between number of labels (" + num_labels + ")" +
3200 " and number of columns in array (" + data[0].length + ")");
3205 if (Dygraph.isDateLike(data[0][0])) {
3206 // Some intelligent defaults for a date x-axis.
3207 this.attrs_.axes.x.valueFormatter = Dygraph.dateValueFormatter;
3208 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3209 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisLabelFormatter;
3211 // Assume they're all dates
.
3212 var parsedData
= Dygraph
.clone(data
);
3213 for (i
= 0; i
< data
.length
; i
++) {
3214 if (parsedData
[i
].length
=== 0) {
3215 console
.error("Row " + (1 + i
) + " of data is empty");
3218 if (parsedData
[i
][0] === null ||
3219 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3220 isNaN(parsedData
[i
][0].getTime())) {
3221 console
.error("x value in row " + (1 + i
) + " is not a Date");
3224 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3228 // Some intelligent defaults for a numeric x-axis.
3229 /** @private (shut up, jsdoc!) */
3230 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3231 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3232 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3238 * Parses a DataTable object from gviz.
3239 * The data is expected to have a first column that is either a date or a
3240 * number. All subsequent columns must be numbers. If there is a clear mismatch
3241 * between this.xValueParser_ and the type of the first column, it will be
3242 * fixed. Fills out rawData_.
3243 * @param {!google.visualization.DataTable} data See above.
3246 Dygraph
.prototype.parseDataTable_
= function(data
) {
3247 var shortTextForAnnotationNum
= function(num
) {
3248 // converts [0-9]+ [A-Z][a-z]*
3249 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3250 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3251 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3252 num
= Math
.floor(num
/ 26);
3254 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3255 num
= Math
.floor((num
- 1) / 26);
3260 var cols
= data
.getNumberOfColumns();
3261 var rows
= data
.getNumberOfRows();
3263 var indepType
= data
.getColumnType(0);
3264 if (indepType
== 'date' || indepType
== 'datetime') {
3265 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3266 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateValueFormatter
;
3267 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3268 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisLabelFormatter
;
3269 } else if (indepType
== 'number') {
3270 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3271 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3272 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
3273 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3275 console
.error("only 'date', 'datetime' and 'number' types are supported " +
3276 "for column 1 of DataTable input (Got '" + indepType
+ "')");
3280 // Array of the column indices which contain data (and not annotations).
3282 var annotationCols
= {}; // data index -> [annotation cols]
3283 var hasAnnotations
= false;
3285 for (i
= 1; i
< cols
; i
++) {
3286 var type
= data
.getColumnType(i
);
3287 if (type
== 'number') {
3289 } else if (type
== 'string' && this.getBooleanOption('displayAnnotations')) {
3290 // This is OK -- it's an annotation column.
3291 var dataIdx
= colIdx
[colIdx
.length
- 1];
3292 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3293 annotationCols
[dataIdx
] = [i
];
3295 annotationCols
[dataIdx
].push(i
);
3297 hasAnnotations
= true;
3299 console
.error("Only 'number' is supported as a dependent type with Gviz." +
3300 " 'string' is only supported if displayAnnotations is true");
3304 // Read column labels
3305 // TODO(danvk): add support back for errorBars
3306 var labels
= [data
.getColumnLabel(0)];
3307 for (i
= 0; i
< colIdx
.length
; i
++) {
3308 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3309 if (this.getBooleanOption("errorBars")) i
+= 1;
3311 this.attrs_
.labels
= labels
;
3312 cols
= labels
.length
;
3315 var outOfOrder
= false;
3316 var annotations
= [];
3317 for (i
= 0; i
< rows
; i
++) {
3319 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3320 data
.getValue(i
, 0) === null) {
3321 console
.warn("Ignoring row " + i
+
3322 " of DataTable because of undefined or null first column.");
3326 if (indepType
== 'date' || indepType
== 'datetime') {
3327 row
.push(data
.getValue(i
, 0).getTime());
3329 row
.push(data
.getValue(i
, 0));
3331 if (!this.getBooleanOption("errorBars")) {
3332 for (j
= 0; j
< colIdx
.length
; j
++) {
3333 var col
= colIdx
[j
];
3334 row
.push(data
.getValue(i
, col
));
3335 if (hasAnnotations
&&
3336 annotationCols
.hasOwnProperty(col
) &&
3337 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3339 ann
.series
= data
.getColumnLabel(col
);
3341 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3343 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3344 if (k
) ann
.text
+= "\n";
3345 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3347 annotations
.push(ann
);
3351 // Strip out infinities, which give dygraphs problems later on.
3352 for (j
= 0; j
< row
.length
; j
++) {
3353 if (!isFinite(row
[j
])) row
[j
] = null;
3356 for (j
= 0; j
< cols
- 1; j
++) {
3357 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3360 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3367 console
.warn("DataTable is out of order; order it correctly to speed loading.");
3368 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3370 this.rawData_
= ret
;
3372 if (annotations
.length
> 0) {
3373 this.setAnnotations(annotations
, true);
3375 this.attributes_
.reparseSeries();
3379 * Signals to plugins that the chart data has updated.
3380 * This happens after the data has updated but before the chart has redrawn.
3382 Dygraph
.prototype.cascadeDataDidUpdateEvent_
= function() {
3383 // TODO(danvk): there are some issues checking xAxisRange() and using
3384 // toDomCoords from handlers of this event. The visible range should be set
3385 // when the chart is drawn, not derived from the data.
3386 this.cascadeEvents_('dataDidUpdate', {});
3390 * Get the CSV data. If it's in a function, call that function. If it's in a
3391 * file, do an XMLHttpRequest to get it.
3394 Dygraph
.prototype.start_
= function() {
3395 var data
= this.file_
;
3397 // Functions can return references of all other types.
3398 if (typeof data
== 'function') {
3402 if (Dygraph
.isArrayLike(data
)) {
3403 this.rawData_
= this.parseArray_(data
);
3404 this.cascadeDataDidUpdateEvent_();
3406 } else if (typeof data
== 'object' &&
3407 typeof data
.getColumnRange
== 'function') {
3408 // must be a DataTable from gviz.
3409 this.parseDataTable_(data
);
3410 this.cascadeDataDidUpdateEvent_();
3412 } else if (typeof data
== 'string') {
3413 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3414 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3415 if (line_delimiter
) {
3416 this.loadedEvent_(data
);
3420 if (window
.XMLHttpRequest
) {
3421 // Firefox, Opera, IE7, and other browsers will use the native object
3422 req
= new XMLHttpRequest();
3424 // IE 5 and 6 will use the ActiveX control
3425 req
= new ActiveXObject("Microsoft.XMLHTTP");
3429 req
.onreadystatechange
= function () {
3430 if (req
.readyState
== 4) {
3431 if (req
.status
=== 200 || // Normal http
3432 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3433 caller
.loadedEvent_(req
.responseText
);
3438 req
.open("GET", data
, true);
3442 console
.error("Unknown data format: " + (typeof data
));
3447 * Changes various properties of the graph. These can include:
3449 * <li>file: changes the source data for the graph</li>
3450 * <li>errorBars: changes whether the data contains stddev</li>
3453 * There's a huge variety of options that can be passed to this method. For a
3454 * full list, see http://dygraphs.com/options.html.
3456 * @param {Object} input_attrs The new properties and values
3457 * @param {boolean} block_redraw Usually the chart is redrawn after every
3458 * call to updateOptions(). If you know better, you can pass true to
3459 * explicitly block the redraw. This can be useful for chaining
3460 * updateOptions() calls, avoiding the occasional infinite loop and
3461 * preventing redraws when it's not necessary (e.g. when updating a
3464 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3465 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3467 // copyUserAttrs_ drops the "file" parameter as a convenience to us.
3468 var file
= input_attrs
.file
;
3469 var attrs
= Dygraph
.copyUserAttrs_(input_attrs
);
3471 // TODO(danvk): this is a mess. Move these options into attr_.
3472 if ('rollPeriod' in attrs
) {
3473 this.rollPeriod_
= attrs
.rollPeriod
;
3475 if ('dateWindow' in attrs
) {
3476 this.dateWindow_
= attrs
.dateWindow
;
3477 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3478 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3481 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3482 this.zoomed_y_
= (attrs
.valueRange
!== null);
3485 // TODO(danvk): validate per-series options.
3490 // highlightCircleSize
3492 // Check if this set options will require new points.
3493 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3495 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3497 this.attributes_
.reparseSeries();
3500 // This event indicates that the data is about to change, but hasn't yet.
3501 // TODO(danvk): support cancelation of the update via this event.
3502 this.cascadeEvents_('dataWillUpdate', {});
3505 if (!block_redraw
) this.start_();
3507 if (!block_redraw
) {
3508 if (requiresNewPoints
) {
3511 this.renderGraph_(false);
3518 * Make a copy of input attributes, removing file as a convenience.
3520 Dygraph
.copyUserAttrs_
= function(attrs
) {
3522 for (var k
in attrs
) {
3523 if (!attrs
.hasOwnProperty(k
)) continue;
3524 if (k
== 'file') continue;
3525 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3531 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3532 * containing div (which has presumably changed size since the dygraph was
3533 * instantiated. If the width/height are specified, the div will be resized.
3535 * This is far more efficient than destroying and re-instantiating a
3536 * Dygraph, since it doesn't have to reparse the underlying data.
3538 * @param {number} width Width (in pixels)
3539 * @param {number} height Height (in pixels)
3541 Dygraph
.prototype.resize
= function(width
, height
) {
3542 if (this.resize_lock
) {
3545 this.resize_lock
= true;
3547 if ((width
=== null) != (height
=== null)) {
3548 console
.warn("Dygraph.resize() should be called with zero parameters or " +
3549 "two non-NULL parameters. Pretending it was zero.");
3550 width
= height
= null;
3553 var old_width
= this.width_
;
3554 var old_height
= this.height_
;
3557 this.maindiv_
.style
.width
= width
+ "px";
3558 this.maindiv_
.style
.height
= height
+ "px";
3559 this.width_
= width
;
3560 this.height_
= height
;
3562 this.width_
= this.maindiv_
.clientWidth
;
3563 this.height_
= this.maindiv_
.clientHeight
;
3566 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3567 // Resizing a canvas erases it, even when the size doesn't change, so
3568 // any resize needs to be followed by a redraw.
3569 this.resizeElements_();
3573 this.resize_lock
= false;
3577 * Adjusts the number of points in the rolling average. Updates the graph to
3578 * reflect the new averaging period.
3579 * @param {number} length Number of points over which to average the data.
3581 Dygraph
.prototype.adjustRoll
= function(length
) {
3582 this.rollPeriod_
= length
;
3587 * Returns a boolean array of visibility statuses.
3589 Dygraph
.prototype.visibility
= function() {
3590 // Do lazy-initialization, so that this happens after we know the number of
3592 if (!this.getOption("visibility")) {
3593 this.attrs_
.visibility
= [];
3595 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3596 while (this.getOption("visibility").length
< this.numColumns() - 1) {
3597 this.attrs_
.visibility
.push(true);
3599 return this.getOption("visibility");
3603 * Changes the visiblity of a series.
3605 * @param {number} num the series index
3606 * @param {boolean} value true or false, identifying the visibility.
3608 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3609 var x
= this.visibility();
3610 if (num
< 0 || num
>= x
.length
) {
3611 console
.warn("invalid series number in setVisibility: " + num
);
3619 * How large of an area will the dygraph render itself in?
3620 * This is used for testing.
3621 * @return A {width: w, height: h} object.
3624 Dygraph
.prototype.size
= function() {
3625 return { width
: this.width_
, height
: this.height_
};
3629 * Update the list of annotations and redraw the chart.
3630 * See dygraphs.com/annotations.html for more info on how to use annotations.
3631 * @param ann {Array} An array of annotation objects.
3632 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3634 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3635 // Only add the annotation CSS rule once we know it will be used.
3636 Dygraph
.addAnnotationRule();
3637 this.annotations_
= ann
;
3638 if (!this.layout_
) {
3639 console
.warn("Tried to setAnnotations before dygraph was ready. " +
3640 "Try setting them in a ready() block. See " +
3641 "dygraphs.com/tests/annotation.html");
3645 this.layout_
.setAnnotations(this.annotations_
);
3646 if (!suppressDraw
) {
3652 * Return the list of annotations.
3654 Dygraph
.prototype.annotations
= function() {
3655 return this.annotations_
;
3659 * Get the list of label names for this graph. The first column is the
3660 * x-axis, so the data series names start at index 1.
3662 * Returns null when labels have not yet been defined.
3664 Dygraph
.prototype.getLabels
= function() {
3665 var labels
= this.attr_("labels");
3666 return labels
? labels
.slice() : null;
3670 * Get the index of a series (column) given its name. The first column is the
3671 * x-axis, so the data series start with index 1.
3673 Dygraph
.prototype.indexFromSetName
= function(name
) {
3674 return this.setIndexByName_
[name
];
3678 * Trigger a callback when the dygraph has drawn itself and is ready to be
3679 * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3680 * data (i.e. a URL is passed as the data source) and the chart is drawn
3681 * asynchronously. If the chart has already drawn, the callback will fire
3684 * This is a good place to call setAnnotation().
3686 * @param {function(!Dygraph)} callback The callback to trigger when the chart
3689 Dygraph
.prototype.ready
= function(callback
) {
3690 if (this.is_initial_draw_
) {
3691 this.readyFns_
.push(callback
);
3693 callback
.call(this, this);
3699 * Adds a default style for the annotation CSS classes to the document. This is
3700 * only executed when annotations are actually used. It is designed to only be
3701 * called once -- all calls after the first will return immediately.
3703 Dygraph
.addAnnotationRule
= function() {
3704 // TODO(danvk): move this function into plugins/annotations.js
?
3705 if (Dygraph
.addedAnnotationCSS
) return;
3707 var rule
= "border: 1px solid black; " +
3708 "background-color: white; " +
3709 "text-align: center;";
3711 var styleSheetElement
= document
.createElement("style");
3712 styleSheetElement
.type
= "text/css";
3713 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3715 // Find the first style sheet that we can access.
3716 // We may not add a rule to a style sheet from another domain for security
3717 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3718 // adds its own style sheets from google.com.
3719 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3720 if (document
.styleSheets
[i
].disabled
) continue;
3721 var mysheet
= document
.styleSheets
[i
];
3723 if (mysheet
.insertRule
) { // Firefox
3724 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3725 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3726 } else if (mysheet
.addRule
) { // IE
3727 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3729 Dygraph
.addedAnnotationCSS
= true;
3732 // Was likely a security exception.
3736 console
.warn("Unable to add default annotation CSS rule; display may be off.");