return [left, right];
};
+/**
+ * Returns the currently-visible y-range. This can be affected by zooming,
+ * panning or a call to updateOptions.
+ * Returns a two-element array: [bottom, top].
+ */
+Dygraph.prototype.yAxisRange = function() {
+ return this.displayedYRange_;
+};
+
+/**
+ * Convert from data coordinates to canvas/div X/Y coordinates.
+ * Returns a two-element array: [X, Y]
+ */
+Dygraph.prototype.toDomCoords = function(x, y) {
+ var ret = [null, null];
+ var area = this.plotter_.area;
+ if (x !== null) {
+ var xRange = this.xAxisRange();
+ ret[0] = area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
+ }
+
+ if (y !== null) {
+ var yRange = this.yAxisRange();
+ ret[1] = area.y + (yRange[0] - y) / (yRange[1] - yRange[0]) * area.h;
+ }
+
+ return ret;
+};
+
+/**
+ * Convert from canvas/div coords to data coordinates.
+ * Returns a two-element array: [X, Y]
+ */
+Dygraph.prototype.toDataCoords = function(x, y) {
+ var ret = [null, null];
+ var area = this.plotter_.area;
+ if (x !== null) {
+ var xRange = this.xAxisRange();
+ ret[0] = xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
+ }
+
+ if (y !== null) {
+ var yRange = this.yAxisRange();
+ ret[1] = yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]);
+ }
+
+ return ret;
+};
+
Dygraph.addEvent = function(el, evt, fn) {
var normed_fn = function(e) {
if (!e) var e = window.event;
// set explicitly by the user.
if (this.valueRange_ != null) {
this.addYTicks_(this.valueRange_[0], this.valueRange_[1]);
+ this.displayedYRange_ = this.valueRange_;
} else {
// This affects the calculation of span, below.
if (this.attr_("includeZero") && minY > 0) {
}
this.addYTicks_(minAxisY, maxAxisY);
+ this.displayedYRange_ = [minAxisY, maxAxisY];
}
this.addXTicks_();
<script type="text/javascript" src="../dygraph-canvas.js"></script>
<script type="text/javascript" src="../dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
+ <style type="text/css">
+ #div_g {
+ position: absolute;
+ left: 200px;
+ top: 100px;
+ }
+ #status {
+ position: absolute;
+ top: 400px;
+ }
+ </style>
</head>
<body>
<p>Hover, click and zoom to test the callbacks:</p>
<script type="text/javascript">
s = document.getElementById("status");
- pts_info = function(x, pts) {
+ g = null;
+ pts_info = function(e, x, pts) {
var str = "(" + x + ") ";
for (var i = 0; i < pts.length; i++) {
var p = pts[i];
if (i) str += ", ";
- str += p.name + ": " + p.xval + ", " + p.yval;
+ str += p.name + ": " + p.yval;
}
+
+ var x = e.offsetX;
+ var y = e.offsetY;
+ var dataXY = g.toDataCoords(x, y);
+ str += ", (" + x + ", " + y + ")";
+ str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
+
return str;
};
highlightCallback: function(e, x, pts) {
if (document.getElementById('highlight').checked) {
- s.innerHTML += "<b>Highlight</b> " + pts_info(x,pts) + "<br/>";
+ s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts) + "<br/>";
}
},
clickCallback: function(e, x, pts) {
- s.innerHTML += "<b>Click</b> " + pts_info(x,pts) + "<br/>";
+ s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
},
zoomCallback: function(minX, maxX) {
projects / dygraphs.git / commitdiff