Chart.js: Line chart Range Selection

Created on 17 Feb 2016 · 14Comments · Source: chartjs/Chart.js

Currently we are using rickshaw and I built a custom range selector with tooltip. Is this possible to do with your library. I looked over the docs but didn't see anything and also looked on google and didn't see anything. This seems like a very nice thing to have..

enhancement

Source

niemyjski

👍5

Most helpful comment

@etimberg yes, but we don't want zoom for us, we want actual selection so we can hit the backend and get fine grained data points for that selection as well as get data for other charts.

niemyjski on 21 Nov 2016

👍9 🎉1

All 14 comments

I think this might be possible to build in v2. You could change the axis min/max limits with your selector. Drawing is not clipped yet though, so this would need to be implemented

etimberg on 18 Feb 2016

What we do in our app is we have a callback that gets called when the selection changed and then I trigger a call to our api to get the updated data range..

https://github.com/exceptionless/Exceptionless.UI/tree/master/src/components/rickshaw

I'd rather have this then zoom functionality (which sounds like what you are talking about). Please correct me if I'm wrong.

niemyjski on 18 Feb 2016

I was referring to zoom functionality. In v2 you can change the data and call update() and the chart will update. Is this more what you're looking for?

etimberg on 19 Feb 2016

Don't know if this is the same, but I tried to implement also a range selection like in the image below

So that I can select a range and then update the chart's data to show the specific range. But Chart.js does lack some functionality to add this. I need to know the tick value on mousedown and mouseup and the chart boundaries to draw the rect. Is there a better solution to solve this?

mathiask88 on 27 Feb 2016

👍3

Yeah, that's what you'd need to do this. @nnnick Could we add this to a release?

niemyjski on 23 Mar 2016

Wrote an initial zoom plugin: https://github.com/chartjs/Chart.Zoom.js
Does not have range selection, but it could be added

etimberg on 4 May 2016

@mathiask88 as part of that I added functionality to go from pixel to scale value. getValueForPixel(pixel) will do the trick

etimberg on 4 May 2016

The zoom plugin has selection that behaves like this.

etimberg on 20 Nov 2016

@etimberg yes, but we don't want zoom for us, we want actual selection so we can hit the backend and get fine grained data points for that selection as well as get data for other charts.

niemyjski on 21 Nov 2016

👍9 🎉1

@niemyjski Did you find a solution to this? I'm currently scratching my head to find out how to do this with any type of Chart library, let alone ChartJS