Animating the C1Chart Control
To set the animation effects using the built-in animation options, you can use the following XAML markup:
<c1:C1Chart Name="chart">
<c1:C1Chart.Data>
<c1:ChartData>
<c1:ChartData.LoadAnimation>
<!-- load animation -->
<c1:PlotElementAnimation>
<!-- initial style: invisible -->
<c1:PlotElementAnimation.SymbolStyle>
<Style TargetType="c1:PlotElement">
<Setter Property="Opacity" Value="0" />
</Style>
</c1:PlotElementAnimation.SymbolStyle>
<c1:PlotElementAnimation.Storyboard>
<Storyboard >
<!-- display element with index delay -->
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
c1:PlotElementAnimation.IndexDelay="0.5"
To="1" Duration="0:0:1" />
</Storyboard>
</c1:PlotElementAnimation.Storyboard>
</c1:PlotElementAnimation>
</c1:ChartData.LoadAnimation>
</c1:ChartData>
</c1:C1Chart.Data>
</c1: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.