Telerik Forums / UI for Android Forum / Chart /

Bar graph Animation in Android using Telerik

Thread is closed for posting

22 posts, 0 answers

Deepak

11 posts

Member since:
Dec 2014

Posted 10 Apr 2015 Link to this post

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
Admin

1358 posts

Posted 14 Apr 2015 Link to this post

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

See What's Next in App Development. Register for TelerikNEXT.
Deepak

11 posts

Member since:
Dec 2014

Posted 14 Apr 2015 in reply to Victor Link to this post

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
Admin

1358 posts

Posted 14 Apr 2015 Link to this post

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

See What's Next in App Development. Register for TelerikNEXT.
Richard

45 posts

Member since:
Jun 2014

Posted 11 May 2015 in reply to Victor Link to this post

Hi --

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

Rich
Victor
Admin

1358 posts

Posted 12 May 2015 Link to this post

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

See What's Next in App Development. Register for TelerikNEXT.
Richard

45 posts

Member since:
Jun 2014

Posted 24 Jun 2015 in reply to Victor Link to this post

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
Admin

1358 posts

Posted 26 Jun 2015 Link to this post

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Richard

45 posts

Member since:
Jun 2014

Posted 03 Jul 2015 in reply to Victor Link to this post

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

Are there code examples with the new release?

Thanks

Rich
Nicholas

8 posts

Member since:
Jun 2012

Posted 03 Jul 2015 in reply to Richard Link to this post

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
Admin

1358 posts

Posted 06 Jul 2015 Link to this post

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Richard

45 posts

Member since:
Jun 2014

Posted 08 Jul 2015 in reply to Victor Link to this post

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
Admin

1358 posts

Posted 10 Jul 2015 Link to this post

Hi Richard,

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

Regards,
Victor
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Richard

45 posts

Member since:
Jun 2014

Posted 13 Jul 2015 in reply to Victor Link to this post

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

45 posts

Member since:
Jun 2014

Posted 13 Jul 2015 in reply to Richard Link to this post

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
Admin

1358 posts

Posted 14 Jul 2015 Link to this post

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Richard

45 posts

Member since:
Jun 2014

Posted 15 Jul 2015 in reply to Victor Link to this post

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

45 posts

Member since:
Jun 2014

Posted 15 Jul 2015 in reply to Richard Link to this post

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

45 posts

Member since:
Jun 2014

Posted 16 Jul 2015 in reply to Richard Link to this post

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

Rich
Richard

45 posts

Member since:
Jun 2014

Posted 16 Jul 2015 in reply to Richard Link to this post

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

1358 posts

Posted 20 Jul 2015 Link to this post

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Richard

45 posts

Member since:
Jun 2014

Posted 20 Jul 2015 in reply to Victor Link to this post

Okay cool. Thanks for the update.

Rich

Bar graph Animation in Android using Telerik

Deepak

Victor

Deepak

Victor

Richard

Victor

Richard

Victor

Richard

Nicholas

Victor

Richard

Victor

Richard

Richard

Victor

Richard

Richard

Richard

Richard

Victor

Richard