HOW TO SeriesItemLabel Clickable?

10 posts, 1 answers
  1. RoadWarrior
    RoadWarrior avatar
    45 posts
    Member since:
    Jan 2010

    Posted 02 Sep 2010 Link to this post

    Currently, it is challenging to interact with a series of data with a relatively small amount of data with the Telerik Chart.  For example, let's say I am displaying a BarChart with total values of: {200, 888, 300, 1}.  Because the series with a value of 1 will be so small, it will be almost impossible to click upon to receive the required ChartArea_ItemClick event.  One idea to solve this issue is to allow the Series label to fire the same click event.  So is is possible to make the SeriesItemLabel invoke the same event?  If so, an example would be greatly appreciated.
  2. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 07 Sep 2010 Link to this post

    Hello RoadWarrior,

     First you should set the SeriesItemLabel to be HitTestVisible by using a style. Next subscribe to the MouseUp event of the ChartArea and recursively walk up the visual tree until you find a SeriesItemLabel. This should be done to insure the user has specifically clicked it instead of something else (a grid line for example). The recursive method can look like this:

    private T GetParent<T>(DependencyObject obj)
        where T : DependencyObject
    {
        if (obj == null)
        {
            return null;
        }
        else if (obj is T)
        {
            return (T)obj;
        }
     
        DependencyObject parent = VisualTreeHelper.GetParent(obj);
        return GetParent<T>(parent);
    }
    and the event handler for the ChartArea MouseUp event:
    void ChartArea_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        SeriesItemLabel clickedLabel = GetParent<SeriesItemLabel>(e.OriginalSource as DependencyObject);
        if (clickedLabel != null)
        {
            SeriesItemLabel_Click(clickedLabel, e);
        }
    }

    The solution above is demonstrated in a sample application that is attached. Please review it and if you have any more questions don't hesitate to contact us!

    Kind regards,
    Yavor Ivanov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. RoadWarrior
    RoadWarrior avatar
    45 posts
    Member since:
    Jan 2010

    Posted 22 Sep 2010 Link to this post

    This was a good workaround for receiving the click for the item label.  Now, there still remains the issue of the Tooltip for the SeriesItemLabel.  

    I've attempted to use the same technique (walking the VisualTree based on a mouse event).  Specifically, I used the ChartArea.MouseMove event to detect a SeriesitemLabel and set the tooltip if not already set.  Unfortunately, this has the glitch of only working on subsequent hovers. You have to hover over the label, move off, and then hover again before the tooltip will show.  I am sure some user will simply think it only works sporadically  

    Is there a better way to set the SeriesItemLabel Tooltip.  If so, I'd appreciate an example.  Thanks.
  4. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 27 Sep 2010 Link to this post

    Hello RoadWarrior,

    RadChart supports tool tips for the series items. You can enable them by setting the SeriesDefinition.ShowItemToolTips to True.

    More information on how do display and customize tool tips can be found in this topic in our help system. Please review this approach and let us know if it achieves the expected behavior.


    All the best,
    Yavor Ivanov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. RoadWarrior
    RoadWarrior avatar
    45 posts
    Member since:
    Jan 2010

    Posted 27 Sep 2010 Link to this post

    Your suggestion of setting the SeriesDefinition.ShowItemToolTips to true, will NOT affect the SeriesItemLable. Given that the label is the only visible element in many scenarios (e.g. value of 0).  It is imperative that the SeriesItemLable supports the same tooltip that is set on the SeriesDefinition.
  6. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 29 Sep 2010 Link to this post

    Hello RoadWarrior,

     You can achieve this behavior by setting a custom template for the SeriesItemLabel and using ToolTipService like this:

    <Style x:Key="SeriesItemLabelStyle"
          TargetType="telerik:SeriesItemLabel">
                        <Setter Property="HorizontalContentAlignment" Value="Center" />
                        <Setter Property="Padding" Value="2,0" />
                        <Setter Property="IsHitTestVisible" Value="True"/>
                        <Setter Property="Foreground" Value="Black"/>
                        <Setter Property="Template" >
                            <Setter.Value>
                                <ControlTemplate TargetType="telerik:SeriesItemLabel">
                                    <Canvas x:Name="PART_MainContainer">
                                        <Path                           
                                   Visibility="{TemplateBinding ConnectorVisibility}"
                                   Style="{TemplateBinding ConnectorStyle}"
                                   Stroke="{TemplateBinding Stroke}"
                                   StrokeThickness="{TemplateBinding StrokeThickness}">
                                            <Path.Data>
                                                <PathGeometry >
                                                    <PathGeometry.Figures>
                                                        <PathFigure x:Name="PART_Connector">
                                                            <PathFigure.Segments>
                                                                <PolyLineSegment />
                                                            </PathFigure.Segments>
                                                        </PathFigure>
                                                    </PathGeometry.Figures>
                                                </PathGeometry>
                                            </Path.Data>
                                        </Path>
                                        <Border
                                    x:Name="PART_TextContainer"
                                    Style="{TemplateBinding LabelStyle}"
                                    BorderBrush="{TemplateBinding Stroke}">
                                            <TextBlock
                                        TextAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Text="{TemplateBinding Content}"
                                                ToolTipService.ToolTip="{TemplateBinding Content}">
                                            </TextBlock>
                                        </Border>
                                    </Canvas>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

    Then you have only to specify the new style in the series definition like this:
    <telerik:LineSeriesDefinition SeriesItemLabelStyle="{StaticResource SeriesItemLabelStyle}" >

    You can read more about the ToolTipService in this MSDN topic.

    Regards,
    Yavor Ivanov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. RoadWarrior
    RoadWarrior avatar
    45 posts
    Member since:
    Jan 2010

    Posted 29 Sep 2010 Link to this post

    This example is not of much use.  Binding the Tooltip to it's own content property only shows what has already displayed in the TextBlock. What is needed is a relative binding which will display the SeriesItem.Tooltip property or the ability to bind to some a DataContext object to get a useful value. 

    Please provide an example that binds to the SeriesItem.Tooltip Property or any mechanism which is settable via a databinding to the controls DataContext.  Thanks,
  8. RoadWarrior
    RoadWarrior avatar
    45 posts
    Member since:
    Jan 2010

    Posted 29 Sep 2010 Link to this post

    I've figured out a way to set the SeriesItemLabel Tooltip with an attached behavior.  Works well, but I think Telerik should provide this out of the box.  Here is my attached property which can be set on the template...

    public static class SeriesLabelTooltipBehavior
    {
        public static readonly DependencyProperty TooltipProperty = DependencyProperty.RegisterAttached("Tooltip", typeof(string), typeof(SeriesLabelTooltipBehavior), new PropertyMetadata(OnTooltipChanged));
     
        public static string GetTooltip(DependencyObject d)
        {
            return (string)d.GetValue(TooltipProperty);
        }
     
        public static void SetTooltip(DependencyObject d, string value)
        {
            d.SetValue(TooltipProperty, value);
        }
     
        private static void OnTooltipChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            FrameworkElement element = d as FrameworkElement;
     
            if (element != null)
            {
                element.Loaded += new RoutedEventHandler(element_Loaded);
            }
        }
     
        static void element_Loaded(object sender, RoutedEventArgs e)
        {
            FrameworkElement element = (FrameworkElement) sender;
            SeriesItemLabel clickedLabel = GetParent<SeriesItemLabel>(element);
            if (clickedLabel != null)
            {
                if (ToolTipService.GetToolTip(clickedLabel) == null)
                {
                    string toolTip = (clickedLabel.DataPoint.DataItem as YourDataContext).ToolTip;
                    ToolTipService.SetToolTip(clickedLabel, toolTip);
                }
            }
        }
     
        private static T GetParent<T>(DependencyObject obj) where T : DependencyObject
        {
            T parent = null;
            if (obj != null)
            {
                if (obj is T)
                {
                    parent = (T)obj;
                }
                else
                {
                    DependencyObject nextParent = VisualTreeHelper.GetParent(obj);
                    parent = GetParent<T>(nextParent);
                }
            }
            return parent;
        }
    }

  9. Answer
    Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 05 Oct 2010 Link to this post

    Hello,

    The DataContext of the SeriesItemLabel is set to its corresponding DataPoint. DataPoints have a DataItem property that is the source of the binding in databinding scenarios. You can bind the tooltip to any property of your business object like this:

    ToolTipService.ToolTip="{Binding Path=DataItem.<MyProperty>}"

    I hope this information gets you started properly.

    Regards,
    Yavor Ivanov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. RoadWarrior
    RoadWarrior avatar
    45 posts
    Member since:
    Jan 2010

    Posted 05 Oct 2010 Link to this post

    Thanks.  Much simpler than a custom Attached Property.  
Back to Top