This is a migrated thread and some comments may be shown as answers.

Single Bar Animation

1 Answer 43 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Fábio Witt jagnow
Top achievements
Rank 2
Fábio Witt jagnow asked on 13 Apr 2010, 10:02 PM
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.



1 Answer, 1 is accepted

Sort by
0
Accepted
Giuseppe
Telerik team
answered on 14 Apr 2010, 10:24 AM
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.
Tags
Chart
Asked by
Fábio Witt jagnow
Top achievements
Rank 2
Answers by
Giuseppe
Telerik team
Share this question
or