Bar graph Animation in Android using Telerik

22 posts, 0 answers
  1. Deepak
    Deepak avatar
    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

  2. Victor
    Admin
    Victor avatar
    1351 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.

     
  3. DevCraft banner
  4. Deepak
    Deepak avatar
    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

  5. Victor
    Admin
    Victor avatar
    1351 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.

     
  6. Richard
    Richard avatar
    44 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

  7. Victor
    Admin
    Victor avatar
    1351 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.

     
  8. Richard
    Richard avatar
    44 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

     

  9. Victor
    Admin
    Victor avatar
    1351 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
  10. Richard
    Richard avatar
    44 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

  11. Nicholas
    Nicholas avatar
    4 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.

     

  12. Victor
    Admin
    Victor avatar
    1351 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
  13. Richard
    Richard avatar
    44 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?
  14. Victor
    Admin
    Victor avatar
    1351 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
  15. Richard
    Richard avatar
    44 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

     

  16. Richard
    Richard avatar
    44 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

  17. Victor
    Admin
    Victor avatar
    1351 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
  18. Richard
    Richard avatar
    44 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

  19. Richard
    Richard avatar
    44 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

  20. Richard
    Richard avatar
    44 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

  21. Richard
    Richard avatar
    44 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.
  22. Victor
    Admin
    Victor avatar
    1351 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
  23. Richard
    Richard avatar
    44 posts
    Member since:
    Jun 2014

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

    Okay cool. Thanks for the update.

     

    Rich

Back to Top
DevCraft banner