X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=4fb7208f88495c08292cef3198cef3861fb655cb;hb=8e48eef771ca7e1f4091845e6c690ad309c46fd8;hp=954d067b919f984ae3741e914a29fc24f820a510;hpb=2aa21213e0c8f56985595ebd106dad77583a6b4e;p=dygraphs.git
diff --git a/dygraph.js b/dygraph.js
index 954d067..4fb7208 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,
@@ -102,6 +103,7 @@ Dygraph.DEFAULT_ATTRS = {
axisLabelFontSize: 14,
xAxisLabelWidth: 50,
yAxisLabelWidth: 50,
+ xAxisLabelFormatter: Dygraph.dateAxisFormatter,
rightGap: 5,
showRoller: false,
@@ -122,7 +124,9 @@ Dygraph.DEFAULT_ATTRS = {
connectSeparatedPoints: false,
stackedGraph: false,
- hideOverlayOnMouseOut: true
+ hideOverlayOnMouseOut: true,
+
+ stepPlot: false
};
// Various logging levels.
@@ -131,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,
@@ -164,9 +171,9 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
this.previousVerticalX_ = -1;
this.fractions_ = attrs.fractions || false;
this.dateWindow_ = attrs.dateWindow || null;
- 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.
@@ -185,11 +192,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_.
@@ -218,14 +231,21 @@ 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_();
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];
@@ -336,6 +356,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;
@@ -386,20 +432,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);
});
@@ -475,7 +525,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;
};
@@ -600,7 +649,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 = {
@@ -703,10 +757,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);
@@ -728,7 +782,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);
@@ -762,7 +816,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;
@@ -771,7 +825,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);
@@ -780,10 +834,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) {
@@ -807,7 +882,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_);
@@ -878,7 +953,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;
@@ -901,17 +976,19 @@ 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");
- for (var i = l - 1; i >= 0; i--) {
- if (points[i].xval == lastx) {
- if (!isStacked) {
- this.selPoints_.unshift(points[i]);
- } else {
- // Clone the point, since we need to 'unstack' it below. Stacked points
- // are in reverse order.
- var p = {};
+ if (!this.attr_("stackedGraph")) {
+ for (var i = 0; i < l; i++) {
+ if (points[i].xval == lastx) {
+ this.selPoints_.push(points[i]);
+ }
+ }
+ } else {
+ // 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) {
+ var p = {}; // Clone the point since we modify it
for (var k in points[i]) {
p[k] = points[i][k];
}
@@ -920,13 +997,13 @@ Dygraph.prototype.mouseMove_ = function(event) {
this.selPoints_.push(p);
}
}
+ this.selPoints_.reverse();
}
if (this.attr_("highlightCallback")) {
- var px = this.lastHighlightCallbackX;
+ var px = this.lastx_;
if (px !== null && lastx != px) {
// only fire if the selected point has changed.
- this.lastHighlightCallbackX = lastx;
this.attr_("highlightCallback")(event, lastx, this.selPoints_);
}
}
@@ -944,11 +1021,18 @@ Dygraph.prototype.mouseMove_ = function(event) {
*/
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); };
@@ -964,6 +1048,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 += "
";
@@ -983,6 +1068,8 @@ Dygraph.prototype.updateSelection_ = function() {
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,
@@ -1035,6 +1122,10 @@ Dygraph.prototype.setSelection = function(row) {
* @private
*/
Dygraph.prototype.mouseOut_ = function(event) {
+ if (this.attr_("unhighlightCallback")) {
+ this.attr_("unhighlightCallback")(event);
+ }
+
if (this.attr_("hideOverlayOnMouseOut")) {
this.clearSelection();
}
@@ -1081,7 +1172,7 @@ Dygraph.zeropad = function(x) {
* @return {String} A time of the form "HH:MM:SS"
* @private
*/
-Dygraph.prototype.hmsString_ = function(date) {
+Dygraph.hmsString_ = function(date) {
var zeropad = Dygraph.zeropad;
var d = new Date(date);
if (d.getSeconds()) {
@@ -1094,11 +1185,31 @@ Dygraph.prototype.hmsString_ = function(date) {
}
/**
+ * Convert a JS date to a string appropriate to display on an axis that
+ * is displaying values at the stated granularity.
+ * @param {Date} date The date to format
+ * @param {Number} granularity One of the Dygraph granularity constants
+ * @return {String} The formatted date
+ * @private
+ */
+Dygraph.dateAxisFormatter = function(date, granularity) {
+ if (granularity >= Dygraph.MONTHLY) {
+ return date.strftime('%b %y');
+ } else {
+ var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
+ if (frac == 0 || granularity >= Dygraph.DAILY) {
+ return new Date(date.getTime() + 3600*1000).strftime('%d%b');
+ } else {
+ return Dygraph.hmsString_(date.getTime());
+ }
+ }
+}
+
+/**
* Convert a JS date (millis since epoch) to YYYY/MM/DD
* @param {Number} date The JavaScript date (ms since epoch)
* @return {String} A date of the form "YYYY/MM/DD"
* @private
- * TODO(danvk): why is this part of the prototype?
*/
Dygraph.dateString_ = function(date, self) {
var zeropad = Dygraph.zeropad;
@@ -1113,7 +1224,7 @@ Dygraph.dateString_ = function(date, self) {
var ret = "";
var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
- if (frac) ret = " " + self.hmsString_(date);
+ if (frac) ret = " " + Dygraph.hmsString_(date);
return year + "/" + month + "/" + day + ret;
};
@@ -1235,6 +1346,7 @@ Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
// Returns an array containing {v: millis, label: label} dictionaries.
//
Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
+ var formatter = this.attr_("xAxisLabelFormatter");
var ticks = [];
if (granularity < Dygraph.MONTHLY) {
// Generate one tick mark for every fixed interval of time.
@@ -1271,14 +1383,7 @@ Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
start_time = d.getTime();
for (var t = start_time; t <= end_time; t += spacing) {
- var d = new Date(t);
- var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
- if (frac == 0 || granularity >= Dygraph.DAILY) {
- // the extra hour covers DST problems.
- ticks.push({ v:t, label: new Date(t + 3600*1000).strftime(format) });
- } else {
- ticks.push({ v:t, label: this.hmsString_(t) });
- }
+ ticks.push({ v:t, label: formatter(new Date(t), granularity) });
}
} else {
// Display a tick mark on the first of a set of months of each year.
@@ -1309,7 +1414,7 @@ Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
var t = Date.parse(date_str);
if (t < start_time || t > end_time) continue;
- ticks.push({ v:t, label: new Date(t).strftime('%b %y') });
+ ticks.push({ v:t, label: formatter(new Date(t), granularity) });
}
}
}
@@ -1349,22 +1454,25 @@ Dygraph.dateTicker = function(startDate, endDate, self) {
* @return {Array.