Custom Animations

You can create custom animations for almost all plot elements on mouseover. You can also set plot element animation to occur when new data loads by attaching an Event Handler to the PlotElementLoaded event.

You can use a button click event to add new data to the chart and to animate the chart when that new data is added.

Use the following XAML markup and code together to create a custom animation. The XAML markup will add a general button control and the C1Chart control.

XAML	Copy Code
<Border Margin="0 0 0 10"> <Button Name="btnNew" Content="New Data" VerticalAlignment="Center" Click="btnNew_Click" Width="140" HorizontalAlignment="Left"/> <Chart:C1Chart Name="chart" Height="450" Width="550" Background-"Transparent" BorderBrush="Transparent"> <Chart:C1ChartLegend Background="Transparent" BorderBrush="Transparent"/> </Chart:C1Chart>

XAML

Copy Code

<Border Margin="0 0 0 10">
<Button  Name="btnNew" Content="New Data" VerticalAlignment="Center" Click="btnNew_Click" Width="140" HorizontalAlignment="Left"/>
<Chart:C1Chart Name="chart" Height="450" Width="550" Background-"Transparent" BorderBrush="Transparent">
      <Chart:C1ChartLegend Background="Transparent" BorderBrush="Transparent"/>
</Chart:C1Chart>

The following code will set many of the Chart properties, the data for the chart, and the animation for the chart control:

C#	Copy Code
{ this.InitializeComponent(); chart.View.AxisY.Min = 0; chart.View.AxisY.Max = 100; BarColumnOptions.SetRadiusX(chart, 2); BarColumnOptions.SetRadiusY(chart, 2); chart.ChartType = ChartType.Column; NewData(); } void NewData() { //create new random data values int cnt = 12; double[] vals = new double[cnt]; for (int I = 0; I < cnt; i++) vals[i] = rnd.Next(10, 100); DataSeries ds; If (chart.Data.Children.Count == 0) { ds = new DataSeries() {Label = "series1"}; ds.PlotElementLoaded += new EventHandler(ds_PlotElementLoaded); chart.Data.Children.Add(ds); } chart.Data.Children[0].ValueSource = vals; } void ds_PlotElementLoaded(object sender, EventArgs e) { var pe = (PlotElement)sender; string key = GetKey(pe); if (_dict.ContainsKey(key)) { var pe0 = dict[key]; Rect rc0 = ((Path)pe0.Shape).Data.Bounds; Rect rc = ((Path)pe.Shape).Data.Bounds; if (re0 != rc) //different values { //transform to fit into the previous value ScaleTransform st = new ScaleTransform() { ScaleX = re0.Width / rc.Width, ScaleY = rc0.Height / rc.Height }; pe.RenderTransform = st; pe.RenderTransformOrigin = new Point(0, 1); //animate to the current value Storyboard sb = new Storyboard() { Duration = new Duration(TimeSpan.FromSeconds(3)) }; DoubleAnimation da1 = new DoubleAnimation() { To = 1.0 }; Storyboard.SetTarget(da1, st); sb.Children.Add(da1); DoubleAnimation ds2 = new DoubleAnimation() { To 1.0 }; Storyboard.SetTarget(ds2, st); Storyboard.SetTargetProperty(ds2, "ScaleY"); sb.Children.Add(da2); sb.Begin(); } static string GetKey(PlotElement pe) { return string.Format("s{0}p{1}", pe.DataPoint.SeriesIndex, pe.DataPoint.PointIndex); } private void btnNew_Click(object sender, RoutedEventArgs e) { NewData(); }

Copy Code

{
   this.InitializeComponent();
   chart.View.AxisY.Min = 0;
  chart.View.AxisY.Max = 100;
  BarColumnOptions.SetRadiusX(chart, 2);
  BarColumnOptions.SetRadiusY(chart, 2);
 chart.ChartType = ChartType.Column;

 NewData();
}
void NewData()
{
   //create new random data values
   int cnt = 12;
   double[] vals = new double[cnt];
   for (int I = 0; I < cnt; i++)
    vals[i] = rnd.Next(10, 100);

DataSeries ds;
If (chart.Data.Children.Count == 0)
{
  ds = new DataSeries() {Label = "series1"};
   ds.PlotElementLoaded += new EventHandler(ds_PlotElementLoaded);
  chart.Data.Children.Add(ds);
}
 chart.Data.Children[0].ValueSource = vals;
}
void ds_PlotElementLoaded(object sender, EventArgs e)
{
   var pe = (PlotElement)sender;
   string key = GetKey(pe);
  if (_dict.ContainsKey(key))
  {
    var pe0 = dict[key];
   Rect rc0 = ((Path)pe0.Shape).Data.Bounds;
   Rect rc = ((Path)pe.Shape).Data.Bounds;

  if (re0 != rc) //different values
{
   //transform to fit into the previous value
   ScaleTransform st = new ScaleTransform()
  {
      ScaleX = re0.Width / rc.Width,
     ScaleY = rc0.Height / rc.Height
  };

pe.RenderTransform = st;
pe.RenderTransformOrigin = new Point(0, 1);

//animate to the current value
Storyboard sb = new Storyboard() { Duration = new Duration(TimeSpan.FromSeconds(3)) };
DoubleAnimation da1 = new DoubleAnimation() { To = 1.0 };
Storyboard.SetTarget(da1, st);
sb.Children.Add(da1);
DoubleAnimation ds2 = new DoubleAnimation() { To 1.0 };
Storyboard.SetTarget(ds2, st);
Storyboard.SetTargetProperty(ds2, "ScaleY");
sb.Children.Add(da2);
sb.Begin();
}
static string GetKey(PlotElement pe)
{
   return string.Format("s{0}p{1}", pe.DataPoint.SeriesIndex, pe.DataPoint.PointIndex);
}
private void btnNew_Click(object sender, RoutedEventArgs e)
{
   NewData();
}

Visual Basic	Copy Code
Me.InitializeComponent chart.View.AxisY.Min = 0 chart.View.AxisY.Max = 100 BarColumnOptions.SetRadiusX(chart, 2) BarColumnOptions.SetRadiusY(chart, 2) chart.ChartType = ChartType.Column NewData Private Sub NewData() 'create new random data values Dim cnt As Integer = 12 Dim vals() As Double = New Double((cnt) - 1) {} Dim I As Integer = 0 Do While (I < cnt) vals(i) = rnd.Next(10, 100) i = (i + 1) Loop Dim ds As DataSeries If((chart.Data.Children.Count = 0)) ds = New DataSeries AddHandler ds.PlotElementLoaded, AddressOf Me.ds_PlotElementLoaded chart.Data.Children.Add(ds) chart.Data.Children(0).ValueSource = vals End Sub Private Sub ds_PlotElementLoaded(ByVal sender As Object, ByVal e As EventArgs) Dim pe As var = CType(sender,PlotElement) Dim key As String = GetKey(pe) If _dict.ContainsKey(key) Then Dim pe0 As var = dict(key) Dim rc0 As Rect = CType(pe0.Shape,Path).Data.Bounds Dim rc As Rect = CType(pe.Shape,Path).Data.Bounds If (re0 <> rc) Then 'transform to fit into the previous value Dim st As ScaleTransform = New ScaleTransform pe.RenderTransform = st pe.RenderTransformOrigin = New Point(0, 1) 'animate to the current value Dim sb As Storyboard = New Storyboard Dim da1 As DoubleAnimation = New DoubleAnimation Storyboard.SetTarget(da1, st) sb.Children.Add(da1) Dim ds2 As DoubleAnimation = New DoubleAnimation Storyboard.SetTarget(ds2, st) Storyboard.SetTargetProperty(ds2, "ScaleY") sb.Children.Add(da2) sb.Begin End If Dim GetKey As String PlotElement pe Return String.Format("s{0}p{1}", pe.DataPoint.SeriesIndex, pe.DataPoint.PointIndex) Dim btnNew_Click As System.Void sender Dim e As RoutedEventArgs NewData End If End Sub

Visual Basic

Copy Code

Me.InitializeComponent
chart.View.AxisY.Min = 0
chart.View.AxisY.Max = 100
BarColumnOptions.SetRadiusX(chart, 2)
BarColumnOptions.SetRadiusY(chart, 2)
chart.ChartType = ChartType.Column
NewData
    Private Sub NewData()
        'create new random data values
        Dim cnt As Integer = 12
        Dim vals() As Double = New Double((cnt) - 1) {}
        Dim I As Integer = 0
        Do While (I < cnt)
            vals(i) = rnd.Next(10, 100)
            i = (i + 1)
        Loop
        Dim ds As DataSeries
        If((chart.Data.Children.Count = 0))
        ds = New DataSeries
        AddHandler ds.PlotElementLoaded, AddressOf Me.ds_PlotElementLoaded
        chart.Data.Children.Add(ds)
        chart.Data.Children(0).ValueSource = vals
    End Sub
    Private Sub ds_PlotElementLoaded(ByVal sender As Object, ByVal e As EventArgs)
        Dim pe As var = CType(sender,PlotElement)
        Dim key As String = GetKey(pe)
        If _dict.ContainsKey(key) Then
            Dim pe0 As var = dict(key)
            Dim rc0 As Rect = CType(pe0.Shape,Path).Data.Bounds
            Dim rc As Rect = CType(pe.Shape,Path).Data.Bounds
            If (re0 <> rc) Then
                'transform to fit into the previous value
                Dim st As ScaleTransform = New ScaleTransform
                pe.RenderTransform = st
                pe.RenderTransformOrigin = New Point(0, 1)
                'animate to the current value
                Dim sb As Storyboard = New Storyboard
                Dim da1 As DoubleAnimation = New DoubleAnimation
                Storyboard.SetTarget(da1, st)
                sb.Children.Add(da1)
                Dim ds2 As DoubleAnimation = New DoubleAnimation
                Storyboard.SetTarget(ds2, st)
                Storyboard.SetTargetProperty(ds2, "ScaleY")
                sb.Children.Add(da2)
                sb.Begin
            End If
            Dim GetKey As String
            PlotElement
            pe
            Return String.Format("s{0}p{1}", pe.DataPoint.SeriesIndex, pe.DataPoint.PointIndex)
            Dim btnNew_Click As System.Void
            sender
            Dim e As RoutedEventArgs
            NewData
        End If
    End Sub