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 stackedGraphNaNFill
: 'all',
295 hideOverlayOnMouseOut
: true,
297 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
298 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
304 drawAxesAtZero
: false,
306 // Sizes of the various chart labels.
313 axisLineColor
: "black",
316 axisLabelColor
: "black",
317 axisLabelFont
: "Arial", // TODO(danvk): is this implemented?
321 gridLineColor
: "rgb(128,128,128)",
323 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
324 animatedZooms
: false, // (for now)
326 // Range selector options
327 showRangeSelector
: false,
328 rangeSelectorHeight
: 40,
329 rangeSelectorPlotStrokeColor
: "#808FAB",
330 rangeSelectorPlotFillColor
: "#A7B1C4",
332 // The ordering here ensures that central lines always appear above any
333 // fill bars/error bars
.
335 Dygraph
.Plotters
.fillPlotter
,
336 Dygraph
.Plotters
.errorPlotter
,
337 Dygraph
.Plotters
.linePlotter
346 axisLabelFormatter
: Dygraph
.dateAxisFormatter
,
347 valueFormatter
: Dygraph
.dateString_
,
349 independentTicks
: true,
350 ticker
: null // will be set in dygraph-tickers.js
354 valueFormatter
: Dygraph
.numberValueFormatter
,
355 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
357 independentTicks
: true,
358 ticker
: null // will be set in dygraph-tickers.js
362 valueFormatter
: Dygraph
.numberValueFormatter
,
363 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
365 independentTicks
: false,
366 ticker
: null // will be set in dygraph-tickers.js
371 // Directions for panning and zooming. Use bit operations when combined
372 // values are possible.
373 Dygraph
.HORIZONTAL
= 1;
374 Dygraph
.VERTICAL
= 2;
376 // Installed plugins, in order of precedence (most-general to most-specific).
377 // Plugins are installed after they are defined, in plugins/install.js
.
381 // Used for initializing annotation CSS rules only once.
382 Dygraph
.addedAnnotationCSS
= false;
384 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
385 // Labels is no longer a constructor parameter, since it's typically set
386 // directly from the data source. It also conains a name for the x-axis,
387 // which the previous constructor form did not.
388 if (labels
!== null) {
389 var new_labels
= ["Date"];
390 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
391 Dygraph
.update(attrs
, { 'labels': new_labels
});
393 this.__init__(div
, file
, attrs
);
397 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
398 * and context <canvas> inside of it. See the constructor for details.
400 * @param {Element} div the Element to render the graph into.
401 * @param {String | Function} file Source data
402 * @param {Object} attrs Miscellaneous other options
405 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
406 // Hack for IE: if we're using excanvas and the document hasn't finished
407 // loading yet (and hence may not have initialized whatever it needs to
408 // initialize), then keep calling this routine periodically until it has.
409 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
410 typeof(G_vmlCanvasManager
) != 'undefined' &&
411 document
.readyState
!= 'complete') {
413 setTimeout(function() { self
.__init__(div
, file
, attrs
); }, 100);
417 // Support two-argument constructor
418 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
420 attrs
= Dygraph
.mapLegacyOptions_(attrs
);
422 if (typeof(div
) == 'string') {
423 div
= document
.getElementById(div
);
427 Dygraph
.error("Constructing dygraph with a non-existent div!");
431 this.isUsingExcanvas_
= typeof(G_vmlCanvasManager
) != 'undefined';
433 // Copy the important bits into the object
434 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
437 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
438 this.previousVerticalX_
= -1;
439 this.fractions_
= attrs
.fractions
|| false;
440 this.dateWindow_
= attrs
.dateWindow
|| null;
442 this.is_initial_draw_
= true;
443 this.annotations_
= [];
446 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
447 this.zoomed_x_
= false;
448 this.zoomed_y_
= false;
450 // Clear the div. This ensure that, if multiple dygraphs are passed the same
451 // div, then only one will be drawn.
454 // For historical reasons, the 'width' and 'height' options trump all CSS
455 // rules _except_ for an explicit 'width' or 'height' on the div.
456 // As an added convenience, if the div has zero height (like <div></div> does
457 // without any styles), then we use a default height/width
.
458 if (div
.style
.width
=== '' && attrs
.width
) {
459 div
.style
.width
= attrs
.width
+ "px";
461 if (div
.style
.height
=== '' && attrs
.height
) {
462 div
.style
.height
= attrs
.height
+ "px";
464 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
465 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
466 if (div
.style
.width
=== '') {
467 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
470 // These will be zero if the dygraph's div is hidden. In that case,
471 // use the user-specified attributes if present. If not, use zero
472 // and assume the user will call resize to fix things later.
473 this.width_
= div
.clientWidth
|| attrs
.width
|| 0;
474 this.height_
= div
.clientHeight
|| attrs
.height
|| 0;
476 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
477 if (attrs
.stackedGraph
) {
478 attrs
.fillGraph
= true;
479 // TODO(nikhilk): Add any other stackedGraph checks here.
482 // DEPRECATION WARNING: All option processing should be moved from
483 // attrs_ and user_attrs_ to options_, which holds all this information.
485 // Dygraphs has many options, some of which interact with one another.
486 // To keep track of everything, we maintain two sets of options:
488 // this.user_attrs_ only options explicitly set by the user.
489 // this.attrs_ defaults, options derived from user_attrs_, data.
491 // Options are then accessed this.attr_('attr'), which first looks at
492 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
493 // defaults without overriding behavior that the user specifically asks for.
494 this.user_attrs_
= {};
495 Dygraph
.update(this.user_attrs_
, attrs
);
497 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
499 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
501 this.boundaryIds_
= [];
502 this.setIndexByName_
= {};
503 this.datasetIndex_
= [];
505 this.registeredEvents_
= [];
506 this.eventListeners_
= {};
508 this.attributes_
= new DygraphOptions(this);
510 // Create the containing DIV and other interactive elements
511 this.createInterface_();
515 var plugins
= Dygraph
.PLUGINS
.concat(this.getOption('plugins'));
516 for (var i
= 0; i
< plugins
.length
; i
++) {
517 var Plugin
= plugins
[i
];
518 var pluginInstance
= new Plugin();
520 plugin
: pluginInstance
,
526 var handlers
= pluginInstance
.activate(this);
527 for (var eventName
in handlers
) {
528 // TODO(danvk): validate eventName.
529 pluginDict
.events
[eventName
] = handlers
[eventName
];
532 this.plugins_
.push(pluginDict
);
535 // At this point, plugins can no longer register event handlers.
536 // Construct a map from event -> ordered list of [callback, plugin].
537 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
538 var plugin_dict
= this.plugins_
[i
];
539 for (var eventName
in plugin_dict
.events
) {
540 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
541 var callback
= plugin_dict
.events
[eventName
];
543 var pair
= [plugin_dict
.plugin
, callback
];
544 if (!(eventName
in this.eventListeners_
)) {
545 this.eventListeners_
[eventName
] = [pair
];
547 this.eventListeners_
[eventName
].push(pair
);
552 this.createDragInterface_();
558 * Triggers a cascade of events to the various plugins which are interested in them.
559 * Returns true if the "default behavior" should be performed, i.e. if none of
560 * the event listeners called event.preventDefault().
563 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
564 if (!(name
in this.eventListeners_
)) return true;
566 // QUESTION: can we use objects & prototypes to speed this up?
570 defaultPrevented
: false,
571 preventDefault
: function() {
572 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
573 e
.defaultPrevented
= true;
575 propagationStopped
: false,
576 stopPropagation
: function() {
577 e
.propagationStopped
= true;
580 Dygraph
.update(e
, extra_props
);
582 var callback_plugin_pairs
= this.eventListeners_
[name
];
583 if (callback_plugin_pairs
) {
584 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
585 var plugin
= callback_plugin_pairs
[i
][0];
586 var callback
= callback_plugin_pairs
[i
][1];
587 callback
.call(plugin
, e
);
588 if (e
.propagationStopped
) break;
591 return e
.defaultPrevented
;
595 * Returns the zoomed status of the chart for one or both axes.
597 * Axis is an optional parameter. Can be set to 'x' or 'y'.
599 * The zoomed status for an axis is set whenever a user zooms using the mouse
600 * or when the dateWindow or valueRange are updated (unless the
601 * isZoomedIgnoreProgrammaticZoom option is also specified).
603 Dygraph
.prototype.isZoomed
= function(axis
) {
604 if (axis
=== null || axis
=== undefined
) {
605 return this.zoomed_x_
|| this.zoomed_y_
;
607 if (axis
=== 'x') return this.zoomed_x_
;
608 if (axis
=== 'y') return this.zoomed_y_
;
609 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
613 * Returns information about the Dygraph object, including its containing ID.
615 Dygraph
.prototype.toString
= function() {
616 var maindiv
= this.maindiv_
;
617 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
618 return "[Dygraph " + id
+ "]";
623 * Returns the value of an option. This may be set by the user (either in the
624 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
626 * @param { String } name The name of the option, e.g. 'rollPeriod'.
627 * @param { String } [seriesName] The name of the series to which the option
628 * will be applied. If no per-series value of this option is available, then
629 * the global value is returned. This is optional.
630 * @return { ... } The value of the option.
632 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
633 // <REMOVE_FOR_COMBINED>
634 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
635 this.error('Must include options reference JS for testing');
636 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
637 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
638 'in the Dygraphs.OPTIONS_REFERENCE listing.');
639 // Only log this error once.
640 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
642 // </REMOVE_FOR_COMBINED
>
643 return seriesName
? this.attributes_
.getForSeries(name
, seriesName
) : this.attributes_
.get(name
);
647 * Returns the current value for an option, as set in the constructor or via
648 * updateOptions. You may pass in an (optional) series name to get per-series
649 * values for the option.
651 * All values returned by this method should be considered immutable. If you
652 * modify them, there is no guarantee that the changes will be honored or that
653 * dygraphs will remain in a consistent state. If you want to modify an option,
654 * use updateOptions() instead.
656 * @param { String } name The name of the option (e.g. 'strokeWidth')
657 * @param { String } [opt_seriesName] Series name to get per-series values.
658 * @return { ... } The value of the option.
660 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
661 return this.attr_(name
, opt_seriesName
);
664 Dygraph
.prototype.getOptionForAxis
= function(name
, axis
) {
665 return this.attributes_
.getForAxis(name
, axis
);
670 * @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2')
671 * @return { ... } A function mapping string -> option value
673 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
675 return function(opt
) {
676 var axis_opts
= self
.user_attrs_
.axes
;
677 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
678 return axis_opts
[axis
][opt
];
680 // user-specified attributes always trump defaults, even if they're less
682 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
683 return self
.user_attrs_
[opt
];
686 axis_opts
= self
.attrs_
.axes
;
687 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
688 return axis_opts
[axis
][opt
];
690 // check old-style axis options
691 // TODO(danvk): add a deprecation warning if either of these match.
692 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
693 return self
.axes_
[0][opt
];
694 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
695 return self
.axes_
[1][opt
];
697 return self
.attr_(opt
);
702 * Returns the current rolling period, as set by the user or an option.
703 * @return {Number} The number of points in the rolling window
705 Dygraph
.prototype.rollPeriod
= function() {
706 return this.rollPeriod_
;
710 * Returns the currently-visible x-range. This can be affected by zooming,
711 * panning or a call to updateOptions.
712 * Returns a two-element array: [left, right].
713 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
715 Dygraph
.prototype.xAxisRange
= function() {
716 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
720 * Returns the lower- and upper-bound x-axis values of the
723 Dygraph
.prototype.xAxisExtremes
= function() {
724 var pad
= this.attr_('xRangePad') / this.plotter_
.area
.w
;
725 if (this.numRows() === 0) {
726 return [0 - pad
, 1 + pad
];
728 var left
= this.rawData_
[0][0];
729 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
731 // Must keep this in sync with dygraph-layout _evaluateLimits()
732 var range
= right
- left
;
734 right
+= range
* pad
;
736 return [left
, right
];
740 * Returns the currently-visible y-range for an axis. This can be affected by
741 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
742 * called with no arguments, returns the range of the first axis.
743 * Returns a two-element array: [bottom, top].
745 Dygraph
.prototype.yAxisRange
= function(idx
) {
746 if (typeof(idx
) == "undefined") idx
= 0;
747 if (idx
< 0 || idx
>= this.axes_
.length
) {
750 var axis
= this.axes_
[idx
];
751 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
755 * Returns the currently-visible y-ranges for each axis. This can be affected by
756 * zooming, panning, calls to updateOptions, etc.
757 * Returns an array of [bottom, top] pairs, one for each y-axis.
759 Dygraph
.prototype.yAxisRanges
= function() {
761 for (var i
= 0; i
< this.axes_
.length
; i
++) {
762 ret
.push(this.yAxisRange(i
));
767 // TODO(danvk): use these functions throughout dygraphs.
769 * Convert from data coordinates to canvas/div X/Y coordinates.
770 * If specified, do this conversion for the coordinate system of a particular
771 * axis. Uses the first axis by default.
772 * Returns a two-element array: [X, Y]
774 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
775 * instead of toDomCoords(null, y, axis).
777 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
778 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
782 * Convert from data x coordinates to canvas/div X coordinate.
783 * If specified, do this conversion for the coordinate system of a particular
785 * Returns a single value or null if x is null.
787 Dygraph
.prototype.toDomXCoord
= function(x
) {
792 var area
= this.plotter_
.area
;
793 var xRange
= this.xAxisRange();
794 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
798 * Convert from data x coordinates to canvas/div Y coordinate and optional
799 * axis. Uses the first axis by default.
801 * returns a single value or null if y is null.
803 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
804 var pct
= this.toPercentYCoord(y
, axis
);
809 var area
= this.plotter_
.area
;
810 return area
.y
+ pct
* area
.h
;
814 * Convert from canvas/div coords to data coordinates.
815 * If specified, do this conversion for the coordinate system of a particular
816 * axis. Uses the first axis by default.
817 * Returns a two-element array: [X, Y].
819 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
820 * instead of toDataCoords(null, y, axis).
822 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
823 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
827 * Convert from canvas/div x coordinate to data coordinate.
829 * If x is null, this returns null.
831 Dygraph
.prototype.toDataXCoord
= function(x
) {
836 var area
= this.plotter_
.area
;
837 var xRange
= this.xAxisRange();
838 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
842 * Convert from canvas/div y coord to value.
844 * If y is null, this returns null.
845 * if axis is null, this uses the first axis.
847 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
852 var area
= this.plotter_
.area
;
853 var yRange
= this.yAxisRange(axis
);
855 if (typeof(axis
) == "undefined") axis
= 0;
856 if (!this.axes_
[axis
].logscale
) {
857 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
859 // Computing the inverse of toDomCoord.
860 var pct
= (y
- area
.y
) / area
.h
;
862 // Computing the inverse of toPercentYCoord. The function was arrived at with
863 // the following steps:
865 // Original calcuation:
866 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
868 // Move denominator to both sides:
869 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
871 // subtract logr1, and take the negative value.
872 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
874 // Swap both sides of the equation, and we can compute the log of the
875 // return value. Which means we just need to use that as the exponent in
877 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
879 var logr1
= Dygraph
.log10(yRange
[1]);
880 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
881 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
887 * Converts a y for an axis to a percentage from the top to the
888 * bottom of the drawing area.
890 * If the coordinate represents a value visible on the canvas, then
891 * the value will be between 0 and 1, where 0 is the top of the canvas.
892 * However, this method will return values outside the range, as
893 * values can fall outside the canvas.
895 * If y is null, this returns null.
896 * if axis is null, this uses the first axis.
898 * @param { Number } y The data y-coordinate.
899 * @param { Number } [axis] The axis number on which the data coordinate lives.
900 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
902 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
906 if (typeof(axis
) == "undefined") axis
= 0;
908 var yRange
= this.yAxisRange(axis
);
911 var logscale
= this.attributes_
.getForAxis("logscale", axis
);
913 // yRange[1] - y is unit distance from the bottom.
914 // yRange[1] - yRange[0] is the scale of the range.
915 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
916 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
918 var logr1
= Dygraph
.log10(yRange
[1]);
919 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
925 * Converts an x value to a percentage from the left to the right of
928 * If the coordinate represents a value visible on the canvas, then
929 * the value will be between 0 and 1, where 0 is the left of the canvas.
930 * However, this method will return values outside the range, as
931 * values can fall outside the canvas.
933 * If x is null, this returns null.
934 * @param { Number } x The data x-coordinate.
935 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
937 Dygraph
.prototype.toPercentXCoord
= function(x
) {
942 var xRange
= this.xAxisRange();
943 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
947 * Returns the number of columns (including the independent variable).
948 * @return { Integer } The number of columns.
950 Dygraph
.prototype.numColumns
= function() {
951 if (!this.rawData_
) return 0;
952 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
956 * Returns the number of rows (excluding any header/label row).
957 * @return { Integer } The number of rows, less any header.
959 Dygraph
.prototype.numRows
= function() {
960 if (!this.rawData_
) return 0;
961 return this.rawData_
.length
;
965 * Returns the value in the given row and column. If the row and column exceed
966 * the bounds on the data, returns null. Also returns null if the value is
968 * @param { Number} row The row number of the data (0-based). Row 0 is the
969 * first row of data, not a header row.
970 * @param { Number} col The column number of the data (0-based)
971 * @return { Number } The value in the specified cell or null if the row/col
974 Dygraph
.prototype.getValue
= function(row
, col
) {
975 if (row
< 0 || row
> this.rawData_
.length
) return null;
976 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
978 return this.rawData_
[row
][col
];
982 * Generates interface elements for the Dygraph: a containing div, a div to
983 * display the current point, and a textbox to adjust the rolling average
984 * period. Also creates the Renderer/Layout elements.
987 Dygraph
.prototype.createInterface_
= function() {
988 // Create the all-enclosing graph div
989 var enclosing
= this.maindiv_
;
991 this.graphDiv
= document
.createElement("div");
993 // TODO(danvk): any other styles that are useful to set here?
994 this.graphDiv
.style
.textAlign
= 'left'; // This is a CSS "reset"
995 enclosing
.appendChild(this.graphDiv
);
997 // Create the canvas for interactive parts of the chart.
998 this.canvas_
= Dygraph
.createCanvas();
999 this.canvas_
.style
.position
= "absolute";
1001 // ... and for static parts of the chart.
1002 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
1004 this.resizeElements_();
1006 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
1007 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
1009 // The interactive parts of the graph are drawn on top of the chart.
1010 this.graphDiv
.appendChild(this.hidden_
);
1011 this.graphDiv
.appendChild(this.canvas_
);
1012 this.mouseEventElement_
= this.createMouseEventElement_();
1014 // Create the grapher
1015 this.layout_
= new DygraphLayout(this);
1019 this.mouseMoveHandler_
= function(e
) {
1020 dygraph
.mouseMove_(e
);
1023 this.mouseOutHandler_
= function(e
) {
1024 // The mouse has left the chart if:
1025 // 1. e.target is inside the chart
1026 // 2. e.relatedTarget is outside the chart
1027 var target
= e
.target
|| e
.fromElement
;
1028 var relatedTarget
= e
.relatedTarget
|| e
.toElement
;
1029 if (Dygraph
.isNodeContainedBy(target
, dygraph
.graphDiv
) &&
1030 !Dygraph
.isNodeContainedBy(relatedTarget
, dygraph
.graphDiv
)) {
1031 dygraph
.mouseOut_(e
);
1035 this.addAndTrackEvent(window
, 'mouseout', this.mouseOutHandler_
);
1036 this.addAndTrackEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1038 // Don't recreate and register the resize handler on subsequent calls.
1039 // This happens when the graph is resized.
1040 if (!this.resizeHandler_
) {
1041 this.resizeHandler_
= function(e
) {
1045 // Update when the window is resized.
1046 // TODO(danvk): drop frames depending on complexity of the chart.
1047 this.addAndTrackEvent(window
, 'resize', this.resizeHandler_
);
1051 Dygraph
.prototype.resizeElements_
= function() {
1052 this.graphDiv
.style
.width
= this.width_
+ "px";
1053 this.graphDiv
.style
.height
= this.height_
+ "px";
1054 this.canvas_
.width
= this.width_
;
1055 this.canvas_
.height
= this.height_
;
1056 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
1057 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
1058 this.hidden_
.width
= this.width_
;
1059 this.hidden_
.height
= this.height_
;
1060 this.hidden_
.style
.width
= this.width_
+ "px"; // for IE
1061 this.hidden_
.style
.height
= this.height_
+ "px"; // for IE
1065 * Detach DOM elements in the dygraph and null out all data references.
1066 * Calling this when you're done with a dygraph can dramatically reduce memory
1067 * usage. See, e.g., the tests/perf.html example.
1069 Dygraph
.prototype.destroy
= function() {
1070 this.canvas_ctx_
.restore();
1071 this.hidden_ctx_
.restore();
1073 var removeRecursive
= function(node
) {
1074 while (node
.hasChildNodes()) {
1075 removeRecursive(node
.firstChild
);
1076 node
.removeChild(node
.firstChild
);
1080 this.removeTrackedEvents_();
1082 // remove mouse event handlers (This may not be necessary anymore)
1083 Dygraph
.removeEvent(window
, 'mouseout', this.mouseOutHandler_
);
1084 Dygraph
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
1086 // remove window handlers
1087 Dygraph
.removeEvent(window
,'resize',this.resizeHandler_
);
1088 this.resizeHandler_
= null;
1090 removeRecursive(this.maindiv_
);
1092 var nullOut
= function(obj
) {
1093 for (var n
in obj
) {
1094 if (typeof(obj
[n
]) === 'object') {
1099 // These may not all be necessary, but it can't hurt...
1100 nullOut(this.layout_
);
1101 nullOut(this.plotter_
);
1106 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1107 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1108 * or the zoom rectangles) is done on this.canvas_.
1109 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
1110 * @return {Object} The newly-created canvas
1113 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
1114 var h
= Dygraph
.createCanvas();
1115 h
.style
.position
= "absolute";
1116 // TODO(danvk): h should be offset from canvas. canvas needs to include
1117 // some extra area to make it easier to zoom in on the far left and far
1118 // right. h needs to be precisely the plot area, so that clipping occurs.
1119 h
.style
.top
= canvas
.style
.top
;
1120 h
.style
.left
= canvas
.style
.left
;
1121 h
.width
= this.width_
;
1122 h
.height
= this.height_
;
1123 h
.style
.width
= this.width_
+ "px"; // for IE
1124 h
.style
.height
= this.height_
+ "px"; // for IE
1129 * Creates an overlay element used to handle mouse events.
1130 * @return {Object} The mouse event element.
1133 Dygraph
.prototype.createMouseEventElement_
= function() {
1134 if (this.isUsingExcanvas_
) {
1135 var elem
= document
.createElement("div");
1136 elem
.style
.position
= 'absolute';
1137 elem
.style
.backgroundColor
= 'white';
1138 elem
.style
.filter
= 'alpha(opacity=0)';
1139 elem
.style
.width
= this.width_
+ "px";
1140 elem
.style
.height
= this.height_
+ "px";
1141 this.graphDiv
.appendChild(elem
);
1144 return this.canvas_
;
1149 * Generate a set of distinct colors for the data series. This is done with a
1150 * color wheel. Saturation/Value are customizable, and the hue is
1151 * equally-spaced around the color wheel. If a custom set of colors is
1152 * specified, that is used instead.
1155 Dygraph
.prototype.setColors_
= function() {
1156 var labels
= this.getLabels();
1157 var num
= labels
.length
- 1;
1159 this.colorsMap_
= {};
1160 var colors
= this.attr_('colors');
1163 var sat
= this.attr_('colorSaturation') || 1.0;
1164 var val
= this.attr_('colorValue') || 0.5;
1165 var half
= Math
.ceil(num
/ 2);
1166 for (i
= 1; i
<= num
; i
++) {
1167 if (!this.visibility()[i
-1]) continue;
1168 // alternate colors for high contrast.
1169 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
1170 var hue
= (1.0 * idx
/ (1 + num
));
1171 var colorStr
= Dygraph
.hsvToRGB(hue
, sat
, val
);
1172 this.colors_
.push(colorStr
);
1173 this.colorsMap_
[labels
[i
]] = colorStr
;
1176 for (i
= 0; i
< num
; i
++) {
1177 if (!this.visibility()[i
]) continue;
1178 var colorStr
= colors
[i
% colors
.length
];
1179 this.colors_
.push(colorStr
);
1180 this.colorsMap_
[labels
[1 + i
]] = colorStr
;
1186 * Return the list of colors. This is either the list of colors passed in the
1187 * attributes or the autogenerated list of rgb(r,g,b) strings.
1188 * This does not return colors for invisible series.
1189 * @return {Array<string>} The list of colors.
1191 Dygraph
.prototype.getColors
= function() {
1192 return this.colors_
;
1196 * Returns a few attributes of a series, i.e. its color, its visibility, which
1197 * axis it's assigned to, and its column in the original data.
1198 * Returns null if the series does not exist.
1199 * Otherwise, returns an object with column, visibility, color and axis properties.
1200 * The "axis" property will be set to 1 for y1 and 2 for y2.
1201 * The "column" property can be fed back into getValue(row, column) to get
1202 * values for this series.
1204 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1206 var labels
= this.getLabels();
1207 for (var i
= 1; i
< labels
.length
; i
++) {
1208 if (labels
[i
] == series_name
) {
1213 if (idx
== -1) return null;
1218 visible
: this.visibility()[idx
- 1],
1219 color
: this.colorsMap_
[series_name
],
1220 axis
: 1 + this.attributes_
.axisForSeries(series_name
)
1225 * Create the text box to adjust the averaging period
1228 Dygraph
.prototype.createRollInterface_
= function() {
1229 // Create a roller if one doesn't exist already.
1230 if (!this.roller_
) {
1231 this.roller_
= document
.createElement("input");
1232 this.roller_
.type
= "text";
1233 this.roller_
.style
.display
= "none";
1234 this.graphDiv
.appendChild(this.roller_
);
1237 var display
= this.attr_('showRoller') ? 'block' : 'none';
1239 var area
= this.plotter_
.area
;
1240 var textAttr
= { "position": "absolute",
1242 "top": (area
.y
+ area
.h
- 25) + "px",
1243 "left": (area
.x
+ 1) + "px",
1246 this.roller_
.size
= "2";
1247 this.roller_
.value
= this.rollPeriod_
;
1248 for (var name
in textAttr
) {
1249 if (textAttr
.hasOwnProperty(name
)) {
1250 this.roller_
.style
[name
] = textAttr
[name
];
1255 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1260 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1261 * canvas (i.e. DOM Coords).
1263 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1264 return Dygraph
.pageX(e
) - context
.px
;
1269 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1270 * canvas (i.e. DOM Coords).
1272 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1273 return Dygraph
.pageY(e
) - context
.py
;
1277 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1281 Dygraph
.prototype.createDragInterface_
= function() {
1283 // Tracks whether the mouse is down right now
1285 isPanning
: false, // is this drag part of a pan?
1286 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1287 dragStartX
: null, // pixel coordinates
1288 dragStartY
: null, // pixel coordinates
1289 dragEndX
: null, // pixel coordinates
1290 dragEndY
: null, // pixel coordinates
1291 dragDirection
: null,
1292 prevEndX
: null, // pixel coordinates
1293 prevEndY
: null, // pixel coordinates
1294 prevDragDirection
: null,
1295 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1297 // The value on the left side of the graph when a pan operation starts.
1298 initialLeftmostDate
: null,
1300 // The number of units each pixel spans. (This won't be valid for log
1302 xUnitsPerPixel
: null,
1304 // TODO(danvk): update this comment
1305 // The range in second/value units that the viewport encompasses during a
1306 // panning operation.
1309 // Top-left corner of the canvas, in DOM coords
1310 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1314 // Values for use with panEdgeFraction, which limit how far outside the
1315 // graph's data boundaries it can be panned.
1316 boundedDates
: null, // [minDate, maxDate]
1317 boundedValues
: null, // [[minValue, maxValue] ...]
1319 // We cover iframes during mouse interactions. See comments in
1320 // dygraph-utils.js for more info on why this is a good idea.
1321 tarp
: new Dygraph
.IFrameTarp(),
1323 // contextB is the same thing as this context object but renamed.
1324 initializeMouseDown
: function(event
, g
, contextB
) {
1325 // prevents mouse drags from selecting page text.
1326 if (event
.preventDefault
) {
1327 event
.preventDefault(); // Firefox, Chrome, etc.
1329 event
.returnValue
= false; // IE
1330 event
.cancelBubble
= true;
1333 contextB
.px
= Dygraph
.findPosX(g
.canvas_
);
1334 contextB
.py
= Dygraph
.findPosY(g
.canvas_
);
1335 contextB
.dragStartX
= g
.dragGetX_(event
, contextB
);
1336 contextB
.dragStartY
= g
.dragGetY_(event
, contextB
);
1337 contextB
.cancelNextDblclick
= false;
1338 contextB
.tarp
.cover();
1342 var interactionModel
= this.attr_("interactionModel");
1344 // Self is the graph.
1347 // Function that binds the graph and context to the handler.
1348 var bindHandler
= function(handler
) {
1349 return function(event
) {
1350 handler(event
, self
, context
);
1354 for (var eventName
in interactionModel
) {
1355 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1356 this.addAndTrackEvent(this.mouseEventElement_
, eventName
,
1357 bindHandler(interactionModel
[eventName
]));
1360 // If the user releases the mouse button during a drag, but not over the
1361 // canvas, then it doesn't count as a zooming action.
1362 var mouseUpHandler
= function(event
) {
1363 if (context
.isZooming
|| context
.isPanning
) {
1364 context
.isZooming
= false;
1365 context
.dragStartX
= null;
1366 context
.dragStartY
= null;
1369 if (context
.isPanning
) {
1370 context
.isPanning
= false;
1371 context
.draggingDate
= null;
1372 context
.dateRange
= null;
1373 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1374 delete self
.axes_
[i
].draggingValue
;
1375 delete self
.axes_
[i
].dragValueRange
;
1379 context
.tarp
.uncover();
1382 this.addAndTrackEvent(document
, 'mouseup', mouseUpHandler
);
1386 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1387 * up any previous zoom rectangles that were drawn. This could be optimized to
1388 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1391 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1392 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1393 * @param {Number} startX The X position where the drag started, in canvas
1395 * @param {Number} endX The current X position of the drag, in canvas coords.
1396 * @param {Number} startY The Y position where the drag started, in canvas
1398 * @param {Number} endY The current Y position of the drag, in canvas coords.
1399 * @param {Number} prevDirection the value of direction on the previous call to
1400 * this function. Used to avoid excess redrawing
1401 * @param {Number} prevEndX The value of endX on the previous call to this
1402 * function. Used to avoid excess redrawing
1403 * @param {Number} prevEndY The value of endY on the previous call to this
1404 * function. Used to avoid excess redrawing
1407 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1408 endY
, prevDirection
, prevEndX
,
1410 var ctx
= this.canvas_ctx_
;
1412 // Clean up from the previous rect if necessary
1413 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1414 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1415 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1416 } else if (prevDirection
== Dygraph
.VERTICAL
) {
1417 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1418 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1421 // Draw a light-grey rectangle to show the new viewing area
1422 if (direction
== Dygraph
.HORIZONTAL
) {
1423 if (endX
&& startX
) {
1424 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1425 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1426 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1428 } else if (direction
== Dygraph
.VERTICAL
) {
1429 if (endY
&& startY
) {
1430 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1431 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1432 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1436 if (this.isUsingExcanvas_
) {
1437 this.currentZoomRectArgs_
= [direction
, startX
, endX
, startY
, endY
, 0, 0, 0];
1442 * Clear the zoom rectangle (and perform no zoom).
1445 Dygraph
.prototype.clearZoomRect_
= function() {
1446 this.currentZoomRectArgs_
= null;
1447 this.canvas_ctx_
.clearRect(0, 0, this.canvas_
.width
, this.canvas_
.height
);
1451 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1452 * the canvas. The exact zoom window may be slightly larger if there are no data
1453 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1454 * which accepts dates that match the raw data. This function redraws the graph.
1456 * @param {Number} lowX The leftmost pixel value that should be visible.
1457 * @param {Number} highX The rightmost pixel value that should be visible.
1460 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1461 this.currentZoomRectArgs_
= null;
1462 // Find the earliest and latest dates contained in this canvasx range.
1463 // Convert the call to date ranges of the raw data.
1464 var minDate
= this.toDataXCoord(lowX
);
1465 var maxDate
= this.toDataXCoord(highX
);
1466 this.doZoomXDates_(minDate
, maxDate
);
1470 * Transition function to use in animations. Returns values between 0.0
1471 * (totally old values) and 1.0 (totally new values) for each frame.
1474 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1476 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1480 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1481 * method with doZoomX which accepts pixel coordinates. This function redraws
1484 * @param {Number} minDate The minimum date that should be visible.
1485 * @param {Number} maxDate The maximum date that should be visible.
1488 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1489 // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation
1490 // can produce strange effects. Rather than the y-axis transitioning slowly
1491 // between values, it can jerk around.)
1492 var old_window
= this.xAxisRange();
1493 var new_window
= [minDate
, maxDate
];
1494 this.zoomed_x_
= true;
1496 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1497 if (that
.attr_("zoomCallback")) {
1498 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1504 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1505 * the canvas. This function redraws the graph.
1507 * @param {Number} lowY The topmost pixel value that should be visible.
1508 * @param {Number} highY The lowest pixel value that should be visible.
1511 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1512 this.currentZoomRectArgs_
= null;
1513 // Find the highest and lowest values in pixel range for each axis.
1514 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1515 // This is because pixels increase as you go down on the screen, whereas data
1516 // coordinates increase as you go up the screen.
1517 var oldValueRanges
= this.yAxisRanges();
1518 var newValueRanges
= [];
1519 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1520 var hi
= this.toDataYCoord(lowY
, i
);
1521 var low
= this.toDataYCoord(highY
, i
);
1522 newValueRanges
.push([low
, hi
]);
1525 this.zoomed_y_
= true;
1527 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1528 if (that
.attr_("zoomCallback")) {
1529 var xRange
= that
.xAxisRange();
1530 that
.attr_("zoomCallback")(xRange
[0], xRange
[1], that
.yAxisRanges());
1536 * Reset the zoom to the original view coordinates. This is the same as
1537 * double-clicking on the graph.
1539 Dygraph
.prototype.resetZoom
= function() {
1540 var dirty
= false, dirtyX
= false, dirtyY
= false;
1541 if (this.dateWindow_
!== null) {
1546 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1547 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1553 // Clear any selection, since it's likely to be drawn in the wrong place.
1554 this.clearSelection();
1557 this.zoomed_x_
= false;
1558 this.zoomed_y_
= false;
1560 var minDate
= this.rawData_
[0][0];
1561 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1563 // With only one frame, don't bother calculating extreme ranges.
1564 // TODO(danvk): merge this block w/ the code below
.
1565 if (!this.attr_("animatedZooms")) {
1566 this.dateWindow_
= null;
1567 for (i
= 0; i
< this.axes_
.length
; i
++) {
1568 if (this.axes_
[i
].valueWindow
!== null) {
1569 delete this.axes_
[i
].valueWindow
;
1573 if (this.attr_("zoomCallback")) {
1574 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1579 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1581 oldWindow
= this.xAxisRange();
1582 newWindow
= [minDate
, maxDate
];
1586 oldValueRanges
= this.yAxisRanges();
1587 // TODO(danvk): this is pretty inefficient
1588 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1589 var extremes
= packed
.extremes
;
1591 // this has the side-effect of modifying this.axes_.
1592 // this doesn't make much sense in this context, but it's convenient (we
1593 // need this.axes_[*].extremeValues) and not harmful since we'll be
1594 // calling drawGraph_ shortly, which clobbers these values.
1595 this.computeYAxisRanges_(extremes
);
1597 newValueRanges
= [];
1598 for (i
= 0; i
< this.axes_
.length
; i
++) {
1599 var axis
= this.axes_
[i
];
1600 newValueRanges
.push((axis
.valueRange
!== null &&
1601 axis
.valueRange
!== undefined
) ?
1602 axis
.valueRange
: axis
.extremeRange
);
1607 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1609 that
.dateWindow_
= null;
1610 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1611 if (that
.axes_
[i
].valueWindow
!== null) {
1612 delete that
.axes_
[i
].valueWindow
;
1615 if (that
.attr_("zoomCallback")) {
1616 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1623 * Combined animation logic for all zoom functions.
1624 * either the x parameters or y parameters may be null.
1627 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1628 var steps
= this.attr_("animatedZooms") ? Dygraph
.ANIMATION_STEPS
: 1;
1631 var valueRanges
= [];
1634 if (oldXRange
!== null && newXRange
!== null) {
1635 for (step
= 1; step
<= steps
; step
++) {
1636 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1637 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1638 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1642 if (oldYRanges
!== null && newYRanges
!== null) {
1643 for (step
= 1; step
<= steps
; step
++) {
1644 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1646 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1647 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1648 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1650 valueRanges
[step
-1] = thisRange
;
1655 Dygraph
.repeatAndCleanup(function(step
) {
1656 if (valueRanges
.length
) {
1657 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1658 var w
= valueRanges
[step
][i
];
1659 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1662 if (windows
.length
) {
1663 that
.dateWindow_
= windows
[step
];
1666 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1670 * Get the current graph's area object.
1672 * Returns: {x, y, w, h}
1674 Dygraph
.prototype.getArea
= function() {
1675 return this.plotter_
.area
;
1679 * Convert a mouse event to DOM coordinates relative to the graph origin.
1681 * Returns a two-element array: [X, Y].
1683 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1684 if (event
.offsetX
&& event
.offsetY
) {
1685 return [ event
.offsetX
, event
.offsetY
];
1687 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1688 var canvasy
= Dygraph
.pageY(event
) - Dygraph
.findPosY(this.mouseEventElement_
);
1689 return [canvasx
, canvasy
];
1694 * Given a canvas X coordinate, find the closest row.
1695 * @param {Number} domX graph-relative DOM X coordinate
1696 * Returns: row number, integer
1699 Dygraph
.prototype.findClosestRow
= function(domX
) {
1700 var minDistX
= Infinity
;
1701 var closestRow
= -1;
1702 var sets
= this.layout_
.points
;
1703 for (var i
= 0; i
< sets
.length
; i
++) {
1704 var points
= sets
[i
];
1705 var len
= points
.length
;
1706 for (var j
= 0; j
< len
; j
++) {
1707 var point
= points
[j
];
1708 if (!Dygraph
.isValidPoint(point
, true)) continue;
1709 var dist
= Math
.abs(point
.canvasx
- domX
);
1710 if (dist
< minDistX
) {
1712 closestRow
= point
.idx
;
1721 * Given canvas X,Y coordinates, find the closest point.
1723 * This finds the individual data point across all visible series
1724 * that's closest to the supplied DOM coordinates using the standard
1725 * Euclidean X,Y distance.
1727 * @param {Number} domX graph-relative DOM X coordinate
1728 * @param {Number} domY graph-relative DOM Y coordinate
1729 * Returns: {row, seriesName, point}
1732 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1733 var minDist
= Infinity
;
1734 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
, closestRow
;
1735 for ( var setIdx
= this.layout_
.points
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1736 var points
= this.layout_
.points
[setIdx
];
1737 for (var i
= 0; i
< points
.length
; ++i
) {
1739 if (!Dygraph
.isValidPoint(point
)) continue;
1740 dx
= point
.canvasx
- domX
;
1741 dy
= point
.canvasy
- domY
;
1742 dist
= dx
* dx
+ dy
* dy
;
1743 if (dist
< minDist
) {
1745 closestPoint
= point
;
1746 closestSeries
= setIdx
;
1747 closestRow
= point
.idx
;
1751 var name
= this.layout_
.setNames
[closestSeries
];
1760 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1762 * This first finds the X data point closest to the supplied DOM X coordinate,
1763 * then finds the series which puts the Y coordinate on top of its filled area,
1764 * using linear interpolation between adjacent point pairs.
1766 * @param {Number} domX graph-relative DOM X coordinate
1767 * @param {Number} domY graph-relative DOM Y coordinate
1768 * Returns: {row, seriesName, point}
1771 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1772 var row
= this.findClosestRow(domX
);
1773 var closestPoint
, closestSeries
;
1774 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
1775 var boundary
= this.getLeftBoundary_(setIdx
);
1776 var rowIdx
= row
- boundary
;
1777 var points
= this.layout_
.points
[setIdx
];
1778 if (rowIdx
>= points
.length
) continue;
1779 var p1
= points
[rowIdx
];
1780 if (!Dygraph
.isValidPoint(p1
)) continue;
1781 var py
= p1
.canvasy
;
1782 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1783 // interpolate series Y value using next point
1784 var p2
= points
[rowIdx
+ 1];
1785 if (Dygraph
.isValidPoint(p2
)) {
1786 var dx
= p2
.canvasx
- p1
.canvasx
;
1788 var r
= (domX
- p1
.canvasx
) / dx
;
1789 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1792 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1793 // interpolate series Y value using previous point
1794 var p0
= points
[rowIdx
- 1];
1795 if (Dygraph
.isValidPoint(p0
)) {
1796 var dx
= p1
.canvasx
- p0
.canvasx
;
1798 var r
= (p1
.canvasx
- domX
) / dx
;
1799 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1803 // Stop if the point (domX, py) is above this series' upper edge
1804 if (setIdx
=== 0 || py
< domY
) {
1806 closestSeries
= setIdx
;
1809 var name
= this.layout_
.setNames
[closestSeries
];
1818 * When the mouse moves in the canvas, display information about a nearby data
1819 * point and draw dots over those points in the data series. This function
1820 * takes care of cleanup of previously-drawn dots.
1821 * @param {Object} event The mousemove event from the browser.
1824 Dygraph
.prototype.mouseMove_
= function(event
) {
1825 // This prevents JS errors when mousing over the canvas before data loads.
1826 var points
= this.layout_
.points
;
1827 if (points
=== undefined
|| points
=== null) return;
1829 var canvasCoords
= this.eventToDomCoords(event
);
1830 var canvasx
= canvasCoords
[0];
1831 var canvasy
= canvasCoords
[1];
1833 var highlightSeriesOpts
= this.attr_("highlightSeriesOpts");
1834 var selectionChanged
= false;
1835 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1837 if (this.attr_("stackedGraph")) {
1838 closest
= this.findStackedPoint(canvasx
, canvasy
);
1840 closest
= this.findClosestPoint(canvasx
, canvasy
);
1842 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1844 var idx
= this.findClosestRow(canvasx
);
1845 selectionChanged
= this.setSelection(idx
);
1848 var callback
= this.attr_("highlightCallback");
1849 if (callback
&& selectionChanged
) {
1854 this.highlightSet_
);
1859 * Fetch left offset from the specified set index or if not passed, the
1860 * first defined boundaryIds record (see bug #236).
1863 Dygraph
.prototype.getLeftBoundary_
= function(setIdx
) {
1864 if (this.boundaryIds_
[setIdx
]) {
1865 return this.boundaryIds_
[setIdx
][0];
1867 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
1868 if (this.boundaryIds_
[i
] !== undefined
) {
1869 return this.boundaryIds_
[i
][0];
1876 Dygraph
.prototype.animateSelection_
= function(direction
) {
1877 var totalSteps
= 10;
1879 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
1880 if (this.animateId
=== undefined
) this.animateId
= 0;
1881 var start
= this.fadeLevel
;
1882 var steps
= direction
< 0 ? start
: totalSteps
- start
;
1884 if (this.fadeLevel
) {
1885 this.updateSelection_(1.0);
1890 var thisId
= ++this.animateId
;
1892 Dygraph
.repeatAndCleanup(
1894 // ignore simultaneous animations
1895 if (that
.animateId
!= thisId
) return;
1897 that
.fadeLevel
+= direction
;
1898 if (that
.fadeLevel
=== 0) {
1899 that
.clearSelection();
1901 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
1904 steps
, millis
, function() {});
1908 * Draw dots over the selectied points in the data series. This function
1909 * takes care of cleanup of previously-drawn dots.
1912 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
1913 /*var defaultPrevented = */
1914 this.cascadeEvents_('select', {
1915 selectedX
: this.lastx_
,
1916 selectedPoints
: this.selPoints_
1918 // TODO(danvk): use defaultPrevented here?
1920 // Clear the previously drawn vertical, if there is one
1922 var ctx
= this.canvas_ctx_
;
1923 if (this.attr_('highlightSeriesOpts')) {
1924 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1925 var alpha
= 1.0 - this.attr_('highlightSeriesBackgroundAlpha');
1927 // Activating background fade includes an animation effect for a gradual
1928 // fade. TODO(klausw): make this independently configurable if it causes
1929 // issues? Use a shared preference to control animations?
1930 var animateBackgroundFade
= true;
1931 if (animateBackgroundFade
) {
1932 if (opt_animFraction
=== undefined
) {
1933 // start a new animation
1934 this.animateSelection_(1);
1937 alpha
*= opt_animFraction
;
1939 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
1940 ctx
.fillRect(0, 0, this.width_
, this.height_
);
1943 // Redraw only the highlighted series in the interactive canvas (not the
1944 // static plot canvas, which is where series are usually drawn).
1945 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
1946 } else if (this.previousVerticalX_
>= 0) {
1947 // Determine the maximum highlight circle size.
1948 var maxCircleSize
= 0;
1949 var labels
= this.attr_('labels');
1950 for (i
= 1; i
< labels
.length
; i
++) {
1951 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1952 if (r
> maxCircleSize
) maxCircleSize
= r
;
1954 var px
= this.previousVerticalX_
;
1955 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1956 2 * maxCircleSize
+ 2, this.height_
);
1959 if (this.isUsingExcanvas_
&& this.currentZoomRectArgs_
) {
1960 Dygraph
.prototype.drawZoomRect_
.apply(this, this.currentZoomRectArgs_
);
1963 if (this.selPoints_
.length
> 0) {
1964 // Draw colored circles over the center of each selected point
1965 var canvasx
= this.selPoints_
[0].canvasx
;
1967 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
1968 var pt
= this.selPoints_
[i
];
1969 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1971 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1972 var callback
= this.attr_("drawHighlightPointCallback", pt
.name
);
1973 var color
= this.plotter_
.colors
[pt
.name
];
1975 callback
= Dygraph
.Circles
.DEFAULT
;
1977 ctx
.lineWidth
= this.attr_('strokeWidth', pt
.name
);
1978 ctx
.strokeStyle
= color
;
1979 ctx
.fillStyle
= color
;
1980 callback(this.g
, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
1981 color
, circleSize
, pt
.idx
);
1985 this.previousVerticalX_
= canvasx
;
1990 * Manually set the selected points and display information about them in the
1991 * legend. The selection can be cleared using clearSelection() and queried
1992 * using getSelection().
1993 * @param { Integer } row number that should be highlighted (i.e. appear with
1994 * hover dots on the chart). Set to false to clear any selection.
1995 * @param { seriesName } optional series name to highlight that series with the
1996 * the highlightSeriesOpts setting.
1997 * @param { locked } optional If true, keep seriesName selected when mousing
1998 * over the graph, disabling closest-series highlighting. Call clearSelection()
2001 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
2002 // Extract the points we've selected
2003 this.selPoints_
= [];
2005 var changed
= false;
2006 if (row
!== false && row
>= 0) {
2007 if (row
!= this.lastRow_
) changed
= true;
2008 this.lastRow_
= row
;
2009 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
2010 var points
= this.layout_
.points
[setIdx
];
2011 var setRow
= row
- this.getLeftBoundary_(setIdx
);
2012 if (setRow
< points
.length
) {
2013 var point
= points
[setRow
];
2014 if (point
.yval
!== null) this.selPoints_
.push(point
);
2018 if (this.lastRow_
>= 0) changed
= true;
2022 if (this.selPoints_
.length
) {
2023 this.lastx_
= this.selPoints_
[0].xval
;
2028 if (opt_seriesName
!== undefined
) {
2029 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
2030 this.highlightSet_
= opt_seriesName
;
2033 if (opt_locked
!== undefined
) {
2034 this.lockedSet_
= opt_locked
;
2038 this.updateSelection_(undefined
);
2044 * The mouse has left the canvas. Clear out whatever artifacts remain
2045 * @param {Object} event the mouseout event from the browser.
2048 Dygraph
.prototype.mouseOut_
= function(event
) {
2049 if (this.attr_("unhighlightCallback")) {
2050 this.attr_("unhighlightCallback")(event
);
2053 if (this.attr_("hideOverlayOnMouseOut") && !this.lockedSet_
) {
2054 this.clearSelection();
2059 * Clears the current selection (i.e. points that were highlighted by moving
2060 * the mouse over the chart).
2062 Dygraph
.prototype.clearSelection
= function() {
2063 this.cascadeEvents_('deselect', {});
2065 this.lockedSet_
= false;
2066 // Get rid of the overlay data
2067 if (this.fadeLevel
) {
2068 this.animateSelection_(-1);
2071 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2073 this.selPoints_
= [];
2076 this.highlightSet_
= null;
2080 * Returns the number of the currently selected row. To get data for this row,
2081 * you can use the getValue method.
2082 * @return { Integer } row number, or -1 if nothing is selected
2084 Dygraph
.prototype.getSelection
= function() {
2085 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2089 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
2090 var points
= this.layout_
.points
[setIdx
];
2091 for (var row
= 0; row
< points
.length
; row
++) {
2092 if (points
[row
].x
== this.selPoints_
[0].x
) {
2093 return points
[row
].idx
;
2101 * Returns the name of the currently-highlighted series.
2102 * Only available when the highlightSeriesOpts option is in use.
2104 Dygraph
.prototype.getHighlightSeries
= function() {
2105 return this.highlightSet_
;
2109 * Returns true if the currently-highlighted series was locked
2110 * via setSelection(..., seriesName, true).
2112 Dygraph
.prototype.isSeriesLocked
= function() {
2113 return this.lockedSet_
;
2117 * Fires when there's data available to be graphed.
2118 * @param {String} data Raw CSV data to be plotted
2121 Dygraph
.prototype.loadedEvent_
= function(data
) {
2122 this.rawData_
= this.parseCSV_(data
);
2127 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2130 Dygraph
.prototype.addXTicks_
= function() {
2131 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2133 if (this.dateWindow_
) {
2134 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2136 range
= this.xAxisExtremes();
2139 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2140 var xTicks
= xAxisOptionsView('ticker')(
2143 this.width_
, // TODO(danvk): should be area.width
2146 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2147 // console.log(msg);
2148 this.layout_
.setXTicks(xTicks
);
2153 * Computes the range of the data series (including confidence intervals).
2154 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2155 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2156 * @return [low, high]
2158 Dygraph
.prototype.extremeValues_
= function(series
) {
2159 var minY
= null, maxY
= null, j
, y
;
2161 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2163 // With custom bars, maxY is the max of the high values.
2164 for (j
= 0; j
< series
.length
; j
++) {
2165 y
= series
[j
][1][0];
2166 if (y
=== null || isNaN(y
)) continue;
2167 var low
= y
- series
[j
][1][1];
2168 var high
= y
+ series
[j
][1][2];
2169 if (low
> y
) low
= y
; // this can happen with custom bars,
2170 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2171 if (maxY
=== null || high
> maxY
) {
2174 if (minY
=== null || low
< minY
) {
2179 for (j
= 0; j
< series
.length
; j
++) {
2181 if (y
=== null || isNaN(y
)) continue;
2182 if (maxY
=== null || y
> maxY
) {
2185 if (minY
=== null || y
< minY
) {
2191 return [minY
, maxY
];
2196 * This function is called once when the chart's data is changed or the options
2197 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2198 * idea is that values derived from the chart's data can be computed here,
2199 * rather than every time the chart is drawn. This includes things like the
2200 * number of axes, rolling averages, etc.
2202 Dygraph
.prototype.predraw_
= function() {
2203 var start
= new Date();
2205 this.layout_
.computePlotArea();
2207 // TODO(danvk): move more computations out of drawGraph_ and into here.
2208 this.computeYAxes_();
2210 // Create a new plotter.
2211 if (this.plotter_
) {
2212 this.cascadeEvents_('clearChart');
2213 this.plotter_
.clear();
2216 if (!this.is_initial_draw_
) {
2217 this.canvas_ctx_
.restore();
2218 this.hidden_ctx_
.restore();
2221 this.canvas_ctx_
.save();
2222 this.hidden_ctx_
.save();
2224 this.plotter_
= new DygraphCanvasRenderer(this,
2229 // The roller sits in the bottom left corner of the chart. We don't know where
2230 // this will be until the options are available, so it's positioned here.
2231 this.createRollInterface_();
2233 this.cascadeEvents_('predraw');
2235 // Convert the raw data (a 2D array) into the internal format and compute
2236 // rolling averages.
2237 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2238 for (var i
= 1; i
< this.numColumns(); i
++) {
2239 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2240 var logScale
= this.attr_('logscale');
2241 var series
= this.extractSeries_(this.rawData_
, i
, logScale
);
2242 series
= this.rollingAverage(series
, this.rollPeriod_
);
2243 this.rolledSeries_
.push(series
);
2246 // If the data or options have changed, then we'd better redraw.
2249 // This is used to determine whether to do various animations.
2250 var end
= new Date();
2251 this.drawingTimeMs_
= (end
- start
);
2257 * xval_* and yval_* are the original unscaled data values,
2258 * while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
2259 * yval_stacked is the cumulative Y value used for stacking graphs,
2260 * and bottom/top/minus/plus are used for error bar graphs.
2267 * y_bottom: ?number,
2269 * y_stacked: ?number,
2271 * yval_minus: ?number,
2273 * yval_plus: ?number,
2277 Dygraph
.PointType
= undefined
;
2279 // TODO(bhs): these loops are a hot-spot for high-point-count charts. In fact,
2280 // on chrome+linux, they are 6 times more expensive than iterating through the
2281 // points and drawing the lines. The brunt of the cost comes from allocating
2282 // the |point| structures.
2284 * Converts a series to a Point array.
2287 * @param {Array.<Array.<(?number|Array<?number>)>} series Array where
2288 * series[row] = [x,y] or [x, [y, err]] or [x, [y, yplus, yminus]].
2289 * @param {boolean} bars True if error bars or custom bars are being drawn.
2290 * @param {string} setName Name of the series.
2291 * @param {number} boundaryIdStart Index offset of the first point, equal to
2292 * the number of skipped points left of the date window minimum (if any).
2293 * @return {Array.<Dygraph.PointType>} List of points for this series.
2295 Dygraph
.seriesToPoints_
= function(series
, bars
, setName
, boundaryIdStart
) {
2297 for (var i
= 0; i
< series
.length
; ++i
) {
2298 var item
= series
[i
];
2299 var yraw
= bars
? item
[1][0] : item
[1];
2300 var yval
= yraw
=== null ? null : DygraphLayout
.parseFloat_(yraw
);
2304 xval
: DygraphLayout
.parseFloat_(item
[0]),
2306 name
: setName
, // TODO(danvk): is this really necessary?
2307 idx
: i
+ boundaryIdStart
2312 point
.y_bottom
= NaN
;
2313 point
.yval_minus
= DygraphLayout
.parseFloat_(item
[1][1]);
2314 point
.yval_plus
= DygraphLayout
.parseFloat_(item
[1][2]);
2323 * Calculates point stacking for stackedGraph=true.
2325 * For stacking purposes, interpolate or extend neighboring data across
2326 * NaN values based on stackedGraphNaNFill settings. This is for display
2327 * only, the underlying data value as shown in the legend remains NaN.
2329 * @param {Array.<Dygraph.PointType>} points Point array for a single series.
2330 * Updates each Point's yval_stacked property.
2331 * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y
2332 * values for the series seen so far. Index is the row number. Updated
2333 * based on the current series's values.
2334 * @param {Array.<number>} seriesExtremes Min and max values, updated
2335 * to reflect the stacked values.
2336 * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or
2340 Dygraph
.stackPoints_
= function(
2341 points
, cumulativeYval
, seriesExtremes
, fillMethod
) {
2342 var lastXval
= null;
2343 var prevPoint
= null;
2344 var nextPoint
= null;
2345 var nextPointIdx
= -1;
2347 // Find the next stackable point starting from the given index.
2348 var updateNextPoint
= function(idx
) {
2349 // If we've previously found a non-NaN point and haven't gone past it yet,
2351 if (nextPointIdx
>= idx
) return;
2353 // We haven't found a non-NaN point yet or have moved past it,
2354 // look towards the right to find a non-NaN point.
2355 for (var j
= idx
; j
< points
.length
; ++j
) {
2356 // Clear out a previously-found point (if any) since it's no longer
2357 // valid, we shouldn't use it for interpolation anymore.
2359 if (!isNaN(points
[j
].yval
) && points
[j
].yval
!== null) {
2361 nextPoint
= points
[j
];
2367 for (var i
= 0; i
< points
.length
; ++i
) {
2368 var point
= points
[i
];
2369 var xval
= point
.xval
;
2370 if (cumulativeYval
[xval
] === undefined
) {
2371 cumulativeYval
[xval
] = 0;
2374 var actualYval
= point
.yval
;
2375 if (isNaN(actualYval
) || actualYval
=== null) {
2376 // Interpolate/extend
for stacking purposes
if possible
.
2378 if (prevPoint
&& nextPoint
&& fillMethod
!= 'none') {
2379 // Use linear interpolation between prevPoint and nextPoint.
2380 actualYval
= prevPoint
.yval
+ (nextPoint
.yval
- prevPoint
.yval
) *
2381 ((xval
- prevPoint
.xval
) / (nextPoint
.xval
- prevPoint
.xval
));
2382 } else if (prevPoint
&& fillMethod
== 'all') {
2383 actualYval
= prevPoint
.yval
;
2384 } else if (nextPoint
&& fillMethod
== 'all') {
2385 actualYval
= nextPoint
.yval
;
2393 var stackedYval
= cumulativeYval
[xval
];
2394 if (lastXval
!= xval
) {
2395 // If an x-value is repeated, we ignore the duplicates.
2396 stackedYval
+= actualYval
;
2397 cumulativeYval
[xval
] = stackedYval
;
2401 point
.yval_stacked
= stackedYval
;
2403 if (stackedYval
> seriesExtremes
[1]) {
2404 seriesExtremes
[1] = stackedYval
;
2406 if (stackedYval
< seriesExtremes
[0]) {
2407 seriesExtremes
[0] = stackedYval
;
2414 * Loop over all fields and create datasets, calculating extreme y-values for
2415 * each series and extreme x-indices as we go.
2417 * dateWindow is passed in as an explicit parameter so that we can compute
2418 * extreme values "speculatively", i.e. without actually setting state on the
2421 * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2422 * rolledSeries[seriesIndex][row] = raw point, where
2423 * seriesIndex is the column number starting with 1, and
2424 * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2425 * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2427 * points: Array.<Array.<Dygraph.PointType>>,
2428 * seriesExtremes: Array.<Array.<number>>,
2429 * boundaryIds: Array.<number>}}
2432 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2433 var boundaryIds
= [];
2435 var cumulativeYval
= []; // For stacked series.
2436 var extremes
= {}; // series name -> [low, high]
2438 var errorBars
= this.attr_("errorBars");
2439 var customBars
= this.attr_("customBars");
2440 var bars
= errorBars
|| customBars
;
2441 var isValueNull
= function(sample
) {
2443 return sample
[1] === null;
2445 return customBars
? sample
[1][1] === null :
2446 errorBars
? sample
[1][0] === null : false;
2450 // Loop over the fields (series). Go from the last to the first,
2451 // because if they're stacked that's how we accumulate the values.
2452 var num_series
= rolledSeries
.length
- 1;
2454 for (i
= num_series
; i
>= 1; i
--) {
2455 if (!this.visibility()[i
- 1]) continue;
2457 // Prune down to the desired range, if necessary (for zooming)
2458 // Because there can be lines going to points outside of the visible area,
2459 // we actually prune to visible points, plus one on either side.
2461 series
= rolledSeries
[i
];
2462 var low
= dateWindow
[0];
2463 var high
= dateWindow
[1];
2465 // TODO(danvk): do binary search instead of linear search.
2466 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2467 var firstIdx
= null, lastIdx
= null;
2468 for (k
= 0; k
< series
.length
; k
++) {
2469 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2472 if (series
[k
][0] <= high
) {
2477 if (firstIdx
=== null) firstIdx
= 0;
2478 var correctedFirstIdx
= firstIdx
;
2479 var isInvalidValue
= true;
2480 while (isInvalidValue
&& correctedFirstIdx
> 0) {
2481 correctedFirstIdx
--;
2482 isInvalidValue
= isValueNull(series
[correctedFirstIdx
]);
2485 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2486 var correctedLastIdx
= lastIdx
;
2487 isInvalidValue
= true;
2488 while (isInvalidValue
&& correctedLastIdx
< series
.length
- 1) {
2490 isInvalidValue
= isValueNull(series
[correctedLastIdx
]);
2494 if (correctedFirstIdx
!==firstIdx
) {
2495 firstIdx
= correctedFirstIdx
;
2497 if (correctedLastIdx
!== lastIdx
) {
2498 lastIdx
= correctedLastIdx
;
2501 boundaryIds
[i
-1] = [firstIdx
, lastIdx
];
2503 // .slice's end is exclusive, we want to include lastIdx.
2504 series
= series
.slice(firstIdx
, lastIdx
+ 1);
2506 series
= rolledSeries
[i
];
2507 boundaryIds
[i
-1] = [0, series
.length
-1];
2510 var seriesName
= this.attr_("labels")[i
];
2511 var seriesExtremes
= this.extremeValues_(series
);
2513 var seriesPoints
= Dygraph
.seriesToPoints_(
2514 series
, bars
, seriesName
, boundaryIds
[i
-1][0]);
2516 if (this.attr_("stackedGraph")) {
2517 Dygraph
.stackPoints_(seriesPoints
, cumulativeYval
, seriesExtremes
,
2518 this.attr_("stackedGraphNaNFill"));
2521 extremes
[seriesName
] = seriesExtremes
;
2522 points
[i
] = seriesPoints
;
2525 return { points
: points
, extremes
: extremes
, boundaryIds
: boundaryIds
};
2529 * Update the graph with new data. This method is called when the viewing area
2530 * has changed. If the underlying data or options have changed, predraw_ will
2531 * be called before drawGraph_ is called.
2535 Dygraph
.prototype.drawGraph_
= function() {
2536 var start
= new Date();
2538 // This is used to set the second parameter to drawCallback, below.
2539 var is_initial_draw
= this.is_initial_draw_
;
2540 this.is_initial_draw_
= false;
2542 this.layout_
.removeAllDatasets();
2544 this.attrs_
.pointSize
= 0.5 * this.attr_('highlightCircleSize');
2546 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2547 var points
= packed
.points
;
2548 var extremes
= packed
.extremes
;
2549 this.boundaryIds_
= packed
.boundaryIds
;
2551 this.setIndexByName_
= {};
2552 var labels
= this.attr_("labels");
2553 if (labels
.length
> 0) {
2554 this.setIndexByName_
[labels
[0]] = 0;
2557 for (var i
= 1; i
< points
.length
; i
++) {
2558 this.setIndexByName_
[labels
[i
]] = i
;
2559 if (!this.visibility()[i
- 1]) continue;
2560 this.layout_
.addDataset(labels
[i
], points
[i
]);
2561 this.datasetIndex_
[i
] = dataIdx
++;
2564 this.computeYAxisRanges_(extremes
);
2565 this.layout_
.setYAxes(this.axes_
);
2569 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2570 var tmp_zoomed_x
= this.zoomed_x_
;
2571 // Tell PlotKit to use this new data and render itself
2572 this.zoomed_x_
= tmp_zoomed_x
;
2573 this.layout_
.evaluate();
2574 this.renderGraph_(is_initial_draw
);
2576 if (this.attr_("timingName")) {
2577 var end
= new Date();
2578 Dygraph
.info(this.attr_("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2583 * This does the work of drawing the chart. It assumes that the layout and axis
2584 * scales have already been set (e.g. by predraw_).
2588 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2589 this.cascadeEvents_('clearChart');
2590 this.plotter_
.clear();
2592 if (this.attr_('underlayCallback')) {
2593 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2594 // users who expect a deprecated form of this callback.
2595 this.attr_('underlayCallback')(
2596 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2600 canvas
: this.hidden_
,
2601 drawingContext
: this.hidden_ctx_
2603 this.cascadeEvents_('willDrawChart', e
);
2604 this.plotter_
.render();
2605 this.cascadeEvents_('didDrawChart', e
);
2606 this.lastRow_
= -1; // because plugins/legend.js clears the legend
2608 // TODO(danvk): is this a performance bottleneck when panning?
2609 // The interaction canvas should already be empty in that situation.
2610 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2611 this.canvas_
.height
);
2613 if (this.attr_("drawCallback") !== null) {
2614 this.attr_("drawCallback")(this, is_initial_draw
);
2616 if (is_initial_draw
) {
2617 this.readyFired_
= true;
2618 while (this.readyFns_
.length
> 0) {
2619 var fn
= this.readyFns_
.pop();
2627 * Determine properties of the y-axes which are independent of the data
2628 * currently being displayed. This includes things like the number of axes and
2629 * the style of the axes. It does not include the range of each axis and its
2631 * This fills in this.axes_.
2632 * axes_ = [ { options } ]
2633 * indices are into the axes_ array.
2635 Dygraph
.prototype.computeYAxes_
= function() {
2636 // Preserve valueWindow settings if they exist, and if the user hasn't
2637 // specified a new valueRange.
2638 var valueWindows
, axis
, index
, opts
, v
;
2639 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2641 for (index
= 0; index
< this.axes_
.length
; index
++) {
2642 valueWindows
.push(this.axes_
[index
].valueWindow
);
2646 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2647 // data computation as well as options storage.
2648 // Go through once and add all the axes.
2651 for (axis
= 0; axis
< this.attributes_
.numAxes(); axis
++) {
2652 // Add a new axis, making a copy of its per-axis options.
2653 opts
= { g
: this };
2654 Dygraph
.update(opts
, this.attributes_
.axisOptions(axis
));
2655 this.axes_
[axis
] = opts
;
2659 // Copy global valueRange option over to the first axis.
2660 // NOTE(konigsberg): Are these two statements necessary?
2661 // I tried removing it. The automated tests pass, and manually
2662 // messing with tests/zoom
.html showed no trouble
.
2663 v
= this.attr_('valueRange');
2664 if (v
) this.axes_
[0].valueRange
= v
;
2666 if (valueWindows
!== undefined
) {
2667 // Restore valueWindow settings.
2669 // When going from two axes back to one, we only restore
2671 var idxCount
= Math
.min(valueWindows
.length
, this.axes_
.length
);
2673 for (index
= 0; index
< idxCount
; index
++) {
2674 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2678 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2680 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2681 v
= opts("valueRange");
2682 if (v
) this.axes_
[axis
].valueRange
= v
;
2683 } else { // To keep old behavior
2684 var axes
= this.user_attrs_
.axes
;
2685 if (axes
&& axes
.y2
) {
2686 v
= axes
.y2
.valueRange
;
2687 if (v
) this.axes_
[axis
].valueRange
= v
;
2694 * Returns the number of y-axes on the chart.
2695 * @return {Number} the number of axes.
2697 Dygraph
.prototype.numAxes
= function() {
2698 return this.attributes_
.numAxes();
2703 * Returns axis properties for the given series.
2704 * @param { String } setName The name of the series for which to get axis
2705 * properties, e.g. 'Y1'.
2706 * @return { Object } The axis properties.
2708 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2709 // TODO(danvk): handle errors.
2710 return this.axes_
[this.attributes_
.axisForSeries(series
)];
2715 * Determine the value range and tick marks for each axis.
2716 * @param {Object} extremes A mapping from seriesName -> [low, high]
2717 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2719 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2720 var isNullUndefinedOrNaN
= function(num
) {
2721 return isNaN(parseFloat(num
));
2723 var numAxes
= this.attributes_
.numAxes();
2724 var ypadCompat
, span
, series
, ypad
;
2728 // Compute extreme values, a span and tick marks for each axis.
2729 for (var i
= 0; i
< numAxes
; i
++) {
2730 var axis
= this.axes_
[i
];
2731 var logscale
= this.attributes_
.getForAxis("logscale", i
);
2732 var includeZero
= this.attributes_
.getForAxis("includeZero", i
);
2733 var independentTicks
= this.attributes_
.getForAxis("independentTicks", i
);
2734 series
= this.attributes_
.seriesForAxis(i
);
2736 // Add some padding. This supports two Y padding operation modes:
2738 // - backwards compatible (yRangePad not set):
2739 // 10% padding for automatic Y ranges, but not for user-supplied
2740 // ranges, and move a close-to-zero edge to zero except if
2741 // avoidMinZero is set, since drawing at the edge results in
2742 // invisible lines. Unfortunately lines drawn at the edge of a
2743 // user-supplied range will still be invisible. If logscale is
2744 // set, add a variable amount of padding at the top but
2745 // none at the bottom.
2747 // - new-style (yRangePad set by the user):
2748 // always add the specified Y padding.
2751 ypad
= 0.1; // add 10%
2752 if (this.attr_('yRangePad') !== null) {
2754 // Convert pixel padding to ratio
2755 ypad
= this.attr_('yRangePad') / this.plotter_
.area
.h
;
2758 if (series
.length
=== 0) {
2759 // If no series are defined or visible then use a reasonable default
2760 axis
.extremeRange
= [0, 1];
2762 // Calculate the extremes of extremes.
2763 var minY
= Infinity
; // extremes[series[0]][0];
2764 var maxY
= -Infinity
; // extremes[series[0]][1];
2765 var extremeMinY
, extremeMaxY
;
2767 for (var j
= 0; j
< series
.length
; j
++) {
2768 // this skips invisible series
2769 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2771 // Only use valid extremes to stop null data series' from corrupting the scale.
2772 extremeMinY
= extremes
[series
[j
]][0];
2773 if (extremeMinY
!== null) {
2774 minY
= Math
.min(extremeMinY
, minY
);
2776 extremeMaxY
= extremes
[series
[j
]][1];
2777 if (extremeMaxY
!== null) {
2778 maxY
= Math
.max(extremeMaxY
, maxY
);
2782 // Include zero if requested by the user.
2783 if (includeZero
&& !logscale
) {
2784 if (minY
> 0) minY
= 0;
2785 if (maxY
< 0) maxY
= 0;
2788 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2789 if (minY
== Infinity
) minY
= 0;
2790 if (maxY
== -Infinity
) maxY
= 1;
2793 // special case: if we have no sense of scale, center on the sole value.
2796 span
= Math
.abs(maxY
);
2798 // ... and if the sole value is zero, use range 0-1.
2804 var maxAxisY
, minAxisY
;
2807 maxAxisY
= maxY
+ ypad
* span
;
2810 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2811 maxAxisY
= maxY
* logpad
;
2812 minAxisY
= minY
/ logpad
;
2815 maxAxisY
= maxY
+ ypad
* span
;
2816 minAxisY
= minY
- ypad
* span
;
2818 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2819 // close to zero, but not if avoidMinZero is set.
2820 if (ypadCompat
&& !this.attr_("avoidMinZero")) {
2821 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2822 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2825 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2827 if (axis
.valueWindow
) {
2828 // This is only set if the user has zoomed on the y-axis. It is never set
2829 // by a user. It takes precedence over axis.valueRange because, if you set
2830 // valueRange, you'd still expect to be able to pan.
2831 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2832 } else if (axis
.valueRange
) {
2833 // This is a user-set value range for this axis.
2834 var y0
= isNullUndefinedOrNaN(axis
.valueRange
[0]) ? axis
.extremeRange
[0] : axis
.valueRange
[0];
2835 var y1
= isNullUndefinedOrNaN(axis
.valueRange
[1]) ? axis
.extremeRange
[1] : axis
.valueRange
[1];
2837 if (axis
.logscale
) {
2838 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2847 axis
.computedValueRange
= [y0
, y1
];
2849 axis
.computedValueRange
= axis
.extremeRange
;
2853 if (independentTicks
) {
2854 axis
.independentTicks
= independentTicks
;
2855 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2856 var ticker
= opts('ticker');
2857 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2858 axis
.computedValueRange
[1],
2859 this.height_
, // TODO(danvk): should be area.height
2862 // Define the first independent axis as primary axis.
2863 if (!p_axis
) p_axis
= axis
;
2866 if (p_axis
=== undefined
) {
2867 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
2869 // Add ticks. By default, all axes inherit the tick positions of the
2870 // primary axis. However, if an axis is specifically marked as having
2871 // independent ticks, then that is permissible as well.
2872 for (var i
= 0; i
< numAxes
; i
++) {
2873 var axis
= this.axes_
[i
];
2875 if (!axis
.independentTicks
) {
2876 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2877 var ticker
= opts('ticker');
2878 var p_ticks
= p_axis
.ticks
;
2879 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2880 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2881 var tick_values
= [];
2882 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2883 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2884 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2885 tick_values
.push(y_val
);
2888 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2889 axis
.computedValueRange
[1],
2890 this.height_
, // TODO(danvk): should be area.height
2899 * Extracts one series from the raw data (a 2D array) into an array of (date,
2902 * This is where undesirable points (i.e. negative values on log scales and
2903 * missing values through which we wish to connect lines) are dropped.
2904 * TODO(danvk): the "missing values" bit above doesn't seem right.
2907 * @param {Array.<Array.<(number|Array<Number>)>>} rawData Input data. Rectangular
2908 * grid of points, where rawData[row][0] is the X value for the row,
2909 * and rawData[row][i] is the Y data for series #i.
2910 * @param {number} i Series index, starting from 1.
2911 * @param {boolean} logScale True if using logarithmic Y scale.
2912 * @return {Array.<Array.<(?number|Array<?number>)>} Series array, where
2913 * series[row] = [x,y] or [x, [y, err]] or [x, [y, yplus, yminus]].
2915 Dygraph
.prototype.extractSeries_
= function(rawData
, i
, logScale
) {
2916 // TODO(danvk): pre-allocate series here.
2918 var errorBars
= this.attr_("errorBars");
2919 var customBars
= this.attr_("customBars");
2920 for (var j
= 0; j
< rawData
.length
; j
++) {
2921 var x
= rawData
[j
][0];
2922 var point
= rawData
[j
][i
];
2924 // On the log scale, points less than zero do not exist.
2925 // This will create a gap in the chart.
2926 if (errorBars
|| customBars
) {
2927 // point.length is either 2 (errorBars) or 3 (customBars)
2928 for (var k
= 0; k
< point
.length
; k
++) {
2929 if (point
[k
] <= 0) {
2934 } else if (point
<= 0) {
2938 // Fix null points to fit the display type standard.
2939 if (point
!== null) {
2940 series
.push([x
, point
]);
2942 series
.push([x
, errorBars
? [null, null] : customBars
? [null, null, null] : point
]);
2950 * Calculates the rolling average of a data set.
2951 * If originalData is [label, val], rolls the average of those.
2952 * If originalData is [label, [, it's interpreted as [value, stddev]
2953 * and the roll is returned in the same form, with appropriately reduced
2954 * stddev for each value.
2955 * Note that this is where fractional input (i.e. '5/10') is converted into
2957 * @param {Array} originalData The data in the appropriate format (see above)
2958 * @param {Number} rollPeriod The number of points over which to average the
2961 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2962 rollPeriod
= Math
.min(rollPeriod
, originalData
.length
);
2963 var rollingData
= [];
2964 var sigma
= this.attr_("sigma");
2966 var low
, high
, i
, j
, y
, sum
, num_ok
, stddev
;
2967 if (this.fractions_
) {
2969 var den
= 0; // numerator/denominator
2971 for (i
= 0; i
< originalData
.length
; i
++) {
2972 num
+= originalData
[i
][1][0];
2973 den
+= originalData
[i
][1][1];
2974 if (i
- rollPeriod
>= 0) {
2975 num
-= originalData
[i
- rollPeriod
][1][0];
2976 den
-= originalData
[i
- rollPeriod
][1][1];
2979 var date
= originalData
[i
][0];
2980 var value
= den
? num
/ den
: 0.0;
2981 if (this.attr_("errorBars")) {
2982 if (this.attr_("wilsonInterval")) {
2983 // For more details on this confidence interval, see:
2984 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2986 var p
= value
< 0 ? 0 : value
, n
= den
;
2987 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2988 var denom
= 1 + sigma
* sigma
/ den
;
2989 low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2990 high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2991 rollingData
[i
] = [date
,
2992 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2994 rollingData
[i
] = [date
, [0, 0, 0]];
2997 stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2998 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
3001 rollingData
[i
] = [date
, mult
* value
];
3004 } else if (this.attr_("customBars")) {
3009 for (i
= 0; i
< originalData
.length
; i
++) {
3010 var data
= originalData
[i
][1];
3012 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
3014 if (y
!== null && !isNaN(y
)) {
3020 if (i
- rollPeriod
>= 0) {
3021 var prev
= originalData
[i
- rollPeriod
];
3022 if (prev
[1][1] !== null && !isNaN(prev
[1][1])) {
3030 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
3031 1.0 * (mid
- low
) / count
,
3032 1.0 * (high
- mid
) / count
]];
3034 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
3038 // Calculate the rolling average for the first rollPeriod - 1 points where
3039 // there is not enough data to roll over the full number of points
3040 if (!this.attr_("errorBars")) {
3041 if (rollPeriod
== 1) {
3042 return originalData
;
3045 for (i
= 0; i
< originalData
.length
; i
++) {
3048 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
3049 y
= originalData
[j
][1];
3050 if (y
=== null || isNaN(y
)) continue;
3052 sum
+= originalData
[j
][1];
3055 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
3057 rollingData
[i
] = [originalData
[i
][0], null];
3062 for (i
= 0; i
< originalData
.length
; i
++) {
3066 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
3067 y
= originalData
[j
][1][0];
3068 if (y
=== null || isNaN(y
)) continue;
3070 sum
+= originalData
[j
][1][0];
3071 variance
+= Math
.pow(originalData
[j
][1][1], 2);
3074 stddev
= Math
.sqrt(variance
) / num_ok
;
3075 rollingData
[i
] = [originalData
[i
][0],
3076 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
3078 // This explicitly preserves NaNs to aid with "independent series".
3079 // See testRollingAveragePreservesNaNs.
3080 var v
= (rollPeriod
== 1) ? originalData
[i
][1][0] : null;
3081 rollingData
[i
] = [originalData
[i
][0], [v
, v
, v
]];
3091 * Detects the type of the str (date or numeric) and sets the various
3092 * formatting attributes in this.attrs_ based on this type.
3093 * @param {String} str An x value.
3096 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3098 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
3099 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
3100 str
.indexOf('/') >= 0 ||
3101 isNaN(parseFloat(str
))) {
3103 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3104 // TODO(danvk): remove support for this format.
3108 this.setXAxisOptions_(isDate
);
3111 Dygraph
.prototype.setXAxisOptions_
= function(isDate
) {
3113 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3114 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
3115 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3116 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3118 /** @private (shut up, jsdoc!) */
3119 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3120 // TODO(danvk): use Dygraph.numberValueFormatter here?
3121 /** @private (shut up, jsdoc!) */
3122 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3123 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3124 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3129 * Parses the value as a floating point number. This is like the parseFloat()
3130 * built-in, but with a few differences:
3131 * - the empty string is parsed as null, rather than NaN.
3132 * - if the string cannot be parsed at all, an error is logged.
3133 * If the string can't be parsed, this method returns null.
3134 * @param {String} x The string to be parsed
3135 * @param {Number} opt_line_no The line number from which the string comes.
3136 * @param {String} opt_line The text of the line from which the string comes.
3140 // Parse the x as a float or return null if it's not a number.
3141 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3142 var val
= parseFloat(x
);
3143 if (!isNaN(val
)) return val
;
3145 // Try to figure out what happeend.
3146 // If the value is the empty string, parse it as null.
3147 if (/^ *$/.test(x
)) return null;
3149 // If it was actually "NaN", return it as NaN.
3150 if (/^ *nan *$/i.test(x
)) return NaN
;
3152 // Looks like a parsing error.
3153 var msg
= "Unable to parse '" + x
+ "' as a number";
3154 if (opt_line
!== null && opt_line_no
!== null) {
3155 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3164 * Parses a string in a special csv format. We expect a csv file where each
3165 * line is a date point, and the first field in each line is the date string.
3166 * We also expect that all remaining fields represent series.
3167 * if the errorBars attribute is set, then interpret the fields as:
3168 * date, series1, stddev1, series2, stddev2, ...
3169 * @param {[Object]} data See above.
3171 * @return [Object] An array with one entry for each row. These entries
3172 * are an array of cells in that row. The first entry is the parsed x-value for
3173 * the row. The second, third, etc. are the y-values. These can take on one of
3174 * three forms, depending on the CSV and constructor parameters:
3176 * 2. [ value, stddev ]
3177 * 3. [ low value, center value, high value ]
3179 Dygraph
.prototype.parseCSV_
= function(data
) {
3181 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3182 var lines
= data
.split(line_delimiter
|| "\n");
3185 // Use the default delimiter or fall back to a tab if that makes sense.
3186 var delim
= this.attr_('delimiter');
3187 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3192 if (!('labels' in this.user_attrs_
)) {
3193 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
3195 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
3196 this.attributes_
.reparseSeries();
3201 var defaultParserSet
= false; // attempt to auto-detect x value type
3202 var expectedCols
= this.attr_("labels").length
;
3203 var outOfOrder
= false;
3204 for (var i
= start
; i
< lines
.length
; i
++) {
3205 var line
= lines
[i
];
3207 if (line
.length
=== 0) continue; // skip blank lines
3208 if (line
[0] == '#') continue; // skip comment lines
3209 var inFields
= line
.split(delim
);
3210 if (inFields
.length
< 2) continue;
3213 if (!defaultParserSet
) {
3214 this.detectTypeFromString_(inFields
[0]);
3215 xParser
= this.attr_("xValueParser");
3216 defaultParserSet
= true;
3218 fields
[0] = xParser(inFields
[0], this);
3220 // If fractions are expected, parse the numbers as "A/B
"
3221 if (this.fractions_) {
3222 for (j = 1; j < inFields.length; j++) {
3223 // TODO(danvk): figure out an appropriate way to flag parse errors.
3224 vals = inFields[j].split("/");
3225 if (vals.length != 2) {
3226 this.error('Expected fractional "num
/den
" values in CSV data ' +
3227 "but found a value
'" + inFields[j] + "' on line
" +
3228 (1 + i) + " ('" + line + "') which is not of
this form
.");
3231 fields[j] = [this.parseFloat_(vals[0], i, line),
3232 this.parseFloat_(vals[1], i, line)];
3235 } else if (this.attr_("errorBars
")) {
3236 // If there are error bars, values are (value, stddev) pairs
3237 if (inFields.length % 2 != 1) {
3238 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3239 'but line ' + (1 + i) + ' has an odd number of values (' +
3240 (inFields.length - 1) + "): '" + line + "'");
3242 for (j = 1; j < inFields.length; j += 2) {
3243 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3244 this.parseFloat_(inFields[j + 1], i, line)];
3246 } else if (this.attr_("customBars
")) {
3247 // Bars are a low;center;high tuple
3248 for (j = 1; j < inFields.length; j++) {
3249 var val = inFields[j];
3250 if (/^ *$/.test(val)) {
3251 fields[j] = [null, null, null];
3253 vals = val.split(";");
3254 if (vals.length == 3) {
3255 fields[j] = [ this.parseFloat_(vals[0], i, line),
3256 this.parseFloat_(vals[1], i, line),
3257 this.parseFloat_(vals[2], i, line) ];
3259 this.warn('When using customBars, values must be either blank ' +
3260 'or "low
;center
;high
" tuples (got "' + val +
3261 '" on line ' + (1+i));
3266 // Values are just numbers
3267 for (j = 1; j < inFields.length; j++) {
3268 fields[j] = this.parseFloat_(inFields[j], i, line);
3271 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3275 if (fields.length != expectedCols) {
3276 this.error("Number of columns
in line
" + i + " (" + fields.length +
3277 ") does not agree
with number of
labels (" + expectedCols +
3281 // If the user specified the 'labels' option and none of the cells of the
3282 // first row parsed correctly, then they probably double-specified the
3283 // labels. We go with the values set in the option, discard this row and
3284 // log a warning to the JS console.
3285 if (i === 0 && this.attr_('labels')) {
3286 var all_null = true;
3287 for (j = 0; all_null && j < fields.length; j++) {
3288 if (fields[j]) all_null = false;
3291 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3292 "CSV
data ('" + line + "') appears to also contain labels
. " +
3293 "Will drop the CSV labels and
use the option labels
.");
3301 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3302 ret.sort(function(a,b) { return a[0] - b[0]; });
3310 * The user has provided their data as a pre-packaged JS array. If the x values
3311 * are numeric, this is the same as dygraphs' internal format. If the x values
3312 * are dates, we need to convert them from Date objects to ms since epoch.
3313 * @param {[Object]} data
3314 * @return {[Object]} data with numeric x values.
3316 Dygraph.prototype.parseArray_ = function(data) {
3317 // Peek at the first x value to see if it's numeric.
3318 if (data.length === 0) {
3319 this.error("Can
't plot empty data set");
3322 if (data[0].length === 0) {
3323 this.error("Data set cannot contain an empty row");
3328 if (this.attr_("labels") === null) {
3329 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3330 "in the options parameter");
3331 this.attrs_.labels = [ "X" ];
3332 for (i = 1; i < data[0].length; i++) {
3333 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
3335 this.attributes_.reparseSeries();
3337 var num_labels = this.attr_("labels");
3338 if (num_labels.length != data[0].length) {
3339 this.error("Mismatch between number of labels (" + num_labels +
3340 ") and number of columns in array (" + data[0].length + ")");
3345 if (Dygraph.isDateLike(data[0][0])) {
3346 // Some intelligent defaults for a date x-axis.
3347 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
3348 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3349 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
3351 // Assume they're all dates
.
3352 var parsedData
= Dygraph
.clone(data
);
3353 for (i
= 0; i
< data
.length
; i
++) {
3354 if (parsedData
[i
].length
=== 0) {
3355 this.error("Row " + (1 + i
) + " of data is empty");
3358 if (parsedData
[i
][0] === null ||
3359 typeof(parsedData
[i
][0].getTime
) != 'function' ||
3360 isNaN(parsedData
[i
][0].getTime())) {
3361 this.error("x value in row " + (1 + i
) + " is not a Date");
3364 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3368 // Some intelligent defaults for a numeric x-axis.
3369 /** @private (shut up, jsdoc!) */
3370 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3371 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3372 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
3378 * Parses a DataTable object from gviz.
3379 * The data is expected to have a first column that is either a date or a
3380 * number. All subsequent columns must be numbers. If there is a clear mismatch
3381 * between this.xValueParser_ and the type of the first column, it will be
3382 * fixed. Fills out rawData_.
3383 * @param {[Object]} data See above.
3386 Dygraph
.prototype.parseDataTable_
= function(data
) {
3387 var shortTextForAnnotationNum
= function(num
) {
3388 // converts [0-9]+ [A-Z][a-z]*
3389 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3390 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3391 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
3392 num
= Math
.floor(num
/ 26);
3394 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
3395 num
= Math
.floor((num
- 1) / 26);
3400 var cols
= data
.getNumberOfColumns();
3401 var rows
= data
.getNumberOfRows();
3403 var indepType
= data
.getColumnType(0);
3404 if (indepType
== 'date' || indepType
== 'datetime') {
3405 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3406 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
3407 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
3408 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3409 } else if (indepType
== 'number') {
3410 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3411 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
3412 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericLinearTicks
;
3413 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
3415 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3416 "column 1 of DataTable input (Got '" + indepType
+ "')");
3420 // Array of the column indices which contain data (and not annotations).
3422 var annotationCols
= {}; // data index -> [annotation cols]
3423 var hasAnnotations
= false;
3425 for (i
= 1; i
< cols
; i
++) {
3426 var type
= data
.getColumnType(i
);
3427 if (type
== 'number') {
3429 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3430 // This is OK -- it's an annotation column.
3431 var dataIdx
= colIdx
[colIdx
.length
- 1];
3432 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3433 annotationCols
[dataIdx
] = [i
];
3435 annotationCols
[dataIdx
].push(i
);
3437 hasAnnotations
= true;
3439 this.error("Only 'number' is supported as a dependent type with Gviz." +
3440 " 'string' is only supported if displayAnnotations is true");
3444 // Read column labels
3445 // TODO(danvk): add support back for errorBars
3446 var labels
= [data
.getColumnLabel(0)];
3447 for (i
= 0; i
< colIdx
.length
; i
++) {
3448 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3449 if (this.attr_("errorBars")) i
+= 1;
3451 this.attrs_
.labels
= labels
;
3452 cols
= labels
.length
;
3455 var outOfOrder
= false;
3456 var annotations
= [];
3457 for (i
= 0; i
< rows
; i
++) {
3459 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3460 data
.getValue(i
, 0) === null) {
3461 this.warn("Ignoring row " + i
+
3462 " of DataTable because of undefined or null first column.");
3466 if (indepType
== 'date' || indepType
== 'datetime') {
3467 row
.push(data
.getValue(i
, 0).getTime());
3469 row
.push(data
.getValue(i
, 0));
3471 if (!this.attr_("errorBars")) {
3472 for (j
= 0; j
< colIdx
.length
; j
++) {
3473 var col
= colIdx
[j
];
3474 row
.push(data
.getValue(i
, col
));
3475 if (hasAnnotations
&&
3476 annotationCols
.hasOwnProperty(col
) &&
3477 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3479 ann
.series
= data
.getColumnLabel(col
);
3481 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3483 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3484 if (k
) ann
.text
+= "\n";
3485 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3487 annotations
.push(ann
);
3491 // Strip out infinities, which give dygraphs problems later on.
3492 for (j
= 0; j
< row
.length
; j
++) {
3493 if (!isFinite(row
[j
])) row
[j
] = null;
3496 for (j
= 0; j
< cols
- 1; j
++) {
3497 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3500 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3507 this.warn("DataTable is out of order; order it correctly to speed loading.");
3508 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3510 this.rawData_
= ret
;
3512 if (annotations
.length
> 0) {
3513 this.setAnnotations(annotations
, true);
3515 this.attributes_
.reparseSeries();
3519 * Get the CSV data. If it's in a function, call that function. If it's in a
3520 * file, do an XMLHttpRequest to get it.
3523 Dygraph
.prototype.start_
= function() {
3524 var data
= this.file_
;
3526 // Functions can return references of all other types.
3527 if (typeof data
== 'function') {
3531 if (Dygraph
.isArrayLike(data
)) {
3532 this.rawData_
= this.parseArray_(data
);
3534 } else if (typeof data
== 'object' &&
3535 typeof data
.getColumnRange
== 'function') {
3536 // must be a DataTable from gviz.
3537 this.parseDataTable_(data
);
3539 } else if (typeof data
== 'string') {
3540 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3541 var line_delimiter
= Dygraph
.detectLineDelimiter(data
);
3542 if (line_delimiter
) {
3543 this.loadedEvent_(data
);
3545 var req
= new XMLHttpRequest();
3547 req
.onreadystatechange
= function () {
3548 if (req
.readyState
== 4) {
3549 if (req
.status
=== 200 || // Normal http
3550 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3551 caller
.loadedEvent_(req
.responseText
);
3556 req
.open("GET", data
, true);
3560 this.error("Unknown data format: " + (typeof data
));
3565 * Changes various properties of the graph. These can include:
3567 * <li>file: changes the source data for the graph</li>
3568 * <li>errorBars: changes whether the data contains stddev</li>
3571 * There's a huge variety of options that can be passed to this method. For a
3572 * full list, see http://dygraphs.com/options.html.
3574 * @param {Object} attrs The new properties and values
3575 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3576 * call to updateOptions(). If you know better, you can pass true to explicitly
3577 * block the redraw. This can be useful for chaining updateOptions() calls,
3578 * avoiding the occasional infinite loop and preventing redraws when it's not
3579 * necessary (e.g. when updating a callback).
3581 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3582 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3584 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
3585 var file
= input_attrs
.file
;
3586 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
3588 // TODO(danvk): this is a mess. Move these options into attr_.
3589 if ('rollPeriod' in attrs
) {
3590 this.rollPeriod_
= attrs
.rollPeriod
;
3592 if ('dateWindow' in attrs
) {
3593 this.dateWindow_
= attrs
.dateWindow
;
3594 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3595 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3598 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3599 this.zoomed_y_
= (attrs
.valueRange
!== null);
3602 // TODO(danvk): validate per-series options.
3607 // highlightCircleSize
3609 // Check if this set options will require new points.
3610 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3612 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3614 this.attributes_
.reparseSeries();
3618 if (!block_redraw
) this.start_();
3620 if (!block_redraw
) {
3621 if (requiresNewPoints
) {
3624 this.renderGraph_(false);
3631 * Returns a copy of the options with deprecated names converted into current
3632 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3633 * interested in that, they should save a copy before calling this.
3636 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3638 for (var k
in attrs
) {
3639 if (k
== 'file') continue;
3640 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3643 var set
= function(axis
, opt
, value
) {
3644 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3645 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3646 my_attrs
.axes
[axis
][opt
] = value
;
3648 var map
= function(opt
, axis
, new_opt
) {
3649 if (typeof(attrs
[opt
]) != 'undefined') {
3650 Dygraph
.warn("Option " + opt
+ " is deprecated. Use the " +
3651 new_opt
+ " option for the " + axis
+ " axis instead. " +
3652 "(e.g. { axes : { " + axis
+ " : { " + new_opt
+ " : ... } } } " +
3653 "(see http://dygraphs.com/per-axis.html for more information.");
3654 set(axis
, new_opt
, attrs
[opt
]);
3655 delete my_attrs
[opt
];
3659 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3660 map('xValueFormatter', 'x', 'valueFormatter');
3661 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3662 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3663 map('xTicker', 'x', 'ticker');
3664 map('yValueFormatter', 'y', 'valueFormatter');
3665 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3666 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3667 map('yTicker', 'y', 'ticker');
3672 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3673 * containing div (which has presumably changed size since the dygraph was
3674 * instantiated. If the width/height are specified, the div will be resized.
3676 * This is far more efficient than destroying and re-instantiating a
3677 * Dygraph, since it doesn't have to reparse the underlying data.
3679 * @param {Number} [width] Width (in pixels)
3680 * @param {Number} [height] Height (in pixels)
3682 Dygraph
.prototype.resize
= function(width
, height
) {
3683 if (this.resize_lock
) {
3686 this.resize_lock
= true;
3688 if ((width
=== null) != (height
=== null)) {
3689 this.warn("Dygraph.resize() should be called with zero parameters or " +
3690 "two non-NULL parameters. Pretending it was zero.");
3691 width
= height
= null;
3694 var old_width
= this.width_
;
3695 var old_height
= this.height_
;
3698 this.maindiv_
.style
.width
= width
+ "px";
3699 this.maindiv_
.style
.height
= height
+ "px";
3700 this.width_
= width
;
3701 this.height_
= height
;
3703 this.width_
= this.maindiv_
.clientWidth
;
3704 this.height_
= this.maindiv_
.clientHeight
;
3707 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3708 // Resizing a canvas erases it, even when the size doesn't change, so
3709 // any resize needs to be followed by a redraw.
3710 this.resizeElements_();
3714 this.resize_lock
= false;
3718 * Adjusts the number of points in the rolling average. Updates the graph to
3719 * reflect the new averaging period.
3720 * @param {Number} length Number of points over which to average the data.
3722 Dygraph
.prototype.adjustRoll
= function(length
) {
3723 this.rollPeriod_
= length
;
3728 * Returns a boolean array of visibility statuses.
3730 Dygraph
.prototype.visibility
= function() {
3731 // Do lazy-initialization, so that this happens after we know the number of
3733 if (!this.attr_("visibility")) {
3734 this.attrs_
.visibility
= [];
3736 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3737 while (this.attr_("visibility").length
< this.numColumns() - 1) {
3738 this.attrs_
.visibility
.push(true);
3740 return this.attr_("visibility");
3744 * Changes the visiblity of a series.
3746 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3747 var x
= this.visibility();
3748 if (num
< 0 || num
>= x
.length
) {
3749 this.warn("invalid series number in setVisibility: " + num
);
3757 * How large of an area will the dygraph render itself in?
3758 * This is used for testing.
3759 * @return A {width: w, height: h} object.
3762 Dygraph
.prototype.size
= function() {
3763 return { width
: this.width_
, height
: this.height_
};
3767 * Update the list of annotations and redraw the chart.
3768 * See dygraphs.com/annotations.html for more info on how to use annotations.
3769 * @param ann {Array} An array of annotation objects.
3770 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3772 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3773 // Only add the annotation CSS rule once we know it will be used.
3774 Dygraph
.addAnnotationRule();
3775 this.annotations_
= ann
;
3776 if (!this.layout_
) {
3777 this.warn("Tried to setAnnotations before dygraph was ready. " +
3778 "Try setting them in a drawCallback. See " +
3779 "dygraphs.com/tests/annotation.html");
3783 this.layout_
.setAnnotations(this.annotations_
);
3784 if (!suppressDraw
) {
3790 * Return the list of annotations.
3792 Dygraph
.prototype.annotations
= function() {
3793 return this.annotations_
;
3797 * Get the list of label names for this graph. The first column is the
3798 * x-axis, so the data series names start at index 1.
3800 * Returns null when labels have not yet been defined.
3802 Dygraph
.prototype.getLabels
= function() {
3803 var labels
= this.attr_("labels");
3804 return labels
? labels
.slice() : null;
3808 * Get the index of a series (column) given its name. The first column is the
3809 * x-axis, so the data series start with index 1.
3811 Dygraph
.prototype.indexFromSetName
= function(name
) {
3812 return this.setIndexByName_
[name
];
3816 * Trigger a callback when the dygraph has drawn itself and is ready to be
3817 * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3818 * data (i.e. a URL is passed as the data source) and the chart is drawn
3819 * asynchronously. If the chart has already drawn, the callback will fire
3822 * This is a good place to call setAnnotation().
3824 * @param {function(!Dygraph)} callback The callback to trigger when the chart
3827 Dygraph
.prototype.ready
= function(callback
) {
3828 if (this.is_initial_draw_
) {
3829 this.readyFns_
.push(callback
);
3837 * Adds a default style for the annotation CSS classes to the document. This is
3838 * only executed when annotations are actually used. It is designed to only be
3839 * called once -- all calls after the first will return immediately.
3841 Dygraph
.addAnnotationRule
= function() {
3842 // TODO(danvk): move this function into plugins/annotations.js
?
3843 if (Dygraph
.addedAnnotationCSS
) return;
3845 var rule
= "border: 1px solid black; " +
3846 "background-color: white; " +
3847 "text-align: center;";
3849 var styleSheetElement
= document
.createElement("style");
3850 styleSheetElement
.type
= "text/css";
3851 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3853 // Find the first style sheet that we can access.
3854 // We may not add a rule to a style sheet from another domain for security
3855 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3856 // adds its own style sheets from google.com.
3857 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3858 if (document
.styleSheets
[i
].disabled
) continue;
3859 var mysheet
= document
.styleSheets
[i
];
3861 if (mysheet
.insertRule
) { // Firefox
3862 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3863 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3864 } else if (mysheet
.addRule
) { // IE
3865 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3867 Dygraph
.addedAnnotationCSS
= true;
3870 // Was likely a security exception.
3874 this.warn("Unable to add default annotation CSS rule; display may be off.");
3877 // Older pages may still use this name.
3878 var DateGraph
= Dygraph
;