Chart animation speed

15 posts, 1 answers
  1. merikmgrasp
    merikmgrasp avatar
    2 posts
    Member since:
    May 2007

    Posted 11 Dec 2011 Link to this post

    Hello, is there anyway to make the charts animate more slowly (like a chart animation speed/duration)? When loading a single chart on a webpage, the animation is noticeable but we'd like it to be slower so its more apparent. When we loading 12 charts onto a single webpage, the animation is not noticeable anymore.

    We're using the setTimeout() function thats shown in the examples.
    $(document).ready(function () {   
            setTimeout(function () {
                 
                createBarChart('#chart1');
                createBarStackedChart('#chart2');
                createPieChart('#chart3');
     
                createBarChart('#chart4');
                createBarStackedChart('#chart5');
                createPieChart('#chart6');
     
                createBarChart('#chart7');
                createBarStackedChart('#chart8');
                createPieChart('#chart9');
     
                createBarChart('#chart10');
                createBarStackedChart('#chart11');
                createPieChart('#chart12');
     
                 //Initialize the chart with a delay to make sure
                 //the initial animation is visible
            }, 400);
    });

    Any feedback would be appreciated.

    Chris
  2. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 15 Dec 2011 Link to this post

    Hi,

    The Chart does not provide means for controlling the initial animation duration. We'll correct this in future versions. Thank you for noticing.

    We can make initial animations smoother by instantiating the charts with a slight delay. There is just so much that the browser can handle at once. I've prepared a jsFiddle for demonstration: http://jsfiddle.net/fuaxH/

    As a token of gratitude for your involvement your Telerik points have been updated.

    Regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. merikmgrasp
    merikmgrasp avatar
    2 posts
    Member since:
    May 2007

    Posted 15 Dec 2011 Link to this post

    Beautiful... your example works perfectly. Thanks you for the feedback and keep up the great work on your awesome products.
  5. Joe Sugden
    Joe Sugden avatar
    52 posts
    Member since:
    Feb 2010

    Posted 23 Feb 2012 Link to this post

    Does the new version support that natively or not yet?

    Thanks!
  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 24 Feb 2012 Link to this post

    Hello,

    No, we don't expose such properties yet. We'll bump their priority in our to-do list for the next planning session.

    Apologies for the caused inconvenience.

    Regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Guillermo
    Guillermo  avatar
    11 posts
    Member since:
    Feb 2012

    Posted 21 May 2012 Link to this post

    @ Tsvetomir

    Hello, there is also any plans to expose the animation type as well? 
    Let said that for us will be really useful a fade in/out animation in order to visualize small changes when changing the data due to a series of filters and selector for that chart. 

    To clarify my point, I attached to animated gif one with the current animation (kendo-current.gif) and other simulating a fade in/out animation (kendo-desired.gif).

    Thanks for your support
  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 23 May 2012 Link to this post

    Hi,

    The animation of Bar/Column series can be controlled through the undocumented animation options:
    series: [{
      data: [1, 2, 3],
      animation: {
        type: "fadeIn",
        duration: 1000
      }
    }]


    See it live here - http://jsbin.com/ozawox/edit#html,live 

    While we don't expect changes to these options we prefer to keep them unofficial until we provide consistent behavior for all series.

    All the best,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. merikmgrasp
    merikmgrasp avatar
    2 posts
    Member since:
    May 2007

    Posted 23 May 2012 Link to this post

    Is fadeIn the only animation?
  10. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 28 May 2012 Link to this post

    Hello,

    The "animation from current value" that you're looking for is not possible with the current version. This is something that we intend to implement soon. 

    Apologies for my faulty assumption that you're looking for a fade-in effect.

    All the best,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Guillermo
    Guillermo  avatar
    11 posts
    Member since:
    Feb 2012

    Posted 29 May 2012 Link to this post

    Hello Tsvetomir

    Thanks for the information. We will wait impatiently for this kind of animation to come in future releases, but in the meantime, do you have any documentation of the type of animation and other parameter that we can play with? 

    Regards
  12. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 31 May 2012 Link to this post

    Hi,

    I'm unable to offer any further suggestions at that point. We'll need fully functional dynamic updates in order to provide smooth transitions.

    Thank you for your patience.

    Greetings,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Michaël
    Michaël avatar
    44 posts
    Member since:
    Feb 2014

    Posted 07 Sep 2015 Link to this post

    Hi !

    I know this post is quite old, but is there plans to implement animations "from current value" for all charts? We dynamically change the value of area, line and donut chart, but the fact that it restarts the animation from beginning make it look very bad :(.

  14. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 10 Sep 2015 Link to this post

    Hello,

    No specific plans yet, but let's say we really like this feature and we have a rough idea on how to make it possible.

    We'll tackle it as soon as time allows us to. Thank you for your patience.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. chase
    chase avatar
    1 posts
    Member since:
    Jul 2016

    Posted 13 Oct in reply to T. Tsonev Link to this post

    Hello, Just checkin in to see if this "From current value" animation has been implemented or has a target date?
  16. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 18 Oct Link to this post

    Hello Chase,

    I am afraid this functionality is not available in Kendo UI Chart yet. If you have a minute, you could cast a vote / leave a comment for it in this UserVoice item: 

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/6933479-animate-sparkline-between-two-values-without-jumpi

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready