Smooth scrolling real-time chart

#1

Hi.  

I’m evaluating Shinobi Charts for iOS.  I’m displaying 60 values in a real-time chart that updates once every second.  I’m adding a value every second, and removing the first one, then calling reloadData.   Everything works more or less, but the chart jumps to the new position.  Is there a way to have the chart smoothly scroll from the current values to the new value?  It looks choppy now because it just refreshes the whole view every second, jumping to the new chart. 

Thanks,

-David

#2

Hi,

You should be able to achieve this behaviour by allowing the chart to render normally the first time, but then use the following SChartDelegate method:

- (void)sChartRenderFinished:(ShinobiChart *)chart {
   chart.autoCalculateAxisRanges = NO;
}

This will prevent the chart from auto-updating your axes. You can then use the below SChartAxis method to animate to your desired range.

- (BOOL)setRangeWithMinimum:(id)minimum andMaximum:(id)maximum withAnimation:(BOOL)animation

I hope the above is of some help - please get back to us if you need further assistance!

Sam

#3

Thanks for the reply!  That is pretty close.  One followup.

It animates ok, but before it animates it removes the first segment on the left and then slides everything into place.  It’s a little jarring.  This is because the new range is now n+1.  Is there a way to remove the left segment after the animation completes?  I don’t see any callbacks for that animation completing.  Is the only way to keep count+1 and remove the left one when its 2 old?  That’s kinda complicated…

#4

Glad that was of some help :smile:.

Unfortunately, we don’t cover this use case in our delegate callbacks. However, you make a good point that this situation could be made simpler, so this is something we may think about adding in the future.

Currently, you’re correct that you’ll have to remove keep track of the index of the minimum x-axis datapoint and then remove the datapoint two before it.

Sam