CategoricalAxis: Set the Label from a DataPoint.DataItem

[Barry]

Hello, 

I have been trying to figure out how I can set the Label on a Categorical Axis to pull from my data object.  After hours of searching I was not able to find any examples or answers to this.

I have a set of objects which I am binding to for the series and plot points.  

public class UiDynamicChartSeries
{
    public string Name { get; set; }
    public List<UiDynamicChartPlot> ChartPlots { get; set; }
}

public class UiDynamicChartPlot
{
    public string PlotHeader { get; set; }
    public string CategoryHeader { get; set; }
    public object CategoryAxisLabel { get; set; }
    public string ValueFormat { get; set; }
    public object PlotCategory { get; set; }
    public object PlotValue { get; set; }
}

In the XAML, the PlotCategory binds the category values on the chart, whereas the PlotValue binds the values on the chart.

Here is the XAML in which I am binding (note: I did not include all of the various resources since those already work)

<telerik:RadCartesianChart x:Name="DynamicChartView" Grid.Row="1" Grid.Column="0"
                           Palette="{StaticResource ChartPalette}"
                           VerticalZoomRangeEnd="{Binding ChartVerticalZoomRangeEnd}"
                           VerticalZoomRangeStart="0">
    <telerik:RadCartesianChart.Style>
        <Style TargetType="{x:Type telerik:RadCartesianChart}">
            <Setter Property="TrackBallLineStyle" Value="{StaticResource TrackBallLineChartView}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding ShowTrackInfo}" Value="false">
                    <Setter Property="TrackBallLineStyle" Value="{x:Null}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </telerik:RadCartesianChart.Style>
    <telerik:RadCartesianChart.TrackBallInfoStyle>
        <Style TargetType="{x:Type telerik:TrackBallInfoControl}">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock FontSize="14" Foreground="{StaticResource DarkSteelBlueBrush}" Style="{StaticResource TextBlockLabelCentered}" Text="{Binding}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerik:RadCartesianChart.TrackBallInfoStyle>
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartPanAndZoomBehavior DragMode="Pan" MouseWheelMode="PanHorizontally" ZoomMode="Both" />
        <telerikChartView:ChartTrackBallBehavior ShowIntersectionPoints="{Binding ShowIntersectionPoints}" ShowTrackInfo="{Binding ShowTrackInfo}" SnapMode="ClosestPoint" TrackInfoUpdated="ChartTrackBallBehaviorOnTrackInfoUpdated" />
    </telerik:RadCartesianChart.Behaviors>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis Title="{Binding LineChartDynamicDataSets.CategoryTitle}" LabelFitMode="Rotate" LabelRotationAngle="-65" SmartLabelsMode="SmartStep" TitleTemplate="{StaticResource DataTemplateChartTitle}">
            <telerik:CategoricalAxis.LabelTemplate>
                <DataTemplate>

                    <!-- This gives me the Date on the Event, what I want to do -->
                    <TextBlock Text="{Binding DataPoint.DataItem.CategoryAxisLabel}" />

                    <!-- This gives me the Event Number, not desired -->
                    <TextBlock Text="{Binding}" />

                </DataTemplate>
            </telerik:CategoricalAxis.LabelTemplate>
        </telerik:CategoricalAxis>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Title="{Binding LineChartDynamicDataSets.ValueTitle}" MajorStep=".25" SmartLabelsMode="SmartStep" TitleTemplate="{StaticResource DataTemplateChartTitle}" />
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.Grid>
        <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
    </telerik:RadCartesianChart.Grid>
    <telerik:RadCartesianChart.SeriesProvider>
        <telerik:ChartSeriesProvider Source="{Binding ChartData}">
            <telerik:ChartSeriesProvider.SeriesDescriptors>
                <telerik:CategoricalSeriesDescriptor CategoryPath="PlotCategory" ItemsSourcePath="ChartPlots" ValuePath="PlotValue">
                    <telerik:CategoricalSeriesDescriptor.Style>
                        <Style TargetType="{x:Type telerikChartView:LineSeries}">
                            <Setter Property="LegendSettings" Value="{Binding Name, Converter={StaticResource StringToChartLegendSettingsConverter}}" />
                            <Setter Property="TrackBallInfoTemplate" Value="{StaticResource TrackBallInfoTemplate}" />
                            <Setter Property="TrackBallTemplate" Value="{StaticResource TrackBallTemplate}" />
                        </Style>
                    </telerik:CategoricalSeriesDescriptor.Style>
                </telerik:CategoricalSeriesDescriptor>
            </telerik:ChartSeriesProvider.SeriesDescriptors>
        </telerik:ChartSeriesProvider>
    </telerik:RadCartesianChart.SeriesProvider>
</telerik:RadCartesianChart>

However, instead of the PlotCategory being used for the labels, I want the CategoryAxisLabel to be used instead.  The reasoning I need to do this is that in my data I have multiple events which happen on the same date.  When I originally plotted the chart all of the data points were plotted on the same day.  For a line chart that looked horrible.  So to change this I now plot to the events which gives me the lines desired, but now I want to display the date for the label and not the event number.  I have not been able to find a way to do this, and it is the last hurdle I need to overcome.

Thank you

[Tanya]

Hi Barry,

The axis of the RadChartView doesn't support a direct binding of the label's text to a property in the view model. To achieve the desired goal, you can create an attached property which you can set to the Label control. Then, in the callback handler, you can get the chart using the GetVisualParent<T> method of the ParentOfTypeExtensions class and find the item which correspondents to the current category. 

I am attaching a simple example showing how you can implement and use the attached property for the label. Hope it will help you implement the requirement.

Regards,
Tanya
Telerik by Progress

[Barry]

Hello Tanya,

Thank you so much for the example, this is exactly what we were looking for.  I was able to use the example to generate the code needed to switch the label.