// TODO(danvk): move defaults from createStatusMessage_ here.
},
labelsSeparateLines: false,
+ labelsShowZeroValues: true,
labelsKMB: false,
labelsKMG2: false,
showLabelsOnHighlight: true,
connectSeparatedPoints: false,
stackedGraph: false,
- hideOverlayOnMouseOut: true
+ hideOverlayOnMouseOut: true,
+
+ stepPlot: false
};
// Various logging levels.
Dygraph.WARNING = 3;
Dygraph.ERROR = 3;
+// Directions for panning and zooming. Use bit operations when combined
+// values are possible.
+Dygraph.HORIZONTAL = 1;
+Dygraph.VERTICAL = 2;
+
+// Used for initializing annotation CSS rules only once.
+Dygraph.addedAnnotationCSS = false;
+
Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
// Labels is no longer a constructor parameter, since it's typically set
// directly from the data source. It also conains a name for the x-axis,
this.previousVerticalX_ = -1;
this.fractions_ = attrs.fractions || false;
this.dateWindow_ = attrs.dateWindow || null;
+ // valueRange and valueWindow are similar, but not the same. valueRange is a
+ // locally-stored copy of the attribute. valueWindow starts off the same as
+ // valueRange but is impacted by zoom or pan effects. valueRange is kept
+ // around to restore the original value back to valueRange.
this.valueRange_ = attrs.valueRange || null;
+ this.valueWindow_ = this.valueRange_;
+
this.wilsonInterval_ = attrs.wilsonInterval || true;
this.is_initial_draw_ = true;
+ this.annotations_ = [];
// Clear the div. This ensure that, if multiple dygraphs are passed the same
// div, then only one will be drawn.
// Make a note of whether labels will be pulled from the CSV file.
this.labelsFromCSV_ = (this.attr_("labels") == null);
+ Dygraph.addAnnotationRule();
+
// Create the containing DIV and other interactive elements
this.createInterface_();
this.start_();
};
-Dygraph.prototype.attr_ = function(name) {
- if (typeof(this.user_attrs_[name]) != 'undefined') {
+Dygraph.prototype.attr_ = function(name, seriesName) {
+ if (seriesName &&
+ typeof(this.user_attrs_[seriesName]) != 'undefined' &&
+ this.user_attrs_[seriesName] != null &&
+ typeof(this.user_attrs_[seriesName][name]) != 'undefined') {
+ return this.user_attrs_[seriesName][name];
+ } else if (typeof(this.user_attrs_[name]) != 'undefined') {
return this.user_attrs_[name];
} else if (typeof(this.attrs_[name]) != 'undefined') {
return this.attrs_[name];
return ret;
};
+/**
+ * Returns the number of columns (including the independent variable).
+ */
+Dygraph.prototype.numColumns = function() {
+ return this.rawData_[0].length;
+};
+
+/**
+ * Returns the number of rows (excluding any header/label row).
+ */
+Dygraph.prototype.numRows = function() {
+ return this.rawData_.length;
+};
+
+/**
+ * Returns the value in the given row and column. If the row and column exceed
+ * the bounds on the data, returns null. Also returns null if the value is
+ * missing.
+ */
+Dygraph.prototype.getValue = function(row, col) {
+ if (row < 0 || row > this.rawData_.length) return null;
+ if (col < 0 || col > this.rawData_[row].length) return null;
+
+ return this.rawData_[row][col];
+};
+
Dygraph.addEvent = function(el, evt, fn) {
var normed_fn = function(e) {
if (!e) var e = window.event;
this.canvas_.height = this.height_;
this.canvas_.style.width = this.width_ + "px"; // for IE
this.canvas_.style.height = this.height_ + "px"; // for IE
- this.graphDiv.appendChild(this.canvas_);
// ... and for static parts of the chart.
this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
+ // The interactive parts of the graph are drawn on top of the chart.
+ this.graphDiv.appendChild(this.hidden_);
+ this.graphDiv.appendChild(this.canvas_);
+ this.mouseEventElement_ = this.canvas_;
+
// Make sure we don't overdraw.
Dygraph.clipCanvas_(this.hidden_, this.clippingArea_);
Dygraph.clipCanvas_(this.canvas_, this.clippingArea_);
var dygraph = this;
- Dygraph.addEvent(this.hidden_, 'mousemove', function(e) {
+ Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) {
dygraph.mouseMove_(e);
});
- Dygraph.addEvent(this.hidden_, 'mouseout', function(e) {
+ Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) {
dygraph.mouseOut_(e);
});
h.height = this.height_;
h.style.width = this.width_ + "px"; // for IE
h.style.height = this.height_ + "px"; // for IE
- this.graphDiv.appendChild(h);
return h;
};
* been specified.
* @private
*/
-Dygraph.prototype.createStatusMessage_ = function(){
+Dygraph.prototype.createStatusMessage_ = function() {
+ var userLabelsDiv = this.user_attrs_["labelsDiv"];
+ if (userLabelsDiv && null != userLabelsDiv
+ && (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String)) {
+ this.user_attrs_["labelsDiv"] = document.getElementById(userLabelsDiv);
+ }
if (!this.attr_("labelsDiv")) {
var divWidth = this.attr_('labelsDivWidth');
var messagestyle = {
var dragStartY = null;
var dragEndX = null;
var dragEndY = null;
+ var dragDirection = null;
var prevEndX = null;
+ var prevEndY = null;
+ var prevDragDirection = null;
+
+ // draggingDate and draggingValue represent the [date,value] point on the
+ // graph at which the mouse was pressed. As the mouse moves while panning,
+ // the viewport must pan so that the mouse position points to
+ // [draggingDate, draggingValue]
var draggingDate = null;
+ var draggingValue = null;
+
+ // The range in second/value units that the viewport encompasses during a
+ // panning operation.
var dateRange = null;
+ var valueRange = null;
// Utility function to convert page-wide coordinates to canvas coords
var px = 0;
var py = 0;
var getX = function(e) { return Dygraph.pageX(e) - px };
- var getY = function(e) { return Dygraph.pageX(e) - py };
+ var getY = function(e) { return Dygraph.pageY(e) - py };
// Draw zoom rectangles when the mouse is down and the user moves around
- Dygraph.addEvent(this.hidden_, 'mousemove', function(event) {
+ Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(event) {
if (isZooming) {
dragEndX = getX(event);
dragEndY = getY(event);
- self.drawZoomRect_(dragStartX, dragEndX, prevEndX);
+ var xDelta = Math.abs(dragStartX - dragEndX);
+ var yDelta = Math.abs(dragStartY - dragEndY);
+
+ // drag direction threshold for y axis is twice as large as x axis
+ dragDirection = (xDelta < yDelta / 2) ? Dygraph.VERTICAL : Dygraph.HORIZONTAL;
+
+ self.drawZoomRect_(dragDirection, dragStartX, dragEndX, dragStartY, dragEndY,
+ prevDragDirection, prevEndX, prevEndY);
+
prevEndX = dragEndX;
+ prevEndY = dragEndY;
+ prevDragDirection = dragDirection;
} else if (isPanning) {
dragEndX = getX(event);
dragEndY = getY(event);
// Want to have it so that:
- // 1. draggingDate appears at dragEndX
+ // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
// 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
+ // 3. draggingValue appears at dragEndY.
+ // 4. valueRange is unaltered.
+
+ var minDate = draggingDate - (dragEndX / self.width_) * dateRange;
+ var maxDate = minDate + dateRange;
+ self.dateWindow_ = [minDate, maxDate];
+
- self.dateWindow_[0] = draggingDate - (dragEndX / self.width_) * dateRange;
- self.dateWindow_[1] = self.dateWindow_[0] + dateRange;
+ // y-axis scaling is automatic unless a valueRange is defined or
+ // if the user zooms in on the y-axis. If neither is true, valueWindow_
+ // will be null.
+ if (self.valueWindow_) {
+ var maxValue = draggingValue + (dragEndY / self.height_) * valueRange;
+ var minValue = maxValue - valueRange;
+ self.valueWindow_ = [ minValue, maxValue ];
+ }
self.drawGraph_(self.rawData_);
}
});
// Track the beginning of drag events
- Dygraph.addEvent(this.hidden_, 'mousedown', function(event) {
+ Dygraph.addEvent(this.mouseEventElement_, 'mousedown', function(event) {
px = Dygraph.findPosX(self.canvas_);
py = Dygraph.findPosY(self.canvas_);
dragStartX = getX(event);
dragStartY = getY(event);
if (event.altKey || event.shiftKey) {
- if (!self.dateWindow_) return; // have to be zoomed in to pan.
+ // have to be zoomed in to pan.
+ if (!self.dateWindow_ && !self.valueWindow_) return;
+
isPanning = true;
- dateRange = self.dateWindow_[1] - self.dateWindow_[0];
+ var xRange = self.xAxisRange();
+ dateRange = xRange[1] - xRange[0];
+ var yRange = self.yAxisRange();
+ valueRange = yRange[1] - yRange[0];
+
+ // TODO(konigsberg): Switch from all this math to toDataCoords?
+ // Seems to work for the dragging value.
draggingDate = (dragStartX / self.width_) * dateRange +
- self.dateWindow_[0];
+ xRange[0];
+ var r = self.toDataCoords(null, dragStartY);
+ draggingValue = r[1];
} else {
isZooming = true;
}
if (isPanning) {
isPanning = false;
draggingDate = null;
+ draggingValue = null;
dateRange = null;
+ valueRange = null;
}
});
// Temporarily cancel the dragging event when the mouse leaves the graph
- Dygraph.addEvent(this.hidden_, 'mouseout', function(event) {
+ Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(event) {
if (isZooming) {
dragEndX = null;
dragEndY = null;
// If the mouse is released on the canvas during a drag event, then it's a
// zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
- Dygraph.addEvent(this.hidden_, 'mouseup', function(event) {
+ Dygraph.addEvent(this.mouseEventElement_, 'mouseup', function(event) {
if (isZooming) {
isZooming = false;
dragEndX = getX(event);
var regionHeight = Math.abs(dragEndY - dragStartY);
if (regionWidth < 2 && regionHeight < 2 &&
- self.attr_('clickCallback') != null &&
- self.lastx_ != undefined) {
- // TODO(danvk): pass along more info about the points.
- self.attr_('clickCallback')(event, self.lastx_, self.selPoints_);
+ self.lastx_ != undefined && self.lastx_ != -1) {
+ // TODO(danvk): pass along more info about the points, e.g. 'x'
+ if (self.attr_('clickCallback') != null) {
+ self.attr_('clickCallback')(event, self.lastx_, self.selPoints_);
+ }
+ if (self.attr_('pointClickCallback')) {
+ // check if the click was on a particular point.
+ var closestIdx = -1;
+ var closestDistance = 0;
+ for (var i = 0; i < self.selPoints_.length; i++) {
+ var p = self.selPoints_[i];
+ var distance = Math.pow(p.canvasx - dragEndX, 2) +
+ Math.pow(p.canvasy - dragEndY, 2);
+ if (closestIdx == -1 || distance < closestDistance) {
+ closestDistance = distance;
+ closestIdx = i;
+ }
+ }
+
+ // Allow any click within two pixels of the dot.
+ var radius = self.attr_('highlightCircleSize') + 2;
+ if (closestDistance <= 5 * 5) {
+ self.attr_('pointClickCallback')(event, self.selPoints_[closestIdx]);
+ }
+ }
}
- if (regionWidth >= 10) {
- self.doZoom_(Math.min(dragStartX, dragEndX),
+ if (regionWidth >= 10 && dragDirection == Dygraph.HORIZONTAL) {
+ self.doZoomX_(Math.min(dragStartX, dragEndX),
Math.max(dragStartX, dragEndX));
+ } else if (regionHeight >= 10 && dragDirection == Dygraph.VERTICAL){
+ self.doZoomY_(Math.min(dragStartY, dragEndY),
+ Math.max(dragStartY, dragEndY));
} else {
self.canvas_.getContext("2d").clearRect(0, 0,
self.canvas_.width,
if (isPanning) {
isPanning = false;
draggingDate = null;
+ draggingValue = null;
dateRange = null;
+ valueRange = null;
}
});
// Double-clicking zooms back out
- Dygraph.addEvent(this.hidden_, 'dblclick', function(event) {
- if (self.dateWindow_ == null) return;
- self.dateWindow_ = null;
- self.drawGraph_(self.rawData_);
- var minDate = self.rawData_[0][0];
- var maxDate = self.rawData_[self.rawData_.length - 1][0];
- if (self.attr_("zoomCallback")) {
- self.attr_("zoomCallback")(minDate, maxDate);
- }
+ Dygraph.addEvent(this.mouseEventElement_, 'dblclick', function(event) {
+ // Disable zooming out if panning.
+ if (event.altKey || event.shiftKey) return;
+
+ self.doUnzoom_();
});
};
* up any previous zoom rectangles that were drawn. This could be optimized to
* avoid extra redrawing, but it's tricky to avoid interactions with the status
* dots.
+ *
+ * @param {Number} direction the direction of the zoom rectangle. Acceptable
+ * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
* @param {Number} startX The X position where the drag started, in canvas
* coordinates.
* @param {Number} endX The current X position of the drag, in canvas coords.
+ * @param {Number} startY The Y position where the drag started, in canvas
+ * coordinates.
+ * @param {Number} endY The current Y position of the drag, in canvas coords.
+ * @param {Number} prevDirection the value of direction on the previous call to
+ * this function. Used to avoid excess redrawing
* @param {Number} prevEndX The value of endX on the previous call to this
* function. Used to avoid excess redrawing
+ * @param {Number} prevEndY The value of endY on the previous call to this
+ * function. Used to avoid excess redrawing
* @private
*/
-Dygraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
+Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY, endY,
+ prevDirection, prevEndX, prevEndY) {
var ctx = this.canvas_.getContext("2d");
// Clean up from the previous rect if necessary
- if (prevEndX) {
+ if (prevDirection == Dygraph.HORIZONTAL) {
ctx.clearRect(Math.min(startX, prevEndX), 0,
Math.abs(startX - prevEndX), this.height_);
+ } else if (prevDirection == Dygraph.VERTICAL){
+ ctx.clearRect(0, Math.min(startY, prevEndY),
+ this.width_, Math.abs(startY - prevEndY));
}
// Draw a light-grey rectangle to show the new viewing area
- if (endX && startX) {
- ctx.fillStyle = "rgba(128,128,128,0.33)";
- ctx.fillRect(Math.min(startX, endX), 0,
- Math.abs(endX - startX), this.height_);
+ if (direction == Dygraph.HORIZONTAL) {
+ if (endX && startX) {
+ ctx.fillStyle = "rgba(128,128,128,0.33)";
+ ctx.fillRect(Math.min(startX, endX), 0,
+ Math.abs(endX - startX), this.height_);
+ }
+ }
+ if (direction == Dygraph.VERTICAL) {
+ if (endY && startY) {
+ ctx.fillStyle = "rgba(128,128,128,0.33)";
+ ctx.fillRect(0, Math.min(startY, endY),
+ this.width_, Math.abs(endY - startY));
+ }
}
};
/**
- * Zoom to something containing [lowX, highX]. These are pixel coordinates
- * in the canvas. The exact zoom window may be slightly larger if there are no
- * data points near lowX or highX. This function redraws the graph.
+ * Zoom to something containing [lowX, highX]. These are pixel coordinates in
+ * the canvas. The exact zoom window may be slightly larger if there are no data
+ * points near lowX or highX. Don't confuse this function with doZoomXDates,
+ * which accepts dates that match the raw data. This function redraws the graph.
+ *
* @param {Number} lowX The leftmost pixel value that should be visible.
* @param {Number} highX The rightmost pixel value that should be visible.
* @private
*/
-Dygraph.prototype.doZoom_ = function(lowX, highX) {
+Dygraph.prototype.doZoomX_ = function(lowX, highX) {
// Find the earliest and latest dates contained in this canvasx range.
+ // Convert the call to date ranges of the raw data.
var r = this.toDataCoords(lowX, null);
var minDate = r[0];
r = this.toDataCoords(highX, null);
var maxDate = r[0];
+ this.doZoomXDates_(minDate, maxDate);
+};
+/**
+ * Zoom to something containing [minDate, maxDate] values. Don't confuse this
+ * method with doZoomX which accepts pixel coordinates. This function redraws
+ * the graph.
+ *
+ * @param {Number} minDate The minimum date that should be visible.
+ * @param {Number} maxDate The maximum date that should be visible.
+ * @private
+ */
+Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
this.dateWindow_ = [minDate, maxDate];
this.drawGraph_(this.rawData_);
if (this.attr_("zoomCallback")) {
- this.attr_("zoomCallback")(minDate, maxDate);
+ var yRange = this.yAxisRange();
+ this.attr_("zoomCallback")(minDate, maxDate, yRange[0], yRange[1]);
+ }
+};
+
+/**
+ * Zoom to something containing [lowY, highY]. These are pixel coordinates in
+ * the canvas. The exact zoom window may be slightly larger if there are no
+ * data points near lowY or highY. Don't confuse this function with
+ * doZoomYValues, which accepts parameters that match the raw data. This
+ * function redraws the graph.
+ *
+ * @param {Number} lowY The topmost pixel value that should be visible.
+ * @param {Number} highY The lowest pixel value that should be visible.
+ * @private
+ */
+Dygraph.prototype.doZoomY_ = function(lowY, highY) {
+ // Find the highest and lowest values in pixel range.
+ var r = this.toDataCoords(null, lowY);
+ var maxValue = r[1];
+ r = this.toDataCoords(null, highY);
+ var minValue = r[1];
+
+ this.doZoomYValues_(minValue, maxValue);
+};
+
+/**
+ * Zoom to something containing [minValue, maxValue] values. Don't confuse this
+ * method with doZoomY which accepts pixel coordinates. This function redraws
+ * the graph.
+ *
+ * @param {Number} minValue The minimum Value that should be visible.
+ * @param {Number} maxValue The maximum value that should be visible.
+ * @private
+ */
+Dygraph.prototype.doZoomYValues_ = function(minValue, maxValue) {
+ this.valueWindow_ = [minValue, maxValue];
+ this.drawGraph_(this.rawData_);
+ if (this.attr_("zoomCallback")) {
+ var xRange = this.xAxisRange();
+ this.attr_("zoomCallback")(xRange[0], xRange[1], minValue, maxValue);
+ }
+};
+
+/**
+ * Reset the zoom to the original view coordinates. This is the same as
+ * double-clicking on the graph.
+ *
+ * @private
+ */
+Dygraph.prototype.doUnzoom_ = function() {
+ var dirty = null;
+ if (this.dateWindow_ != null) {
+ dirty = 1;
+ this.dateWindow_ = null;
+ }
+ if (this.valueWindow_ != null) {
+ dirty = 1;
+ this.valueWindow_ = this.valueRange_;
+ }
+
+ if (dirty) {
+ // Putting the drawing operation before the callback because it resets
+ // yAxisRange.
+ this.drawGraph_(this.rawData_);
+ if (this.attr_("zoomCallback")) {
+ var minDate = this.rawData_[0][0];
+ var maxDate = this.rawData_[this.rawData_.length - 1][0];
+ var minValue = this.yAxisRange()[0];
+ var maxValue = this.yAxisRange()[1];
+ this.attr_("zoomCallback")(minDate, maxDate, minValue, maxValue);
+ }
}
};
* @private
*/
Dygraph.prototype.mouseMove_ = function(event) {
- var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.hidden_);
+ var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_);
var points = this.layout_.points;
var lastx = -1;
// Extract the points we've selected
this.selPoints_ = [];
- var cumulative_sum = 0; // used only if we have a stackedGraph.
var l = points.length;
- var isStacked = this.attr_("stackedGraph");
if (!this.attr_("stackedGraph")) {
for (var i = 0; i < l; i++) {
if (points[i].xval == lastx) {
}
}
} else {
- // Stacked points need to be examined in reverse order.
+ // Need to 'unstack' points starting from the bottom
+ var cumulative_sum = 0;
for (var i = l - 1; i >= 0; i--) {
if (points[i].xval == lastx) {
- // Clone the point, since we need to 'unstack' it below.
- var p = {};
+ var p = {}; // Clone the point since we modify it
for (var k in points[i]) {
p[k] = points[i][k];
}
this.selPoints_.push(p);
}
}
+ this.selPoints_.reverse();
}
if (this.attr_("highlightCallback")) {
*/
Dygraph.prototype.updateSelection_ = function() {
// Clear the previously drawn vertical, if there is one
- var circleSize = this.attr_('highlightCircleSize');
var ctx = this.canvas_.getContext("2d");
if (this.previousVerticalX_ >= 0) {
+ // Determine the maximum highlight circle size.
+ var maxCircleSize = 0;
+ var labels = this.attr_('labels');
+ for (var i = 1; i < labels.length; i++) {
+ var r = this.attr_('highlightCircleSize', labels[i]);
+ if (r > maxCircleSize) maxCircleSize = r;
+ }
var px = this.previousVerticalX_;
- ctx.clearRect(px - circleSize - 1, 0, 2 * circleSize + 2, this.height_);
+ ctx.clearRect(px - maxCircleSize - 1, 0,
+ 2 * maxCircleSize + 2, this.height_);
}
var isOK = function(x) { return x && !isNaN(x); };
if (this.attr_('showLabelsOnHighlight')) {
// Set the status message to indicate the selected point(s)
for (var i = 0; i < this.selPoints_.length; i++) {
+ if (!this.attr_("labelsShowZeroValues") && this.selPoints_[i].yval == 0) continue;
if (!isOK(this.selPoints_[i].canvasy)) continue;
if (this.attr_("labelsSeparateLines")) {
replace += "<br/>";
ctx.save();
for (var i = 0; i < this.selPoints_.length; i++) {
if (!isOK(this.selPoints_[i].canvasy)) continue;
+ var circleSize =
+ this.attr_('highlightCircleSize', this.selPoints_[i].name);
ctx.beginPath();
ctx.fillStyle = this.plotter_.colors[this.selPoints_[i].name];
ctx.arc(canvasx, this.selPoints_[i].canvasy, circleSize,
if (row !== false && row >= 0) {
for (var i in this.layout_.datasets) {
if (row < this.layout_.datasets[i].length) {
- this.selPoints_.push(this.layout_.points[pos+row]);
+ var point = this.layout_.points[pos+row];
+
+ if (this.attr_("stackedGraph")) {
+ point = this.layout_.unstackPointAtIndex(pos+row);
+ }
+
+ this.selPoints_.push(point);
}
pos += this.layout_.datasets[i].length;
}
this.setColors_();
this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
- var connectSeparatedPoints = this.attr_('connectSeparatedPoints');
+ // Loop over the fields (series). Go from the last to the first,
+ // because if they're stacked that's how we accumulate the values.
- // For stacked series.
- var cumulative_y = [];
- var stacked_datasets = [];
+ var cumulative_y = []; // For stacked series.
+ var datasets = [];
- // Loop over all fields in the dataset
- for (var i = 1; i < data[0].length; i++) {
+ // Loop over all fields and create datasets
+ for (var i = data[0].length - 1; i >= 1; i--) {
if (!this.visibility()[i - 1]) continue;
+ var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
+
var series = [];
for (var j = 0; j < data.length; j++) {
if (data[j][i] != null || !connectSeparatedPoints) {
if (maxY === null || thisMaxY > maxY) maxY = thisMaxY;
if (bars) {
- var vals = [];
- for (var j=0; j<series.length; j++)
- vals[j] = [series[j][0],
- series[j][1][0], series[j][1][1], series[j][1][2]];
- this.layout_.addDataset(this.attr_("labels")[i], vals);
+ for (var j=0; j<series.length; j++) {
+ val = [series[j][0], series[j][1][0], series[j][1][1], series[j][1][2]];
+ series[j] = val;
+ }
} else if (this.attr_("stackedGraph")) {
- var vals = [];
var l = series.length;
var actual_y;
for (var j = 0; j < l; j++) {
- if (cumulative_y[series[j][0]] === undefined)
- cumulative_y[series[j][0]] = 0;
+ // If one data set has a NaN, let all subsequent stacked
+ // sets inherit the NaN -- only start at 0 for the first set.
+ var x = series[j][0];
+ if (cumulative_y[x] === undefined)
+ cumulative_y[x] = 0;
actual_y = series[j][1];
- cumulative_y[series[j][0]] += actual_y;
+ cumulative_y[x] += actual_y;
- vals[j] = [series[j][0], cumulative_y[series[j][0]]]
+ series[j] = [x, cumulative_y[x]]
- if (!maxY || cumulative_y[series[j][0]] > maxY)
- maxY = cumulative_y[series[j][0]];
+ if (!maxY || cumulative_y[x] > maxY)
+ maxY = cumulative_y[x];
}
- stacked_datasets.push([this.attr_("labels")[i], vals]);
- //this.layout_.addDataset(this.attr_("labels")[i], vals);
- } else {
- this.layout_.addDataset(this.attr_("labels")[i], series);
}
+
+ datasets[i] = series;
}
- if (stacked_datasets.length > 0) {
- for (var i = (stacked_datasets.length - 1); i >= 0; i--) {
- this.layout_.addDataset(stacked_datasets[i][0], stacked_datasets[i][1]);
- }
+ for (var i = 1; i < datasets.length; i++) {
+ if (!this.visibility()[i - 1]) continue;
+ this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
}
// Use some heuristics to come up with a good maxY value, unless it's been
- // set explicitly by the user.
- if (this.valueRange_ != null) {
- this.addYTicks_(this.valueRange_[0], this.valueRange_[1]);
- this.displayedYRange_ = this.valueRange_;
+ // set explicitly by the developer or end-user (via drag)
+ if (this.valueWindow_ != null) {
+ this.addYTicks_(this.valueWindow_[0], this.valueWindow_[1]);
+ this.displayedYRange_ = this.valueWindow_;
} else {
// This affects the calculation of span, below.
if (this.attr_("includeZero") && minY > 0) {
this.attrs_.labels = lines[0].split(delim);
}
+ // Parse the x as a float or return null if it's not a number.
+ var parseFloatOrNull = function(x) {
+ var val = parseFloat(x);
+ return isNaN(val) ? null : val;
+ };
+
var xParser;
var defaultParserSet = false; // attempt to auto-detect x value type
var expectedCols = this.attr_("labels").length;
for (var j = 1; j < inFields.length; j++) {
// TODO(danvk): figure out an appropriate way to flag parse errors.
var vals = inFields[j].split("/");
- fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
+ fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
}
} else if (this.attr_("errorBars")) {
// If there are error bars, values are (value, stddev) pairs
for (var j = 1; j < inFields.length; j += 2)
- fields[(j + 1) / 2] = [parseFloat(inFields[j]),
- parseFloat(inFields[j + 1])];
+ fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
+ parseFloatOrNull(inFields[j + 1])];
} else if (this.attr_("customBars")) {
// Bars are a low;center;high tuple
for (var j = 1; j < inFields.length; j++) {
var vals = inFields[j].split(";");
- fields[j] = [ parseFloat(vals[0]),
- parseFloat(vals[1]),
- parseFloat(vals[2]) ];
+ fields[j] = [ parseFloatOrNull(vals[0]),
+ parseFloatOrNull(vals[1]),
+ parseFloatOrNull(vals[2]) ];
}
} else {
// Values are just numbers
for (var j = 1; j < inFields.length; j++) {
- fields[j] = parseFloat(inFields[j]);
+ fields[j] = parseFloatOrNull(inFields[j]);
}
}
if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
var parsedData = Dygraph.clone(data);
for (var i = 0; i < data.length; i++) {
if (parsedData[i].length == 0) {
- this.error("Row " << (1 + i) << " of data is empty");
+ this.error("Row " + (1 + i) + " of data is empty");
return null;
}
if (parsedData[i][0] == null
* The data is expected to have a first column that is either a date or a
* number. All subsequent columns must be numbers. If there is a clear mismatch
* between this.xValueParser_ and the type of the first column, it will be
- * fixed. Returned value is in the same format as return value of parseCSV_.
+ * fixed. Fills out rawData_.
* @param {Array.<Object>} data See above.
* @private
*/
var cols = data.getNumberOfColumns();
var rows = data.getNumberOfRows();
- // Read column labels
- var labels = [];
- for (var i = 0; i < cols; i++) {
- labels.push(data.getColumnLabel(i));
- if (i != 0 && this.attr_("errorBars")) i += 1;
- }
- this.attrs_.labels = labels;
- cols = labels.length;
-
var indepType = data.getColumnType(0);
if (indepType == 'date' || indepType == 'datetime') {
this.attrs_.xValueFormatter = Dygraph.dateString_;
return null;
}
+ // Array of the column indices which contain data (and not annotations).
+ var colIdx = [];
+ var annotationCols = {}; // data index -> [annotation cols]
+ var hasAnnotations = false;
+ for (var i = 1; i < cols; i++) {
+ var type = data.getColumnType(i);
+ if (type == 'number') {
+ colIdx.push(i);
+ } else if (type == 'string' && this.attr_('displayAnnotations')) {
+ // This is OK -- it's an annotation column.
+ var dataIdx = colIdx[colIdx.length - 1];
+ if (!annotationCols.hasOwnProperty(dataIdx)) {
+ annotationCols[dataIdx] = [i];
+ } else {
+ annotationCols[dataIdx].push(i);
+ }
+ hasAnnotations = true;
+ } else {
+ this.error("Only 'number' is supported as a dependent type with Gviz." +
+ " 'string' is only supported if displayAnnotations is true");
+ }
+ }
+
+ // Read column labels
+ // TODO(danvk): add support back for errorBars
+ var labels = [data.getColumnLabel(0)];
+ for (var i = 0; i < colIdx.length; i++) {
+ labels.push(data.getColumnLabel(colIdx[i]));
+ if (this.attr_("errorBars")) i += 1;
+ }
+ this.attrs_.labels = labels;
+ cols = labels.length;
+
var ret = [];
var outOfOrder = false;
+ var annotations = [];
for (var i = 0; i < rows; i++) {
var row = [];
if (typeof(data.getValue(i, 0)) === 'undefined' ||
data.getValue(i, 0) === null) {
- this.warning("Ignoring row " + i +
- " of DataTable because of undefined or null first column.");
+ this.warn("Ignoring row " + i +
+ " of DataTable because of undefined or null first column.");
continue;
}
row.push(data.getValue(i, 0));
}
if (!this.attr_("errorBars")) {
- for (var j = 1; j < cols; j++) {
- row.push(data.getValue(i, j));
+ for (var j = 0; j < colIdx.length; j++) {
+ var col = colIdx[j];
+ row.push(data.getValue(i, col));
+ if (hasAnnotations &&
+ annotationCols.hasOwnProperty(col) &&
+ data.getValue(i, annotationCols[col][0]) != null) {
+ var ann = {};
+ ann.series = data.getColumnLabel(col);
+ ann.xval = row[0];
+ ann.shortText = String.fromCharCode(65 /* A */ + annotations.length)
+ ann.text = '';
+ for (var k = 0; k < annotationCols[col].length; k++) {
+ if (k) ann.text += "\n";
+ ann.text += data.getValue(i, annotationCols[col][k]);
+ }
+ annotations.push(ann);
+ }
}
} else {
for (var j = 0; j < cols - 1; j++) {
this.warn("DataTable is out of order; order it correctly to speed loading.");
ret.sort(function(a,b) { return a[0] - b[0] });
}
- return ret;
+ this.rawData_ = ret;
+
+ if (annotations.length > 0) {
+ this.setAnnotations(annotations, true);
+ }
}
// These functions are all based on MochiKit.
} else if (typeof this.file_ == 'object' &&
typeof this.file_.getColumnRange == 'function') {
// must be a DataTable from gviz.
- this.rawData_ = this.parseDataTable_(this.file_);
+ this.parseDataTable_(this.file_);
this.drawGraph_(this.rawData_);
} else if (typeof this.file_ == 'string') {
// Heuristic: a newline means it's CSV data. Otherwise it's an URL.
*/
Dygraph.prototype.updateOptions = function(attrs) {
// TODO(danvk): this is a mess. Rethink this function.
- if (attrs.rollPeriod) {
+ if ('rollPeriod' in attrs) {
this.rollPeriod_ = attrs.rollPeriod;
}
- if (attrs.dateWindow) {
+ if ('dateWindow' in attrs) {
this.dateWindow_ = attrs.dateWindow;
}
- if (attrs.valueRange) {
+ if ('valueRange' in attrs) {
this.valueRange_ = attrs.valueRange;
+ this.valueWindow_ = attrs.valueRange;
}
+
+ // TODO(danvk): validate per-series options.
+ // Supported:
+ // strokeWidth
+ // pointSize
+ // drawPoints
+ // highlightCircleSize
+
Dygraph.update(this.user_attrs_, attrs);
+ Dygraph.update(this.renderOptions_, attrs);
this.labelsFromCSV_ = (this.attr_("labels") == null);
};
/**
+ * Update the list of annotations and redraw the chart.
+ */
+Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
+ this.annotations_ = ann;
+ this.layout_.setAnnotations(this.annotations_);
+ if (!suppressDraw) {
+ this.drawGraph_(this.rawData_);
+ }
+};
+
+/**
+ * Return the list of annotations.
+ */
+Dygraph.prototype.annotations = function() {
+ return this.annotations_;
+};
+
+/**
+ * Get the index of a series (column) given its name. The first column is the
+ * x-axis, so the data series start with index 1.
+ */
+Dygraph.prototype.indexFromSetName = function(name) {
+ var labels = this.attr_("labels");
+ for (var i = 0; i < labels.length; i++) {
+ if (labels[i] == name) return i;
+ }
+ return null;
+};
+
+Dygraph.addAnnotationRule = function() {
+ if (Dygraph.addedAnnotationCSS) return;
+
+ var mysheet;
+ if (document.styleSheets.length > 0) {
+ mysheet = document.styleSheets[0];
+ } else {
+ var styleSheetElement = document.createElement("style");
+ styleSheetElement.type = "text/css";
+ document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
+ for(i = 0; i < document.styleSheets.length; i++) {
+ if (document.styleSheets[i].disabled) continue;
+ mysheet = document.styleSheets[i];
+ }
+ }
+
+ var rule = "border: 1px solid black; " +
+ "background-color: white; " +
+ "text-align: center;";
+ if (mysheet.insertRule) { // Firefox
+ mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", 0);
+ } else if (mysheet.addRule) { // IE
+ mysheet.addRule(".dygraphDefaultAnnotation", rule);
+ }
+
+ Dygraph.addedAnnotationCSS = true;
+}
+
+/**
* Create a new canvas element. This is more complex than a simple
* document.createElement("canvas") because of IE and excanvas.
*/