Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
ChifDagrif
405
Animate DataChart based on event
posted

I would like to animate the DataChart based on any configurable event, such as a button click, in the most simple way possible. I am attempting to do this from MVC/Razor. What methods trigger the animation? In the Datachart API, it appears that there are several notifications methods that may trigger the animation (notifyClearItems(), notifyInsertItem(), etc.) Are these methods not available to the MVC HTML helper? I do not get intellisense for them.

Assuming I must call one of these methods via JavaScript based on something like an Onclick or Onload event, it is not clear to me how to populate the JavaScript parameters from an MVC framework.

From the API -

  $(".selector").igDataChart( "notifyInsertItem", dataSource:object, index:number, newItem:object );

How do you populate datasource:object from your MVC model? What would the newItem object be? Ideally, I just want to trigger the animation, I don't want to really add or remove an item from the chart.

 

Parents
No Data
Reply
  • 29417
    Offline posted

    Hello Chris,

     

    Thank you for posting in our forum.

     

    Those methods are actually related to the Motion Framework’s functionality to animate the adding/removing and updating of data records from the data source.

    For example you can refer to the sample here:

    http://ko.infragistics.com/products/jquery/sample/chart/motion-framework-with-column-series

    However if you’re not adding, removing or changing any of the values then the chart will have nothing to animate.

     

    If you’re just aiming to animate the grid on its first load you could set a transitionDuration on the series and start the data for all series at 0. Then flush the chart or let it  initially display and then change the data to have the actual values you desire. You could also use the same approach when you click on a button to get a similar effect. There’s a similar example here:

    http://jsfiddle.net/vbNLx/3/light/

     

    The API methods are entirely client side so you can only invoke them on the client.

     

    Specifically the notifyInsertItem method is used when you add a new record to the data source and you want to notify the chart to re-render and animate the change.

    So for example if you add a new item to your data source on the client and want to animate that you can use the method and the 3 paramethers you need to add are:

    -the data source to which you’ve added the new record. Since we’re getting the data source on the client it will contain the records in json format.

    - the index to which you’ve added that record in the data source

    -the new record that you’ve added to the data source. Usually a json object.

     

    I hope you’ll find this information useful. Let me know if you have any questions or concerns.

     

    Best Regards,

    Maya Kirova

    Developer Support Engineer II

    Infragistics, Inc.

    http://ko.infragistics.com/support

     

     

Children