Has anyone came up with a way to smooth the animation of real-time graphing? In the NucliOS.app example (Motion Framework for McGuire AFB Temperatures) shows a slight bouncing. This bouncing is more exagerated as the data becomes more scattered because the animation isn't moving from right-to-left, it's giving that appearance as each individual plotted point animates to a new position.
Here is a link to a video highlighting this issue using a very basic demo - https://www.dropbox.com/s/zbdwclw3nkhcql4/BumpyAnimatedGraph.mp4
I have an idea for smooth real-time animations. If you programmatically zoom and offset at the same interval as the insert. That way, only X number of items are displayed. Zooming would allow only a certain amount of data to be displayed, and offsetting to the "newest" element would give the appearance of old data falling off the rear of the graph. If paired with a range selector, this could be a very powerful tool.
That said, I'm deeply confused by the range selector's zooming. It seems that just a little touch zooms in an exaggerated amount. Is there a reason for this?
I'll work on translating the constant number of items to an appropriate zoom/offset, but it would be most beneficial to developers if this was already an option... because then a user could "zoom" based on how many horizontal items they want to see in any given view. Panning left/right would "stick" to the nodes along the axis. This would be more natural and intuitive than the current zoomScale/offset float/point values.
Hello Larson,
Based on the description of your issue I’ve implemented small sample that demonstrates you how could achieve this goal using our motion framework. Please run the sample and let me know if this is what you are looking for.
Please let me know if you have any further questions.
This is what I was looking for. Thank you.
A few questions:
URL in case the previous image did not attach properly:
http://files.caylan.net/skitch/iOS_Simulator-20140128-095413.jpg
Upon closer examination I have one more modification request. This is where I think it gets tricky.
The sample you provided shows the "falling off" (removal) of elements off the left-side of the chart. Instead, is it possible to have the elements fall off the chart, but *not* off the range selector? That way, as data accumulated, the range selector would slowly zoom in because more data is becoming available. Then, the user can pan to the left to see the history of the data. I believe this approach is more difficult, because the zoom factor is related to the point size of the chart, and not the data being displayed. Unless there is an public API way to relate the zoom to the number of units displayed, this will continue to be a challenge.
Hello,
The trick would be to constantly readjust the main chart’s zoom scale and content offset along with the range selectors start and end positions. If you are displaying category data (categoryXAxis) the number of visible items can be calculated by looking at visibleMinimum and visibleMaximum properties. Those properties relate to the visible indices of the data points. So in a way you can look at the zoom scale and the number of items currently visible and relate the two quantities that way. I haven’t really tried to do this, but it sounds possible. What kind of data goes to your chart (category data or scatter, etc) and what is the chart types (Line Series, Spline Series, Scatter Line Series and etc. )?