TooltipTemplate

[William]

I'm trying to add a tooltiptemplate for the series in my RadCartesianChart. I can't get this to work but I don't see any problem with it.

XAML:

<telerik:ScatterLineSeries x:Key="ToolTipDisplay2">
<telerik:ScatterLineSeries.PointTemplate>
<DataTemplate>
<Ellipse Width="2" Height="2" Fill="Black" />
</DataTemplate>
</telerik:ScatterLineSeries.PointTemplate>
</telerik:ScatterLineSeries>

 

C# code:

... series added...

ScatterLineSeries temp1 = (ScatterLineSeries) this.Resources["ToolTipDisplay2"];
survivalChart.Series[survivalChart.Series.Count() - 1].TooltipTemplate = (DataTemplate) temp1.TooltipTemplate;

 

[Martin Ivanov]

Hello William,

I am not sure what is the issue. What doesn't work on your side? Can you also tell me why you define a ScatterLineSeries as a resource?

Note that the the application's resources in XAML are shared (a single instance is created). Since, an UIElement cannot have multiple parents, only the last element that request the UIElement (from the resources) will get it.

Regards,
Martin
Telerik by Progress

[William]

I got it working. Now I need to format the values so that I don't have 16 digits of accuracy. What is the name of the method to capture the tooltip text as it's being created? (comparable to 'ChartTrackBallBehavior_TrackInfoUpdated" routine for trackball).

[Martin Ivanov]

Hi William,

The ChartTooltipBehavior doesn't have an event which is fired when the tooltip opens or closes. To achieve your requirement you can use the ToolTipTemplate property. Such property is exposed both by RadCartesianChart and ChartSeries (example: LineSeries). There you can modify the appearance of the tooltip. Read more about the ToolTipTemplate in the behavior's documentation.

Regards,
Martin
Telerik by Progress

[William]

Do you have any small examples? The link you took me to requires several pages of code to do something fairly simple.

[William]

In the link you gave, I see nothing about numeric formatting. Every tooltip or trackball pop-up has values with 16 significant digits!

[Martin Ivanov]

Hello William,

Indeed, the code showing the tooltip behavior features is a bit complex. We consider improving the article at some point in time. As for the formatting, there is not built-in mechanism to do so. The ToolTipTemplate allows you to use a DataTemplate and the WPF framework's features. In your case, you can use a binding with its StringFormat property set.

<telerik:RadCartesianChart.TooltipTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding DataItem.MyYValue, StringFormat=F2}" />
    </DataTemplate>
</telerik:RadCartesianChart.TooltipTemplate>

Or you can use an IValueConverter and converter the value, based on the data context of the template.

<telerik:RadCartesianChart.TooltipTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding DataItem.MyYValue, Converter={StaticResource myCustomValueToFormattedStringConverter}}" />
    </DataTemplate>
</telerik:RadCartesianChart.TooltipTemplate>

Additionally, you can check the Tooltip SDK example.

Regards,
Martin
Telerik by Progress

[William]

It looks like you can only use tooltiptemplate when you know the data items. I want a tool tip that will give me the name of the legend name of the series, the xvalue and yvalue of the particular series, when the plot has multiple series on it.

[Martin Ivanov]

Hello William,

Note that the tooltip behavior displays a tooltip related to a specific data point. The data context passed to this tooltip is an object of type DataPoint. This object can be accessed also in the ToolTipTemplate.

If you are in a data binding scenario you can use the DataItem property of the DataPoint object to get the corresponding view model. 

If you are populating the series directly with DataPoint objects (instead of data binding), you can use the value properties. For example, the ScatterDataPoint exposes XValue and YValue properties. On the other hand the CategoricalDataPoint has Value and Category. You can access them in the template like in the following code snippet:

<telerik:RadCartesianChart.TooltipTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding YValue}" />
    </DataTemplate>
</telerik:RadCartesianChart.TooltipTemplate>

The DataPoint object also gives you access to its presenter - the chart series. You can get it via the Presenter property.

You can also take a look at the attached project.

Regards,
Martin
Telerik by Progress

[William]

Nothing shows up yet - please tell me what I should change. 

Here is my XAML:

<UserControl.Resources>
<telerik:RadCartesianChart x:Key="ToolTipDisplay2">
<telerik:RadCartesianChart.TooltipTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<TextBlock Text="Value:" Grid.Row="0" Grid.Column="0" FontSize="10"/>
<TextBlock Text="{Binding YValue, StringFormat=F2}" Grid.Row="0" Grid.Column="1" FontSize="10" />
<TextBlock Text="Category: " Grid.Row="1" Grid.Column="0" FontSize="10"/>
<TextBlock Text="{Binding XValue, StringFormat=F2}" Grid.Row="1" Grid.Column="1" FontSize="10" />
</Grid>
</DataTemplate>
</telerik:RadCartesianChart.TooltipTemplate>
</telerik:RadCartesianChart>

.......

<telerik:RadCartesianChart.Behaviors>
<telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal"/>
<telerik:ChartTooltipBehavior Placement="Top" VerticalOffset="20" />
</telerik:RadCartesianChart.Behaviors>

Here is my C# code:

RadCartesianChart tooltip = (RadCartesianChart) this.Resources["ToolTipDisplay2"];

series1.TooltipTemplate = (DataTemplate) tooltip.TooltipTemplate;

[Martin Ivanov]

Hello William,

Without a runnable code I can't be sure why nothing is displayed. However, you can try to define the DataTemplate directly into the resources instead of wrapping it into a RadCartesianChart object. For example:

<UserControl.Resources>
    <DataTemplate  x:Key="ToolTipDisplay2">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
                <RowDefinition Height="30" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60" />
                <ColumnDefinition Width="60" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="Value:" Grid.Row="0" Grid.Column="0" FontSize="10"/>
            <TextBlock Text="{Binding YValue, StringFormat=F2}" Grid.Row="0" Grid.Column="1" FontSize="10" />
            <TextBlock Text="Category: " Grid.Row="1" Grid.Column="0" FontSize="10"/>
            <TextBlock Text="{Binding XValue, StringFormat=F2}" Grid.Row="1" Grid.Column="1" FontSize="10" />
        </Grid>
    </DataTemplate>
</telerik:RadCartesianChart>

Note that it is not good idea to define an UIElement (as RadCartesianChart) directly in the application resources.

Regards,
Martin
Telerik by Progress

[William]

It still doesn't display. This is the xaml:

<UserControl.Resources>
<DataTemplate x:Key="ToolTipDisplay2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<TextBlock Text="Value:" Grid.Row="0" Grid.Column="0" FontSize="10"/>
<TextBlock Text="{Binding YValue, StringFormat=F2}" Grid.Row="0" Grid.Column="1" FontSize="10" />
<TextBlock Text="Category: " Grid.Row="1" Grid.Column="0" FontSize="10"/>
<TextBlock Text="{Binding XValue, StringFormat=F2}" Grid.Row="1" Grid.Column="1" FontSize="10" />
</Grid>
</DataTemplate>

....

<telerik:RadCartesianChart.Behaviors>
<telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal"/>
<chartView:ChartTooltipBehavior />
<!--<telerik:ChartTooltipBehavior Placement="Top" VerticalOffset="20" />-->
</telerik:RadCartesianChart.Behaviors>

This is the C# code:

DataTemplate tooltip = (DataTemplate) this.Resources["ToolTipDisplay2"];

series1.TooltipTemplate = (DataTemplate) tooltip;
PrdTimeLine.Series.Add(series1);

 

 

 

[Martin Ivanov]

Hello William,

I can't reproduce the missing tooltip. What I can suggest to you, is to open a new support ticket from your telerik.com account and attach a runnable project showing the issue. 

Regards,
Martin
Telerik by Progress

[William]

This project is huge - it would take me a week to pare it down to send it. I have been able to get this tooltip to work if it

is tied to a column either in xaml or C# code. However, it doesn't work if I tie it to a ScatterLineSeries:

The following is the C# code:

           DataTemplate tooltip = (DataTemplate) this.Resources["ToolTipDisplay2"];
            ScatterLineSeries series1 = new ScatterLineSeries();
            series1.TooltipTemplate = tooltip;
            PrdTimeLine.Series.Add(series1);

[William]

I tried to add  ToolTipTemplate to a LineSeries in the XAML, but it is not recognized, even though your documentation http://docs.telerik.com/devtools/wpf/api/html/properties_t_telerik_windows_controls_chartview_lineseries.htm says that ToolTipTemplate is a property of LineSeries. Is this a case of documentation being out of date?

[William]

Disregard the last post - I was able to add tooltiptemplate into a lineseries, but it still doesn't work.

[Martin Ivanov]

Hello William,

I don't know why the tooltip is not displayed on your side. But, I recommend you to take some time to explore the last project I sent and try to adapt the set up into your project. Also, you can double check if the ChartTooltipBehavior is defined in the chart's Behaviors collection in your project.

Regards,
Martin
Telerik by Progress

[William]

I finally got it working. I had to add the tooltip into the RadCartesianChart, and the PointTemplate into resources, referenced by code. It would not work with the tooltiptemplate in resources.