To set the animation effects using the built-in animation options, you can use the following XAML markup:
<my:C1Chart Name="chart">
<my:C1Chart.Data>
<my:ChartData>
<my:ChartData.LoadAnimation>
<!-- load animation -->
<my:PlotElementAnimation>
<!-- initial style: invisible -->
<my:PlotElementAnimation.SymbolStyle>
<Style TargetType="my:PlotElement">
<Setter Property="Opacity" Value="0" />
</Style>
</my:PlotElementAnimation.SymbolStyle>
<my:PlotElementAnimation.Storyboard>
<Storyboard >
<!-- display element with index delay -->
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
my:PlotElementAnimation.IndexDelay="0.5"
To="1" Duration="0:0:1" />
</Storyboard>
</my:PlotElementAnimation.Storyboard>
</my:PlotElementAnimation>
</my:ChartData.LoadAnimation>
</my:ChartData>
</my:C1Chart.Data>
</my:C1Chart>
And then you can insert the following code directly beneath the InitializeComponent() method:
var rnd = new Random();
chart.MouseLeftButtonDown += (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 });
};
When you run your application, the data will load or re-load on mouse click, showing the animation effect that was set in the XAML markup.