search

joewalnes / smoothie

Smoothie Charts: smooooooth JavaScript charts for realtime streaming data
http://smoothiecharts.org
Other
2.24k stars 229 forks source link

Idea: Polar/Circular Charts #119

Open cinderblock opened 4 years ago

cinderblock commented 4 years ago

I've got a desire to display streaming data on a circular area. I'm wondering if it would make sense to extend Smoothie to do this or maybe fork and rework to be independent.

The center would be t=0 and the edge would be like t=10s (default). A value (or multiple) from [0-2π) (or maybe allows wrapping) is then charted and animates towards the edge of the circle, dissapearing when it gets there.

Any thoughts on implementing this? I'm not super familiar with how canvas does drawing efficiently and if we can just slide the data to the edge as I'm thinking.

Related Idea: Plotting on a 2D grid and having old values fade away.

Thoughts?

drewnoakes commented 4 years ago

Can you share an image that shows roughly what you'd like the output to look like?

cinderblock commented 4 years ago

Something like these two plots showing the angle of a motor at two different angular velocities.

image

Note, the polar grid would be fixed in angle but the radius lines would be "scrolling" from the center to the edge.

The more I look at this, the more I think this might need to be a separate (forked) project...

drewnoakes commented 4 years ago

One difference to consider is that Smoothie has a TimeSeries object that is logically unbounded, and only a fixed length window at the end (leading up to Date.now()) is shown. For a polar chart, you have 0-360 degrees, potentially wrapping.

It probably makes sense to use Smoothie's code for inspiration and creating something new. It would be possible to start supporting new chart types in Smoothie, but we wouldn't want to get away from the value Smoothie has in being a simple focussed chart type.

cinderblock commented 4 years ago

I think I've failed to articular my thinking fully.

Just like SmoothieCharts, the data from a TimeSeries, once it gets to the edge of the circle, gets discarded (just like SmoothieCharts).

Basically, map the x axis of SmoothieCharts to r (radius) and the y axis to θ (angle). Auto scaling basically not needed since you always know what one revolution is. Though I imagine being able to specify a scale would make a lot of sense.

Back to the point at hand, it sounds like it makes more sense to keep this as a separate project.

I'm still wondering if a 2D chart would make sense, where the canvas doesn't scroll and the data essentially just expires (or fades to nothing) over some defined period of time.