Single Bar Animation

2 posts, 1 answers
  1. Fábio Witt jagnow
    Fábio Witt jagnow avatar
    14 posts
    Member since:
    Mar 2010

    Posted 13 Apr 2010 Link to this post

    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.



  2. Answer
    Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 14 Apr 2010 Link to this post

    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.
Back to Top