Labels not udpdated on chartview with label binding

[Guillaume]

Hi,

I've created a ChartView with a label bindind based on the code that I've found here https://www.telerik.com/forums/categoricalaxis-set-the-label-from-a-datapoint-dataitem.

 

My problem is that I'm not able to have the label updated when I change the set of data. The graphic is correctly updated but not the label.
I suspect an issue around the Attached Propery but I'm not able to find where is my issue. Is a way to force the update of the AxisLabel ?

Here is the code that I've changed in the code found in the previous link.

Thanks for your help.

<Window x:Class="Label_Binding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:local="clr-namespace:Label_Binding"
        mc:Ignorable="d"
        Title="MainWindow" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
        <telerik:RadCartesianChart Grid.Row="0">

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis >
                    <telerik:CategoricalAxis.LabelTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <telerik:Label local:ChartUtilities.AxisLabelContent="{Binding}"  />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:CategoricalAxis.LabelTemplate>
                </telerik:CategoricalAxis>
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Minimum="0" Maximum="100" MajorStep="20" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:BarSeries CategoryBinding="Category" ValueBinding="Level" ItemsSource="{Binding FilteredData}" CombineMode="Stack">
                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Fill="{Binding DataItem.FillColor}"/>
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>
                </telerik:BarSeries>
                <!--<telerik:StepLineSeries CategoryBinding="Category" ValueBinding="MaxLevel" ItemsSource="{Binding OctaveData}" ShowLabels="True" Stroke="DarkGray" />-->
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>
        <telerik:RadButton Grid.Row="1" Content="Change Source" Click="RadButton_Click"/>
    </Grid>
</Window>

 

using System.Windows;

namespace Label_Binding
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        ViewModel vm;
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = vm = new ViewModel();
        }

        private void RadButton_Click(object sender, RoutedEventArgs e)
        {
            vm.ChangeData();
        }
    }
}

 

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Windows.Media;

namespace Label_Binding
{
    public class ViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<ChartData> Data { get; set; }
        public IEnumerable<ChartData> FilteredData { get; set; }

        Random rnd = new Random();
        private Boolean isChanged;

        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

        public ViewModel()
        {
            Data = new ObservableCollection<ChartData>();
            GetData();
            isChanged = false;
            FilteredData = Data.Where(n => n.Index < 5);
        }

        public void ChangeData()
        {
            if (!isChanged)
            {
                FilteredData = Data.Where(n => n.Index >= 5);
            }
            else
            {
                FilteredData = Data.Where(n => n.Index < 5);
            }
            isChanged = !isChanged;
            RaisePropertyChanged("FilteredData");
        }

        private void GetData()
        {
            for (int i = 0; i < 5; i++)
            {
                ChartData point = new ChartData();
                point.Index = i;
                point.Category = "Cat "+i;
                point.Average = rnd.Next(10,60);
                point.Level = rnd.Next(10,60);
                point.FillColor = new SolidColorBrush(Colors.Bisque);
                Data.Add(point);
            }
            for (int i = 0; i < 5; i++)
            {
                ChartData point = new ChartData();
                point.Index = i + 5;
                point.Category = "Cat " + i;
                point.Average = rnd.Next(10, 60);
                point.Level = rnd.Next(10, 60);
                point.FillColor = new SolidColorBrush(Colors.Bisque);
                Data.Add(point);
            }
        }
    }
}

 

 

[Martin Ivanov]

Hello Guillaume,

The labels are not updated because the Binding used with the attached property is never updated. The LabelTemplate evaluates once the axis range changes. When you change the data, the range of the axis doesn't change which means that the LabelTemplate won't reload and also the Binding value doesn't change. To achieve your requirement, you can reset the LabelTemplate after the data is changed.

private void RadButton_Click(object sender, RoutedEventArgs e)
{
	vm.ChangeData();
	var template = this.categoricalAxis.LabelTemplate;
	this.categoricalAxis.LabelTemplate = null;
	this.categoricalAxis.LabelTemplate = template;
}

I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

[Guillaume]

Hello Martin,

Thanks for your answer.
This solved my problem.

Regards,
Guillaume