pixelsPerLabel: 60,
axisLabelFormatter: Dygraph.dateAxisFormatter,
valueFormatter: Dygraph.dateString_,
+ drawGrid: true,
+ independentTicks: true,
ticker: null // will be set in dygraph-tickers.js
},
y: {
pixelsPerLabel: 30,
valueFormatter: Dygraph.numberValueFormatter,
axisLabelFormatter: Dygraph.numberAxisLabelFormatter,
+ drawGrid: true,
+ independentTicks: true,
ticker: null // will be set in dygraph-tickers.js
},
y2: {
pixelsPerLabel: 30,
valueFormatter: Dygraph.numberValueFormatter,
axisLabelFormatter: Dygraph.numberAxisLabelFormatter,
+ drawGrid: false,
+ independentTicks: false,
ticker: null // will be set in dygraph-tickers.js
}
}
var enclosing = this.maindiv_;
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.canvas_ = Dygraph.createCanvas();
this.canvas_.style.position = "absolute";
- this.canvas_.width = this.width_;
- this.canvas_.height = this.height_;
- this.canvas_.style.width = this.width_ + "px"; // for IE
- this.canvas_.style.height = this.height_ + "px"; // for IE
+
+ this.resizeElements_();
this.canvas_ctx_ = Dygraph.getContext(this.canvas_);
}
};
- this.addEvent(window, 'mouseout', this.mouseOutHandler_);
- this.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
+ this.addAndTrackEvent(window, 'mouseout', this.mouseOutHandler_);
+ this.addAndTrackEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
// Don't recreate and register the resize handler on subsequent calls.
// This happens when the graph is resized.
// Update when the window is resized.
// TODO(danvk): drop frames depending on complexity of the chart.
- this.addEvent(window, 'resize', this.resizeHandler_);
+ this.addAndTrackEvent(window, 'resize', this.resizeHandler_);
}
};
+Dygraph.prototype.resizeElements_ = function() {
+ this.graphDiv.style.width = this.width_ + "px";
+ this.graphDiv.style.height = this.height_ + "px";
+ this.canvas_.width = this.width_;
+ this.canvas_.height = this.height_;
+ this.canvas_.style.width = this.width_ + "px"; // for IE
+ this.canvas_.style.height = this.height_ + "px"; // for IE
+};
+
/**
* Detach DOM elements in the dygraph and null out all data references.
* Calling this when you're done with a dygraph can dramatically reduce memory
* usage. See, e.g., the tests/perf.html example.
*/
Dygraph.prototype.destroy = function() {
+ this.canvas_ctx_.restore();
+ this.hidden_ctx_.restore();
+
var removeRecursive = function(node) {
while (node.hasChildNodes()) {
removeRecursive(node.firstChild);
}
};
- 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_ = [];
+ this.removeTrackedEvents_();
// remove mouse event handlers (This may not be necessary anymore)
Dygraph.removeEvent(window, 'mouseout', this.mouseOutHandler_);
Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
- Dygraph.removeEvent(this.mouseEventElement_, 'mouseup', this.mouseUpHandler_);
// remove window handlers
Dygraph.removeEvent(window,'resize',this.resizeHandler_);
for (var eventName in interactionModel) {
if (!interactionModel.hasOwnProperty(eventName)) continue;
- this.addEvent(this.mouseEventElement_, eventName,
+ this.addAndTrackEvent(this.mouseEventElement_, eventName,
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) {
+ var mouseUpHandler = function(event) {
if (context.isZooming || context.isPanning) {
context.isZooming = false;
context.dragStartX = null;
context.tarp.uncover();
};
- this.addEvent(document, 'mouseup', this.mouseUpHandler_);
+ this.addAndTrackEvent(document, 'mouseup', mouseUpHandler);
};
/**
this.cascadeEvents_('clearChart');
this.plotter_.clear();
}
+
+ if(!this.is_initial_draw_) {
+ this.canvas_ctx_.restore();
+ this.hidden_ctx_.restore();
+ }
+
+ this.canvas_ctx_.save();
+ this.hidden_ctx_.save();
+
this.plotter_ = new DygraphCanvasRenderer(this,
this.hidden_,
this.hidden_ctx_,
var datasets = [];
var extremes = {}; // series name -> [low, high]
var i, j, k;
+ var errorBars = this.attr_("errorBars");
+ var customBars = this.attr_("customBars");
+ var bars = errorBars || customBars;
+ var isValueNull = function(sample) {
+ if (!bars) {
+ return sample[1] === null;
+ } else {
+ return customBars ? sample[1][1] === null :
+ errorBars ? sample[1][0] === null : false;
+ }
+ };
// Loop over the fields (series). Go from the last to the first,
// because if they're stacked that's how we accumulate the values.
// Prune down to the desired range, if necessary (for zooming)
// Because there can be lines going to points outside of the visible area,
// we actually prune to visible points, plus one on either side.
- var bars = this.attr_("errorBars") || this.attr_("customBars");
if (dateWindow) {
var low = dateWindow[0];
var high = dateWindow[1];
var pruned = [];
+
// TODO(danvk): do binary search instead of linear search.
// TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
var firstIdx = null, lastIdx = null;
lastIdx = k;
}
}
+
if (firstIdx === null) firstIdx = 0;
- if (firstIdx > 0) firstIdx--;
+ var correctedFirstIdx = firstIdx;
+ var isInvalidValue = true;
+ while (isInvalidValue && correctedFirstIdx > 0) {
+ correctedFirstIdx--;
+ isInvalidValue = isValueNull(series[correctedFirstIdx]);
+ }
+
if (lastIdx === null) lastIdx = series.length - 1;
- if (lastIdx < series.length - 1) lastIdx++;
- boundaryIds[i-1] = [firstIdx, lastIdx];
+ var correctedLastIdx = lastIdx;
+ isInvalidValue = true;
+ while (isInvalidValue && correctedLastIdx < series.length - 1) {
+ correctedLastIdx++;
+ isInvalidValue = isValueNull(series[correctedLastIdx]);
+ }
+
+ boundaryIds[i-1] = [(firstIdx > 0) ? firstIdx - 1 : firstIdx,
+ (lastIdx < series.length - 1) ? lastIdx + 1 : lastIdx];
+
+ if (correctedFirstIdx!==firstIdx) {
+ pruned.push(series[correctedFirstIdx]);
+ }
for (k = firstIdx; k <= lastIdx; k++) {
pruned.push(series[k]);
}
+ if (correctedLastIdx !== lastIdx) {
+ pruned.push(series[correctedLastIdx]);
+ }
+
series = pruned;
} else {
boundaryIds[i-1] = [0, series.length-1];
};
var numAxes = this.attributes_.numAxes();
var ypadCompat, span, series, ypad;
+
+ var p_axis;
// Compute extreme values, a span and tick marks for each axis.
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);
+ var independentTicks = this.attributes_.getForAxis("independentTicks", i);
series = this.attributes_.seriesForAxis(i);
// Add some padding. This supports two Y padding operation modes:
} else {
axis.computedValueRange = axis.extremeRange;
}
-
- // Add ticks. By default, all axes inherit the tick positions of the
- // primary axis. However, if an axis is specifically marked as having
- // independent ticks, then that is permissible as well.
- var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
- var ticker = opts('ticker');
- if (i === 0 || axis.independentTicks) {
+
+
+ if(independentTicks) {
+ axis.independentTicks = independentTicks;
+ var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
+ var ticker = opts('ticker');
axis.ticks = ticker(axis.computedValueRange[0],
- axis.computedValueRange[1],
- this.height_, // TODO(danvk): should be area.height
- opts,
- this);
- } else {
- var p_axis = this.axes_[0];
+ axis.computedValueRange[1],
+ this.height_, // TODO(danvk): should be area.height
+ opts,
+ this);
+ // Define the first independent axis as primary axis.
+ if (!p_axis) p_axis = axis;
+ }
+ }
+ if (p_axis === undefined) {
+ throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
+ }
+ // Add ticks. By default, all axes inherit the tick positions of the
+ // primary axis. However, if an axis is specifically marked as having
+ // independent ticks, then that is permissible as well.
+ for (var i = 0; i < numAxes; i++) {
+ var axis = this.axes_[i];
+
+ if (!axis.independentTicks) {
+ var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
+ var ticker = opts('ticker');
var p_ticks = p_axis.ticks;
var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
this.height_ = this.maindiv_.clientHeight;
}
+ this.resizeElements_();
+
if (old_width != this.width_ || old_height != this.height_) {
- // TODO(danvk): there should be a clear() method.
- this.maindiv_.innerHTML = "";
- this.roller_ = null;
- this.attrs_.labelsDiv = null;
- this.createInterface_();
- if (this.annotations_.length) {
- // createInterface_ reset the layout, so we need to do this.
- this.layout_.setAnnotations(this.annotations_);
- }
- this.createDragInterface_();
this.predraw_();
}
projects / dygraphs.git / blobdiff