https://github.com/tomhumphries/dygraphsfixedcrosshairs
A modification of the original dygraphs crosshairs plugin that selects points on 'click', rather than on 'mousemove'
https://github.com/tomhumphries/dygraphsfixedcrosshairs
crosshairs dygraphs plugin
Last synced: 3 months ago
JSON representation
A modification of the original dygraphs crosshairs plugin that selects points on 'click', rather than on 'mousemove'
- Host: GitHub
- URL: https://github.com/tomhumphries/dygraphsfixedcrosshairs
- Owner: TomHumphries
- Created: 2020-04-09T13:14:33.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-09T13:29:07.000Z (about 6 years ago)
- Last Synced: 2024-12-31T19:40:30.654Z (over 1 year ago)
- Topics: crosshairs, dygraphs, plugin
- Language: JavaScript
- Size: 1.95 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dygraphs "FixedCrosshairs" Plugin
This is a plugin for [dygraphs](http://dygraphs.com/) that places crosshairs when the chart is clicked.
It is a modification to the [original crosshairs plugin](https://github.com/danvk/dygraphs/blob/master/src/extras/crosshair.js) that updated the crosshair location when the cursor was moved over the chart.
## Usage
Import the file and use it like any other. It takes the same constructor as the original crosshairs Plugin.
```
plugins: [
new Dygraph.Plugins.FixedCrosshair({
direction: "both"
})
]
```
## About
The modification itself is small: in the `activate()` call we remove the `'mousemove'` event and replace it with a `'click'` event. The stops points being selected when the cursor is moved over the chart. We also remove the ```'mouseout'``` event stop the crosshairs being removed when the cursor is moved off the chart.
```
crosshair.prototype.activate = function(g) {
this.dygraph_ = g;
g.graphDiv.appendChild(this.canvas_);
removeEvent(window, 'mouseout', this.dygraph_.mouseOutHandler_)
removeEvent(this.dygraph_.mouseEventElement_, 'mousemove', this.dygraph_.mouseMoveHandler_)
this.dygraph_.addAndTrackEvent(this.dygraph_.mouseEventElement_, 'click', this.dygraph_.mouseMoveHandler_);
return {
select: this.select,
deselect: this.deselect
};
};
function removeEvent(elem, type, fn) {
elem.removeEventListener(type, fn, false);
}
```