[Solved] RadPieChart Tooltip

[Dave]

I am using Silverlight 5 Demo and Telerik Silverlight Q1 2012.  I have a simple app where I am trying to create a new tooltip template.
I probably am missing something really simple but I can seem to make it work.  Any help or example would be appreciated.  Below is my xaml and cs.
Thanks!

namespace SimpleSpApp1
{
    using System.Windows.Controls;
    using System.Windows.Navigation;

    /// <summary>
    /// Home page for the application.
    /// </summary>
    public partial class Home : Page
    {
        /// <summary>
        /// Creates a new <see cref="Home"/> instance.
        /// </summary>
        public Home()
        {
            InitializeComponent();

            this.Title = ApplicationStrings.HomePageTitle;
        }

        /// <summary>
        /// Executes when the user navigates to this page.
        /// </summary>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

<navigation:Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  x:Class="SimpleSpApp1.Home"
  mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" Style="{StaticResource PageStyle}">

    <navigation:Page.Resources>
        <DataTemplate x:Key="MyNewToolTipTemplate">
            <Grid Background="#FFD41919">
                <TextBlock Name="ToolTip" Height="137" Margin="-353,-172,-61,0" TextWrapping="Wrap"
                    VerticalAlignment="Top" Foreground="#FF180505" Text="This is a brand new tool tip."/>
            </Grid>
        </DataTemplate>
    </navigation:Page.Resources>

  <Grid x:Name="LayoutRoot">
    <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}" Margin="0,8,287,211">

      <StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">

        <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
                           Text="{Binding Strings.HomePageTitle, Source={StaticResource ApplicationResources}}"/>

        <telerik:RadPieChart x:Name="radPieChart" Height="184" Cursor="Hand"
                ToolTipService.ToolTip="{StaticResource MyNewToolTipTemplate}"
                TooltipTemplate="{StaticResource MyNewToolTipTemplate}">
            <telerik:PieSeries>
                <telerik:PieDataPoint IsSelected="False" Label="60 %" OffsetFromCenter="0" Value="9"/>
                <telerik:PieDataPoint IsSelected="False" Label="20 %" OffsetFromCenter="0" Value="3"/>
                <telerik:PieDataPoint IsSelected="False" Label="20 %" OffsetFromCenter="0" Value="3"/>
            </telerik:PieSeries>
        </telerik:RadPieChart>

      </StackPanel>

    </ScrollViewer>
  </Grid>

</navigation:Page>

[Petar Marchev]

Hi Dave,

You can check our the First Look online demo here which demonstrates how to set a tooltip (for the bar chart in the upper right corner).

You can use the same approach for the pie chart - set the Behaviors and TooltipTemplate properties as shown below:

<telerik:RadPieChart x:Name="radPieChart" Height="184" Cursor="Hand">
 <telerik:RadPieChart.Behaviors>
  <telerik:ChartTooltipBehavior HorizontalOffset="-6" VerticalOffset="-49" />
 </telerik:RadPieChart.Behaviors>
 <telerik:RadPieChart.TooltipTemplate>
  <DataTemplate>
   <Grid>
    <Path Data="M-1236,-441 L-1180,-441 -1180,-424 -1228,-424 -1230.5,-420 -1233,-424 -1236,-424 z"
        Stretch="Fill" Fill="White" Stroke="Gray" StrokeThickness="1" />
    <TextBlock Text="{Binding Value, StringFormat='C'}" Margin="4,3,4,9" />
   </Grid>
  </DataTemplate>
 </telerik:RadPieChart.TooltipTemplate>
 <telerik:PieSeries>
  <telerik:PieDataPoint IsSelected="False" Label="60 %" OffsetFromCenter="0" Value="9" />
  <telerik:PieDataPoint IsSelected="False" Label="20 %" OffsetFromCenter="0" Value="3" />
  <telerik:PieDataPoint IsSelected="False" Label="20 %" OffsetFromCenter="0" Value="3" />
 </telerik:PieSeries>
</telerik:RadPieChart>

Regards,
Petar Marchev
the Telerik team

[Ganesh Shivshankar]

Hi Petar,

I tried the above in a sample app. When I run the app I keep getting this error.

An unhandled exception ('Unhandled Error in Silverlight Application 
Code: 4004    
Category: ManagedRuntimeError       
Message: System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Windows.Controls.ChartView.RadChartBase.UpdateEmptyContent()
   at Telerik.Windows.Controls.ChartView.RadChartBase.CallUpdateUI()
   at Telerik.Windows.Controls.ChartView.RadChartBase.ArrangeOverride(Size finalSize)
   at System.Windows.FrameworkElement.ArrangeOverride(IntPtr nativeTarget, Single inWidth, Single inHeight, Single& outWidth, Single& outHeight)     
') occurred in iexplore.exe [9736].


The Just-In-Time debugger was launched without necessary security permissions. To debug this process, the Just-In-Time debugger must be run as an Administrator. Would you like to debug this process?

I have no clue why this is happening. Am I missing something? My page looks like this

<UserControl x:Class="NewCharts.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadPieChart x:Name="radPieChart" Height="184" Cursor="Hand">
            <telerik:RadPieChart.Behaviors>
                <telerik:ChartTooltipBehavior HorizontalOffset="-6" VerticalOffset="-49" />
            </telerik:RadPieChart.Behaviors>
            <telerik:RadPieChart.TooltipTemplate>
                <DataTemplate>
                    <Grid>
                        <Path Data="M-1236,-441 L-1180,-441 -1180,-424 -1228,-424 -1230.5,-420 -1233,-424 -1236,-424 z"
        Stretch="Fill" Fill="White" Stroke="Gray" StrokeThickness="1" />
                        <TextBlock Text="{Binding Value, StringFormat='C'}" Margin="4,3,4,9" />
                    </Grid>
                </DataTemplate>
            </telerik:RadPieChart.TooltipTemplate>
            <telerik:PieSeries>
                <telerik:PieDataPoint IsSelected="False" Label="60 %" OffsetFromCenter="0" Value="9" />
                <telerik:PieDataPoint IsSelected="False" Label="20 %" OffsetFromCenter="0" Value="3" />
                <telerik:PieDataPoint IsSelected="False" Label="20 %" OffsetFromCenter="0" Value="3" />
            </telerik:PieSeries>
        </telerik:RadPieChart>
    </Grid>
</UserControl>

I would have thought this should work straight away. I'm using version 2012.1.326.1050.

Thanks.
Ganesh

[Petar Marchev]

Hi Ganesh,

I have created a simple project based on this code. I have attached a snapshot of the output I get when I run the project. I have also enclosed the project with assemblies with the indicated version. All works as expected on my side and I get no errors. Do try to run the attachment and see how it goes. 

Greetings,
Petar Marchev
the Telerik team

[Ganesh Shivshankar]

Hi Petar,

Thanks for the sample. That works. The problem was I was using the noxaml binaries and did not include the implicit themes. Because of which it was not able to update the UI as it had to style defined. Including the default theme works.

Thanks.

[Tim]

I need to put a bunch of text in the tooltip different than the PieDataPoint Value.  I can't use Label, apparently, because then it will show up on the pie itself.  Maybe I can use PieSeries.Tag, but this binding (and several other variations I've tried) doesn't work.  Any ideas?

Text="{Binding Path=Tag,RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType=telerik:PieSeries},FallbackValue=BindingFailed}"

[Pavel R. Pavlov]

Hello,

The RelativeSource binding is the correct way to achieve your goal.

However, I cannot make any specific suggestion because I am not aware of your custom implementation. The approach depends on your needs and specifications that you have in the application. It is up to you to decide which one best fits your scenario.

Regards,
Pavel R. Pavlov
Telerik