Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Usha
330
Animation on pie chart
posted

Hi!

I have a requirement to have a pie chart and animation on that. Can I have on mouseover glow the datapoint or show it as an exploded one etc. After mouseover on mouse leave can I again set it back to the original pie chart. Can you please also suggest any other kind of animation I can have on the pie chart. Thanks for your help.

Thanks and regards,

Usha.

 

 

  • 28496
    Suggested Answer
    Offline posted

    this isn't a feature of the chart, but you can make it happen using code like this:

            private void XamWebChart_DataItemMouseEnter(object sender, Infragistics.Silverlight.Chart.DataItemMouseEventArgs e)
            {
                Path wedgePath = e.Element as Path;
                if (wedgePath != null)
                {
                    ColorAnimation yellowAnimation = new ColorAnimation();
                    yellowAnimation.From = Colors.Yellow;
                    yellowAnimation.Duration = TimeSpan.FromSeconds(1);
                    Storyboard glow = new Storyboard();
                    glow.Children.Add(yellowAnimation);
                    Storyboard.SetTarget(yellowAnimation, wedgePath.Fill);
                    Storyboard.SetTargetProperty(yellowAnimation, new PropertyPath("Color"));
                    glow.Begin();
                }
            }

            <igChart:XamWebChart DataItemMouseEnter="XamWebChart_DataItemMouseEnter">
                <igChart:XamWebChart.Series>
                    <igChart:Series ChartType="Pie">
                        <igChart:Series.DataPoints>
                            <igChart:DataPoint Value="1" Fill="Red" />
                            <igChart:DataPoint Value="1" Fill="Green" />
                            <igChart:DataPoint Value="1" Fill="Blue" />
                        </igChart:Series.DataPoints>
                    </igChart:Series>
                </igChart:XamWebChart.Series>
            </igChart:XamWebChart>