*/
/*jshint globalstrict: true */
-/*global DygraphRangeSelector:false, DygraphLayout:false, DygraphCanvasRenderer:false, G_vmlCanvasManager:false */
+/*global DygraphLayout:false, DygraphCanvasRenderer:false, DygraphOptions:false, G_vmlCanvasManager:false */
"use strict";
/**
Dygraph.DEFAULT_WIDTH = 480;
Dygraph.DEFAULT_HEIGHT = 320;
-Dygraph.ANIMATION_STEPS = 10;
+// For max 60 Hz. animation:
+Dygraph.ANIMATION_STEPS = 12;
Dygraph.ANIMATION_DURATION = 200;
// These are defined before DEFAULT_ATTRS so that it can refer to them.
Dygraph.Plotters.linePlotter
],
+ plugins: [ ],
+
// per-axis options
axes: {
x: {
attrs = Dygraph.mapLegacyOptions_(attrs);
+ if (typeof(div) == 'string') {
+ div = document.getElementById(div);
+ }
+
if (!div) {
Dygraph.error("Constructing dygraph with a non-existent div!");
return;
// TODO(nikhilk): Add any other stackedGraph checks here.
}
- // These two options have a bad interaction. See issue 359.
- if (attrs.showRangeSelector && attrs.animatedZooms) {
- this.warn('You should not set animatedZooms=true when using the range selector.');
- attrs.animatedZooms = false;
- }
-
+ // DEPRECATION WARNING: All option processing should be moved from
+ // attrs_ and user_attrs_ to options_, which holds all this information.
+ //
// Dygraphs has many options, some of which interact with one another.
// To keep track of everything, we maintain two sets of options:
//
// Activate plugins.
this.plugins_ = [];
- for (var i = 0; i < Dygraph.PLUGINS.length; i++) {
- var Plugin = Dygraph.PLUGINS[i];
+ var plugins = Dygraph.PLUGINS.concat(this.getOption('plugins'));
+ for (var i = 0; i < plugins.length; i++) {
+ var Plugin = plugins[i];
var pluginInstance = new Plugin();
var pluginDict = {
plugin: pluginInstance,
}
}
+ this.createDragInterface_();
+
this.start_();
};
Dygraph.OPTIONS_REFERENCE[name] = true;
}
// </REMOVE_FOR_COMBINED>
- return seriesName ? this.attributes_.findForSeries(name, seriesName) : this.attributes_.find(name);
+ return seriesName ? this.attributes_.getForSeries(name, seriesName) : this.attributes_.get(name);
};
/**
return this.attr_(name, opt_seriesName);
};
+Dygraph.prototype.getOptionForAxis = function(name, axis) {
+ return this.attributes_.getForAxis(name, axis);
+};
+
/**
* @private
* @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2')
var yRange = this.yAxisRange(axis);
var pct;
- if (!this.axes_[axis].logscale) {
+ var logscale = this.attributes_.getForAxis("logscale", axis);
+ if (!logscale) {
// yRange[1] - y is unit distance from the bottom.
// yRange[1] - yRange[0] is the scale of the range.
// (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom.
this.graphDiv = document.createElement("div");
this.graphDiv.style.width = this.width_ + "px";
this.graphDiv.style.height = this.height_ + "px";
+ // TODO(danvk): any other styles that are useful to set here?
+ this.graphDiv.style.textAlign = 'left'; // This is a CSS "reset"
enclosing.appendChild(this.graphDiv);
// Create the canvas for interactive parts of the chart.
this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
this.hidden_ctx_ = Dygraph.getContext(this.hidden_);
- if (this.attr_('showRangeSelector')) {
- // The range selector must be created here so that its canvases and contexts get created here.
- // For some reason, if the canvases and contexts don't get created here, things don't work in IE.
- this.rangeSelector_ = new DygraphRangeSelector(this);
- }
-
// The interactive parts of the graph are drawn on top of the chart.
this.graphDiv.appendChild(this.hidden_);
this.graphDiv.appendChild(this.canvas_);
// Create the grapher
this.layout_ = new DygraphLayout(this);
- if (this.rangeSelector_) {
- // This needs to happen after the graph canvases are added to the div and the layout object is created.
- this.rangeSelector_.addToGraph(this.graphDiv, this.layout_);
- }
-
var dygraph = this;
- this.mouseMoveHandler = function(e) {
+ this.mouseMoveHandler_ = function(e) {
dygraph.mouseMove_(e);
};
- this.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler);
- this.mouseOutHandler = function(e) {
+ this.mouseOutHandler_ = function(e) {
dygraph.mouseOut_(e);
};
- this.addEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler);
- this.createDragInterface_();
+ this.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
+ this.addEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler_);
- this.resizeHandler = function(e) {
- dygraph.resize();
- };
+ // Don't recreate and register the resize handler on subsequent calls.
+ // This happens when the graph is resized.
+ if (!this.resizeHandler_) {
+ this.resizeHandler_ = function(e) {
+ dygraph.resize();
+ };
- // Update when the window is resized.
- // TODO(danvk): drop frames depending on complexity of the chart.
- this.addEvent(window, 'resize', this.resizeHandler);
+ // Update when the window is resized.
+ // TODO(danvk): drop frames depending on complexity of the chart.
+ this.addEvent(window, 'resize', this.resizeHandler_);
+ }
};
/**
}
};
- for (var idx = 0; idx < this.registeredEvents_.length; idx++) {
- var reg = this.registeredEvents_[idx];
- Dygraph.removeEvent(reg.elem, reg.type, reg.fn);
+ if (this.registeredEvents_) {
+ for (var idx = 0; idx < this.registeredEvents_.length; idx++) {
+ var reg = this.registeredEvents_[idx];
+ Dygraph.removeEvent(reg.elem, reg.type, reg.fn);
+ }
}
+
this.registeredEvents_ = [];
// remove mouse event handlers (This may not be necessary anymore)
- Dygraph.removeEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler);
- Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler);
+ Dygraph.removeEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler_);
+ Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseUpHandler_);
+
+ // remove window handlers
+ Dygraph.removeEvent(window,'resize',this.resizeHandler_);
+ this.resizeHandler_ = null;
+
removeRecursive(this.maindiv_);
var nullOut = function(obj) {
}
}
};
- // remove event handlers
- Dygraph.removeEvent(window,'resize',this.resizeHandler);
- this.resizeHandler = null;
// These may not all be necessary, but it can't hurt...
nullOut(this.layout_);
nullOut(this.plotter_);
column: idx,
visible: this.visibility()[idx - 1],
color: this.colorsMap_[series_name],
- axis: 1 + this.seriesToAxisMap_[series_name]
+ axis: 1 + this.attributes_.axisForSeries(series_name)
};
};
bindHandler(interactionModel[eventName]));
}
+ // unregister the handler on subsequent calls.
+ // This happens when the graph is resized.
+ if (this.mouseUpHandler_) {
+ Dygraph.removeEvent(document, 'mouseup', this.mouseUpHandler_);
+ }
+
// If the user releases the mouse button during a drag, but not over the
// canvas, then it doesn't count as a zooming action.
this.mouseUpHandler_ = function(event) {
/**
* Reset the zoom to the original view coordinates. This is the same as
* double-clicking on the graph.
- *
- * @private
*/
-Dygraph.prototype.doUnzoom_ = function() {
+Dygraph.prototype.resetZoom = function() {
var dirty = false, dirtyX = false, dirtyY = false;
if (this.dateWindow_ !== null) {
dirty = true;
var minDist = Infinity;
var idx = -1;
var dist, dx, dy, point, closestPoint, closestSeries;
- for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
+ for ( var setIdx = this.layout_.datasets.length - 1 ; setIdx >= 0 ; --setIdx ) {
var points = this.layout_.points[setIdx];
for (var i = 0; i < points.length; ++i) {
var point = points[i];
var row = this.findClosestRow(domX);
var boundary = this.getLeftBoundary_();
var rowIdx = row - boundary;
- var sets = this.layout_.points;
var closestPoint, closestSeries;
for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
var points = this.layout_.points[setIdx];
var highlightSeriesOpts = this.attr_("highlightSeriesOpts");
var selectionChanged = false;
- if (highlightSeriesOpts && !this.lockedSet_) {
+ if (highlightSeriesOpts && !this.isSeriesLocked()) {
var closest;
if (this.attr_("stackedGraph")) {
closest = this.findStackedPoint(canvasx, canvasy);
* @private
*/
Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
- var defaultPrevented = this.cascadeEvents_('select', {
+ /*var defaultPrevented = */
+ this.cascadeEvents_('select', {
selectedX: this.lastx_,
selectedPoints: this.selPoints_
});
};
/**
+ * Returns true if the currently-highlighted series was locked
+ * via setSelection(..., seriesName, true).
+ */
+Dygraph.prototype.isSeriesLocked = function() {
+ return this.lockedSet_;
+};
+
+/**
* Fires when there's data available to be graphed.
* @param {String} data Raw CSV data to be plotted
* @private
Dygraph.prototype.predraw_ = function() {
var start = new Date();
+ this.layout_.computePlotArea();
+
// TODO(danvk): move more computations out of drawGraph_ and into here.
this.computeYAxes_();
this.cascadeEvents_('predraw');
- if (this.rangeSelector_) {
- this.rangeSelector_.renderStaticLayer();
- }
-
// Convert the raw data (a 2D array) into the internal format and compute
// rolling averages.
this.rolledSeries_ = [null]; // x-axis is the first series and it's special
if (this.attr_("timingName")) {
var end = new Date();
- if (console) {
- console.log(this.attr_("timingName") + " - drawGraph: " + (end - start) + "ms");
- }
+ Dygraph.info(this.attr_("timingName") + " - drawGraph: " + (end - start) + "ms");
}
};
this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
this.canvas_.height);
- // Generate a static legend before any particular point is selected.
-
- if (this.rangeSelector_) {
- this.rangeSelector_.renderInteractiveLayer();
- }
if (this.attr_("drawCallback") !== null) {
this.attr_("drawCallback")(this, is_initial_draw);
}
* currently being displayed. This includes things like the number of axes and
* the style of the axes. It does not include the range of each axis and its
* tick marks.
- * This fills in this.axes_ and this.seriesToAxisMap_.
+ * This fills in this.axes_.
* axes_ = [ { options } ]
- * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
* indices are into the axes_ array.
*/
Dygraph.prototype.computeYAxes_ = function() {
// Preserve valueWindow settings if they exist, and if the user hasn't
// specified a new valueRange.
- var i, valueWindows, seriesName, axis, index, opts, v;
+ var valueWindows, axis, index, opts, v;
if (this.axes_ !== undefined && this.user_attrs_.hasOwnProperty("valueRange") === false) {
valueWindows = [];
for (index = 0; index < this.axes_.length; index++) {
}
}
- this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis.
- this.seriesToAxisMap_ = {};
+ // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
+ // data computation as well as options storage.
+ // Go through once and add all the axes.
+ this.axes_ = [];
- // Get a list of series names.
- var labels = this.attr_("labels");
- var series = {};
- for (i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
-
- // all options which could be applied per-axis:
- var axisOptions = [
- 'includeZero',
- 'valueRange',
- 'labelsKMB',
- 'labelsKMG2',
- 'pixelsPerYLabel',
- 'yAxisLabelWidth',
- 'axisLabelFontSize',
- 'axisTickSize',
- 'logscale'
- ];
-
- // Copy global axis options over to the first axis.
- for (i = 0; i < axisOptions.length; i++) {
- var k = axisOptions[i];
- v = this.attr_(k);
- if (v) this.axes_[0][k] = v;
+ for (axis = 0; axis < this.attributes_.numAxes(); axis++) {
+ // Add a new axis, making a copy of its per-axis options.
+ opts = { g : this };
+ Dygraph.update(opts, this.attributes_.axisOptions(axis));
+ this.axes_[axis] = opts;
}
- // Go through once and add all the axes.
- for (seriesName in series) {
- if (!series.hasOwnProperty(seriesName)) continue;
- axis = this.attr_("axis", seriesName);
- if (axis === null) {
- this.seriesToAxisMap_[seriesName] = 0;
- continue;
- }
- if (typeof(axis) == 'object') {
- // Add a new axis, making a copy of its per-axis options.
- opts = {};
- Dygraph.update(opts, this.axes_[0]);
- Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this.
- var yAxisId = this.axes_.length;
- opts.yAxisId = yAxisId;
- opts.g = this;
- Dygraph.update(opts, axis);
- this.axes_.push(opts);
- this.seriesToAxisMap_[seriesName] = yAxisId;
- }
- }
-
- // Go through one more time and assign series to an axis defined by another
- // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
- for (seriesName in series) {
- if (!series.hasOwnProperty(seriesName)) continue;
- axis = this.attr_("axis", seriesName);
- if (typeof(axis) == 'string') {
- if (!this.seriesToAxisMap_.hasOwnProperty(axis)) {
- this.error("Series " + seriesName + " wants to share a y-axis with " +
- "series " + axis + ", which does not define its own axis.");
- return null;
- }
- var idx = this.seriesToAxisMap_[axis];
- this.seriesToAxisMap_[seriesName] = idx;
- }
- }
+
+ // Copy global valueRange option over to the first axis.
+ // NOTE(konigsberg): Are these two statements necessary?
+ // I tried removing it. The automated tests pass, and manually
+ // messing with tests/zoom.html showed no trouble.
+ v = this.attr_('valueRange');
+ if (v) this.axes_[0].valueRange = v;
if (valueWindows !== undefined) {
// Restore valueWindow settings.
}
}
- // New axes options
for (axis = 0; axis < this.axes_.length; axis++) {
if (axis === 0) {
opts = this.optionsViewForAxis_('y' + (axis ? '2' : ''));
}
}
}
-
};
/**
* @return {Number} the number of axes.
*/
Dygraph.prototype.numAxes = function() {
- var last_axis = 0;
- for (var series in this.seriesToAxisMap_) {
- if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
- var idx = this.seriesToAxisMap_[series];
- if (idx > last_axis) last_axis = idx;
- }
- return 1 + last_axis;
+ return this.attributes_.numAxes();
};
/**
*/
Dygraph.prototype.axisPropertiesForSeries = function(series) {
// TODO(danvk): handle errors.
- return this.axes_[this.seriesToAxisMap_[series]];
+ return this.axes_[this.attributes_.axisForSeries(series)];
};
/**
* This fills in the valueRange and ticks fields in each entry of this.axes_.
*/
Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
- // Build a map from axis number -> [list of series names]
- var seriesForAxis = [], series;
- for (series in this.seriesToAxisMap_) {
- if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
- var idx = this.seriesToAxisMap_[series];
- while (seriesForAxis.length <= idx) seriesForAxis.push([]);
- seriesForAxis[idx].push(series);
- }
+
+ var isNullUndefinedOrNaN = function(num) {
+ return isNaN(parseFloat(num));
+ };
+ var series;
+ var numAxes = this.attributes_.numAxes();
// Compute extreme values, a span and tick marks for each axis.
- for (var i = 0; i < this.axes_.length; i++) {
+ for (var i = 0; i < numAxes; i++) {
var axis = this.axes_[i];
+ var logscale = this.attributes_.getForAxis("logscale", i);
+ var includeZero = this.attributes_.getForAxis("includeZero", i);
+ series = this.attributes_.seriesForAxis(i);
- if (!seriesForAxis[i]) {
+ if (series.length === 0) {
// If no series are defined or visible then use a reasonable default
axis.extremeRange = [0, 1];
} else {
// Calculate the extremes of extremes.
- series = seriesForAxis[i];
var minY = Infinity; // extremes[series[0]][0];
var maxY = -Infinity; // extremes[series[0]][1];
var extremeMinY, extremeMaxY;
maxY = Math.max(extremeMaxY, maxY);
}
}
- if (axis.includeZero && minY > 0) minY = 0;
+ if (includeZero && minY > 0) minY = 0;
// Ensure we have a valid scale, otherwise default to [0, 1] for safety.
if (minY == Infinity) minY = 0;
if (span === 0) { span = maxY; }
var maxAxisY, minAxisY;
- if (axis.logscale) {
+ if (logscale) {
maxAxisY = maxY + 0.1 * span;
minAxisY = minY;
} else {
axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
} else if (axis.valueRange) {
// This is a user-set value range for this axis.
- axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]];
+ axis.computedValueRange = [
+ isNullUndefinedOrNaN(axis.valueRange[0]) ? axis.extremeRange[0] : axis.valueRange[0],
+ isNullUndefinedOrNaN(axis.valueRange[1]) ? axis.extremeRange[1] : axis.valueRange[1]
+ ];
} else {
axis.computedValueRange = axis.extremeRange;
}
isDate = true;
}
+ this.setXAxisOptions_(isDate);
+};
+
+Dygraph.prototype.setXAxisOptions_ = function(isDate) {
if (isDate) {
this.attrs_.xValueParser = Dygraph.dateParser;
this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
if (Dygraph.isDateLike(data[0][0])) {
// Some intelligent defaults for a date x-axis.
this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
- this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
this.attrs_.axes.x.ticker = Dygraph.dateTicker;
+ this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
// Assume they're all dates.
var parsedData = Dygraph.clone(data);
// Some intelligent defaults for a numeric x-axis.
/** @private (shut up, jsdoc!) */
this.attrs_.axes.x.valueFormatter = function(x) { return x; };
- this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter;
this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
+ this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter;
return data;
}
};
if (annotations.length > 0) {
this.setAnnotations(annotations, true);
}
+ this.attributes_.reparseSeries();
};
/**
Dygraph.updateDeep(this.user_attrs_, attrs);
+ this.attributes_.reparseSeries();
+
if (file) {
this.file_ = file;
if (!block_redraw) this.start_();
};
var map = function(opt, axis, new_opt) {
if (typeof(attrs[opt]) != 'undefined') {
+ Dygraph.warn("Option " + opt + " is deprecated. Use the " +
+ new_opt + " option for the " + axis + " axis instead. " +
+ "(e.g. { axes : { " + axis + " : { " + new_opt + " : ... } } } " +
+ "(see http://dygraphs.com/per-axis.html for more information.");
set(axis, new_opt, attrs[opt]);
delete my_attrs[opt];
}
// createInterface_ reset the layout, so we need to do this.
this.layout_.setAnnotations(this.annotations_);
}
+ this.createDragInterface_();
this.predraw_();
}
/**
* Get the list of label names for this graph. The first column is the
* x-axis, so the data series names start at index 1.
+ *
+ * Returns null when labels have not yet been defined.
*/
Dygraph.prototype.getLabels = function() {
- return this.attr_("labels").slice();
+ var labels = this.attr_("labels");
+ return labels ? labels.slice() : null;
};
/**
projects / dygraphs.git / blobdiff