Tooltip data interpolation
If I've got a sparse dataset (e.g. to save space, duplicate data points are omitted), a line graph still represents the data accurately, however the tooltip only appears over the actual data points.
Would it be possible for the tooltip to interpolate the data at the mouse pointer's position so as to show a value whether there's an actual data point there or not?
Here’s a little hack to display an invisible, interpolated series above the data series: http://jsfiddle.net/highcharts/F4e2Y/
See alto the associated GitHub issue: https://github.com/highcharts/highcharts/issues/647
-
keerthi commented
if we have huge data and multiple series this hack would crash the application so do you have any inbuilt feature in highcharts that would do this interpolation .
-
Thanks Martin!
-
Martin Thillerup commented
Hi Torstein,
This was exactly what I was looking for. Had to make sure that stepped lines didn't get interpolated but other than that I could pretty much just copy the example.
One last issue is that the interpolation values snaps to nearest value, so for a long time period without values you won't get any updated values in the tooltip. I am considering making a single transparent serie with evenly spaced values that will trigger the interpolation.
I made a short video to demonstrate how big a difference the interpolated values makes in our use case when reading values of the chart: https://youtu.be/VFJB3_XmqYs
-
Hi Martin,
My coworker added a different approach, that uses the tooltip.formatter to look for nearby points. It would probably work better for your case. See oysteinmoseng's comment on https://github.com/highcharts/highcharts/issues/647.
-
Martin Thillerup commented
Hi Torstein,
This is something I would really like, so great news that you are revieweing this idea :)
I have tried you hack, but for more complex datasets it does not work: http://jsfiddle.net/h0yLfL1u/
Between 2-4 I don't get proper values.I am using Highcharts to show values from a process control historian. Because of the applied compression the data points are very unevenly spaced, e.g. one data point could log every 2-5 seconds and another could log every 3-8 minutes, and certainly not at the same times. The time period displayed on the chart ranges from minutes to days, so I would propably adjust the resolution dynamically to something like an interpolated value per pixel, for best performance.
I think that with a better interpolation calculation the hack could work, but a native feature is preferred :)
An idea, but I don't know what is possible: If it is possible to get the data series values before and after the position of the crosshair you could do the interpolation in the tooltip instead of adding interpolated data series to the chart.
-
Hi Peter,
Currently we don't have plans to do this internally. Is there any specific reason you don't want to do it like in the demo below? -
Peter Suhr commented
Hi Thorstein. We are really interested in getting interpolated data 'out of the box'. Will this be supported in the future ? Is there any plans ? BR Peter
-
Alex Potsides commented
Thanks Torstein. The example you posted certainly achieves the desired effect but rather defeats the purpose of having a sparse data set.
-
It's not currently supported out of the box, but one way to do it would be to write your own interpolation function and add an interpolated line. I set up a demo here: http://jsfiddle.net/highcharts/F4e2Y/