Single Bar Animation

[Fábio Witt jagnow]

I've created a chart with a bar series definition that is binding to some sample data. This Series change its color depending on the value of the field in the collection (This is already working).
The problem is that each time the Chart Series updates the animation begins all over again.
I want to know if there is a way to animate only the 'item' (bar) that changed its value. When new data comes just a single bar increased or decreased affect all the Series. I tried with IsAnimated = false, but it kinda flashes and the effect is even ugly.

namespace GaugeApp
{
    public partial class MainPage : UserControl
    {
        #region Dados
        private DateTime nowTime = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, DateTime.Now.Hour, DateTime.Now.Minute, DateTime.Now.Second);

        SolidColorBrush lightYellow = new SolidColorBrush(Color.FromArgb(200, 255, 77, 0));
        SolidColorBrush darkOrange = new SolidColorBrush(Color.FromArgb(200, 255, 0, 0));
        SolidColorBrush darkRed = new SolidColorBrush(Color.FromArgb(200, 200, 0, 0));
        SolidColorBrush lime = new SolidColorBrush(Color.FromArgb(200, 0, 200, 0));

        List<GaugeData> dados1 = new List<GaugeData>
        {
            new GaugeData { Nivel = 10 },
            new GaugeData { Nivel = 25 },
            new GaugeData { Nivel = 45 },
            new GaugeData { Nivel = 35 },
            new GaugeData { Nivel = 65 },
            new GaugeData { Nivel = 25 },
            new GaugeData { Nivel = 15 },
            new GaugeData { Nivel = 15 },
            new GaugeData { Nivel = 45 },
            new GaugeData { Nivel = 15 },
            new GaugeData { Nivel = 75 },
            new GaugeData { Nivel = 15 },
            new GaugeData { Nivel = 35 },
            new GaugeData { Nivel = 15 },
            new GaugeData { Nivel = 10 }
        };
        #endregion

        public MainPage()
        {
            InitializeComponent();
            FormatChart();
            InitChart();
            SetUpTimer();
        }

        public void InitChart()
        {
            #region Lojas

            GraficoLojasRede.ItemsSource = dados1;

            var itemMapping = new ItemMapping
            {
                DataPointMember = DataPointMember.YValue,
                FieldName = "Nivel"
            };
            var seriesMapping = new SeriesMapping
            {
                SeriesDefinition = new BarSeriesDefinition
                {
                    ShowItemToolTips = true,
                    ItemStyle = Resources["CustomStyle"] as Style
                }
            };
            seriesMapping.SeriesDefinition.ShowItemLabels = false;
            seriesMapping.ItemMappings.Add(itemMapping);
            GraficoLojasRede.SeriesMappings.Add(seriesMapping);

            #endregion

            #region PDVS

            GraficoPDVS.ItemsSource = dados1;

            var itemMapping1 = new ItemMapping
            {
                DataPointMember = DataPointMember.YValue,
                FieldName = "Nivel"
            };
            var seriesMapping1 = new SeriesMapping
            {
                SeriesDefinition = new BarSeriesDefinition
                {
                    ShowItemToolTips = true,
                    ItemStyle = Resources["CustomStyle"] as Style
                }
            };
            seriesMapping1.SeriesDefinition.ShowItemLabels = false;
            seriesMapping1.ItemMappings.Add(itemMapping1);
            GraficoPDVS.SeriesMappings.Add(seriesMapping1);

            #endregion
        }

        public void FormatChart()
        {
            GraficoLojasRede.DefaultView.ChartArea.AxisY.AutoRange = false;
            GraficoLojasRede.DefaultView.ChartArea.AxisY.Title = "Status";
            GraficoLojasRede.DefaultView.ChartArea.AxisY.MaxValue = 100;
            GraficoLojasRede.DefaultView.ChartArea.AxisY.MinValue = 0;
            GraficoLojasRede.DefaultView.ChartArea.AxisY.Step = 50;
            GraficoLojasRede.DefaultView.ChartLegend.Background = new SolidColorBrush(Colors.Transparent);
            GraficoLojasRede.DefaultView.ChartLegend.BorderThickness = new Thickness(0);
            GraficoLojasRede.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;

            foreach (var item in dados1)
            {
                if (item.Nivel.Value < 35)
                    item.GradeColor = new SolidColorBrush(new Color() { A = 200, R = 200, G = 0, B = 0 });
                else if (item.Nivel.Value >= 35 && item.Nivel.Value <= 55)
                    item.GradeColor = new SolidColorBrush(new Color() { A = 200, R = 255, G = 77, B = 0 });
                else if (item.Nivel.Value > 55)
                    item.GradeColor = new SolidColorBrush(new Color() { A = 200, R = 0, G = 200, B = 0 });
            }

            GraficoPDVS.DefaultView.ChartLegend.BorderThickness = new Thickness(0);
            GraficoPDVS.DefaultView.ChartLegend.Background = new SolidColorBrush(Colors.Transparent);
            GraficoPDVS.DefaultView.ChartLegend.Header = "Status das Conexões";
            GraficoPDVS.DefaultView.ChartLegend.Items.Add(new ChartLegendItem() { Label = "Bom", Background = lime});
            GraficoPDVS.DefaultView.ChartLegend.Items.Add(new ChartLegendItem() { Label = "Médio", Background = lightYellow });
            GraficoPDVS.DefaultView.ChartLegend.Items.Add(new ChartLegendItem() { Label = "Ruim", Background = darkRed });
            GraficoPDVS.DefaultView.ChartLegendPosition = Telerik.Windows.Controls.Dock.Bottom;
            GraficoPDVS.DefaultView.ChartLegend.UseAutoGeneratedItems = false;
            GraficoPDVS.DefaultView.ChartArea.AxisY.MaxValue = 100;
            GraficoPDVS.DefaultView.ChartArea.AxisY.MinValue = 0;
            GraficoPDVS.DefaultView.ChartArea.AxisY.Step = 50;
            GraficoPDVS.DefaultView.ChartArea.AxisY.AutoRange = false;
        }

        private void SetUpTimer()
        {
            DispatcherTimer timer1 = new DispatcherTimer();
            timer1.Interval = TimeSpan.FromMilliseconds(5000);
            timer1.Tick += timer1_Tick;
            timer1.Start();
        }

        void timer1_Tick(object sender, EventArgs e)
        {
            nowTime = this.nowTime.AddMilliseconds(1000);

            GraficoLojasRede.ItemsSource = null;
            GraficoPDVS.ItemsSource = null;

            radialBar.Value = new Random().Next(10, 90);

            foreach (var item in dados1)
            {
                item.Nivel = new Random().Next(15, 85);
                System.Threading.Thread.Sleep(30);
            }

            radialBar2.Value = new Random().Next(10, 90);


            GraficoPDVS.ItemsSource = dados1;
            GraficoLojasRede.ItemsSource = dados1;
        }

    }
}

If required, i can explain this better. But the main question is: How to animate(or simulate animation) only with the item that has changed its value.

[Giuseppe]

Hello Fábio Witt jagnow,

Unfortunately the current version of the control does not support partial redraw of the series items. However, this feature is in our TODO list and will be added for one of the future versions of the control (you can cast your vote for it in our public issue tracking system to raise its priority).


Sincerely yours,
Freddie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.