Bar graph Animation in Android using Telerik

[Deepak]

Hi,

 I am implementing Telerik for Graph, and in the same I am facing challenge in showing animation for Bar Graph.

The Bar Graph has to appear slowly increasing from the base till the coordinates assigned, the bar graph is aligned base on y-axis. I have not found any straight forward animation method to accomplish this, Please can you advise.

Regards,

Devavrata

[Victor]

Hello Deepak,

Thanks for the question.
Currently our chart does not support animations however we have scheduled this feature for the next major release.
The animations are not possible at the moment because the chart is a single View object and Android does not provide animation APIs when directly drawing on a canvas.
Thank you for understanding.

Regards,
Victor
Telerik

 

 

[Deepak]

Thank you Victor for the explanation. We were exploring this as the iOS counterpart supported it.

Btw, are we entitled to get the next major update ?

 thanks,

Deepak

[Victor]

Hi Deepak,

Yes, as a customer you will have access to the next release, assuming your license has not expired. Otherwise you will only have access to the trial version. The trial version only differs in that there is a trial message when you first use the Telerik components. Functionality-wise the trial and dev versions are the same.
Finally our next major release is scheduled for the end of June.

Regards,
Victor
Telerik

 

 

[Richard]

Hi --

Will the June release support animation of bar and pie charts?

Rich

[Victor]

Hi Richard,

Yes, the chart will have support for animations for the next release. In fact, they are already in the testing phase. Please note that the animations will be per series. Individual data points still won't be animated.

Regards,
Victor
Telerik

 

 

[Richard]

It is (almost) the end of June. When do you anticipate the next release being made available so we have the animation functionality for charts?

 Thanks

Rich

 

[Victor]

Hi Deepak,

We just released the new version (Q2 2015). It has a new API for animations. The documentation will be uploaded shortly.

You have to use ChartAnimationPanel to use the animations. The animation panel is a special layout that creates views for each series, animates these views. You have to add the chart to this panel. Then add animations to the panel. For example:

ChartAnimationPanel animationPanel = new ChartAnimationPanel(context);
animationPanel.setChart(chartView);
ChartFadeAnimation fadeAnimation = new ChartFadeAnimation(barSeries);
animationPanel.addAnimation(fadeAnimation);

Please keep in mind that the chartView must not be already added to the Android layout hierarchy. 

Regards,
Victor
Telerik

[Richard]

Does the animation panel then get added to the Android layout?

Are there code examples with the new release?

 Thanks

Rich

[Nicholas]

I downloaded the example APK and the source code and did not find any reference to ChartAnimationPanel in the Java source code or any of the XML layouts.

 

[Victor]

Hi Nicholas,

The SDK Examples and App Store examples are not uploaded yet. They will be online by the end of the week. The online help about the animations will also be available shortly.

Here is an example of how to enable the chart animations:

RadCartesianChartView chartView = new RadCartesianChartView(this);

chartView.setHorizontalAxis(new CategoricalAxis());

chartView.setVerticalAxis(new LinearAxis());



BarSeries series = new BarSeries();

series.setShowLabels(true);

series.setCategoryBinding(new PropertyNameDataPointBinding("Category"));

series.setValueBinding(new PropertyNameDataPointBinding("Value"));

series.setData(MainViewModel.GetCategoricalData());

chartView.getSeries().add(series);



ChartAnimationPanel animationPanel = new ChartAnimationPanel(this);

animationPanel.setChart(chartView);

ChartScaleAnimation scaleAnimation = new ChartScaleAnimation(series);

scaleAnimation.setDuration(5000);

scaleAnimation.setStartScaleX(0);

scaleAnimation.setStartScaleY(0);

scaleAnimation.setInitialDelay(1000);

animationPanel.addAnimation(scaleAnimation);

root.addView(animationPanel);

And the GetCategoricalData() method:

public static ObservableCollection<CategoricalData> GetCategoricalData() {
    ObservableCollection<CategoricalData> data = new ObservableCollection<CategoricalData>();
    for (Integer i = 0; i < 15; i++) {
        Integer value = 50 + random.nextInt(50);
        data.add(new CategoricalData(value, i.toString()));
    }
    return data;
}

public class CategoricalData {
    public Object category;
    public double value;
    public CategoricalData(double value, Object category) {
        this.value = value;
        this.category = category;
    }
    public Object getCategory() {
        return this.category;
    }
    public void setCategory(Object value) {
        this.category = value;
    }
    public double getValue() {
        return this.value;
    }
    public void setValue(double value) {
        this.value = value;
    }
}

Please write again if you need further assistance.

Regards,
Victor
Telerik

[Richard]

I had posted here about an issue with the layout of the animation holder and it was converted to a support ticket to which I added a ZIP File with an app replicating the issue but have not gotten any feedback from that posting. Can someone please respond to that ticket?

[Victor]

Hi Richard,

Thanks for writing.
I answered your question in the other thread.

Regards,
Victor
Telerik

[Richard]

Hi --

Using your sample code in my sample app the animation works fine. However, in our main app the chart still flashes briefly before the animation begins. Any ideas on this?

I"m going to play around with the layout, etc. but hoped you might also have some insight.

 

Rich

 

[Richard]

When calling a new activity I have this line after the startActivity() call

 overridePendingTransition(0, 0);

 And this appears to be causing the animated chart to "flash" before animating.

I noticed that it wasn't doing it when I would go to the chart activity from one spot in our app but it did "flash" from another location and after looking at our code realized I had the overridePendingTransition() call in one spot and not the other.

I added it to both and the chart flashed and then I commented it out and the pre-animation "flash" stopped.

 

Rich

[Victor]

Hello Richard,

Thanks for writing.
It is possible that some code in your app might be causing the chart to invalidate what is rendered on screen. Can you explain what this overrideTransition() method does?

Regards,
Victor
Telerik

[Richard]

HI --

overridePendingTransition() lets you disable or change the default animation between activities in Android.

I did just learn that as of Android Jelly Bean you can specify an animation as part of a startActivity() call with ActivityOptions. I will play around with that and see if I can disable the default animations and not see the bar chart "flash".

Rich

[Richard]

Hi --

Okay, I was able to confirm that the overridePendingTransition() is actually NOT related to this issue.

Here is the core of my layout

 

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:background="#0000f0"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/info_box_lower_left_charttitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
       />

    <FrameLayout
    android:background="#00f0f0"
        android:id="@+id/TPVChartContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

 

As you can see I gave the two layouts distinctive background colors. I then made the TPVChartContainer invisible and made it visible after adding the animation layout:

 

tpvChartContainer.addView(tpvAnimationPanel);
tpvChartContainer.setVisibility(View.VISIBLE);

 

However, when doing this I see the animation panel appear along with the chart (which flashes on and then off) and then the animation runs.

This is happening with both my bar chart and my pie chart animations - all of which are scale animations.

 

Rich

[Richard]

I changed the layout from using weighted layout widths to static widths but the pre animation "flash" still occurs.

 Rich

[Richard]

I tried replacing the weighted layout height and widths with static values but the pre-animation "Flash" still occurs.

[Victor]

Hi Richard,

Thanks for writing again.
As I mentioned in the other ticket you posted about the animations, this appears to be a bug in the chart animation panel. We will try to address it as soon as possible. I think it might be caused by an asynchronous invalidation that the chart does at a certain point.

Thanks for the feedback, much appreciated.

Regards,
Victor
Telerik

[Richard]

Okay cool. Thanks for the update.

 

Rich