search

epochjs / epoch

A general purpose, real-time visualization library.
http://epochjs.github.io/epoch
MIT License
4.97k stars 278 forks source link

Hovering on Real-time Charts #149

Closed woozyking closed 9 years ago

woozyking commented 9 years ago

This is related to #63

jamesarosen commented 9 years ago

Can you elaborate?

woozyking commented 9 years ago

Hover info on real-time charts. For showing data points exact XY values.

rsandor commented 9 years ago

@woozyking - Are you expecting the real-time charts to remain static more often than not? Many users have the charts continuously running and it would be very hard to keep the mouse over an individual point for long.

woozyking commented 9 years ago

@rsandor for example something like this http://c3js.org/samples/api_flow.html

it can be an option that in between the updates (while the graph is relatively static), hover would trigger a stats label.

but I totally see your point, as I have various use cases which include update with an interval below 1 second. let this be a suggestion, and only when it's not impacting performance negatively.

rsandor commented 9 years ago

@woozyking for sure, I'll keep it rolling around my head and see if I can come up with a good approach.

woozyking commented 9 years ago

@rsandor after educating myself further with web data visualizations techniques, I have realized that this is quite difficult due to the use of Canvas for the real-time charts. But not impossible - https://square.github.io/cubism/ would be a far better example (than c3.js), which uses some spans on top of the Canvas element to reveal the values mouse hover over. Hope this could help :)

rsandor commented 9 years ago

@woozyking - It's not so much about it being hard because of canvas, but more that by design I have tried to make real-time charts as "continuous" as possible. This means that given an event duration of 1s for new data to reach the chart, we attempt to make the tween (or movement frames) take exactly 1s to transition to the next data point. The result is that the charts are in constant motion, making interactivity very hard.

If the charts were paused in some way or something like that it would be a completely different story. But this seems like am implementation detail for the specific application of the charting.

woozyking commented 9 years ago

Makes sense. I agree that the real-time chart by design should be used as a pure "visual" tool to see the trend in motion, instead of figuring out exact values at certain points.

I also realized that the example of Cubism isn't exactly the same, as its use case and design, as Epoch.

I think this one can be closed now.