Coding Chart Animations

Animation is an important emerging field of graphics. It can add visual impact to a dull business application. Animated charts have obvious advantages over static charts when explaining subject matter that changes over time. ComponentOne Chart for WPF/Silverlight provides built-in support for Animations. Visit our blog post Getting Started with Chart Animation in XAML to implement the same in XAML. With this blog post, we will discuss how to CODE Animations in Chart. Let's take a simple example from our documentation : We will implement the same XAML markup in code behind at runtime by coding every line which is stated in the markup:

Loading new Data on MouseLeftButtonDown

Basically, the animation performed in this blog deals with loading of the new data on chart's MouseLeftButtonDown.

chart.MouseLeftButtonDown += (s, e) =>  
{  
   chart.Data.Children.Clear();  
   //create chart 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 });  
   chart.View.AxisX.Min = -0.5;  
   chart.View.AxisX.Max = vals.Length - 0.5;  
   //handle the PlotElementLoaded event  
   chart.Data.Children[0].PlotElementLoaded += MainWindow_PlotElementLoaded;  
};

Creating the Animation

Here we will see how to: -Create a PlotElementAnimation object -Style the plotting symbol -Define the Storyboard -Load the animation into the Chart

private void chart_Loaded(object sender, RoutedEventArgs e)  
{  
   //Create a new PlotElementAnimation object  
   PlotElementAnimation animation = new PlotElementAnimation();  

   //Set the style to assign to the PlotElementAnimation  
   Style style = new Style(typeof(PlotElement));  
   style.Setters.Clear();  
   style.Setters.Add(new Setter(PlotElement.OpacityProperty, 0.0));  
   animation.SymbolStyle = style;  

   //Set the storyboard to be assigned to the PlotElementAnimation  
   Storyboard storyboard = new Storyboard();  
   DoubleAnimation doubleAnimation = new DoubleAnimation(1.0, new Duration(new TimeSpan(0, 0, 1)));  
   Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(PlotElement.OpacityProperty));  
   PlotElementAnimation.SetIndexDelay(doubleAnimation, 0.5d);  
   storyboard.Children.Clear();  
   storyboard.Children.Add(doubleAnimation);  
   animation.Storyboard = storyboard;  

   //Set the object to PlotElementAnimation Data.LoadAnimation property of the Chart control  
   chart.Data.LoadAnimation = animation;  
}

Next, we need to handle the PlotElementLoaded event to handle the scenario wherein the plot elements are loaded one by one and not all at once.

void chart_PlotElementLoaded(object sender, EventArgs e)  
{  
   //Specify the plot elements of the story as the target board  
   PlotElement pe = sender as PlotElement;  
   var doubleAnimation = chart.Data.LoadAnimation.Storyboard.Children[0] as DoubleAnimation;  
   if (doubleAnimation != null)  
      Storyboard.SetTarget(doubleAnimation, pe);  
}

Many other scenarios wherein Animations in Chart come handy are possible with C1Chart. For instance, the image below depicts yet another example of Animations in Chart, here the Animations are re-loaded upon a Button click. Let us know if you have any special requirements. We would be happy to cater them :) DownloadSample_CS DownloadSample_VB