This topic provides an overview of the Infragistics® Motion Framework™ for charts and the aspects in which chart animation can be configured.
Prerequisite topics required to understand this material.
igDataChart Overview: This topic provides conceptual information about the igDataChart™ control including its main features, minimum requirements for using charts and user functionality.
Adding igDataChart: This topic demonstrates how to add the igDataChart™ control to a page and bind it to data.
The Infragistics Motion Framework tells the story of your data in a way that allows the end users to experience a fully customizable immersive and animated user experience. End users can move step-by-step through time to see the relationship between data points change with each transition.
Motion Framework works on the principle that data is being fed, either continually or in batches, to a chart control that invokes the appropriate API method whenever data changes to render a fully customizable animated visual representation of your data.
The Motion Framework allows developers using the Ignite UI for jQuery chart controls, to increase the visual appeal of, and imply trends or other meaning behind the data.
A catalog of the Infragistics Motion Network supported configurable chart animation aspects.
| Configurable aspects | Details | Properties |
|---|---|---|
| Transition time | You can define the duration of animation for a particular data change for each data series. | jQuery: series[“key”].transitionDuration MVC: Series.TransitionDuration() |
| Notifications that all data items have been replaced | Notifies the chart that the items have been cleared from the specified data source. | |
| Notifications for data item insertions | Notifies the chart that an item has been inserted at the specified index in the specified data source. | |
| Notifications for data item removals | Notifies the chart that an item has been removed from the specified index in the specified data source. | |
| Notifications for data item changes | Notifies the chart that an item has been set in the specified data source. | |
| Notifications for data item additions | Notifies the chart that a new item has been added to the data source. | |
| Notifications for data item insertions | Notifies the chart that a new item has been inserted to the data source. | |
| Notifications for data item removals | Notifies the chart that a new item has been deleted from the data source. | |
| Notifications for data item updates | Notifies the chart that an item has been updates in the data source. |
The following sample demonstrates how to use the Motion Framework™ with igDataChart to build highly engaging visualizations and provide smooth playback of changes in data over time.
The following topics provide additional information related to this topic.
This topic demonstrates, with code examples, how to add a simple animated column chart in HTML and JavaScript.
This topic demonstrates, with code examples, how to add a simple animated column chart in MVC using AJAX POST request for adding data dynamically.
View on GitHub