Trackball with dynamic series

[Herald]

Hello

I have a cartesian chart that includes a barchart, which range is fixed and unique, and I have dynamic line series, which are user defined at run time (see attached screenshot).

Each lineseries is bound to a business objects that contains three properties: Color, which will be the color of the series, Code, which is a string that identifies the series, and Coll which is a collactiion of dates + decimals that make the series.

When I add the trackball functionality, I can see the bound values, but I would like to add the Code identifier, as otherwise user cannot tell which is which.

Thanks

Herald

------------------------------------------------------------------

 

<telerik:RadCartesianChart Grid.Row="1" Height="500" VerticalAlignment="Top">
            <telerik:RadCartesianChart.Resources>
                <DataTemplate x:Key="trackBallInfoTemplate">
                    <StackPanel Background="Wheat" Margin="3" Width="100">
                        <StackPanel Orientation="Horizontal">
                            <!--<TextBlock Text="{Binding Code}" FontWeight="Bold" />-->
                            <TextBlock Text="??? - " FontWeight="Bold" />
                            <TextBlock Text="{Binding DataPoint.Value, StringFormat=P2}" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </telerik:RadCartesianChart.Resources>
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartSelectionBehavior DataPointSelectionMode="None" />
                <!--<telerik:ChartTooltipBehavior/>-->
                <telerik:ChartTrackBallBehavior />
            </telerik:RadCartesianChart.Behaviors>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis GapLength="0.9" Visibility="Collapsed" ShowLabels="False" TickThickness="0" PlotMode="OnTicks"/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis SmartLabelsMode="None" LabelFormat="P0" LabelStyle="{DynamicResource RagGridViewAxisLabel}"/>
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider Source="{Binding LineSeries}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                        <telerik:CategoricalSeriesDescriptor CategoryPath="Date" ValuePath="Value" ItemsSourcePath="Coll">
                            <telerik:CategoricalSeriesDescriptor.Style>
                                <Style TargetType="telerik:LineSeries">            
                                    <Setter Property="StrokeThickness" Value="2" />
                                    <Setter Property="Stroke" Value="{Binding Color, Converter={StaticResource colorToSolidColorBrushValueConverter}}"></Setter>
                                    <Setter Property="TrackBallInfoTemplate" Value="{StaticResource trackBallInfoTemplate}"></Setter>
                                </Style>
                            </telerik:CategoricalSeriesDescriptor.Style>
                        </telerik:CategoricalSeriesDescriptor>
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>
            </telerik:RadCartesianChart.SeriesProvider>


            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorXLineDashArray="5 5" MajorYLineDashArray="5 5" MajorLinesVisibility="Y" />
            </telerik:RadCartesianChart.Grid>
            <telerik:RadCartesianChart.Series>
                <telerik:BarSeries CategoryBinding="Date" ValueBinding="Value" ItemsSource="{Binding MainFundChart}" TrackBallInfoTemplate="{StaticResource trackBallInfoTemplate}">
                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Width="10" Fill="Green" />
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>
                </telerik:BarSeries>
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>

--------------------------------------------

 

public class LineSeriesItem
    {
        public string Code { get; set; }
        public ObservableCollection<ChartItem> Coll { get; set; }
        public System.Windows.Media.Color Color { get; set; }
    }

 

public class ChartItem
    {
        public DateTime Date { get; set; }
        public Decimal Value { get; set; }
    }

[Martin Ivanov]

Hello Herald,

Thank you for the provided information. 

To achieve your requirement, you can use the TrackBallInfoTemplate, as you are already doing. The binding you are looking for is to the DataContext of the series which you can reach using the following syntax in the template:

<TextBlock Text="{Binding DataPoint.Presenter.DataContext.Code}" FontWeight="Bold" />

The Presenter property in the binding path points to the series object which is hosting the data point. Its DataContext is the LineSeriesItem object which you can use to get the code.

Can you please try this approach on your side and let me know if it helps?

Regards,
Martin Ivanov
Progress Telerik

[Herald]

Great, This solved the problem. Thanks.

However I have a final fine-tuning ask on this.

The BarSeries is bound to the same type as the dynamic LineSeries (not the same object, two different instances. But the same type). I was thinking that if the TrackballInfoTemplate is the same for both BarSeries and Line Series, they would show the same in the Trackball, but this does not seem to be the case. See in the image attached. The first entry is the one for the BarSeries, and it is missing the Code part; the subsequent entries are from LineSeries and they show just fine, as you instructed.

How can I get this to work with the DarSeries as well?

 

Updates Xaml

-----------------

        <telerik:RadCartesianChart Grid.Row="1" Height="500" VerticalAlignment="Top">
            <telerik:RadCartesianChart.Resources>
                <DataTemplate x:Key="trackBallInfoTemplate">
                    <StackPanel Background="Wheat" Margin="3" Width="100">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding DataPoint.Presenter.DataContext.Code}" FontWeight="Bold" Margin="5 0 10 0"/> 
                            <TextBlock Text="{Binding DataPoint.Value, StringFormat=P2}" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </telerik:RadCartesianChart.Resources>
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartSelectionBehavior DataPointSelectionMode="None" />
                <telerik:ChartTrackBallBehavior />
            </telerik:RadCartesianChart.Behaviors>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis GapLength="0.9" Visibility="Collapsed" ShowLabels="False" TickThickness="0" PlotMode="OnTicks"/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis SmartLabelsMode="None" LabelFormat="P0" LabelStyle="{DynamicResource RagGridViewAxisLabel}"/>
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider Source="{Binding LineSeries}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                        <telerik:CategoricalSeriesDescriptor CategoryPath="Date" ValuePath="Value" ItemsSourcePath="Coll">
                            <telerik:CategoricalSeriesDescriptor.Style>
                                <Style TargetType="telerik:LineSeries">            
                                    <Setter Property="StrokeThickness" Value="2" />
                                    <Setter Property="Stroke" Value="{Binding Color, Converter={StaticResource colorToSolidColorBrushValueConverter}}"></Setter>
                                    <Setter Property="TrackBallInfoTemplate" Value="{StaticResource trackBallInfoTemplate}"></Setter>
                                </Style>
                            </telerik:CategoricalSeriesDescriptor.Style>
                        </telerik:CategoricalSeriesDescriptor>
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>
            </telerik:RadCartesianChart.SeriesProvider>
            
            
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorXLineDashArray="5 5" MajorYLineDashArray="5 5" MajorLinesVisibility="Y" />
            </telerik:RadCartesianChart.Grid>
            <telerik:RadCartesianChart.Series>
                <telerik:BarSeries CategoryBinding="Date" ValueBinding="Value" ItemsSource="{Binding MainFundChart.Coll}" TrackBallInfoTemplate="{StaticResource trackBallInfoTemplate}">
                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Width="10" Fill="Green" />
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>
                </telerik:BarSeries>
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>

 

----------------------------------------------

[Martin Ivanov]

Hello Herald,

It looks like the binding to the Code property doesn't return a value or the property cannot be found. If the property is not found for some reason, you will see an error printed in the Output pane of Visual Studio which will tell you more about this. Also, you can double check if the Code property of the objects in the MainFundChart.Coll contains a value.  

Regards,
Martin Ivanov
Progress Telerik

[Herald]

Hello Martin,

I thank you and much appreciate your help with this issue.

I think I would be best explain it if I attach a sample app that shows the issue I am having. 

You can access the sample app here: [link removed]

 

When you run it, you will see that the Trackball includes Labels and Values for the LineSeries ("A", "B", "C"), but only the Value for the BarSeries. The BarSeries Label, ("X"), it is blank.

Thanks

Herald

[Martin Ivanov]

Hello Herald,

I've checked the project. The Output pane of the Visual Studio is showing a binding error that indicates what happens. Basically, the BarSeries doesn't show its code in the trackball because its DataContext is inherited from the Window which is a MainViewModel object. The LineSeries elements have DataContext set to LineSeriesItem which comes automatically from the items in the Source of the SeriesProvider. However, the separately defined BarSeries (at the bottom of the chart) doesn't specify a different DataContext of the main one.

To resolve this, ensure that the BarSeries has a proper DataContext too. I guess that should be the LineSeriesItem object stored in the MainFundChart of MainViewModel. If that is the case, here you can use the following XAML in order to correct the issue:

<telerik:BarSeries DataContext="{Binding MainFundChart}" CategoryBinding="Date" ValueBinding="Value" ItemsSource="{Binding Coll}" TrackBallInfoTemplate="{StaticResource trackBallInfoTemplate}">			   

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik

[Martin Ivanov]

Hello Herald,

I also removed the link to the project from your reply because the shared project contained licensed version of the Telerik dlls.

Regards,
Martin Ivanov
Progress Telerik

[Herald]

Ah, now it makes perfect sense!

 

Many thanks

Herald