X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=4adb7164760aca3d0a0d540d4e6cfb9572c21f74;hb=e99fde0585bfc07ff26c9dc3a5ca30ea339cc81f;hp=dc4ff2bb96855de4e867a37167b425da9f797dbf;hpb=61b78cd6890c539c2931ce94f2b6cac320b2d8c9;p=dygraphs.git
diff --git a/dygraph.js b/dygraph.js
index dc4ff2b..4adb716 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -90,6 +90,7 @@ Dygraph.DEFAULT_ATTRS = {
// TODO(danvk): move defaults from createStatusMessage_ here.
},
labelsSeparateLines: false,
+ labelsShowZeroValues: true,
labelsKMB: false,
labelsKMG2: false,
showLabelsOnHighlight: true,
@@ -123,7 +124,9 @@ Dygraph.DEFAULT_ATTRS = {
connectSeparatedPoints: false,
stackedGraph: false,
- hideOverlayOnMouseOut: true
+ hideOverlayOnMouseOut: true,
+
+ stepPlot: false
};
// Various logging levels.
@@ -132,6 +135,9 @@ Dygraph.INFO = 2;
Dygraph.WARNING = 3;
Dygraph.ERROR = 3;
+// 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,
@@ -168,6 +174,7 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
this.valueRange_ = attrs.valueRange || null;
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.
@@ -186,11 +193,17 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
// The div might have been specified as percent of the current window size,
// convert that to an appropriate number of pixels.
if (div.style.width.indexOf("%") == div.style.width.length - 1) {
- // Minus ten pixels keeps scrollbars from showing up for a 100% width div.
- this.width_ = (this.width_ * self.innerWidth / 100) - 10;
+ this.width_ = div.offsetWidth;
}
if (div.style.height.indexOf("%") == div.style.height.length - 1) {
- this.height_ = (this.height_ * self.innerHeight / 100) - 10;
+ this.height_ = div.offsetHeight;
+ }
+
+ if (this.width_ == 0) {
+ this.error("dygraph has zero width. Please specify a width in pixels.");
+ }
+ if (this.height_ == 0) {
+ this.error("dygraph has zero height. Please specify a height in pixels.");
}
// TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
@@ -219,6 +232,8 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
// 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_();
@@ -337,6 +352,32 @@ Dygraph.prototype.toDataCoords = function(x, y) {
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;
@@ -387,20 +428,24 @@ Dygraph.prototype.createInterface_ = function() {
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);
});
@@ -476,7 +521,6 @@ Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
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;
};
@@ -601,7 +645,12 @@ Dygraph.findPosY = function(obj) {
* 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 = {
@@ -704,10 +753,10 @@ Dygraph.prototype.createDragInterface_ = function() {
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);
@@ -729,7 +778,7 @@ Dygraph.prototype.createDragInterface_ = function() {
});
// 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);
@@ -763,7 +812,7 @@ Dygraph.prototype.createDragInterface_ = function() {
});
// 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;
@@ -772,7 +821,7 @@ Dygraph.prototype.createDragInterface_ = function() {
// 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);
@@ -781,10 +830,31 @@ Dygraph.prototype.createDragInterface_ = function() {
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) {
@@ -808,7 +878,7 @@ Dygraph.prototype.createDragInterface_ = function() {
});
// Double-clicking zooms back out
- Dygraph.addEvent(this.hidden_, 'dblclick', function(event) {
+ Dygraph.addEvent(this.mouseEventElement_, 'dblclick', function(event) {
if (self.dateWindow_ == null) return;
self.dateWindow_ = null;
self.drawGraph_(self.rawData_);
@@ -879,7 +949,7 @@ Dygraph.prototype.doZoom_ = function(lowX, highX) {
* @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;
@@ -902,9 +972,7 @@ Dygraph.prototype.mouseMove_ = function(event) {
// 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) {
@@ -912,11 +980,11 @@ Dygraph.prototype.mouseMove_ = function(event) {
}
}
} 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];
}
@@ -925,6 +993,7 @@ Dygraph.prototype.mouseMove_ = function(event) {
this.selPoints_.push(p);
}
}
+ this.selPoints_.reverse();
}
if (this.attr_("highlightCallback")) {
@@ -968,6 +1037,7 @@ Dygraph.prototype.updateSelection_ = function() {
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 += " ";
@@ -1513,17 +1583,19 @@ Dygraph.prototype.drawGraph_ = function(data) {
var connectSeparatedPoints = this.attr_('connectSeparatedPoints');
- // For stacked series.
- var cumulative_y = [];
- var stacked_datasets = [];
+ // Loop over the fields (series). Go from the last to the first,
+ // because if they're stacked that's how we accumulate the values.
- // Loop over all fields in the dataset
- for (var i = 1; i < data[0].length; i++) {
+ var cumulative_y = []; // For stacked series.
+ var datasets = [];
+
+ // Loop over all fields and create datasets
+ for (var i = data[0].length - 1; i >= 1; i--) {
if (!this.visibility()[i - 1]) continue;
var series = [];
for (var j = 0; j < data.length; j++) {
- if (data[j][i] || !connectSeparatedPoints) {
+ if (data[j][i] != null || !connectSeparatedPoints) {
var date = data[j][0];
series.push([date, data[j][i]]);
}
@@ -1569,38 +1641,36 @@ Dygraph.prototype.drawGraph_ = function(data) {
if (maxY === null || thisMaxY > maxY) maxY = thisMaxY;
if (bars) {
- var vals = [];
- for (var j=0; j 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
@@ -1881,6 +1951,12 @@ Dygraph.prototype.parseCSV_ = function(data) {
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;
@@ -1905,25 +1981,25 @@ Dygraph.prototype.parseCSV_ = function(data) {
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]) {
@@ -1983,7 +2059,7 @@ Dygraph.prototype.parseArray_ = function(data) {
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
@@ -2008,7 +2084,7 @@ Dygraph.prototype.parseArray_ = function(data) {
* 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.