Animation in SChartSeries


#1

Hi,

I would like to animate chart when data is reloaded (in ShinobiChart is called method redraw())

Previously, class SChartSeries contains entryAnimation and exitAnimation, but both are now deprecated.

'entryAnimation' is deprecated: Use the chart's 'animationTracker' method 'showSeries:animation:completion' insted.

How is this done? I couldn’t found any documentation on this (grep -ril animationTracker *) and no post on internet on this topic.

I use Swift 3.0 and Shinobi chart version 2.8.7-3.


#2

Hi Marko,

Thanks for getting in touch!

We deprecated a series entry & exit animations & replaced them with our SChartAnimationTracker in version 2.9.0. I would strongly suggest updating your framework to the latest version (2.9.2) to get all the benefits of our new SChartAnimationTracker.

We now have an property on our ShinobiChart of type SChartAnimationTracker, which tracks all the series you wish to animate.

Like the deprecate warning suggests, the animation tracker has hide & show series methods that replace a series’ entry & exit animations.

Here is some example code showing how to use the animation tracker’s new show series method:

chart.animationTracker.show(series, animation: .television(), duration: 2.0, completion: nil)
chart.redraw()

There is an Animation section in our user guide that can be found here.

You can also look at the SChartAnimationTracker header file inside your ShinobiChart’s framework.

Let me know if you have any questions.

Kind regards,
Andrew Polkinghorn.


#3

Hi, thank you for your reply.

Is there some major changes between 2.8.7 and 2.9.0 except animations?


#4

Hi Marko,

The only other major changes we released between 2.8.7 & 2.9.0 is improved Swift 3 & iOS 10 support.

For example, we added Swift nullability support.

The rest of the changes are mainly bug fixes, but there are a lot of them.

All the changes made between versions can be found in our CHANGELOG.txt file located inside your Shinobi download.

Kind regards,
Andrew Polkinghorn.


#5

Hi,

I try to implement your suggestion but I have some trouble with this.

I have UIView that has property chart.

so if I try to implement what you write :

    chartView?.reloadData()
    
    if chartView != nil && chartView!.series.count > 0 {
    
        let series : SChartSeries = chartView!.series[0]
        chartView!.animationTracker.show(series, animation: .television(), duration: 2.0, completion: nil)
    }
    
    chartView?.redraw()

And this doesn’t animate my chart. What could be wrong?


#6

Hi Marko,

The method call is correct, however it depends when you are calling it.

If you wish to animate a series in after data is loaded, I would recommend implementing the SChartDelegate method “sChartDidFinishLoading”.

Below is what that method implementation would look like:

extension ViewController: SChartDelegate {
    func sChartDidFinishLoadingData(_ chart: ShinobiChart) {
        if chart.series.count > 0 {
            let series = chart.series[0]
            chart.animationTracker.show(series, animation: .television(), duration: 2.0, completion: nil)
        }
    }
}

Remember, you’ll need to assign the delegate property on your chart to make sure your method implementation is called.

Kind regards,
Andrew Polkinghorn.


#7

Thank you for your answer, this is working now.

But I discovered that there is no predefined animations that I could use.

I would need something like this :

Because I have several tabs, and every tab has different values, for same dataPoints (number of data points is same, names are the same…) On tab change I would like this type of animation for Bar, Line and Pie chart.

How to achieved something like this?


#8

Hi Marko,

We are nearly finished implementing our next major release that will include a per point animation feature which provides the exact functionality you are after.

In the mean time, you can still produce something similar for the bar and line series by:

  1. calling a hide animation on the series you want to reload
  2. reloading the data
  3. using the above implementation I’ve gave you, call a show animation once the series has finished loading

The animation you want to hide and show the bar series is the “.growHorizontal()” & the animation for the line series is “.growVertical()”.

Just to clarify, our bar series is horizontal meaning it draws with the base on the Y-axis. The image you provided shows a column series (a vertical series with the base on the X-axis) animating. If you want to animate a column series use the “.growVertical()” not “.growHorizontal()”.

We currently don’t support these kind of animations for our pie series so this is something you will have to implement yourself with a timer and frequent reloading of chart data to simulate an animation.

Kind regards,
Andrew Polkinghorn.