Animation in FlexChart

You can choose to enhance the user experience of FlexChart, FlexPie and FinancialChart by enabling animation effects to the plot elements upon load and update.

The animation can be enabled by creating a ChartAnimation object and passing it the chart control instance with several key properties that include duration, easing function, and animation mode.

• animationMode: Determines how the data points are animated: all at once, one at a time, or one series at a time. The entire animation is completed within the duration.

  • All: All points and series animate at once.

  • Point: Animation is performed point by point. Multiple series are animated simultaneously at the same time.

  • Series: Animation is performed series by series. Entire series is animated at once, following the same animation as the "All" option, but just one series at a time.

• easing: The easing function applied to the animation.

• duration: The length of animation in milliseconds.

Example:

import * as chart from '@mescius/wijmo.chart';
import * as animation from '@mescius/wijmo.chart.animation';

var chartAnimation = new animation.ChartAnimation(myChart, {
        animationMode: wijmo.chart.animation.AnimationMode.All,
        easing: wijmo.chart.animation.Easing.Swing,
        duration: 400
    });

Once the animation is enabled, it will occur automatically when the chart is loading and updating. The animation can be triggered promatically by calling the animate method.

Example:

myChart.animate();

Easing Functions

You can configure the animation further by setting the easing function that is applied to the animation. FlexChart supports a collection of standard easing functions such as cubic in/out, elastic in/out, bounce in/out and linear.

• Linear

• Swing

• EaseInQuad

• EaseOutQuad

• EaseInOutQuad

• EaseInCubic

• EaseOutCubic

• EaseInOutCubic

• EaseInQuart

• EaseOutQuart

• EaseInOutQuart

• EaseInQuint

• EaseOutQuint

• EaseInOutQuint

• EaseInSine

• EaseOutSine

• EaseInOutSine

• EaseInExpo

• EaseOutExpo

• EaseInOutExpo

• EaseInCirc

• EaseOutCirc

• EaseInOutCirc

• EaseInBack

• EaseOutBack

• EaseInOutBack

• EaseInBounce

• EaseOutBounce

• EaseInOutBounce

• EaseInElastic

• EaseOutElastic

• EaseInOutElastic

Animating the Axis

The animation can be applied on the axis as well, by setting the axisAnimation property on the

ChartAnimation object.

Example:

chartAnimation.axisAnimation = true;

Update Animation

The ChartAnimation also applies during updates. Once the animation is configured, you can easily update the chart's data source by inserting and removing points from the source collection.

Example:

// insert point at start
myChart.itemsSource.insert(0, getMyDataItem());
// insert point at end
myChart.itemsSource.push(getMyDataItem());
// remove point at start
myChart.itemsSource.removeAt(0);
// remove point at end
myChart.itemsSource.pop();

The getMyDataItem method is just used as placeholder and it should be replaced with a data object matching the bound type.

Dynamic Chart Animation

Since FlexChart uses the CollectionView class as its data source, any changes made to the data will be automatically reflected on the chart. This CollectionView is exposed by the collectionView property. You can also add and remove points from this collection to see it updated on the chart.

Example:

// append new points, remove old points
var arr = myChart.collectionView.sourceCollection;
var pt = arr[arr.length - 1];
var y = pt.y;
for (var i = 0; i < 10; i++) {
    y += Math.random() - .5;
    arr.push({ x: pt.x + i + 1, y: y });
    arr.splice(0, 1);
}

// update collectionview and chart
myChart.collectionView.refresh();
myChart.refresh();