HOW TO SeriesItemLabel Clickable?

[RoadWarrior]

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.

[Yavor]

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

[RoadWarrior]

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.

[Yavor]

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

[RoadWarrior]

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.

[Yavor]

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

[RoadWarrior]

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,

[RoadWarrior]

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;
    }
}

[Yavor]

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

[RoadWarrior]

Thanks.  Much simpler than a custom Attached Property.