RadPieChart Tooltip

7 posts, 0 answers
  1. Dave
    Dave avatar
    1 posts
    Member since:
    Nov 2011

    Posted 30 Mar 2012 Link to this post

    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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
      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>
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 04 Apr 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Ganesh Shivshankar
    Ganesh Shivshankar avatar
    78 posts
    Member since:
    Sep 2009

    Posted 13 Nov 2012 Link to this post

    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: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
  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 14 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Ganesh Shivshankar
    Ganesh Shivshankar avatar
    78 posts
    Member since:
    Sep 2009

    Posted 14 Nov 2012 Link to this post

    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.
  7. Tim
    Tim avatar
    5 posts
    Member since:
    Aug 2011

    Posted 24 Feb 2015 Link to this post

    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}"
  8. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 25 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner