Animating the C1Chart Control

The C1Chart control has a basic animation API that is easy to implement. Use the following XAML markup and code together to add basic animation to the chart:

XAML	Copy Code
<Chart:C1Chart Name="chart"> <Chart:C1Chart.Data> <Chart:ChartData> <Chart:ChartData.LoadAnimation> <!-- load animation --> <Chart:PlotElementAnimation> <!-- initial style: invisible --> <Chart:PlotElementAnimation.SymbolStyle> <Style TargetType="Chart:PlotElement"> <Setter Property="Opacity" Value="0" /> </Style> </Chart:PlotElementAnimation.SymbolStyle> <Chart:PlotElementAnimation.Storyboard> <Storyboard > <!-- display element with index delay --> <DoubleAnimation Storyboard.TargetProperty="Opacity" Chart:PlotElementAnimation.IndexDelay="0.5" To="1" Duration="0:0:1" /> </Storyboard> </Chart:PlotElementAnimation.Storyboard> </Chart:PlotElementAnimation> </Chart:ChartData.LoadAnimation> </Chart:ChartData> </Chart:C1Chart.Data> </Chart:C1Chart>

XAML

Copy Code

<Chart:C1Chart Name="chart">
<Chart:C1Chart.Data>
<Chart:ChartData>
<Chart:ChartData.LoadAnimation>
<!-- load animation -->
<Chart:PlotElementAnimation>
<!-- initial style: invisible  -->
<Chart:PlotElementAnimation.SymbolStyle>
<Style TargetType="Chart:PlotElement">
<Setter Property="Opacity" Value="0" />
</Style>
</Chart:PlotElementAnimation.SymbolStyle>
<Chart:PlotElementAnimation.Storyboard>
<Storyboard >
<!-- display element with index delay -->
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
Chart:PlotElementAnimation.IndexDelay="0.5"
To="1" Duration="0:0:1" />
</Storyboard>
</Chart:PlotElementAnimation.Storyboard>
</Chart:PlotElementAnimation>
</Chart:ChartData.LoadAnimation>
</Chart:ChartData>
</Chart:C1Chart.Data>
</Chart:C1Chart>

C#	Copy Code
var rnd = new Random(); chart.PointerReleased += (s, e) => { chart.Data.Children.Clear(); // create new data var vals = new double[rnd.Next(5,10)]; for (int i = 0; i < vals.Length; i++) vals[i] = rnd.Next(0,100); chart.Data.Children.Add( new DataSeries() { ValuesSource = vals }); };

Copy Code

var rnd = new Random();
chart.PointerReleased += (s, e) =>
{
chart.Data.Children.Clear();
// create new data
var vals = new double[rnd.Next(5,10)];
for (int i = 0; i < vals.Length; i++)
vals[i] = rnd.Next(0,100);
chart.Data.Children.Add( new DataSeries() { ValuesSource = vals });
};