ChartView RadCartesianChart LabelDefinitions

[Daniel]

i am facing binding issues on RadCartesianChart LabelDefinitions .Please see the source and suggest me some ideas to rectify this problem 

 

<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="Dashboard.Views.Controls.GlucoseChart" Height="auto" Width="auto" acb:CommandBehavior.Event="Unloaded" acb:CommandBehavior.Command="{Binding CloseCommand}" DataContext="{Binding Path=GlucoseReadingsViewModel, Source={StaticResource Locator}}" 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:local="clr-namespace:Dashboard"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
             xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
             xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
             xmlns:chartEngine="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
             xmlns:acb="clr-namespace:AttachedCommandBehavior;assembly=AttachedCommandBehavior">
    <UserControl.Resources>
        <local:GlucoseActivityTypeToImageSelector x:Key="GlucoseActivityTypeToImageSelector" />
    </UserControl.Resources>
    <Border Margin="0" CornerRadius="5" BorderThickness="0" Background="{DynamicResource bg_chart}">
        <Grid Margin="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="{DynamicResource HeaderHeight}" />
                <RowDefinition Height="*" />
                <RowDefinition Height="0" />
            </Grid.RowDefinitions>
            <Grid Grid.Column="0" Grid.Row="0">
                <Border Style="{StaticResource Border_SubHeader}" />
                <TextBlock TextWrapping="Wrap" Text="Blood Glucose Chart" Style="{StaticResource TxtBlock_ChartTitle}" />
            </Grid>
            <Grid Grid.Column="0" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Grid Name="PART_ChartTitle" Grid.Column="1" Grid.Row="0" />
                <Grid Name="PART_YAxisArea" Grid.Column="0" Grid.Row="1" />
                <Grid Name="PART_XAxisArea" Grid.Column="1" Grid.Row="2" />
                <Grid Name="PART_BottomLegendArea" Grid.Column="1" Margin="10" Grid.Row="3">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0">
                        <TextBlock Text="Legend" />
                    </Grid>
                    <StackPanel Orientation="Horizontal" Grid.Row="1">
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Width="10" Margin="5" Height="10" Fill="{Binding Stroke, ElementName=LineSeries1}" />
                            <TextBlock Text="{Binding SeriesLabel}" />
                        </StackPanel>
                    </StackPanel>
                </Grid>
                <Grid Name="PART_RightLegendArea" Grid.Column="2" Grid.Row="1" />
                <chart:ChartDataSource Name="ChartDataSource1" SamplingUnit="Minute" ItemsSource="{Binding Readings}" />
                <chart:RadCartesianChart Name="PART_ChartArea" Grid.Row="1" Grid.Column="1">
                    <chart:RadCartesianChart.Resources>
                        <DataTemplate x:Key="BeforeMealLabel">
                            <StackPanel Orientation="Vertical">
                                <Image Width="15" Height="15" Source="/Dashboard;component/Images/before_meal.png" />
                                <Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
                                    <TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF"  />
                                </Border>
                            </StackPanel>
                        </DataTemplate>
                        <DataTemplate x:Key="AfterMealLabel">
                            <StackPanel Orientation="Vertical">
                                <Image Width="15" Height="15" Source="/Dashboard;component/Images/after_meal.png" />
                                <Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
                                    <TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF"  />
                                </Border>
                            </StackPanel>
                        </DataTemplate>
                        <DataTemplate x:Key="AfterExerciseLabel">
                            <StackPanel Orientation="Vertical">
                                <Image Width="15" Height="15" Source="/Dashboard;component/Images/after_exercise.png" />
                                <Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
                                    <TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF"  />
                                </Border>
                            </StackPanel>
                        </DataTemplate>
                        <DataTemplate x:Key="AfterMedicationLabel">
                            <StackPanel Orientation="Vertical">
                                <Image Width="15" Height="15" Source="/Dashboard;component/Images/after_medication.png" />
                                <Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
                                    <TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF"  />
                                </Border>
                            </StackPanel>
                        </DataTemplate>
                        <DataTemplate x:Key="FastingLabel">
                            <StackPanel Orientation="Vertical">
                                <Image Width="15" Height="15" Source="/Dashboard;component/Images/fasting.png" />
                                <Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
                                    <TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF"  />
                                </Border>
                            </StackPanel>
                        </DataTemplate>
                        <DataTemplate x:Key="OthersLabel">
                            <StackPanel Orientation="Vertical">
                                <Image Width="15" Height="15" Source="/Dashboard;component/Images/others.png" />
                                <Border Padding="2,0,2,0" Background="{Binding Stroke, ElementName=LineSeries1}">
                                    <TextBlock HorizontalAlignment="Center" TextBlock.Foreground="#FFFFFFFF"  />
                                </Border>
                            </StackPanel>
                        </DataTemplate>
                        <DataTemplate x:Key="PointTemplate">
                            <StackPanel Orientation="Vertical">
                                <Ellipse Height="8" Width="8" Fill="#FFFFFFFF" Stroke="{Binding Stroke, ElementName=LineSeries1}" />
                            </StackPanel>
                        </DataTemplate>
                    </chart:RadCartesianChart.Resources>
                    <telerik:RadCartesianChart.Behaviors>
                        <chartView:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal" />
                        <chartView:ChartTrackBallBehavior ShowTrackInfo="True" ShowIntersectionPoints="True" />
                    </telerik:RadCartesianChart.Behaviors>
                    <chart:RadCartesianChart.TooltipTemplate>
                        <DataTemplate>
                            <Border Background="#FFFFFFFF" BorderBrush="#FF000000" BorderThickness="1" Padding="5" CornerRadius="3">
                                <StackPanel Orientation="Vertical">
                                    <TextBlock>
                    <Run Text="Timestamp: " /> <Run Text="{Binding Category, StringFormat={}{0:dd-MMM-yy hh:mm tt}}" /></TextBlock>
                                    <TextBlock>
                    <Run Text="Blood Glucose: " /> <Run Text="{Binding DataItem.Glucose, StringFormat={}{0:N2}}" /> <Run Text="{Binding DataItem.Unit}" /></TextBlock>
                                    <TextBlock>
                    <Run Text="Activity: " /> <Run Text="{Binding DataItem.Activity}" /></TextBlock>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </chart:RadCartesianChart.TooltipTemplate>
                    
                    
                    <chart:RadCartesianChart.HorizontalAxis>
                        <chartView:DateTimeContinuousAxis LabelFormat="dd-MMM&#xA;HH:mm" LabelFitMode="MultiLine" LabelInterval="2" PlotMode="OnTicksPadded">
                            <chartView:DateTimeContinuousAxis.PanZoomBarStyle>
                                <Style TargetType="{x:Type chartView:PanZoomBar}">
                                    <Setter Property="FrameworkElement.Height" Value="30" />
                                </Style>
                            </chartView:DateTimeContinuousAxis.PanZoomBarStyle>
                        </chartView:DateTimeContinuousAxis>
                    </chart:RadCartesianChart.HorizontalAxis>
                    <chart:RadCartesianChart.VerticalAxis>
                        <chartView:LinearAxis Minimum="{Binding YAxisMin}" Maximum="{Binding YAxisMax}" Title="{Binding YAxisLabel}" />
                    </chart:RadCartesianChart.VerticalAxis>
                    <chart:RadCartesianChart.Series>
                        <chartView:LineSeries Name="LineSeries1" Stroke="{StaticResource LineChartColor1}"  StrokeThickness="2" ShowLabels="True" CategoryBinding="Timestamp" ValueBinding="Glucose" PointTemplate="{StaticResource PointTemplate}" ItemsSource="{Binding Readings}">
                            <chartView:LineSeries.LabelDefinitions>
                                <chartView:ChartSeriesLabelDefinition  TemplateSelector="{StaticResource GlucoseActivityTypeToImageSelector}" Margin="20,0,0,0" />
                                <chartView:ChartSeriesLabelDefinition Margin="20,0,0,0"  
                                                >
                                    <chartView:ChartSeriesLabelDefinition.Template>
                                        <DataTemplate>
                                            <StackPanel>
                                                <TextBlock Text="{Binding DataItem.Glucose}" 
                                       HorizontalAlignment="Center"
                                       Foreground="Black" />
                                                
                                            </StackPanel>
                                        </DataTemplate>
                                    </chartView:ChartSeriesLabelDefinition.Template>
                                </chartView:ChartSeriesLabelDefinition>





                            </chartView:LineSeries.LabelDefinitions>
                            
                            
                            
                            <chartView:LineSeries.TrackBallInfoTemplate>
                                <DataTemplate>
                                    <StackPanel Background="#00FFFFFF">
                                        <TextBlock>
                      <Run Text="Timestamp: " /> <Run Text="{Binding DataPoint.Category, StringFormat={}{0:dd-MMM-yy hh:mm tt}}" /></TextBlock>
                                        <TextBlock>
                      <Run Text="Blood Glucose: " /> <Run Text="{Binding DataPoint.Value, StringFormat={}{0:N2}}" /> <Run Text="{Binding DataPoint.DataItem.Unit}" /></TextBlock>
                                        <TextBlock>
                      <Run Text="Activity: " /> <Run Text="{Binding DataPoint.DataItem.Activity}" /></TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </chartView:LineSeries.TrackBallInfoTemplate>
                            
                            
                        </chartView:LineSeries>
                    </chart:RadCartesianChart.Series>
                </chart:RadCartesianChart>
            </Grid>
            <Grid Grid.Column="0" Grid.Row="2">
                <telerik:RadChart Name="radChart" Margin="0" Background="#00FFFFFF" ItemsSource="{Binding Readings}">
                    <telerik:RadChart.DefaultView>
                        <telerik:ChartDefaultView ChartLegendPosition="Bottom">
                            <telerik:ChartDefaultView.ChartLegend>
                                <telerik:ChartLegend Name="chartLegend" Margin="0" Header="Legend" UseAutoGeneratedItems="True" BorderThickness="0" Background="#00FFFFFF" />
                            </telerik:ChartDefaultView.ChartLegend>
                            <telerik:ChartDefaultView.ChartArea>
                                <telerik:ChartArea LegendName="chartLegend">
                                    <telerik:ChartArea.ZoomScrollSettingsX>
                                        <telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom" RangeStart="0" RangeEnd="1" MinZoomRange="1" PropertyChanged="ZoomScrollSettingsX_PropertyChanged" />
                                    </telerik:ChartArea.ZoomScrollSettingsX>
                                    <telerik:ChartArea.AxisX>
                                        <telerik:AxisX IsDateTime="True" ShouldScaleStepOnZoom="True" StepLabelLevelCount="1" Step="1" LabelStep="1" LayoutMode="Between" AutoRange="True" LabelRotationAngle="0" DefaultLabelFormat="dd-MMM&#xA;HH:mm" />
                                    </telerik:ChartArea.AxisX>
                                    <telerik:ChartArea.AxisY>
                                        <telerik:AxisY AutoRange="True" Title="{Binding YAxisLabel}" />
                                    </telerik:ChartArea.AxisY>
                                </telerik:ChartArea>
                            </telerik:ChartDefaultView.ChartArea>
                        </telerik:ChartDefaultView>
                    </telerik:RadChart.DefaultView>
                    <telerik:RadChart.SamplingSettings>
                        <telerik:SamplingSettings SamplingThreshold="0" />
                    </telerik:RadChart.SamplingSettings>
                    <telerik:RadChart.SeriesMappings>
                        <telerik:SeriesMapping LegendLabel="{Binding SeriesLabel}">
                            <telerik:SeriesMapping.SeriesDefinition>
                                <telerik:LineSeriesDefinition ShowItemToolTips="True" ItemToolTipFormat="Date: #X{dd-MMM-yy hh:mm tt}&#xA;Value: #Y{###.##}" />
                            </telerik:SeriesMapping.SeriesDefinition>
                            <telerik:ItemMapping DataPointMember="XValue" FieldName="Timestamp" />
                            <telerik:ItemMapping DataPointMember="YValue" FieldName="Glucose" />
                        </telerik:SeriesMapping>
                    </telerik:RadChart.SeriesMappings>
                </telerik:RadChart>
            </Grid>
        </Grid>
    </Border>
</UserControl>

[Dinko | Tech Support Engineer]

Hi Daniel,

Thank you for the provided information. 

Looking at the attached picture we are assuming that the Binding on the labels of the data point is not working. We have created a sample project using the provided code snippet. Basically, it is working on our side. Can you take a look and modified the project to reproduce the mentioned behavior if we are missing some additional code. This way we can further test it and examine the issue.

In addition, in the provided code snippet we can see that you have used the old RadChart. For new development, we urge you not to use the old RadChart but use the new RadChartView. The new is actually a set of controls - RadCartesianChart, RadPieChart, RadPolarChart, ChartDataSource. It is much faster, very flexible, resolves almost all limitations the old control had and is pretty easy to set up. You can read about the differences between the components in the RadChart vs. RadChartView help article. 

Regards,
Dinko
Telerik by Progress