3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
8 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
9 * string. Dygraph can handle multiple series with or without error bars. The
10 * date/value ranges will be automatically set. Dygraph uses the
11 * <canvas> tag, so it only works in FF1.5+.
12 * @author danvdk@gmail.com (Dan Vanderkam)
15 <div id="graphdiv" style="width:800px; height:500px;"></div>
16 <script type="text/javascript">
17 new Dygraph(document.getElementById("graphdiv"),
18 "datafile.csv", // CSV file with headers
22 The CSV file is of the form
24 Date,SeriesA,SeriesB,SeriesC
28 If the 'errorBars' option is set in the constructor, the input should be of
30 Date,SeriesA,SeriesB,...
31 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
32 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
34 If the 'fractions' option is set, the input should be of the form:
36 Date,SeriesA,SeriesB,...
37 YYYYMMDD,A1/B1,A2/B2,...
38 YYYYMMDD,A1/B1,A2/B2,...
40 And error bars will be calculated automatically using a binomial distribution.
42 For further documentation and examples, see http://dygraphs.com/
46 /*jshint globalstrict: true */
47 /*global DygraphLayout:false, DygraphCanvasRenderer:false, DygraphOptions:false, G_vmlCanvasManager:false */
51 * Creates an interactive, zoomable chart.
54 * @param {div | String} div A div or the id of a div into which to construct
56 * @param {String | Function} file A file containing CSV data or a function
57 * that returns this data. The most basic expected format for each line is
58 * "YYYY/MM/DD,val1,val2,...". For more information, see
59 * http://dygraphs.com/data.html.
60 * @param {Object} attrs Various other attributes, e.g. errorBars determines
61 * whether the input data contains error ranges. For a complete list of
62 * options, see http://dygraphs.com/options.html.
64 var Dygraph
= function(div
, data
, opts
, opt_fourth_param
) {
65 if (opt_fourth_param
!== undefined
) {
66 // Old versions of dygraphs took in the series labels as a constructor
67 // parameter. This doesn't make sense anymore, but it's easy to continue
68 // to support this usage.
69 this.warn("Using deprecated four-argument dygraph constructor");
70 this.__old_init__(div
, data
, opts
, opt_fourth_param
);
72 this.__init__(div
, data
, opts
);
76 Dygraph
.NAME
= "Dygraph";
77 Dygraph
.VERSION
= "1.2";
78 Dygraph
.__repr__
= function() {
79 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
83 * Returns information about the Dygraph class.
85 Dygraph
.toString
= function() {
86 return this.__repr__();
89 // Various default values
90 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
91 Dygraph
.DEFAULT_WIDTH
= 480;
92 Dygraph
.DEFAULT_HEIGHT
= 320;
94 // For max 60 Hz. animation:
95 Dygraph
.ANIMATION_STEPS
= 12;
96 Dygraph
.ANIMATION_DURATION
= 200;
98 // Label constants for the labelsKMB and labelsKMG2 options.
99 // (i.e. '100000' -> '100K')
100 Dygraph
.KMB_LABELS
= [ 'K', 'M', 'B', 'T', 'Q' ];
101 Dygraph
.KMG2_BIG_LABELS
= [ 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y' ];
102 Dygraph
.KMG2_SMALL_LABELS
= [ 'm', 'u', 'n', 'p', 'f', 'a', 'z', 'y' ];
104 // These are defined before DEFAULT_ATTRS so that it can refer to them.
107 * Return a string version of a number. This respects the digitsAfterDecimal
108 * and maxNumberWidth options.
109 * @param {Number} x The number to be formatted
110 * @param {Dygraph} opts An options view
111 * @param {String} name The name of the point's data series
112 * @param {Dygraph} g The dygraph object
114 Dygraph
.numberValueFormatter
= function(x
, opts
, pt
, g
) {
115 var sigFigs
= opts('sigFigs');
117 if (sigFigs
!== null) {
118 // User has opted for a fixed number of significant figures.
119 return Dygraph
.floatFormat(x
, sigFigs
);
122 var digits
= opts('digitsAfterDecimal');
123 var maxNumberWidth
= opts('maxNumberWidth');
125 var kmb
= opts('labelsKMB');
126 var kmg2
= opts('labelsKMG2');
130 // switch to scientific notation if we underflow or overflow fixed display.
132 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
133 Math
.abs(x
) < Math
.pow(10, -digits
))) {
134 label
= x
.toExponential(digits
);
136 label
= '' + Dygraph
.round_(x
, digits
);
145 k_labels
= Dygraph
.KMB_LABELS
;
148 if (kmb
) Dygraph
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
150 k_labels
= Dygraph
.KMG2_BIG_LABELS
;
151 m_labels
= Dygraph
.KMG2_SMALL_LABELS
;
154 var absx
= Math
.abs(x
);
155 var n
= Dygraph
.pow(k
, k_labels
.length
);
156 for (var j
= k_labels
.length
- 1; j
>= 0; j
--, n
/= k
) {
158 label
= Dygraph
.round_(x
/ n
, digits
) + k_labels
[j
];
163 // TODO(danvk): clean up this logic. Why so different than kmb?
164 var x_parts
= String(x
.toExponential()).split('e-');
165 if (x_parts
.length
=== 2 && x_parts
[1] >= 3 && x_parts
[1] <= 24) {
166 if (x_parts
[1] % 3 > 0) {
167 label
= Dygraph
.round_(x_parts
[0] /
168 Dygraph
.pow(10, (x_parts
[1] % 3)),
171 label
= Number(x_parts
[0]).toFixed(2);
173 label
+= m_labels
[Math
.floor(x_parts
[1] / 3) - 1];
182 * variant for use as an axisLabelFormatter.
185 Dygraph
.numberAxisLabelFormatter
= function(x
, granularity
, opts
, g
) {
186 return Dygraph
.numberValueFormatter(x
, opts
, g
);
190 * Convert a JS date (millis since epoch) to YYYY/MM/DD
191 * @param {Number} date The JavaScript date (ms since epoch)
192 * @return {String} A date of the form "YYYY/MM/DD"
195 Dygraph
.dateString_
= function(date
) {
196 var zeropad
= Dygraph
.zeropad
;
197 var d
= new Date(date
);
200 var year
= "" + d
.getFullYear();
201 // Get a 0 padded month string
202 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
203 // Get a 0 padded day string
204 var day
= zeropad(d
.getDate());
207 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
208 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
210 return year
+ "/" + month + "/" + day
+ ret
;
214 * Convert a JS date to a string appropriate to display on an axis that
215 * is displaying values at the stated granularity.
216 * @param {Date} date The date to format
217 * @param {Number} granularity One of the Dygraph granularity constants
218 * @return {String} The formatted date
221 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
222 if (granularity
>= Dygraph
.DECADAL
) {
223 return date
.strftime('%Y');
224 } else if (granularity
>= Dygraph
.MONTHLY
) {
225 return date
.strftime('%b %y');
227 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
228 if (frac
=== 0 || granularity
>= Dygraph
.DAILY
) {
229 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
231 return Dygraph
.hmsString_(date
.getTime());
237 * Standard plotters. These may be used by clients.
238 * Available plotters are:
239 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
240 * - Dygraph.Plotters.errorPlotter: draws error bars
241 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
243 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
244 * This causes all the lines to be drawn over all the fills/error bars.
246 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
249 // Default attribute values.
250 Dygraph
.DEFAULT_ATTRS
= {
251 highlightCircleSize
: 3,
252 highlightSeriesOpts
: null,
253 highlightSeriesBackgroundAlpha
: 0.5,
257 // TODO(danvk): move defaults from createStatusMessage_ here.
259 labelsSeparateLines
: false,
260 labelsShowZeroValues
: true,
263 showLabelsOnHighlight
: true,
265 digitsAfterDecimal
: 2,
270 strokeBorderWidth
: 0,
271 strokeBorderColor
: "white",
274 axisLabelFontSize
: 14,
280 xValueParser
: Dygraph
.dateParser
,
287 wilsonInterval
: true, // only relevant if fractions is true
291 connectSeparatedPoints
: false,
294 hideOverlayOnMouseOut
: true,
296 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
297 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
303 drawAxesAtZero
: false,
305 // Sizes of the various chart labels.
312 axisLineColor
: "black",
315 axisLabelColor
: "black",
316 axisLabelFont
: "Arial", // TODO(danvk): is this implemented?
320 gridLineColor
: "rgb(128,128,128)",
322 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
323 animatedZooms
: false, // (for now)
325 // Range selector options
326 showRangeSelector
: false,
327 rangeSelectorHeight
: 40,
328 rangeSelectorPlotStrokeColor
: "#808FAB",
329 rangeSelectorPlotFillColor
: "#A7B1C4",
331 // The ordering here ensures that central lines always appear above any
332 // fill bars/error bars
.
334 Dygraph
.Plotters
.fillPlotter
,
335 Dygraph
.Plotters
.errorPlotter
,
336 Dygraph
.Plotters
.linePlotter
345 axisLabelFormatter
: Dygraph
.dateAxisFormatter
,
346 valueFormatter
: Dygraph
.dateString_
,
348 independentTicks
: true,
349 ticker
: null // will be set in dygraph-tickers.js
353 valueFormatter
: Dygraph
.numberValueFormatter
,
354 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
356 independentTicks
: true,
357 ticker
: null // will be set in dygraph-tickers.js
361 valueFormatter
: Dygraph
.numberValueFormatter
,
362 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
364 independentTicks
: false,
365 ticker
: null // will be set in dygraph-tickers.js
370 // Directions for panning and zooming. Use bit operations when combined
371 // values are possible.
372 Dygraph
.HORIZONTAL
= 1;
373 Dygraph
.VERTICAL
= 2;
375 // Installed plugins, in order of precedence (most-general to most-specific).
376 // Plugins are installed after they are defined, in plugins/install.js
.
380 // Used for initializing annotation CSS rules only once.
381 Dygraph
.addedAnnotationCSS
= false;
383 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
384 // Labels is no longer a constructor parameter, since it's typically set
385 // directly from the data source. It also conains a name for the x-axis,
386 // which the previous constructor form did not.
387 if (labels
!== null) {
388 var new_labels
= ["Date"];
389 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
390 Dygraph
.update(attrs
, { 'labels': new_labels
});
392 this.__init__(div
, file
, attrs
);
396 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
397 * and context <canvas> inside of it. See the constructor for details.
399 * @param {Element} div the Element to render the graph into.
400 * @param {String | Function} file Source data
401 * @param {Object} attrs Miscellaneous other options
404 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
405 // Hack for IE: if we're using excanvas and the document hasn't finished
406 // loading yet (and hence may not have initialized whatever it needs to
407 // initialize), then keep calling this routine periodically until it has.
408 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
409 typeof(G_vmlCanvasManager
) != 'undefined' &&
410 document
.readyState
!= 'complete') {
412 setTimeout(function() { self
.__init__(div
, file
, attrs
); }, 100);
416 // Support two-argument constructor
417 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
419 attrs
= Dygraph
.mapLegacyOptions_(attrs
);
421 if (typeof(div
) == 'string') {
422 div
= document
.getElementById(div
);
426 Dygraph
.error("Constructing dygraph with a non-existent div!");
430 this.isUsingExcanvas_
= typeof(G_vmlCanvasManager
) != 'undefined';
432 // Copy the important bits into the object
433 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
436 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
437 this.previousVerticalX_
= -1;
438 this.fractions_
= attrs
.fractions
|| false;
439 this.dateWindow_
= attrs
.dateWindow
|| null;
441 this.is_initial_draw_
= true;
442 this.annotations_
= [];
444 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
445 this.zoomed_x_
= false;
446 this.zoomed_y_
= false;
448 // Clear the div. This ensure that, if multiple dygraphs are passed the same
449 // div, then only one will be drawn.
452 // For historical reasons, the 'width' and 'height' options trump all CSS
453 // rules _except_ for an explicit 'width' or 'height' on the div.
454 // As an added convenience, if the div has zero height (like <div></div> does
455 // without any styles), then we use a default height/width
.
456 if (div
.style
.width
=== '' && attrs
.width
) {
457 div
.style
.width
= attrs
.width
+ "px";
459 if (div
.style
.height
=== '' && attrs
.height
) {
460 div
.style
.height
= attrs
.height
+ "px";
462 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
463 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
464 if (div
.style
.width
=== '') {
465 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
468 // these will be zero if the dygraph's div is hidden.
469 this.width_
= div
.clientWidth
;
470 this.height_
= div
.clientHeight
;
472 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
473 if (attrs
.stackedGraph
) {
474 attrs
.fillGraph
= true;
475 // TODO(nikhilk): Add any other stackedGraph checks here.
478 // DEPRECATION WARNING: All option processing should be moved from
479 // attrs_ and user_attrs_ to options_, which holds all this information.
481 // Dygraphs has many options, some of which interact with one another.
482 // To keep track of everything, we maintain two sets of options:
484 // this.user_attrs_ only options explicitly set by the user.
485 // this.attrs_ defaults, options derived from user_attrs_, data.
487 // Options are then accessed this.attr_('attr'), which first looks at
488 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
489 // defaults without overriding behavior that the user specifically asks for.
490 this.user_attrs_
= {};
491 Dygraph
.update(this.user_attrs_
, attrs
);
493 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
495 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
497 this.boundaryIds_
= [];
498 this.setIndexByName_
= {};
499 this.datasetIndex_
= [];
501 this.registeredEvents_
= [];
502 this.eventListeners_
= {};
504 this.attributes_
= new DygraphOptions(this);
506 // Create the containing DIV and other interactive elements
507 this.createInterface_();
511 var plugins
= Dygraph
.PLUGINS
.concat(this.getOption('plugins'));
512 for (var i
= 0; i
< plugins
.length
; i
++) {
513 var Plugin
= plugins
[i
];
514 var pluginInstance
= new Plugin();
516 plugin
: pluginInstance
,
522 var handlers
= pluginInstance
.activate(this);
523 for (var eventName
in handlers
) {
524 // TODO(danvk): validate eventName.
525 pluginDict
.events
[eventName
] = handlers
[eventName
];
528 this.plugins_
.push(pluginDict
);
531 // At this point, plugins can no longer register event handlers.
532 // Construct a map from event -> ordered list of [callback, plugin].
533 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
534 var plugin_dict
= this.plugins_
[i
];
535 for (var eventName
in plugin_dict
.events
) {
536 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
537 var callback
= plugin_dict
.events
[eventName
];
539 var pair
= [plugin_dict
.plugin
, callback
];
540 if (!(eventName
in this.eventListeners_
)) {
541 this.eventListeners_
[eventName
] = [pair
];
543 this.eventListeners_
[eventName
].push(pair
);
548 this.createDragInterface_();
554 * Triggers a cascade of events to the various plugins which are interested in them.
555 * Returns true if the "default behavior" should be performed, i.e. if none of
556 * the event listeners called event.preventDefault().
559 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
560 if (!(name
in this.eventListeners_
)) return true;
562 // QUESTION: can we use objects & prototypes to speed this up?
566 defaultPrevented
: false,
567 preventDefault
: function() {
568 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
569 e
.defaultPrevented
= true;
571 propagationStopped
: false,
572 stopPropagation
: function() {
573 e
.propagationStopped
= true;
576 Dygraph
.update(e
, extra_props
);
578 var callback_plugin_pairs
= this.eventListeners_
[name
];
579 if (callback_plugin_pairs
) {
580 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
581 var plugin
= callback_plugin_pairs
[i
][0];
582 var callback
= callback_plugin_pairs
[i
][1];
583 callback
.call(plugin
, e
);
584 if (e
.propagationStopped
) break;
587 return e
.defaultPrevented
;
591 * Returns the zoomed status of the chart for one or both axes.
593 * Axis is an optional parameter. Can be set to 'x' or 'y'.
595 * The zoomed status for an axis is set whenever a user zooms using the mouse
596 * or when the dateWindow or valueRange are updated (unless the
597 * isZoomedIgnoreProgrammaticZoom option is also specified).
599 Dygraph
.prototype.isZoomed
= function(axis
) {
600 if (axis
=== null || axis
=== undefined
) {
601 return this.zoomed_x_
|| this.zoomed_y_
;
603 if (axis
=== 'x') return this.zoomed_x_
;
604 if (axis
=== 'y') return this.zoomed_y_
;
605 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
609 * Returns information about the Dygraph object, including its containing ID.
611 Dygraph
.prototype.toString
= function() {
612 var maindiv
= this.maindiv_
;
613 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
614 return "[Dygraph " + id
+ "]";
619 * Returns the value of an option. This may be set by the user (either in the
620 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
622 * @param { String } name The name of the option, e.g. 'rollPeriod'.
623 * @param { String } [seriesName] The name of the series to which the option
624 * will be applied. If no per-series value of this option is available, then
625 * the global value is returned. This is optional.
626 * @return { ... } The value of the option.
628 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
629 // <REMOVE_FOR_COMBINED>
630 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
631 this.error('Must include options reference JS for testing');
632 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
633 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
634 'in the Dygraphs.OPTIONS_REFERENCE listing.');
635 // Only log this error once.
636 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
638 // </REMOVE_FOR_COMBINED
>
639 return seriesName
? this.attributes_
.getForSeries(name
, seriesName
) : this.attributes_
.get(name
);
643 * Returns the current value for an option, as set in the constructor or via
644 * updateOptions. You may pass in an (optional) series name to get per-series
645 * values for the option.
647 * All values returned by this method should be considered immutable. If you
648 * modify them, there is no guarantee that the changes will be honored or that
649 * dygraphs will remain in a consistent state. If you want to modify an option,
650 * use updateOptions() instead.
652 * @param { String } name The name of the option (e.g. 'strokeWidth')
653 * @param { String } [opt_seriesName] Series name to get per-series values.
654 * @return { ... } The value of the option.
656 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
657 return this.attr_(name
, opt_seriesName
);
660 Dygraph
.prototype.getOptionForAxis
= function(name
, axis
) {
661 return this.attributes_
.getForAxis(name
, axis
);
666 * @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2')
667 * @return { ... } A function mapping string -> option value
669 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
671 return function(opt
) {
672 var axis_opts
= self
.user_attrs_
.axes
;
673 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
674 return axis_opts
[axis
][opt
];
676 // user-specified attributes always trump defaults, even if they're less
678 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
679 return self
.user_attrs_
[opt
];
682 axis_opts
= self
.attrs_
.axes
;
683 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
684 return axis_opts
[axis
][opt
];
686 // check old-style axis options
687 // TODO(danvk): add a deprecation warning if either of these match.
688 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
689 return self
.axes_
[0][opt
];
690 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
691 return self
.axes_
[1][opt
];
693 return self
.attr_(opt
);
698 * Returns the current rolling period, as set by the user or an option.
699 * @return {Number} The number of points in the rolling window
701 Dygraph
.prototype.rollPeriod
= function() {
702 return this.rollPeriod_
;
706 * Returns the currently-visible x-range. This can be affected by zooming,
707 * panning or a call to updateOptions.
708 * Returns a two-element array: [left, right].
709 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
711 Dygraph
.prototype.xAxisRange
= function() {
712 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
716 * Returns the lower- and upper-bound x-axis values of the
719 Dygraph
.prototype.xAxisExtremes
= function() {
720 var pad
= this.attr_('xRangePad') / this.plotter_
.area
.w
;
721 if (this.numRows() === 0) {
722 return [0 - pad
, 1 + pad
];
724 var left
= this.rawData_
[0][0];
725 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
727 // Must keep this in sync with dygraph-layout _evaluateLimits()
728 var range
= right
- left
;
730 right
+= range
* pad
;
732 return [left
, right
];
736 * Returns the currently-visible y-range for an axis. This can be affected by
737 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
738 * called with no arguments, returns the range of the first axis.
739 * Returns a two-element array: [bottom, top].
741 Dygraph
.prototype.yAxisRange
= function(idx
) {
742 if (typeof(idx
) == "undefined") idx
= 0;
743 if (idx
< 0 || idx
>= this.axes_
.length
) {
746 var axis
= this.axes_
[idx
];
747 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
751 * Returns the currently-visible y-ranges for each axis. This can be affected by
752 * zooming, panning, calls to updateOptions, etc.
753 * Returns an array of [bottom, top] pairs, one for each y-axis.
755 Dygraph
.prototype.yAxisRanges
= function() {
757 for (var i
= 0; i
< this.axes_
.length
; i
++) {
758 ret
.push(this.yAxisRange(i
));
763 // TODO(danvk): use these functions throughout dygraphs.
765 * Convert from data coordinates to canvas/div X/Y coordinates.
766 * If specified, do this conversion for the coordinate system of a particular
767 * axis. Uses the first axis by default.
768 * Returns a two-element array: [X, Y]
770 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
771 * instead of toDomCoords(null, y, axis).
773 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
774 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
778 * Convert from data x coordinates to canvas/div X coordinate.
779 * If specified, do this conversion for the coordinate system of a particular
781 * Returns a single value or null if x is null.
783 Dygraph
.prototype.toDomXCoord
= function(x
) {
788 var area
= this.plotter_
.area
;
789 var xRange
= this.xAxisRange();
790 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
794 * Convert from data x coordinates to canvas/div Y coordinate and optional
795 * axis. Uses the first axis by default.
797 * returns a single value or null if y is null.
799 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
800 var pct
= this.toPercentYCoord(y
, axis
);
805 var area
= this.plotter_
.area
;
806 return area
.y
+ pct
* area
.h
;
810 * Convert from canvas/div coords to data coordinates.
811 * If specified, do this conversion for the coordinate system of a particular
812 * axis. Uses the first axis by default.
813 * Returns a two-element array: [X, Y].
815 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
816 * instead of toDataCoords(null, y, axis).
818 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
819 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
823 * Convert from canvas/div x coordinate to data coordinate.
825 * If x is null, this returns null.
827 Dygraph
.prototype.toDataXCoord
= function(x
) {
832 var area
= this.plotter_
.area
;
833 var xRange
= this.xAxisRange();
834 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
838 * Convert from canvas/div y coord to value.
840 * If y is null, this returns null.
841 * if axis is null, this uses the first axis.
843 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
848 var area
= this.plotter_
.area
;
849 var yRange
= this.yAxisRange(axis
);
851 if (typeof(axis
) == "undefined") axis
= 0;
852 if (!this.axes_
[axis
].logscale
) {
853 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
855 // Computing the inverse of toDomCoord.
856 var pct
= (y
- area
.y
) / area
.h
;
858 // Computing the inverse of toPercentYCoord. The function was arrived at with
859 // the following steps:
861 // Original calcuation:
862 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
864 // Move denominator to both sides:
865 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
867 // subtract logr1, and take the negative value.
868 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
870 // Swap both sides of the equation, and we can compute the log of the
871 // return value. Which means we just need to use that as the exponent in
873 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
875 var logr1
= Dygraph
.log10(yRange
[1]);
876 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
877 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
883 * Converts a y for an axis to a percentage from the top to the
884 * bottom of the drawing area.
886 * If the coordinate represents a value visible on the canvas, then
887 * the value will be between 0 and 1, where 0 is the top of the canvas.
888 * However, this method will return values outside the range, as
889 * values can fall outside the canvas.
891 * If y is null, this returns null.
892 * if axis is null, this uses the first axis.
894 * @param { Number } y The data y-coordinate.
895 * @param { Number } [axis] The axis number on which the data coordinate lives.
896 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
898 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
902 if (typeof(axis
) == "undefined") axis
= 0;
904 var yRange
= this.yAxisRange(axis
);
907 var logscale
= this.attributes_
.getForAxis("logscale", axis
);
909 // yRange[1] - y is unit distance from the bottom.
910 // yRange[1] - yRange[0] is the scale of the range.
911 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
912 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
914 var logr1
= Dygraph
.log10(yRange
[1]);
915 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
921 * Converts an x value to a percentage from the left to the right of
924 * If the coordinate represents a value visible on the canvas, then
925 * the value will be between 0 and 1, where 0 is the left of the canvas.
926 * However, this method will return values outside the range, as
927 * values can fall outside the canvas.
929 * If x is null, this returns null.
930 * @param { Number } x The data x-coordinate.
931 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
933 Dygraph
.prototype.toPercentXCoord
= function(x
) {
938 var xRange
= this.xAxisRange();
939 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
943 * Returns the number of columns (including the independent variable).
944 * @return { Integer } The number of columns.
946 Dygraph
.prototype.numColumns
= function() {
947 if (!this.rawData_
) return 0;
948 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
952 * Returns the number of rows (excluding any header/label row).
953 * @return { Integer } The number of rows, less any header.
955 Dygraph
.prototype.numRows
= function() {
956 if (!this.rawData_
) return 0;
957 return this.rawData_
.length
;
961 * Returns the value in the given row and column. If the row and column exceed
962 * the bounds on the data, returns null. Also returns null if the value is
964 * @param { Number} row The row number of the data (0-based). Row 0 is the
965 * first row of data, not a header row.
966 * @param { Number} col The column number of the data (0-based)
967 * @return { Number } The value in the specified cell or null if the row/col
970 Dygraph
.prototype.getValue
= function(row
, col
) {
971 if (row
< 0 || row
> this.rawData_
.length
) return null;
972 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
974 return this.rawData_
[row
][col
];
978 * Generates interface elements for the Dygraph: a containing div, a div to
979 * display the current point, and a textbox to adjust the rolling average
980 * period. Also creates the Renderer/Layout elements.
983 Dygraph
.prototype.createInterface_
= function() {
984 // Create the all-enclosing graph div
985 var enclosing
= this.maindiv_
;
987 this.graphDiv
= document
.createElement("div");
989 // TODO(danvk): any other styles that are useful to set here?
990 this.graphDiv
.style
.textAlign
= 'left'; // This is a CSS "reset"
991 enclosing
.appendChild(this.graphDiv
);
993 // Create the canvas for interactive parts of the chart.
994 this.canvas_
= Dygraph
.createCanvas();
995 this.canvas_
.style
.position
= "absolute";
997 this.resizeElements_();
999 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
1001 // ... and for static parts of the chart.
1002 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
1003 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
1005 // The interactive parts of the graph are drawn on top of the chart.
1006 this.graphDiv
.appendChild(this.hidden_
);
1007 this.graphDiv
.appendChild(this.canvas_
);
1008 this.mouseEventElement_
= this.createMouseEventElement_();
1010 // Create the grapher
1011 this.layout_
= new DygraphLayout(this);
1015 this.mouseMoveHandler_
= function(e
) {
1016 dygraph
.mouseMove_(e
);
1019 this.mouseOutHandler_
= function(e
) {
1020 // The mouse has left the chart if:
1021 // 1. e.target is inside the chart
1022 // 2. e.relatedTarget is outside the chart
1023 var target
= e
.target
|| e
.fromElement
;
1024 var relatedTarget
= e
.relatedTarget
|| e
.toElement
;
1025 if (Dygraph
.isNodeContainedBy(target
, dygraph
.graphDiv
) &&
1026 !Dygraph
.isNodeContainedBy(relatedTarget
, dygraph
.graphDiv
)) {
1027 dygraph
.mouseOut_(e
);
1031 this.addAndTrackEvent(window
, 'mouseout', this.mouseOutHandler_
);
1032 this.addAndTrackEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1034 // Don't recreate and register the resize handler on subsequent calls.
1035 // This happens when the graph is resized.
1036 if (!this.resizeHandler_
) {
1037 this.resizeHandler_
= function(e
) {
1041 // Update when the window is resized.
1042 // TODO(danvk): drop frames depending on complexity of the chart.
1043 this.addAndTrackEvent(window
, 'resize', this.resizeHandler_
);
1047 Dygraph
.prototype.resizeElements_
= function() {
1048 this.graphDiv
.style
.width
= this.width_
+ "px";
1049 this.graphDiv
.style
.height
= this.height_
+ "px";
1050 this.canvas_
.width
= this.width_
;
1051 this.canvas_
.height
= this.height_
;
1052 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
1053 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
1057 * Detach DOM elements in the dygraph and null out all data references.
1058 * Calling this when you're done with a dygraph can dramatically reduce memory
1059 * usage. See, e.g., the tests/perf.html example.
1061 Dygraph
.prototype.destroy
= function() {
1062 this.canvas_ctx_
.restore();
1063 this.hidden_ctx_
.restore();
1065 var removeRecursive
= function(node
) {
1066 while (node
.hasChildNodes()) {
1067 removeRecursive(node
.firstChild
);
1068 node
.removeChild(node
.firstChild
);
1072 this.removeTrackedEvents_();
1074 // remove mouse event handlers (This may not be necessary anymore)
1075 Dygraph
.removeEvent(window
, 'mouseout', this.mouseOutHandler_
);
1076 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1078 // remove window handlers
1079 Dygraph
.removeEvent(window
,'resize',this.resizeHandler_
);
1080 this.resizeHandler_
= null;
1082 removeRecursive(this.maindiv_
);
1084 var nullOut
= function(obj
) {
1085 for (var n
in obj
) {
1086 if (typeof(obj
[n
]) === 'object') {
1091 // These may not all be necessary, but it can't hurt...
1092 nullOut(this.layout_
);
1093 nullOut(this.plotter_
);
1098 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1099 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1100 * or the zoom rectangles) is done on this.canvas_.
1101 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1102 * @return {Object} The newly-created canvas
1105 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1106 var h
= Dygraph
.createCanvas();
1107 h
.style
.position
= "absolute";
1108 // TODO(danvk): h should be offset from canvas. canvas needs to include
1109 // some extra area to make it easier to zoom in on the far left and far
1110 // right. h needs to be precisely the plot area, so that clipping occurs.
1111 h
.style
.top
= canvas
.style
.top
;
1112 h
.style
.left
= canvas
.style
.left
;
1113 h
.width
= this.width_
;
1114 h
.height
= this.height_
;
1115 h
.style
.width
= this.width_
+ "px"; // for IE
1116 h
.style
.height
= this.height_
+ "px"; // for IE
1121 * Creates an overlay element used to handle mouse events.
1122 * @return {Object} The mouse event element.
1125 Dygraph
.prototype.createMouseEventElement_
= function() {
1126 if (this.isUsingExcanvas_
) {
1127 var elem
= document
.createElement("div");
1128 elem
.style
.position
= 'absolute';
1129 elem
.style
.backgroundColor
= 'white';
1130 elem
.style
.filter
= 'alpha(opacity=0)';
1131 elem
.style
.width
= this.width_
+ "px";
1132 elem
.style
.height
= this.height_
+ "px";
1133 this.graphDiv
.appendChild(elem
);
1136 return this.canvas_
;
1141 * Generate a set of distinct colors for the data series. This is done with a
1142 * color wheel. Saturation/Value are customizable, and the hue is
1143 * equally-spaced around the color wheel. If a custom set of colors is
1144 * specified, that is used instead.
1147 Dygraph
.prototype.setColors_
= function() {
1148 var labels
= this.getLabels();
1149 var num
= labels
.length
- 1;
1151 this.colorsMap_
= {};
1152 var colors
= this.attr_('colors');
1155 var sat
= this.attr_('colorSaturation') || 1.0;
1156 var val
= this.attr_('colorValue') || 0.5;
1157 var half
= Math
.ceil(num
/ 2);
1158 for (i
= 1; i
<= num
; i
++) {
1159 if (!this.visibility()[i
-1]) continue;
1160 // alternate colors for high contrast.
1161 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
1162 var hue
= (1.0 * idx
/ (1 + num
));
1163 var colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1164 this.colors_
.push(colorStr
);
1165 this.colorsMap_
[labels
[i
]] = colorStr
;
1168 for (i
= 0; i
< num
; i
++) {
1169 if (!this.visibility()[i
]) continue;
1170 var colorStr
= colors
[i
% colors
.length
];
1171 this.colors_
.push(colorStr
);
1172 this.colorsMap_
[labels
[1 + i
]] = colorStr
;
1178 * Return the list of colors. This is either the list of colors passed in the
1179 * attributes or the autogenerated list of rgb(r,g,b) strings.
1180 * This does not return colors for invisible series.
1181 * @return {Array<string>} The list of colors.
1183 Dygraph
.prototype.getColors
= function() {
1184 return this.colors_
;
1188 * Returns a few attributes of a series, i.e. its color, its visibility, which
1189 * axis it's assigned to, and its column in the original data.
1190 * Returns null if the series does not exist.
1191 * Otherwise, returns an object with column, visibility, color and axis properties.
1192 * The "axis" property will be set to 1 for y1 and 2 for y2.
1193 * The "column" property can be fed back into getValue(row, column) to get
1194 * values for this series.
1196 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1198 var labels
= this.getLabels();
1199 for (var i
= 1; i
< labels
.length
; i
++) {
1200 if (labels
[i
] == series_name
) {
1205 if (idx
== -1) return null;
1210 visible
: this.visibility()[idx
- 1],
1211 color
: this.colorsMap_
[series_name
],
1212 axis
: 1 + this.attributes_
.axisForSeries(series_name
)
1217 * Create the text box to adjust the averaging period
1220 Dygraph
.prototype.createRollInterface_
= function() {
1221 // Create a roller if one doesn't exist already.
1222 if (!this.roller_
) {
1223 this.roller_
= document
.createElement("input");
1224 this.roller_
.type
= "text";
1225 this.roller_
.style
.display
= "none";
1226 this.graphDiv
.appendChild(this.roller_
);
1229 var display
= this.attr_('showRoller') ? 'block' : 'none';
1231 var area
= this.plotter_
.area
;
1232 var textAttr
= { "position": "absolute",
1234 "top": (area
.y
+ area
.h
- 25) + "px",
1235 "left": (area
.x
+ 1) + "px",
1238 this.roller_
.size
= "2";
1239 this.roller_
.value
= this.rollPeriod_
;
1240 for (var name
in textAttr
) {
1241 if (textAttr
.hasOwnProperty(name
)) {
1242 this.roller_
.style
[name
] = textAttr
[name
];
1247 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1252 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1253 * canvas (i.e. DOM Coords).
1255 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1256 return Dygraph
.pageX(e
) - context
.px
;
1261 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1262 * canvas (i.e. DOM Coords).
1264 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1265 return Dygraph
.pageY(e
) - context
.py
;
1269 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1273 Dygraph
.prototype.createDragInterface_
= function() {
1275 // Tracks whether the mouse is down right now
1277 isPanning
: false, // is this drag part of a pan?
1278 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1279 dragStartX
: null, // pixel coordinates
1280 dragStartY
: null, // pixel coordinates
1281 dragEndX
: null, // pixel coordinates
1282 dragEndY
: null, // pixel coordinates
1283 dragDirection
: null,
1284 prevEndX
: null, // pixel coordinates
1285 prevEndY
: null, // pixel coordinates
1286 prevDragDirection
: null,
1287 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1289 // The value on the left side of the graph when a pan operation starts.
1290 initialLeftmostDate
: null,
1292 // The number of units each pixel spans. (This won't be valid for log
1294 xUnitsPerPixel
: null,
1296 // TODO(danvk): update this comment
1297 // The range in second/value units that the viewport encompasses during a
1298 // panning operation.
1301 // Top-left corner of the canvas, in DOM coords
1302 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1306 // Values for use with panEdgeFraction, which limit how far outside the
1307 // graph's data boundaries it can be panned.
1308 boundedDates
: null, // [minDate, maxDate]
1309 boundedValues
: null, // [[minValue, maxValue] ...]
1311 // We cover iframes during mouse interactions. See comments in
1312 // dygraph-utils.js for more info on why this is a good idea.
1313 tarp
: new Dygraph
.IFrameTarp(),
1315 // contextB is the same thing as this context object but renamed.
1316 initializeMouseDown
: function(event
, g
, contextB
) {
1317 // prevents mouse drags from selecting page text.
1318 if (event
.preventDefault
) {
1319 event
.preventDefault(); // Firefox, Chrome, etc.
1321 event
.returnValue
= false; // IE
1322 event
.cancelBubble
= true;
1325 contextB
.px
= Dygraph
.findPosX(g
.canvas_
);
1326 contextB
.py
= Dygraph
.findPosY(g
.canvas_
);
1327 contextB
.dragStartX
= g
.dragGetX_(event
, contextB
);
1328 contextB
.dragStartY
= g
.dragGetY_(event
, contextB
);
1329 contextB
.cancelNextDblclick
= false;
1330 contextB
.tarp
.cover();
1334 var interactionModel
= this.attr_("interactionModel");
1336 // Self is the graph.
1339 // Function that binds the graph and context to the handler.
1340 var bindHandler
= function(handler
) {
1341 return function(event
) {
1342 handler(event
, self
, context
);
1346 for (var eventName
in interactionModel
) {
1347 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1348 this.addAndTrackEvent(this.mouseEventElement_
, eventName
,
1349 bindHandler(interactionModel
[eventName
]));
1352 // If the user releases the mouse button during a drag, but not over the
1353 // canvas, then it doesn't count as a zooming action.
1354 var mouseUpHandler
= function(event
) {
1355 if (context
.isZooming
|| context
.isPanning
) {
1356 context
.isZooming
= false;
1357 context
.dragStartX
= null;
1358 context
.dragStartY
= null;
1361 if (context
.isPanning
) {
1362 context
.isPanning
= false;
1363 context
.draggingDate
= null;
1364 context
.dateRange
= null;
1365 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1366 delete self
.axes_
[i
].draggingValue
;
1367 delete self
.axes_
[i
].dragValueRange
;
1371 context
.tarp
.uncover();
1374 this.addAndTrackEvent(document
, 'mouseup', mouseUpHandler
);
1378 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1379 * up any previous zoom rectangles that were drawn. This could be optimized to
1380 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1383 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1384 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1385 * @param {Number} startX The X position where the drag started, in canvas
1387 * @param {Number} endX The current X position of the drag, in canvas coords.
1388 * @param {Number} startY The Y position where the drag started, in canvas
1390 * @param {Number} endY The current Y position of the drag, in canvas coords.
1391 * @param {Number} prevDirection the value of direction on the previous call to
1392 * this function. Used to avoid excess redrawing
1393 * @param {Number} prevEndX The value of endX on the previous call to this
1394 * function. Used to avoid excess redrawing
1395 * @param {Number} prevEndY The value of endY on the previous call to this
1396 * function. Used to avoid excess redrawing
1399 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1400 endY
, prevDirection
, prevEndX
,
1402 var ctx
= this.canvas_ctx_
;
1404 // Clean up from the previous rect if necessary
1405 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1406 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1407 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1408 } else if (prevDirection
== Dygraph
.VERTICAL
){
1409 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1410 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1413 // Draw a light-grey rectangle to show the new viewing area
1414 if (direction
== Dygraph
.HORIZONTAL
) {
1415 if (endX
&& startX
) {
1416 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1417 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1418 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1420 } else if (direction
== Dygraph
.VERTICAL
) {
1421 if (endY
&& startY
) {
1422 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1423 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1424 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1428 if (this.isUsingExcanvas_
) {
1429 this.currentZoomRectArgs_
= [direction
, startX
, endX
, startY
, endY
, 0, 0, 0];
1434 * Clear the zoom rectangle (and perform no zoom).
1437 Dygraph
.prototype.clearZoomRect_
= function() {
1438 this.currentZoomRectArgs_
= null;
1439 this.canvas_ctx_
.clearRect(0, 0, this.canvas_
.width
, this.canvas_
.height
);
1443 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1444 * the canvas. The exact zoom window may be slightly larger if there are no data
1445 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1446 * which accepts dates that match the raw data. This function redraws the graph.
1448 * @param {Number} lowX The leftmost pixel value that should be visible.
1449 * @param {Number} highX The rightmost pixel value that should be visible.
1452 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1453 this.currentZoomRectArgs_
= null;
1454 // Find the earliest and latest dates contained in this canvasx range.
1455 // Convert the call to date ranges of the raw data.
1456 var minDate
= this.toDataXCoord(lowX
);
1457 var maxDate
= this.toDataXCoord(highX
);
1458 this.doZoomXDates_(minDate
, maxDate
);
1462 * Transition function to use in animations. Returns values between 0.0
1463 * (totally old values) and 1.0 (totally new values) for each frame.
1466 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1468 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1472 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1473 * method with doZoomX which accepts pixel coordinates. This function redraws
1476 * @param {Number} minDate The minimum date that should be visible.
1477 * @param {Number} maxDate The maximum date that should be visible.
1480 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1481 // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation
1482 // can produce strange effects. Rather than the y-axis transitioning slowly
1483 // between values, it can jerk around.)
1484 var old_window
= this.xAxisRange();
1485 var new_window
= [minDate
, maxDate
];
1486 this.zoomed_x_
= true;
1488 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1489 if (that
.attr_("zoomCallback")) {
1490 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1496 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1497 * the canvas. This function redraws the graph.
1499 * @param {Number} lowY The topmost pixel value that should be visible.
1500 * @param {Number} highY The lowest pixel value that should be visible.
1503 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1504 this.currentZoomRectArgs_
= null;
1505 // Find the highest and lowest values in pixel range for each axis.
1506 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1507 // This is because pixels increase as you go down on the screen, whereas data
1508 // coordinates increase as you go up the screen.
1509 var oldValueRanges
= this.yAxisRanges();
1510 var newValueRanges
= [];
1511 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1512 var hi
= this.toDataYCoord(lowY
, i
);
1513 var low
= this.toDataYCoord(highY
, i
);
1514 newValueRanges
.push([low
, hi
]);
1517 this.zoomed_y_
= true;
1519 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1520 if (that
.attr_("zoomCallback")) {
1521 var xRange
= that
.xAxisRange();
1522 that
.attr_("zoomCallback")(xRange
[0], xRange
[1], that
.yAxisRanges());
1528 * Reset the zoom to the original view coordinates. This is the same as
1529 * double-clicking on the graph.
1531 Dygraph
.prototype.resetZoom
= function() {
1532 var dirty
= false, dirtyX
= false, dirtyY
= false;
1533 if (this.dateWindow_
!== null) {
1538 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1539 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1545 // Clear any selection, since it's likely to be drawn in the wrong place.
1546 this.clearSelection();
1549 this.zoomed_x_
= false;
1550 this.zoomed_y_
= false;
1552 var minDate
= this.rawData_
[0][0];
1553 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1555 // With only one frame, don't bother calculating extreme ranges.
1556 // TODO(danvk): merge this block w/ the code below
.
1557 if (!this.attr_("animatedZooms")) {
1558 this.dateWindow_
= null;
1559 for (i
= 0; i
< this.axes_
.length
; i
++) {
1560 if (this.axes_
[i
].valueWindow
!== null) {
1561 delete this.axes_
[i
].valueWindow
;
1565 if (this.attr_("zoomCallback")) {
1566 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1571 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1573 oldWindow
= this.xAxisRange();
1574 newWindow
= [minDate
, maxDate
];
1578 oldValueRanges
= this.yAxisRanges();
1579 // TODO(danvk): this is pretty inefficient
1580 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1581 var extremes
= packed
[1];
1583 // this has the side-effect of modifying this.axes_.
1584 // this doesn't make much sense in this context, but it's convenient (we
1585 // need this.axes_[*].extremeValues) and not harmful since we'll be
1586 // calling drawGraph_ shortly, which clobbers these values.
1587 this.computeYAxisRanges_(extremes
);
1589 newValueRanges
= [];
1590 for (i
= 0; i
< this.axes_
.length
; i
++) {
1591 var axis
= this.axes_
[i
];
1592 newValueRanges
.push((axis
.valueRange
!== null &&
1593 axis
.valueRange
!== undefined
) ?
1594 axis
.valueRange
: axis
.extremeRange
);
1599 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1601 that
.dateWindow_
= null;
1602 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1603 if (that
.axes_
[i
].valueWindow
!== null) {
1604 delete that
.axes_
[i
].valueWindow
;
1607 if (that
.attr_("zoomCallback")) {
1608 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1615 * Combined animation logic for all zoom functions.
1616 * either the x parameters or y parameters may be null.
1619 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1620 var steps
= this.attr_("animatedZooms") ? Dygraph
.ANIMATION_STEPS
: 1;
1623 var valueRanges
= [];
1626 if (oldXRange
!== null && newXRange
!== null) {
1627 for (step
= 1; step
<= steps
; step
++) {
1628 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1629 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1630 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1634 if (oldYRanges
!== null && newYRanges
!== null) {
1635 for (step
= 1; step
<= steps
; step
++) {
1636 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1638 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1639 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1640 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1642 valueRanges
[step
-1] = thisRange
;
1647 Dygraph
.repeatAndCleanup(function(step
) {
1648 if (valueRanges
.length
) {
1649 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1650 var w
= valueRanges
[step
][i
];
1651 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1654 if (windows
.length
) {
1655 that
.dateWindow_
= windows
[step
];
1658 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1662 * Get the current graph's area object.
1664 * Returns: {x, y, w, h}
1666 Dygraph
.prototype.getArea
= function() {
1667 return this.plotter_
.area
;
1671 * Convert a mouse event to DOM coordinates relative to the graph origin.
1673 * Returns a two-element array: [X, Y].
1675 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1676 if (event
.offsetX
&& event
.offsetY
) {
1677 return [ event
.offsetX
, event
.offsetY
];
1679 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1680 var canvasy
= Dygraph
.pageY(event
) - Dygraph
.findPosY(this.mouseEventElement_
);
1681 return [canvasx
, canvasy
];
1686 * Given a canvas X coordinate, find the closest row.
1687 * @param {Number} domX graph-relative DOM X coordinate
1688 * Returns: row number, integer
1691 Dygraph
.prototype.findClosestRow
= function(domX
) {
1692 var minDistX
= Infinity
;
1693 var pointIdx
= -1, setIdx
= -1;
1694 var sets
= this.layout_
.points
;
1695 for (var i
= 0; i
< sets
.length
; i
++) {
1696 var points
= sets
[i
];
1697 var len
= points
.length
;
1698 for (var j
= 0; j
< len
; j
++) {
1699 var point
= points
[j
];
1700 if (!Dygraph
.isValidPoint(point
, true)) continue;
1701 var dist
= Math
.abs(point
.canvasx
- domX
);
1702 if (dist
< minDistX
) {
1710 // TODO(danvk): remove this function; it's trivial and has only one use.
1711 return this.idxToRow_(setIdx
, pointIdx
);
1715 * Given canvas X,Y coordinates, find the closest point.
1717 * This finds the individual data point across all visible series
1718 * that's closest to the supplied DOM coordinates using the standard
1719 * Euclidean X,Y distance.
1721 * @param {Number} domX graph-relative DOM X coordinate
1722 * @param {Number} domY graph-relative DOM Y coordinate
1723 * Returns: {row, seriesName, point}
1726 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1727 var minDist
= Infinity
;
1729 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
;
1730 for ( var setIdx
= this.layout_
.datasets
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1731 var points
= this.layout_
.points
[setIdx
];
1732 for (var i
= 0; i
< points
.length
; ++i
) {
1733 var point
= points
[i
];
1734 if (!Dygraph
.isValidPoint(point
)) continue;
1735 dx
= point
.canvasx
- domX
;
1736 dy
= point
.canvasy
- domY
;
1737 dist
= dx
* dx
+ dy
* dy
;
1738 if (dist
< minDist
) {
1740 closestPoint
= point
;
1741 closestSeries
= setIdx
;
1746 var name
= this.layout_
.setNames
[closestSeries
];
1748 row
: idx
+ this.getLeftBoundary_(),
1755 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1757 * This first finds the X data point closest to the supplied DOM X coordinate,
1758 * then finds the series which puts the Y coordinate on top of its filled area,
1759 * using linear interpolation between adjacent point pairs.
1761 * @param {Number} domX graph-relative DOM X coordinate
1762 * @param {Number} domY graph-relative DOM Y coordinate
1763 * Returns: {row, seriesName, point}
1766 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1767 var row
= this.findClosestRow(domX
);
1768 var boundary
= this.getLeftBoundary_();
1769 var rowIdx
= row
- boundary
;
1770 var closestPoint
, closestSeries
;
1771 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
1772 var points
= this.layout_
.points
[setIdx
];
1773 if (rowIdx
>= points
.length
) continue;
1774 var p1
= points
[rowIdx
];
1775 if (!Dygraph
.isValidPoint(p1
)) continue;
1776 var py
= p1
.canvasy
;
1777 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1778 // interpolate series Y value using next point
1779 var p2
= points
[rowIdx
+ 1];
1780 if (Dygraph
.isValidPoint(p2
)) {
1781 var dx
= p2
.canvasx
- p1
.canvasx
;
1783 var r
= (domX
- p1
.canvasx
) / dx
;
1784 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1787 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1788 // interpolate series Y value using previous point
1789 var p0
= points
[rowIdx
- 1];
1790 if (Dygraph
.isValidPoint(p0
)) {
1791 var dx
= p1
.canvasx
- p0
.canvasx
;
1793 var r
= (p1
.canvasx
- domX
) / dx
;
1794 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1798 // Stop if the point (domX, py) is above this series' upper edge
1799 if (setIdx
=== 0 || py
< domY
) {
1801 closestSeries
= setIdx
;
1804 var name
= this.layout_
.setNames
[closestSeries
];
1813 * When the mouse moves in the canvas, display information about a nearby data
1814 * point and draw dots over those points in the data series. This function
1815 * takes care of cleanup of previously-drawn dots.
1816 * @param {Object} event The mousemove event from the browser.
1819 Dygraph
.prototype.mouseMove_
= function(event
) {
1820 // This prevents JS errors when mousing over the canvas before data loads.
1821 var points
= this.layout_
.points
;
1822 if (points
=== undefined
|| points
=== null) return;
1824 var canvasCoords
= this.eventToDomCoords(event
);
1825 var canvasx
= canvasCoords
[0];
1826 var canvasy
= canvasCoords
[1];
1828 var highlightSeriesOpts
= this.attr_("highlightSeriesOpts");
1829 var selectionChanged
= false;
1830 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1832 if (this.attr_("stackedGraph")) {
1833 closest
= this.findStackedPoint(canvasx
, canvasy
);
1835 closest
= this.findClosestPoint(canvasx
, canvasy
);
1837 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1839 var idx
= this.findClosestRow(canvasx
);
1840 selectionChanged
= this.setSelection(idx
);
1843 var callback
= this.attr_("highlightCallback");
1844 if (callback
&& selectionChanged
) {
1848 this.lastRow_
+ this.getLeftBoundary_(),
1849 this.highlightSet_
);
1854 * Fetch left offset from first defined boundaryIds record (see bug #236).
1857 Dygraph
.prototype.getLeftBoundary_
= function() {
1858 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
1859 if (this.boundaryIds_
[i
] !== undefined
) {
1860 return this.boundaryIds_
[i
][0];
1867 * Transforms layout_.points index into data row number.
1868 * @param int layout_.points index
1869 * @return int row number, or -1 if none could be found.
1872 Dygraph
.prototype.idxToRow_
= function(setIdx
, rowIdx
) {
1873 if (rowIdx
< 0) return -1;
1875 var boundary
= this.getLeftBoundary_();
1876 return boundary
+ rowIdx
;
1877 // for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
1878 // var set = this.layout_.datasets[setIdx];
1879 // if (idx < set.length) {
1880 // return boundary + idx;
1882 // idx -= set.length;
1887 Dygraph
.prototype.animateSelection_
= function(direction
) {
1888 var totalSteps
= 10;
1890 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
1891 if (this.animateId
=== undefined
) this.animateId
= 0;
1892 var start
= this.fadeLevel
;
1893 var steps
= direction
< 0 ? start
: totalSteps
- start
;
1895 if (this.fadeLevel
) {
1896 this.updateSelection_(1.0);
1901 var thisId
= ++this.animateId
;
1903 Dygraph
.repeatAndCleanup(
1905 // ignore simultaneous animations
1906 if (that
.animateId
!= thisId
) return;
1908 that
.fadeLevel
+= direction
;
1909 if (that
.fadeLevel
=== 0) {
1910 that
.clearSelection();
1912 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
1915 steps
, millis
, function() {});
1919 * Draw dots over the selectied points in the data series. This function
1920 * takes care of cleanup of previously-drawn dots.
1923 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
1924 /*var defaultPrevented = */
1925 this.cascadeEvents_('select', {
1926 selectedX
: this.lastx_
,
1927 selectedPoints
: this.selPoints_
1929 // TODO(danvk): use defaultPrevented here?
1931 // Clear the previously drawn vertical, if there is one
1933 var ctx
= this.canvas_ctx_
;
1934 if (this.attr_('highlightSeriesOpts')) {
1935 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1936 var alpha
= 1.0 - this.attr_('highlightSeriesBackgroundAlpha');
1938 // Activating background fade includes an animation effect for a gradual
1939 // fade. TODO(klausw): make this independently configurable if it causes
1940 // issues? Use a shared preference to control animations?
1941 var animateBackgroundFade
= true;
1942 if (animateBackgroundFade
) {
1943 if (opt_animFraction
=== undefined
) {
1944 // start a new animation
1945 this.animateSelection_(1);
1948 alpha
*= opt_animFraction
;
1950 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
1951 ctx
.fillRect(0, 0, this.width_
, this.height_
);
1954 // Redraw only the highlighted series in the interactive canvas (not the
1955 // static plot canvas, which is where series are usually drawn).
1956 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
1957 } else if (this.previousVerticalX_
>= 0) {
1958 // Determine the maximum highlight circle size.
1959 var maxCircleSize
= 0;
1960 var labels
= this.attr_('labels');
1961 for (i
= 1; i
< labels
.length
; i
++) {
1962 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1963 if (r
> maxCircleSize
) maxCircleSize
= r
;
1965 var px
= this.previousVerticalX_
;
1966 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1967 2 * maxCircleSize
+ 2, this.height_
);
1970 if (this.isUsingExcanvas_
&& this.currentZoomRectArgs_
) {
1971 Dygraph
.prototype.drawZoomRect_
.apply(this, this.currentZoomRectArgs_
);
1974 if (this.selPoints_
.length
> 0) {
1975 // Draw colored circles over the center of each selected point
1976 var canvasx
= this.selPoints_
[0].canvasx
;
1978 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
1979 var pt
= this.selPoints_
[i
];
1980 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1982 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1983 var callback
= this.attr_("drawHighlightPointCallback", pt
.name
);
1984 var color
= this.plotter_
.colors
[pt
.name
];
1986 callback
= Dygraph
.Circles
.DEFAULT
;
1988 ctx
.lineWidth
= this.attr_('strokeWidth', pt
.name
);
1989 ctx
.strokeStyle
= color
;
1990 ctx
.fillStyle
= color
;
1991 callback(this.g
, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
1992 color
, circleSize
, pt
.idx
);
1996 this.previousVerticalX_
= canvasx
;
2001 * Manually set the selected points and display information about them in the
2002 * legend. The selection can be cleared using clearSelection() and queried
2003 * using getSelection().
2004 * @param { Integer } row number that should be highlighted (i.e. appear with
2005 * hover dots on the chart). Set to false to clear any selection.
2006 * @param { seriesName } optional series name to highlight that series with the
2007 * the highlightSeriesOpts setting.
2008 * @param { locked } optional If true, keep seriesName selected when mousing
2009 * over the graph, disabling closest-series highlighting. Call clearSelection()
2012 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
2013 // Extract the points we've selected
2014 this.selPoints_
= [];
2016 if (row
!== false) {
2017 row
-= this.getLeftBoundary_();
2020 var changed
= false;
2021 if (row
!== false && row
>= 0) {
2022 if (row
!= this.lastRow_
) changed
= true;
2023 this.lastRow_
= row
;
2024 for (var setIdx
= 0; setIdx
< this.layout_
.datasets
.length
; ++setIdx
) {
2025 var set
= this.layout_
.datasets
[setIdx
];
2026 if (row
< set
.length
) {
2027 var point
= this.layout_
.points
[setIdx
][row
];
2029 if (this.attr_("stackedGraph")) {
2030 point
= this.layout_
.unstackPointAtIndex(setIdx
, row
);
2033 if (point
.yval
!== null) this.selPoints_
.push(point
);
2037 if (this.lastRow_
>= 0) changed
= true;
2041 if (this.selPoints_
.length
) {
2042 this.lastx_
= this.selPoints_
[0].xval
;
2047 if (opt_seriesName
!== undefined
) {
2048 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
2049 this.highlightSet_
= opt_seriesName
;
2052 if (opt_locked
!== undefined
) {
2053 this.lockedSet_
= opt_locked
;
2057 this.updateSelection_(undefined
);
2063 * The mouse has left the canvas. Clear out whatever artifacts remain
2064 * @param {Object} event the mouseout event from the browser.
2067 Dygraph
.prototype.mouseOut_
= function(event
) {
2068 if (this.attr_("unhighlightCallback")) {
2069 this.attr_("unhighlightCallback")(event
);
2072 if (this.attr_("hideOverlayOnMouseOut") && !this.lockedSet_
) {
2073 this.clearSelection();
2078 * Clears the current selection (i.e. points that were highlighted by moving
2079 * the mouse over the chart).
2081 Dygraph
.prototype.clearSelection
= function() {
2082 this.cascadeEvents_('deselect', {});
2084 this.lockedSet_
= false;
2085 // Get rid of the overlay data
2086 if (this.fadeLevel
) {
2087 this.animateSelection_(-1);
2090 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2092 this.selPoints_
= [];
2095 this.highlightSet_
= null;
2099 * Returns the number of the currently selected row. To get data for this row,
2100 * you can use the getValue method.
2101 * @return { Integer } row number, or -1 if nothing is selected
2103 Dygraph
.prototype.getSelection
= function() {
2104 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2108 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2109 var points
= this.layout_
.points
[setIdx
];
2110 for (var row
= 0; row
< points
.length
; row
++) {
2111 if (points
[row
].x
== this.selPoints_
[0].x
) {
2112 return row
+ this.getLeftBoundary_();
2120 * Returns the name of the currently-highlighted series.
2121 * Only available when the highlightSeriesOpts option is in use.
2123 Dygraph
.prototype.getHighlightSeries
= function() {
2124 return this.highlightSet_
;
2128 * Returns true if the currently-highlighted series was locked
2129 * via setSelection(..., seriesName, true).
2131 Dygraph
.prototype.isSeriesLocked
= function() {
2132 return this.lockedSet_
;
2136 * Fires when there's data available to be graphed.
2137 * @param {String} data Raw CSV data to be plotted
2140 Dygraph
.prototype.loadedEvent_
= function(data
) {
2141 this.rawData_
= this.parseCSV_(data
);
2146 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2149 Dygraph
.prototype.addXTicks_
= function() {
2150 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2152 if (this.dateWindow_
) {
2153 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2155 range
= this.xAxisExtremes();
2158 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2159 var xTicks
= xAxisOptionsView('ticker')(
2162 this.width_
, // TODO(danvk): should be area.width
2165 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2166 // console.log(msg);
2167 this.layout_
.setXTicks(xTicks
);
2172 * Computes the range of the data series (including confidence intervals).
2173 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2174 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2175 * @return [low, high]
2177 Dygraph
.prototype.extremeValues_
= function(series
) {
2178 var minY
= null, maxY
= null, j
, y
;
2180 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2182 // With custom bars, maxY is the max of the high values.
2183 for (j
= 0; j
< series
.length
; j
++) {
2184 y
= series
[j
][1][0];
2185 if (y
=== null || isNaN(y
)) continue;
2186 var low
= y
- series
[j
][1][1];
2187 var high
= y
+ series
[j
][1][2];
2188 if (low
> y
) low
= y
; // this can happen with custom bars,
2189 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2190 if (maxY
=== null || high
> maxY
) {
2193 if (minY
=== null || low
< minY
) {
2198 for (j
= 0; j
< series
.length
; j
++) {
2200 if (y
=== null || isNaN(y
)) continue;
2201 if (maxY
=== null || y
> maxY
) {
2204 if (minY
=== null || y
< minY
) {
2210 return [minY
, maxY
];
2215 * This function is called once when the chart's data is changed or the options
2216 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2217 * idea is that values derived from the chart's data can be computed here,
2218 * rather than every time the chart is drawn. This includes things like the
2219 * number of axes, rolling averages, etc.
2221 Dygraph
.prototype.predraw_
= function() {
2222 var start
= new Date();
2224 this.layout_
.computePlotArea();
2226 // TODO(danvk): move more computations out of drawGraph_ and into here.
2227 this.computeYAxes_();
2229 // Create a new plotter.
2230 if (this.plotter_
) {
2231 this.cascadeEvents_('clearChart');
2232 this.plotter_
.clear();
2235 if(!this.is_initial_draw_
) {
2236 this.canvas_ctx_
.restore();
2237 this.hidden_ctx_
.restore();
2240 this.canvas_ctx_
.save();
2241 this.hidden_ctx_
.save();
2243 this.plotter_
= new DygraphCanvasRenderer(this,
2248 // The roller sits in the bottom left corner of the chart. We don't know where
2249 // this will be until the options are available, so it's positioned here.
2250 this.createRollInterface_();
2252 this.cascadeEvents_('predraw');
2254 // Convert the raw data (a 2D array) into the internal format and compute
2255 // rolling averages.
2256 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2257 for (var i
= 1; i
< this.numColumns(); i
++) {
2258 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2259 var logScale
= this.attr_('logscale');
2260 var series
= this.extractSeries_(this.rawData_
, i
, logScale
);
2261 series
= this.rollingAverage(series
, this.rollPeriod_
);
2262 this.rolledSeries_
.push(series
);
2265 // If the data or options have changed, then we'd better redraw.
2268 // This is used to determine whether to do various animations.
2269 var end
= new Date();
2270 this.drawingTimeMs_
= (end
- start
);
2274 * Loop over all fields and create datasets, calculating extreme y-values for
2275 * each series and extreme x-indices as we go.
2277 * dateWindow is passed in as an explicit parameter so that we can compute
2278 * extreme values "speculatively", i.e. without actually setting state on the
2281 * TODO(danvk): make this more of a true function
2282 * @return [ datasets, seriesExtremes, boundaryIds ]
2285 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2286 var boundaryIds
= [];
2287 var cumulative_y
= []; // For stacked series.
2289 var extremes
= {}; // series name -> [low, high]
2291 var errorBars
= this.attr_("errorBars");
2292 var customBars
= this.attr_("customBars");
2293 var bars
= errorBars
|| customBars
;
2294 var isValueNull
= function(sample
) {
2296 return sample
[1] === null;
2298 return customBars
? sample
[1][1] === null :
2299 errorBars
? sample
[1][0] === null : false;
2303 // Loop over the fields (series). Go from the last to the first,
2304 // because if they're stacked that's how we accumulate the values.
2305 var num_series
= rolledSeries
.length
- 1;
2306 for (i
= num_series
; i
>= 1; i
--) {
2307 if (!this.visibility()[i
- 1]) continue;
2309 // Note: this copy _is_ necessary at the moment.
2310 // If you remove it, it breaks zooming with error bars on.
2311 // TODO(danvk): investigate further & write a test for this.
2313 for (j
= 0; j
< rolledSeries
[i
].length
; j
++) {
2314 series
.push(rolledSeries
[i
][j
]);
2317 // Prune down to the desired range, if necessary (for zooming)
2318 // Because there can be lines going to points outside of the visible area,
2319 // we actually prune to visible points, plus one on either side.
2321 var low
= dateWindow
[0];
2322 var high
= dateWindow
[1];
2325 // TODO(danvk): do binary search instead of linear search.
2326 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2327 var firstIdx
= null, lastIdx
= null;
2328 for (k
= 0; k
< series
.length
; k
++) {
2329 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2332 if (series
[k
][0] <= high
) {
2337 if (firstIdx
=== null) firstIdx
= 0;
2338 var correctedFirstIdx
= firstIdx
;
2339 var isInvalidValue
= true;
2340 while (isInvalidValue
&& correctedFirstIdx
> 0) {
2341 correctedFirstIdx
--;
2342 isInvalidValue
= isValueNull(series
[correctedFirstIdx
]);
2345 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2346 var correctedLastIdx
= lastIdx
;
2347 isInvalidValue
= true;
2348 while (isInvalidValue
&& correctedLastIdx
< series
.length
- 1) {
2350 isInvalidValue
= isValueNull(series
[correctedLastIdx
]);
2353 boundaryIds
[i
-1] = [(firstIdx
> 0) ? firstIdx
- 1 : firstIdx
,
2354 (lastIdx
< series
.length
- 1) ? lastIdx
+ 1 : lastIdx
];
2356 if (correctedFirstIdx
!==firstIdx
) {
2357 pruned
.push(series
[correctedFirstIdx
]);
2359 for (k
= firstIdx
; k
<= lastIdx
; k
++) {
2360 pruned
.push(series
[k
]);
2362 if (correctedLastIdx
!== lastIdx
) {
2363 pruned
.push(series
[correctedLastIdx
]);
2368 boundaryIds
[i
-1] = [0, series
.length
-1];
2371 var seriesExtremes
= this.extremeValues_(series
);
2374 for (j
=0; j
<series
.length
; j
++) {
2375 series
[j
] = [series
[j
][0],
2380 } else if (this.attr_("stackedGraph")) {
2381 // Need to clear last_x explicitly as javascript's locals are
2382 // local to function, not to a block of statements
2383 var actual_y
, last_x
= null;
2384 for (j
= 0; j
< series
.length
; j
++) {
2385 // If one data set has a NaN, let all subsequent stacked
2386 // sets inherit the NaN -- only start at 0 for the first set.
2387 var x
= series
[j
][0];
2388 if (cumulative_y
[x
] === undefined
) {
2389 cumulative_y
[x
] = 0;
2392 actual_y
= series
[j
][1];
2393 if (actual_y
=== null) {
2394 series
[j
] = [x
, null];
2399 cumulative_y
[x
] += actual_y
;
2400 // If an x-value is repeated, we ignore the duplicates.
2404 series
[j
] = [x
, cumulative_y
[x
]];
2406 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2407 seriesExtremes
[1] = cumulative_y
[x
];
2409 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2410 seriesExtremes
[0] = cumulative_y
[x
];
2415 var seriesName
= this.attr_("labels")[i
];
2416 extremes
[seriesName
] = seriesExtremes
;
2417 datasets
[i
] = series
;
2420 // For stacked graphs, a NaN value for any point in the sum should create a
2421 // clean gap in the graph. Back-propagate NaNs to all points at this X value.
2422 if (this.attr_("stackedGraph")) {
2423 for (k
= datasets
.length
- 1; k
>= 0; --k
) {
2424 // Use the first nonempty dataset to get X values.
2425 if (!datasets
[k
]) continue;
2426 for (j
= 0; j
< datasets
[k
].length
; j
++) {
2427 var x
= datasets
[k
][j
][0];
2428 if (isNaN(cumulative_y
[x
])) {
2429 // Set all Y values to NaN at that X value.
2430 for (i
= datasets
.length
- 1; i
>= 0; i
--) {
2431 if (!datasets
[i
]) continue;
2432 datasets
[i
][j
][1] = NaN
;
2440 return [ datasets
, extremes
, boundaryIds
];
2444 * Update the graph with new data. This method is called when the viewing area
2445 * has changed. If the underlying data or options have changed, predraw_ will
2446 * be called before drawGraph_ is called.
2450 Dygraph
.prototype.drawGraph_
= function() {
2451 var start
= new Date();
2453 // This is used to set the second parameter to drawCallback, below.
2454 var is_initial_draw
= this.is_initial_draw_
;
2455 this.is_initial_draw_
= false;
2457 this.layout_
.removeAllDatasets();
2459 this.attrs_
.pointSize
= 0.5 * this.attr_('highlightCircleSize');
2461 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2462 var datasets
= packed
[0];
2463 var extremes
= packed
[1];
2464 this.boundaryIds_
= packed
[2];
2466 this.setIndexByName_
= {};
2467 var labels
= this.attr_("labels");
2468 if (labels
.length
> 0) {
2469 this.setIndexByName_
[labels
[0]] = 0;
2472 for (var i
= 1; i
< datasets
.length
; i
++) {
2473 this.setIndexByName_
[labels
[i
]] = i
;
2474 if (!this.visibility()[i
- 1]) continue;
2475 this.layout_
.addDataset(labels
[i
], datasets
[i
]);
2476 this.datasetIndex_
[i
] = dataIdx
++;
2479 this.computeYAxisRanges_(extremes
);
2480 this.layout_
.setYAxes(this.axes_
);
2484 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2485 var tmp_zoomed_x
= this.zoomed_x_
;
2486 // Tell PlotKit to use this new data and render itself
2487 this.zoomed_x_
= tmp_zoomed_x
;
2488 this.layout_
.evaluateWithError();
2489 this.renderGraph_(is_initial_draw
);
2491 if (this.attr_("timingName")) {
2492 var end
= new Date();
2493 Dygraph
.info(this.attr_("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2498 * This does the work of drawing the chart. It assumes that the layout and axis
2499 * scales have already been set (e.g. by predraw_).
2503 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2504 this.cascadeEvents_('clearChart');
2505 this.plotter_
.clear();
2507 if (this.attr_('underlayCallback')) {
2508 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2509 // users who expect a deprecated form of this callback.
2510 this.attr_('underlayCallback')(
2511 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2515 canvas
: this.hidden_
,
2516 drawingContext
: this.hidden_ctx_
2518 this.cascadeEvents_('willDrawChart', e
);
2519 this.plotter_
.render();
2520 this.cascadeEvents_('didDrawChart', e
);
2521 this.lastRow_
= -1; // because plugins/legend.js clears the legend
2523 // TODO(danvk): is this a performance bottleneck when panning?
2524 // The interaction canvas should already be empty in that situation.
2525 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2526 this.canvas_
.height
);
2528 if (this.attr_("drawCallback") !== null) {
2529 this.attr_("drawCallback")(this, is_initial_draw
);
2535 * Determine properties of the y-axes which are independent of the data
2536 * currently being displayed. This includes things like the number of axes and
2537 * the style of the axes. It does not include the range of each axis and its
2539 * This fills in this.axes_.
2540 * axes_ = [ { options } ]
2541 * indices are into the axes_ array.
2543 Dygraph
.prototype.computeYAxes_
= function() {
2544 // Preserve valueWindow settings if they exist, and if the user hasn't
2545 // specified a new valueRange.
2546 var valueWindows
, axis
, index
, opts
, v
;
2547 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2549 for (index
= 0; index
< this.axes_
.length
; index
++) {
2550 valueWindows
.push(this.axes_
[index
].valueWindow
);
2554 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2555 // data computation as well as options storage.
2556 // Go through once and add all the axes.
2559 for (axis
= 0; axis
< this.attributes_
.numAxes(); axis
++) {
2560 // Add a new axis, making a copy of its per-axis options.
2561 opts
= { g
: this };
2562 Dygraph
.update(opts
, this.attributes_
.axisOptions(axis
));
2563 this.axes_
[axis
] = opts
;
2567 // Copy global valueRange option over to the first axis.
2568 // NOTE(konigsberg): Are these two statements necessary?
2569 // I tried removing it. The automated tests pass, and manually
2570 // messing with tests/zoom
.html showed no trouble
.
2571 v
= this.attr_('valueRange');
2572 if (v
) this.axes_
[0].valueRange
= v
;
2574 if (valueWindows
!== undefined
) {
2575 // Restore valueWindow settings.
2577 // When going from two axes back to one, we only restore
2579 var idxCount
= Math
.min(valueWindows
.length
, this.axes_
.length
);
2581 for (index
= 0; index
< idxCount
; index
++) {
2582 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2586 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2588 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2589 v
= opts("valueRange");
2590 if (v
) this.axes_
[axis
].valueRange
= v
;
2591 } else { // To keep old behavior
2592 var axes
= this.user_attrs_
.axes
;
2593 if (axes
&& axes
.y2
) {
2594 v
= axes
.y2
.valueRange
;
2595 if (v
) this.axes_
[axis
].valueRange
= v
;
2602 * Returns the number of y-axes on the chart.
2603 * @return {Number} the number of axes.
2605 Dygraph
.prototype.numAxes
= function() {
2606 return this.attributes_
.numAxes();
2611 * Returns axis properties for the given series.
2612 * @param { String } setName The name of the series for which to get axis
2613 * properties, e.g. 'Y1'.
2614 * @return { Object } The axis properties.
2616 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2617 // TODO(danvk): handle errors.
2618 return this.axes_
[this.attributes_
.axisForSeries(series
)];
2623 * Determine the value range and tick marks for each axis.
2624 * @param {Object} extremes A mapping from seriesName -> [low, high]
2625 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2627 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2628 var isNullUndefinedOrNaN
= function(num
) {
2629 return isNaN(parseFloat(num
));
2631 var numAxes
= this.attributes_
.numAxes();
2632 var ypadCompat
, span
, series
, ypad
;
2636 // Compute extreme values, a span and tick marks for each axis.
2637 for (var i
= 0; i
< numAxes
; i
++) {
2638 var axis
= this.axes_
[i
];
2639 var logscale
= this.attributes_
.getForAxis("logscale", i
);
2640 var includeZero
= this.attributes_
.getForAxis("includeZero", i
);
2641 var independentTicks
= this.attributes_
.getForAxis("independentTicks", i
);
2642 series
= this.attributes_
.seriesForAxis(i
);
2644 // Add some padding. This supports two Y padding operation modes:
2646 // - backwards compatible (yRangePad not set):
2647 // 10% padding for automatic Y ranges, but not for user-supplied
2648 // ranges, and move a close-to-zero edge to zero except if
2649 // avoidMinZero is set, since drawing at the edge results in
2650 // invisible lines. Unfortunately lines drawn at the edge of a
2651 // user-supplied range will still be invisible. If logscale is
2652 // set, add a variable amount of padding at the top but
2653 // none at the bottom.
2655 // - new-style (yRangePad set by the user):
2656 // always add the specified Y padding.
2659 ypad
= 0.1; // add 10%
2660 if (this.attr_('yRangePad') !== null) {
2662 // Convert pixel padding to ratio
2663 ypad
= this.attr_('yRangePad') / this.plotter_
.area
.h
;
2666 if (series
.length
=== 0) {
2667 // If no series are defined or visible then use a reasonable default
2668 axis
.extremeRange
= [0, 1];
2670 // Calculate the extremes of extremes.
2671 var minY
= Infinity
; // extremes[series[0]][0];
2672 var maxY
= -Infinity
; // extremes[series[0]][1];
2673 var extremeMinY
, extremeMaxY
;
2675 for (var j
= 0; j
< series
.length
; j
++) {
2676 // this skips invisible series
2677 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2679 // Only use valid extremes to stop null data series' from corrupting the scale.
2680 extremeMinY
= extremes
[series
[j
]][0];
2681 if (extremeMinY
!== null) {
2682 minY
= Math
.min(extremeMinY
, minY
);
2684 extremeMaxY
= extremes
[series
[j
]][1];
2685 if (extremeMaxY
!== null) {
2686 maxY
= Math
.max(extremeMaxY
, maxY
);
2690 // Include zero if requested by the user.
2691 if (includeZero
&& !logscale
) {
2692 if (minY
> 0) minY
= 0;
2693 if (maxY
< 0) maxY
= 0;
2696 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2697 if (minY
== Infinity
) minY
= 0;
2698 if (maxY
== -Infinity
) maxY
= 1;
2701 // special case: if we have no sense of scale, center on the sole value.
2704 span
= Math
.abs(maxY
);
2706 // ... and if the sole value is zero, use range 0-1.
2712 var maxAxisY
, minAxisY
;
2715 maxAxisY
= maxY
+ ypad
* span
;
2718 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2719 maxAxisY
= maxY
* logpad
;
2720 minAxisY
= minY
/ logpad
;
2723 maxAxisY
= maxY
+ ypad
* span
;
2724 minAxisY
= minY
- ypad
* span
;
2726 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2727 // close to zero, but not if avoidMinZero is set.
2728 if (ypadCompat
&& !this.attr_("avoidMinZero")) {
2729 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2730 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2733 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2735 if (axis
.valueWindow
) {
2736 // This is only set if the user has zoomed on the y-axis. It is never set
2737 // by a user. It takes precedence over axis.valueRange because, if you set
2738 // valueRange, you'd still expect to be able to pan.
2739 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2740 } else if (axis
.valueRange
) {
2741 // This is a user-set value range for this axis.
2742 var y0
= isNullUndefinedOrNaN(axis
.valueRange
[0]) ? axis
.extremeRange
[0] : axis
.valueRange
[0];
2743 var y1
= isNullUndefinedOrNaN(axis
.valueRange
[1]) ? axis
.extremeRange
[1] : axis
.valueRange
[1];
2745 if (axis
.logscale
) {
2746 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2755 axis
.computedValueRange
= [y0
, y1
];
2757 axis
.computedValueRange
= axis
.extremeRange
;
2761 if(independentTicks
) {
2762 axis
.independentTicks
= independentTicks
;
2763 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2764 var ticker
= opts('ticker');
2765 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2766 axis
.computedValueRange
[1],
2767 this.height_
, // TODO(danvk): should be area.height
2770 // Define the first independent axis as primary axis.
2771 if (!p_axis
) p_axis
= axis
;
2774 if (p_axis
=== undefined
) {
2775 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
2777 // Add ticks. By default, all axes inherit the tick positions of the
2778 // primary axis. However, if an axis is specifically marked as having
2779 // independent ticks, then that is permissible as well.
2780 for (var i
= 0; i
< numAxes
; i
++) {
2781 var axis
= this.axes_
[i
];
2783 if (!axis
.independentTicks
) {
2784 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2785 var ticker
= opts('ticker');
2786 var p_ticks
= p_axis
.ticks
;
2787 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2788 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2789 var tick_values
= [];
2790 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2791 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2792 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2793 tick_values
.push(y_val
);
2796 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2797 axis
.computedValueRange
[1],
2798 this.height_
, // TODO(danvk): should be area.height
2807 * Extracts one series from the raw data (a 2D array) into an array of (date,
2810 * This is where undesirable points (i.e. negative values on log scales and
2811 * missing values through which we wish to connect lines) are dropped.
2812 * TODO(danvk): the "missing values" bit above doesn't seem right.
2816 Dygraph
.prototype.extractSeries_
= function(rawData
, i
, logScale
) {
2817 // TODO(danvk): pre-allocate series here.
2819 var errorBars
= this.attr_("errorBars");
2820 var customBars
= this.attr_("customBars");
2821 for (var j
= 0; j
< rawData
.length
; j
++) {
2822 var x
= rawData
[j
][0];
2823 var point
= rawData
[j
][i
];
2825 // On the log scale, points less than zero do not exist.
2826 // This will create a gap in the chart.
2827 if (errorBars
|| customBars
) {
2828 // point.length is either 2 (errorBars) or 3 (customBars)
2829 for (var k
= 0; k
< point
.length
; k
++) {
2830 if (point
[k
] <= 0) {
2835 } else if (point
<= 0) {
2839 // Fix null points to fit the display type standard.
2840 if (point
!== null) {
2841 series
.push([x
, point
]);
2843 series
.push([x
, errorBars
? [null, null] : customBars
? [null, null, null] : point
]);
2851 * Calculates the rolling average of a data set.
2852 * If originalData is [label, val], rolls the average of those.
2853 * If originalData is [label, [, it's interpreted as [value, stddev]
2854 * and the roll is returned in the same form, with appropriately reduced
2855 * stddev for each value.
2856 * Note that this is where fractional input (i.e. '5/10') is converted into
2858 * @param {Array} originalData The data in the appropriate format (see above)
2859 * @param {Number} rollPeriod The number of points over which to average the
2862 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2863 rollPeriod
= Math
.min(rollPeriod
, originalData
.length
);
2864 var rollingData
= [];
2865 var sigma
= this.attr_("sigma");
2867 var low
, high
, i
, j
, y
, sum
, num_ok
, stddev
;
2868 if (this.fractions_
) {
2870 var den
= 0; // numerator/denominator
2872 for (i
= 0; i
< originalData
.length
; i
++) {
2873 num
+= originalData
[i
][1][0];
2874 den
+= originalData
[i
][1][1];
2875 if (i
- rollPeriod
>= 0) {
2876 num
-= originalData
[i
- rollPeriod
][1][0];
2877 den
-= originalData
[i
- rollPeriod
][1][1];
2880 var date
= originalData
[i
][0];
2881 var value
= den
? num
/ den
: 0.0;
2882 if (this.attr_("errorBars")) {
2883 if (this.attr_("wilsonInterval")) {
2884 // For more details on this confidence interval, see:
2885 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2887 var p
= value
< 0 ? 0 : value
, n
= den
;
2888 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2889 var denom
= 1 + sigma
* sigma
/ den
;
2890 low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2891 high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2892 rollingData
[i
] = [date
,
2893 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2895 rollingData
[i
] = [date
, [0, 0, 0]];
2898 stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2899 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2902 rollingData
[i
] = [date
, mult
* value
];
2905 } else if (this.attr_("customBars")) {
2910 for (i
= 0; i
< originalData
.length
; i
++) {
2911 var data
= originalData
[i
][1];
2913 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2915 if (y
!== null && !isNaN(y
)) {
2921 if (i
- rollPeriod
>= 0) {
2922 var prev
= originalData
[i
- rollPeriod
];
2923 if (prev
[1][1] !== null && !isNaN(prev
[1][1])) {
2931 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2932 1.0 * (mid
- low
) / count
,
2933 1.0 * (high
- mid
) / count
]];
2935 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2939 // Calculate the rolling average for the first rollPeriod - 1 points where
2940 // there is not enough data to roll over the full number of points
2941 if (!this.attr_("errorBars")){
2942 if (rollPeriod
== 1) {
2943 return originalData
;
2946 for (i
= 0; i
< originalData
.length
; i
++) {
2949 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2950 y
= originalData
[j
][1];
2951 if (y
=== null || isNaN(y
)) continue;
2953 sum
+= originalData
[j
][1];
2956 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2958 rollingData
[i
] = [originalData
[i
][0], null];
2963 for (i
= 0; i
< originalData
.length
; i
++) {
2967 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2968 y
= originalData
[j
][1][0];
2969 if (y
=== null || isNaN(y
)) continue;
2971 sum
+= originalData
[j
][1][0];
2972 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2975 stddev
= Math
.sqrt(variance
) / num_ok
;
2976 rollingData
[i
] = [originalData
[i
][0],
2977 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2979 // This explicitly preserves NaNs to aid with "independent series".
2980 // See testRollingAveragePreservesNaNs.
2981 var v
= (rollPeriod
== 1) ? originalData
[i
][1][0] : null;
2982 rollingData
[i
] = [originalData
[i
][0], [v
, v
, v
]];
2992 * Detects the type of the str (date or numeric) and sets the various
2993 * formatting attributes in this.attrs_ based on this type.
2994 * @param {String} str An x value.
2997 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2999 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
3000 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
3001 str
.indexOf('/') >= 0 ||
3002 isNaN(parseFloat(str
))) {
3004 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3005 // TODO(danvk): remove support for this format.
3009 this.setXAxisOptions_(isDate
);
3012 Dygraph
.prototype.setXAxisOptions_
= function(isDate
) {
3014 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3015 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
3016 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3017 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3019 /** @private (shut up, jsdoc!) */
3020 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3021 // TODO(danvk): use Dygraph.numberValueFormatter here?
3022 /** @private (shut up, jsdoc!) */
3023 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3024 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3025 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3030 * Parses the value as a floating point number. This is like the parseFloat()
3031 * built-in, but with a few differences:
3032 * - the empty string is parsed as null, rather than NaN.
3033 * - if the string cannot be parsed at all, an error is logged.
3034 * If the string can't be parsed, this method returns null.
3035 * @param {String} x The string to be parsed
3036 * @param {Number} opt_line_no The line number from which the string comes.
3037 * @param {String} opt_line The text of the line from which the string comes.
3041 // Parse the x as a float or return null if it's not a number.
3042 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3043 var val
= parseFloat(x
);
3044 if (!isNaN(val
)) return val
;
3046 // Try to figure out what happeend.
3047 // If the value is the empty string, parse it as null.
3048 if (/^ *$/.test(x
)) return null;
3050 // If it was actually "NaN", return it as NaN.
3051 if (/^ *nan *$/i.test(x
)) return NaN
;
3053 // Looks like a parsing error.
3054 var msg
= "Unable to parse '" + x
+ "' as a number";
3055 if (opt_line
!== null && opt_line_no
!== null) {
3056 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3065 * Parses a string in a special csv format. We expect a csv file where each
3066 * line is a date point, and the first field in each line is the date string.
3067 * We also expect that all remaining fields represent series.
3068 * if the errorBars attribute is set, then interpret the fields as:
3069 * date, series1, stddev1, series2, stddev2, ...
3070 * @param {[Object]} data See above.
3072 * @return [Object] An array with one entry for each row. These entries
3073 * are an array of cells in that row. The first entry is the parsed x-value for
3074 * the row. The second, third, etc. are the y-values. These can take on one of
3075 * three forms, depending on the CSV and constructor parameters:
3077 * 2. [ value, stddev ]
3078 * 3. [ low value, center value, high value ]
3080 Dygraph
.prototype.parseCSV_
= function(data
) {
3082 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3083 var lines
= data
.split(line_delimiter
|| "\n");
3086 // Use the default delimiter or fall back to a tab if that makes sense.
3087 var delim
= this.attr_('delimiter');
3088 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3093 if (!('labels' in this.user_attrs_
)) {
3094 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
3096 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
3097 this.attributes_
.reparseSeries();
3102 var defaultParserSet
= false; // attempt to auto-detect x value type
3103 var expectedCols
= this.attr_("labels").length
;
3104 var outOfOrder
= false;
3105 for (var i
= start
; i
< lines
.length
; i
++) {
3106 var line
= lines
[i
];
3108 if (line
.length
=== 0) continue; // skip blank lines
3109 if (line
[0] == '#') continue; // skip comment lines
3110 var inFields
= line
.split(delim
);
3111 if (inFields
.length
< 2) continue;
3114 if (!defaultParserSet
) {
3115 this.detectTypeFromString_(inFields
[0]);
3116 xParser
= this.attr_("xValueParser");
3117 defaultParserSet
= true;
3119 fields
[0] = xParser(inFields
[0], this);
3121 // If fractions are expected, parse the numbers as "A/B
"
3122 if (this.fractions_) {
3123 for (j = 1; j < inFields.length; j++) {
3124 // TODO(danvk): figure out an appropriate way to flag parse errors.
3125 vals = inFields[j].split("/");
3126 if (vals.length != 2) {
3127 this.error('Expected fractional "num
/den
" values in CSV data ' +
3128 "but found a value
'" + inFields[j] + "' on line
" +
3129 (1 + i) + " ('" + line + "') which is not of
this form
.");
3132 fields[j] = [this.parseFloat_(vals[0], i, line),
3133 this.parseFloat_(vals[1], i, line)];
3136 } else if (this.attr_("errorBars
")) {
3137 // If there are error bars, values are (value, stddev) pairs
3138 if (inFields.length % 2 != 1) {
3139 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3140 'but line ' + (1 + i) + ' has an odd number of values (' +
3141 (inFields.length - 1) + "): '" + line + "'");
3143 for (j = 1; j < inFields.length; j += 2) {
3144 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3145 this.parseFloat_(inFields[j + 1], i, line)];
3147 } else if (this.attr_("customBars
")) {
3148 // Bars are a low;center;high tuple
3149 for (j = 1; j < inFields.length; j++) {
3150 var val = inFields[j];
3151 if (/^ *$/.test(val)) {
3152 fields[j] = [null, null, null];
3154 vals = val.split(";");
3155 if (vals.length == 3) {
3156 fields[j] = [ this.parseFloat_(vals[0], i, line),
3157 this.parseFloat_(vals[1], i, line),
3158 this.parseFloat_(vals[2], i, line) ];
3160 this.warn('When using customBars, values must be either blank ' +
3161 'or "low
;center
;high
" tuples (got "' + val +
3162 '" on line ' + (1+i));
3167 // Values are just numbers
3168 for (j = 1; j < inFields.length; j++) {
3169 fields[j] = this.parseFloat_(inFields[j], i, line);
3172 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3176 if (fields.length != expectedCols) {
3177 this.error("Number of columns
in line
" + i + " (" + fields.length +
3178 ") does not agree
with number of
labels (" + expectedCols +
3182 // If the user specified the 'labels' option and none of the cells of the
3183 // first row parsed correctly, then they probably double-specified the
3184 // labels. We go with the values set in the option, discard this row and
3185 // log a warning to the JS console.
3186 if (i === 0 && this.attr_('labels')) {
3187 var all_null = true;
3188 for (j = 0; all_null && j < fields.length; j++) {
3189 if (fields[j]) all_null = false;
3192 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3193 "CSV
data ('" + line + "') appears to also contain labels
. " +
3194 "Will drop the CSV labels and
use the option labels
.");
3202 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3203 ret.sort(function(a,b) { return a[0] - b[0]; });
3211 * The user has provided their data as a pre-packaged JS array. If the x values
3212 * are numeric, this is the same as dygraphs' internal format. If the x values
3213 * are dates, we need to convert them from Date objects to ms since epoch.
3214 * @param {[Object]} data
3215 * @return {[Object]} data with numeric x values.
3217 Dygraph.prototype.parseArray_ = function(data) {
3218 // Peek at the first x value to see if it's numeric.
3219 if (data.length === 0) {
3220 this.error("Can
't plot empty data set");
3223 if (data[0].length === 0) {
3224 this.error("Data set cannot contain an empty row");
3229 if (this.attr_("labels") === null) {
3230 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3231 "in the options parameter");
3232 this.attrs_.labels = [ "X" ];
3233 for (i = 1; i < data[0].length; i++) {
3234 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
3236 this.attributes_.reparseSeries();
3238 var num_labels = this.attr_("labels");
3239 if (num_labels.length != data[0].length) {
3240 this.error("Mismatch between number of labels (" + num_labels +
3241 ") and number of columns in array (" + data[0].length + ")");
3246 if (Dygraph.isDateLike(data[0][0])) {
3247 // Some intelligent defaults for a date x-axis.
3248 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
3249 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3250 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
3252 // Assume they're all dates
.
3253 var parsedData
= Dygraph
.clone(data
);
3254 for (i
= 0; i
< data
.length
; i
++) {
3255 if (parsedData
[i
].length
=== 0) {
3256 this.error("Row " + (1 + i
) + " of data is empty");
3259 if (parsedData
[i
][0] === null ||
3260 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3261 isNaN(parsedData
[i
][0].getTime())) {
3262 this.error("x value in row " + (1 + i
) + " is not a Date");
3265 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3269 // Some intelligent defaults for a numeric x-axis.
3270 /** @private (shut up, jsdoc!) */
3271 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3272 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3273 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3279 * Parses a DataTable object from gviz.
3280 * The data is expected to have a first column that is either a date or a
3281 * number. All subsequent columns must be numbers. If there is a clear mismatch
3282 * between this.xValueParser_ and the type of the first column, it will be
3283 * fixed. Fills out rawData_.
3284 * @param {[Object]} data See above.
3287 Dygraph
.prototype.parseDataTable_
= function(data
) {
3288 var shortTextForAnnotationNum
= function(num
) {
3289 // converts [0-9]+ [A-Z][a-z]*
3290 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3291 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3292 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3293 num
= Math
.floor(num
/ 26);
3295 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3296 num
= Math
.floor((num
- 1) / 26);
3301 var cols
= data
.getNumberOfColumns();
3302 var rows
= data
.getNumberOfRows();
3304 var indepType
= data
.getColumnType(0);
3305 if (indepType
== 'date' || indepType
== 'datetime') {
3306 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3307 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
3308 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3309 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3310 } else if (indepType
== 'number') {
3311 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3312 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3313 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3314 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3316 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3317 "column 1 of DataTable input (Got '" + indepType
+ "')");
3321 // Array of the column indices which contain data (and not annotations).
3323 var annotationCols
= {}; // data index -> [annotation cols]
3324 var hasAnnotations
= false;
3326 for (i
= 1; i
< cols
; i
++) {
3327 var type
= data
.getColumnType(i
);
3328 if (type
== 'number') {
3330 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3331 // This is OK -- it's an annotation column.
3332 var dataIdx
= colIdx
[colIdx
.length
- 1];
3333 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3334 annotationCols
[dataIdx
] = [i
];
3336 annotationCols
[dataIdx
].push(i
);
3338 hasAnnotations
= true;
3340 this.error("Only 'number' is supported as a dependent type with Gviz." +
3341 " 'string' is only supported if displayAnnotations is true");
3345 // Read column labels
3346 // TODO(danvk): add support back for errorBars
3347 var labels
= [data
.getColumnLabel(0)];
3348 for (i
= 0; i
< colIdx
.length
; i
++) {
3349 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3350 if (this.attr_("errorBars")) i
+= 1;
3352 this.attrs_
.labels
= labels
;
3353 cols
= labels
.length
;
3356 var outOfOrder
= false;
3357 var annotations
= [];
3358 for (i
= 0; i
< rows
; i
++) {
3360 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3361 data
.getValue(i
, 0) === null) {
3362 this.warn("Ignoring row " + i
+
3363 " of DataTable because of undefined or null first column.");
3367 if (indepType
== 'date' || indepType
== 'datetime') {
3368 row
.push(data
.getValue(i
, 0).getTime());
3370 row
.push(data
.getValue(i
, 0));
3372 if (!this.attr_("errorBars")) {
3373 for (j
= 0; j
< colIdx
.length
; j
++) {
3374 var col
= colIdx
[j
];
3375 row
.push(data
.getValue(i
, col
));
3376 if (hasAnnotations
&&
3377 annotationCols
.hasOwnProperty(col
) &&
3378 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3380 ann
.series
= data
.getColumnLabel(col
);
3382 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3384 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3385 if (k
) ann
.text
+= "\n";
3386 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3388 annotations
.push(ann
);
3392 // Strip out infinities, which give dygraphs problems later on.
3393 for (j
= 0; j
< row
.length
; j
++) {
3394 if (!isFinite(row
[j
])) row
[j
] = null;
3397 for (j
= 0; j
< cols
- 1; j
++) {
3398 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3401 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3408 this.warn("DataTable is out of order; order it correctly to speed loading.");
3409 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3411 this.rawData_
= ret
;
3413 if (annotations
.length
> 0) {
3414 this.setAnnotations(annotations
, true);
3416 this.attributes_
.reparseSeries();
3420 * Get the CSV data. If it's in a function, call that function. If it's in a
3421 * file, do an XMLHttpRequest to get it.
3424 Dygraph
.prototype.start_
= function() {
3425 var data
= this.file_
;
3427 // Functions can return references of all other types.
3428 if (typeof data
== 'function') {
3432 if (Dygraph
.isArrayLike(data
)) {
3433 this.rawData_
= this.parseArray_(data
);
3435 } else if (typeof data
== 'object' &&
3436 typeof data
.getColumnRange
== 'function') {
3437 // must be a DataTable from gviz.
3438 this.parseDataTable_(data
);
3440 } else if (typeof data
== 'string') {
3441 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3442 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3443 if (line_delimiter
) {
3444 this.loadedEvent_(data
);
3446 var req
= new XMLHttpRequest();
3448 req
.onreadystatechange
= function () {
3449 if (req
.readyState
== 4) {
3450 if (req
.status
=== 200 || // Normal http
3451 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3452 caller
.loadedEvent_(req
.responseText
);
3457 req
.open("GET", data
, true);
3461 this.error("Unknown data format: " + (typeof data
));
3466 * Changes various properties of the graph. These can include:
3468 * <li>file: changes the source data for the graph</li>
3469 * <li>errorBars: changes whether the data contains stddev</li>
3472 * There's a huge variety of options that can be passed to this method. For a
3473 * full list, see http://dygraphs.com/options.html.
3475 * @param {Object} attrs The new properties and values
3476 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3477 * call to updateOptions(). If you know better, you can pass true to explicitly
3478 * block the redraw. This can be useful for chaining updateOptions() calls,
3479 * avoiding the occasional infinite loop and preventing redraws when it's not
3480 * necessary (e.g. when updating a callback).
3482 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3483 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3485 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
3486 var file
= input_attrs
.file
;
3487 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
3489 // TODO(danvk): this is a mess. Move these options into attr_.
3490 if ('rollPeriod' in attrs
) {
3491 this.rollPeriod_
= attrs
.rollPeriod
;
3493 if ('dateWindow' in attrs
) {
3494 this.dateWindow_
= attrs
.dateWindow
;
3495 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3496 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3499 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3500 this.zoomed_y_
= (attrs
.valueRange
!== null);
3503 // TODO(danvk): validate per-series options.
3508 // highlightCircleSize
3510 // Check if this set options will require new points.
3511 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3513 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3515 this.attributes_
.reparseSeries();
3519 if (!block_redraw
) this.start_();
3521 if (!block_redraw
) {
3522 if (requiresNewPoints
) {
3525 this.renderGraph_(false);
3532 * Returns a copy of the options with deprecated names converted into current
3533 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3534 * interested in that, they should save a copy before calling this.
3537 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3539 for (var k
in attrs
) {
3540 if (k
== 'file') continue;
3541 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3544 var set
= function(axis
, opt
, value
) {
3545 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3546 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3547 my_attrs
.axes
[axis
][opt
] = value
;
3549 var map
= function(opt
, axis
, new_opt
) {
3550 if (typeof(attrs
[opt
]) != 'undefined') {
3551 Dygraph
.warn("Option " + opt
+ " is deprecated. Use the " +
3552 new_opt
+ " option for the " + axis
+ " axis instead. " +
3553 "(e.g. { axes : { " + axis
+ " : { " + new_opt
+ " : ... } } } " +
3554 "(see http://dygraphs.com/per-axis.html for more information.");
3555 set(axis
, new_opt
, attrs
[opt
]);
3556 delete my_attrs
[opt
];
3560 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3561 map('xValueFormatter', 'x', 'valueFormatter');
3562 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3563 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3564 map('xTicker', 'x', 'ticker');
3565 map('yValueFormatter', 'y', 'valueFormatter');
3566 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3567 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3568 map('yTicker', 'y', 'ticker');
3573 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3574 * containing div (which has presumably changed size since the dygraph was
3575 * instantiated. If the width/height are specified, the div will be resized.
3577 * This is far more efficient than destroying and re-instantiating a
3578 * Dygraph, since it doesn't have to reparse the underlying data.
3580 * @param {Number} [width] Width (in pixels)
3581 * @param {Number} [height] Height (in pixels)
3583 Dygraph
.prototype.resize
= function(width
, height
) {
3584 if (this.resize_lock
) {
3587 this.resize_lock
= true;
3589 if ((width
=== null) != (height
=== null)) {
3590 this.warn("Dygraph.resize() should be called with zero parameters or " +
3591 "two non-NULL parameters. Pretending it was zero.");
3592 width
= height
= null;
3595 var old_width
= this.width_
;
3596 var old_height
= this.height_
;
3599 this.maindiv_
.style
.width
= width
+ "px";
3600 this.maindiv_
.style
.height
= height
+ "px";
3601 this.width_
= width
;
3602 this.height_
= height
;
3604 this.width_
= this.maindiv_
.clientWidth
;
3605 this.height_
= this.maindiv_
.clientHeight
;
3608 this.resizeElements_();
3610 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3614 this.resize_lock
= false;
3618 * Adjusts the number of points in the rolling average. Updates the graph to
3619 * reflect the new averaging period.
3620 * @param {Number} length Number of points over which to average the data.
3622 Dygraph
.prototype.adjustRoll
= function(length
) {
3623 this.rollPeriod_
= length
;
3628 * Returns a boolean array of visibility statuses.
3630 Dygraph
.prototype.visibility
= function() {
3631 // Do lazy-initialization, so that this happens after we know the number of
3633 if (!this.attr_("visibility")) {
3634 this.attrs_
.visibility
= [];
3636 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3637 while (this.attr_("visibility").length
< this.numColumns() - 1) {
3638 this.attrs_
.visibility
.push(true);
3640 return this.attr_("visibility");
3644 * Changes the visiblity of a series.
3646 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3647 var x
= this.visibility();
3648 if (num
< 0 || num
>= x
.length
) {
3649 this.warn("invalid series number in setVisibility: " + num
);
3657 * How large of an area will the dygraph render itself in?
3658 * This is used for testing.
3659 * @return A {width: w, height: h} object.
3662 Dygraph
.prototype.size
= function() {
3663 return { width
: this.width_
, height
: this.height_
};
3667 * Update the list of annotations and redraw the chart.
3668 * See dygraphs.com/annotations.html for more info on how to use annotations.
3669 * @param ann {Array} An array of annotation objects.
3670 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3672 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3673 // Only add the annotation CSS rule once we know it will be used.
3674 Dygraph
.addAnnotationRule();
3675 this.annotations_
= ann
;
3676 if (!this.layout_
) {
3677 this.warn("Tried to setAnnotations before dygraph was ready. " +
3678 "Try setting them in a drawCallback. See " +
3679 "dygraphs.com/tests/annotation.html");
3683 this.layout_
.setAnnotations(this.annotations_
);
3684 if (!suppressDraw
) {
3690 * Return the list of annotations.
3692 Dygraph
.prototype.annotations
= function() {
3693 return this.annotations_
;
3697 * Get the list of label names for this graph. The first column is the
3698 * x-axis, so the data series names start at index 1.
3700 * Returns null when labels have not yet been defined.
3702 Dygraph
.prototype.getLabels
= function() {
3703 var labels
= this.attr_("labels");
3704 return labels
? labels
.slice() : null;
3708 * Get the index of a series (column) given its name. The first column is the
3709 * x-axis, so the data series start with index 1.
3711 Dygraph
.prototype.indexFromSetName
= function(name
) {
3712 return this.setIndexByName_
[name
];
3716 * Get the internal dataset index given its name. These are numbered starting from 0,
3717 * and only count visible sets.
3720 Dygraph
.prototype.datasetIndexFromSetName_
= function(name
) {
3721 return this.datasetIndex_
[this.indexFromSetName(name
)];
3726 * Adds a default style for the annotation CSS classes to the document. This is
3727 * only executed when annotations are actually used. It is designed to only be
3728 * called once -- all calls after the first will return immediately.
3730 Dygraph
.addAnnotationRule
= function() {
3731 // TODO(danvk): move this function into plugins/annotations.js
?
3732 if (Dygraph
.addedAnnotationCSS
) return;
3734 var rule
= "border: 1px solid black; " +
3735 "background-color: white; " +
3736 "text-align: center;";
3738 var styleSheetElement
= document
.createElement("style");
3739 styleSheetElement
.type
= "text/css";
3740 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3742 // Find the first style sheet that we can access.
3743 // We may not add a rule to a style sheet from another domain for security
3744 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3745 // adds its own style sheets from google.com.
3746 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3747 if (document
.styleSheets
[i
].disabled
) continue;
3748 var mysheet
= document
.styleSheets
[i
];
3750 if (mysheet
.insertRule
) { // Firefox
3751 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3752 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3753 } else if (mysheet
.addRule
) { // IE
3754 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3756 Dygraph
.addedAnnotationCSS
= true;
3759 // Was likely a security exception.
3763 this.warn("Unable to add default annotation CSS rule; display may be off.");
3766 // Older pages may still use this name.
3767 var DateGraph
= Dygraph
;