[Solved] ChartTrackBallBehavior.TrackInfoTemplate and RadCartesianChart.SeriesProvider

[Erez]

Hi.

I'm trying to add a ChartTrackBallBehavior.TrackInfoTemplate to a LineSeries created by a RadCartesianChart.SeriesProvider.

Previous posts in the subject suggested to add the TrackInfoTemplate to the Series, thus as I'm using the ChartSeriesProvider I added it within the ChartSeriesProvider XAML block, but for no use. The ChartTrackBallBehavior still displays the default template.

Is there a limitation here or am I doing something wrong?

<telerikChart:RadCartesianChart.SeriesProvider >
    <telerikChart:ChartSeriesProvider Source="{Binding Trends}" x:Name="provider">
        <telerikChart:ChartSeriesProvider.SeriesDescriptors>
            <local:TrendChartSeriesDescriptor ItemsSourcePath="Items" ValuePath="Value" CategoryPath="DateTime">
                <local:TrendChartSeriesDescriptor.Style>
                    <Style TargetType="telerikChart:LineSeries">
                        <!-- Binding from code as Binding is not supported for Setter in WinRT... -->
                    </Style>
                </local:TrendChartSeriesDescriptor.Style>
            </local:TrendChartSeriesDescriptor>
        </telerikChart:ChartSeriesProvider.SeriesDescriptors>
        <telerikChart:ChartTrackBallBehavior.TrackInfoTemplate>
            <DataTemplate>
                <TextBlock Text="test" Foreground="Brown"/>
            </DataTemplate>
        </telerikChart:ChartTrackBallBehavior.TrackInfoTemplate>

    </telerikChart:ChartSeriesProvider>
</telerikChart:RadCartesianChart.SeriesProvider>
<telerikChart:RadCartesianChart.Behaviors>
    <telerikChart:ChartTrackBallBehavior InfoMode="Multiple" ShowInfo="True" ShowIntersectionPoints="True" SnapMode="ClosestPoint"/>
    </telerikChart:ChartTrackBallBehavior>
</telerikChart:RadCartesianChart.Behaviors>

Thank you,
Erez

[Ivaylo Gergov]

Hi,

Yes, you can set the ChartTrackBallBehavior.TrackInfoTemplate per series basis. In this case you can define it in the Style that targets the LineSeries so it will look like this:

<local:TrendChartSeriesDescriptor.Style>
     <Style TargetType="telerikChart:LineSeries">
         <Setter Property="telerikChart:ChartTrackBallBehavior.TrackInfoTemplate">
             <Setter.Value>
                 <DataTemplate>
                     <TextBlock Text="test" Foreground="Brown"/>
                 </DataTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </local:TrendChartSeriesDescriptor.Style>

Let me know if you need further assistance.


Regards,
Ivaylo Gergov
Telerik

 

 

[Erez]

Thank you, but than again, I will not be able to bind information as you cannot bind into a Setter.Value.

So my only option would be to set the content from code, wouldn't it?

[Erez]

Actually, if I use the Setter to set a StaticResource of a DataTemplate, I can bind within that template and that does solve the problem.

Thank you.

[dxpack]

I can't find a solution to displaying custom track ball info when using a ChartSeriesProvider.

For a custom track ball, documentation states to set the ShowTrackInfo to False in the ChartTrackBallBehavior. This works when not using a ChartSeriesProvider. When I change the single series to a ChartSeriesProvider with 2 series, there is no track ball info displayed. If I then change ShowTrackInfo to True, the track ball info is displayed, but using the non-custom style (default style) with my custom DataTemplate rendered inside the default style.

 

Attached are 3 screenshots of the results:

single_series_ShowTrackInfoFalse.jpg -> shows the single series custom trackball info, ShowTrackInfo behavior set to False

multi_series_ShowTrackInfoFalse.jpg -> shows the ChartSeriesProvider w/ 2 series, ShowTrackInfo behavior set to False (custom track info not visible)

multi_series_ShowTrackInfoTrue.jpg -> shows the ChartSeriesProvider w/ 2 series, ShowTrackInfo behavior set to True (default track info w/ custom template visually embedded)

And then 2 mock-ups of my primary goal and an alternative:

goal_primary.jpg -> ChartSeriesProvider with 2 custom trackball infos displayed, one for each data point.

goal_alternate.jpg -> ChartSeriesProvider with 1 custom trackball info displayed.

 

<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.Resources>
        <DataTemplate x:Key="seriesTrackBallTemplate">
            <Grid>
                <Border Margin="140,0,0,0" Padding="5,2" BorderThickness="1" CornerRadius="0" Background="White" BorderBrush="Green" VerticalAlignment="Top">
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <TextBlock Text="Avg. of " FontSize="11" Foreground="Green" TextAlignment="Right" />
                            <TextBlock Text="{Binding Path=DataPoint.Value}" FontSize="11" Foreground="Green" TextAlignment="Left" />
                            <TextBlock Text=" " FontSize="11" Foreground="Green" TextAlignment="Right" />
                            <TextBlock Text="{Binding Path=DataContext.ProjectMeasurement, RelativeSource={RelativeSource AncestorType=UserControl, AncestorLevel=1}}" FontSize="11" Foreground="Green" TextAlignment="Right" />
                            <TextBlock Text=" on " FontSize="11" Foreground="Green" TextAlignment="Right" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <TextBlock Text="{Binding Path=DataPoint.Category, StringFormat=M/d/yyyy}" FontSize="11" Foreground="Green" TextAlignment="Right" />
                            <TextBlock Text=" at " FontSize="11" Foreground="Green" TextAlignment="Right" />
                            <TextBlock Text="{Binding Path=DataPoint.Category, StringFormat=HH:mm}" FontSize="11" Foreground="Green" TextAlignment="Right" />
                        </StackPanel>
                    </StackPanel>
                </Border>
                <Rectangle RadiusX="5" RadiusY="5" Width="10" Height="10" Stroke="Green" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Grid>
        </DataTemplate>
    </telerik:RadCartesianChart.Resources>

    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartTrackBallBehavior ShowTrackInfo="False" SnapMode="ClosestPoint" ShowIntersectionPoints="True"/>
    </telerik:RadCartesianChart.Behaviors>

    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis x:Name="YAxis" Minimum="{Binding MinimumSpeed}" Maximum="{Binding MaximumSpeed}" IsTabStop="False"/>
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:DateTimeContinuousAxis x:Name="XAxis" LabelFormat="M/dd HH:mm" LabelInterval="6" IsStepRecalculationOnZoomEnabled="True" IsTabStop="False" />
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.SeriesProvider>
        <telerik:ChartSeriesProvider Source="{Binding ChartData2}">
            <telerik:ChartSeriesProvider.SeriesDescriptors>

                <telerik:CategoricalSeriesDescriptor ValuePath="Value" CategoryPath="Category" CollectionIndex="0">
                    <telerik:CategoricalSeriesDescriptor.Style>
                        <Style TargetType="telerik:LineSeries">
                            <Setter Property="StrokeThickness" Value="1"/>
                            <Setter Property="IsTabStop" Value="False"/>
                            <Setter Property="Stroke" Value="Green"/>
                            <Setter Property="TrackBallInfoTemplate" Value="{StaticResource seriesTrackBallTemplate}"/>
                        </Style>
                    </telerik:CategoricalSeriesDescriptor.Style>
                </telerik:CategoricalSeriesDescriptor>

                <telerik:CategoricalSeriesDescriptor ValuePath="Value" CategoryPath="Category" CollectionIndex="1">
                    <telerik:CategoricalSeriesDescriptor.Style>
                        <Style TargetType="telerik:LineSeries">
                            <Setter Property="StrokeThickness" Value="1"/>
                            <Setter Property="IsTabStop" Value="False"/>
                            <Setter Property="Stroke" Value="Orange"/>
                        </Style>
                    </telerik:CategoricalSeriesDescriptor.Style>
                </telerik:CategoricalSeriesDescriptor>

            </telerik:ChartSeriesProvider.SeriesDescriptors>
        </telerik:ChartSeriesProvider>
    </telerik:RadCartesianChart.SeriesProvider>

    <!--<telerik:LineSeries Stroke="Green" StrokeThickness="1" CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding ChartData}" TrackBallTemplate="{StaticResource seriesTrackBallTemplate}" IsTabStop="False"/>-->

</telerik:RadCartesianChart>

 

[Ivaylo Gergov]

Hi,

I was not able to reproduce the issue using the provided sample code. Could you please prepare a sample project to demonstrate this strange behavior, so I can further investigate?

I am looking forward to your reply.
Regards,
Ivaylo Gergov
Telerik

[dxpack]

Sorry, this is the wrong forum, but the topic is most related to the issue I'm having. I'm using the WPF UI toolkit.

I have prepared 4 example projects show casing the issue (one uses CartesianChartAnnotations instead of TrackBallInfo). How can I get those to you? Can't attach ZIP files here.

SingleSeriesCustomFalse

This is a single series (no ChartSeriesProvider) with a custom TrackBallInfo DataTemplate, with ShowTrackInfo set to False. This structure is described in Telerik documentation here: Specifying a custom TrackBallTemplate

MultiSeriesSlowAnnotations
You can see the mouse tracking is very slow. The project I'm working on regularly has over 3000 data points. Additionally, the annotations are cut off at the edges of the chart view area - TrackBalls (custom or default) do not get cut off.

MultiSeriesCustomTrue
Uses ChartSeriesProvider with ShowTrackInfo set to True. Default TrackBall chrome is displayed with custom chrome embedded within.

MultiSeriesCustomFalse
Uses ChartSeriesProvider with ShowTrackInfo set to False. No TrackBall chrome is displayed at all. The only difference between this project and the SingleSeriesCustomFalse is that this project uses a ChartSeriesProvider. My expectation is that this should show the same custom TrackBall as the SingleSeriesCustomFalse project - but it does not.

Displaying a single TrackBallInfo for one set of data points for one of the series within a ChartSeriesProvider would be fine. But I cannot determine how to do that with a custom TrackBallInfo without the default chrome being displayed. Analternative of using Annotations has multiple issues (very slow, cut off at edges of chart view area).

[dxpack]

You can download the 4 example projects here:

https://db.tt/vMdpAxjj

[Dinko | Tech Support Engineer]

Hello,

This ticket seems to be a duplicate of the another one you already post. We have already answered to your question in the private thread. We are copying the answer also here:

1.SingleSeriesCustomFalse
We see that in this project you have used the TrackBallTemplate property. You have also the track ball info, so the track info is not shown. What you see in this case is the track ball, not the track info. Usually, the track ball is supposed to be some ellipse with some color. In your you have placed information in it and the ShowTrackInfo property does not affect the visibility of your template.

2.MultiSeriesSlowAnnotations
The slow performance is due to the fact that you remove and add annotations very rapidly. Basically, when you add/remove/modify a chart annotation, the whole chart gets invalidated. This means that many things are recalculated. Not everything is updated, but since there are some calculations in the way, performance (when moving the annotations) may slightly drop. In order to increase the performance, you can try the follow suggestions:
- You can specify a lighter render mode for the RadChartView control. You can take a look at the Rendering help article in our documentation where this approach is further described.
- You can reuse the already created annotations and only change their position and content.
We have modified the project send from Martin so you can see how to implement the mentioned above suggestions.

Another approach that you can try is to use a Canvas and populate it with UI elements which represent the trackball info. You can position the elements with the help of the Conversion API of RadChartView.

3.MultiSeriesCustomTrue
I do not think that you have an actual question here. I'll move on.

4.MultiSeriesCustomFalse
You mentioned that this is the same set up as the SingleSeriesCustomFalse project, but this is not true, because in the single series project you use the TrackBallTemplate wherein the project you use the TrackBallInfoTemplate. Now, it is expected for the ShowTrackInfo property to affect the track info and this is why you don't see it.

5.a CartesianCustomAnnotation will be cut off at the edges
The annotation is cut off simply because by default all WPF controls try to draw themselves within their render bounds. The annotation is part of the chart and this is why by default the chart clips so that it does not overlap any other, adjacent, control. One way to go here is to set the ClipToPlotArea of the annotation to false - this will result in the annotation not getting clipped. An alternative is for you to update the ChartTrackBallBehavior_TrackInfoUpdated handler and calculate a smarter position for the annotation so that it does not overflow the bounds of the chart.

I think that it is best if you used the previously suggested annotations workaround or the one I mentioned in this post, where you can use an additional Canvas element and you can position track-ball-looking elements inside it. Both of these will give you full control over where you position the elements and this way you can have custom code to avoid overlapping or clipping. 

Hope this information is helpful.

Regards,
Dinko
Telerik

[dxpack]

Yes, thank you.

As was pointed out in the private discussion, fundamentally my issue was that for the ChartSeriesProvider I was using a TrackBallInfo template and for the single series I was using a TrackBall template. Changing the ChartSeriesProvider to use a TrackBall template solved the issue of rendering the default trackball chrome (setting ShowTrackInfo to False, default chrome is not present, custom chrome is present).

Thanks for the excellent support!