Chart Sereis Events

[Abdulhameed]

I would like to attach a mouse leave event on the series \ item in a chart.
I manged to attache the mouse leave event on the chartarea however I would like to attache it to a series or even an item if possible.

[Yavor]

Hello Abdulhameed,

You can achieve your scenario by using behavior, attached to the chart series item. Enabling this attached behavior can be done by using ItemStyle. Here is an example of an attached behavior class:

public static class MouseBehavior
{
    public static bool GetIsMouseLeaveAttached(DependencyObject obj)
    {
        return (bool)obj.GetValue(IsMouseLeaveAttachedProperty);
    }

    public static void SetIsMouseLeaveAttached(DependencyObject obj, bool value)
    {
        obj.SetValue(IsMouseLeaveAttachedProperty, value);
    }

    // Using a DependencyProperty as the backing store for IsMouseLeaveAttached.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty IsMouseLeaveAttachedProperty =
        DependencyProperty.RegisterAttached("IsMouseLeaveAttached", typeof(bool), typeof(BaseChartItem), new PropertyMetadata(OnIsMouseLeaveAttachedChanged));

    private static void OnIsMouseLeaveAttachedChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        BaseChartItem chartItem = sender as BaseChartItem;
        if ((bool)e.NewValue)
        {
            chartItem.MouseLeave += chartItem_MouseLeave;
        }
        else
        {
            chartItem.MouseLeave -= chartItem_MouseLeave;
        }
    }

    static void chartItem_MouseLeave(object sender, MouseEventArgs e)
    {
        BaseChartItem chartItem = sender as BaseChartItem;
        MessageBox.Show(string.Format("Mouse leave Y{0}", chartItem.DataPoint.YValue));
    }
}

You can attach this behavior to any class that derives from BaseChartItem. Here is how you can attach it in markup:

<telerik:BarSeriesDefinition>
    <telerik:BarSeriesDefinition.ItemStyle>
        <Style TargetType="telerik:BaseChartItem">
            <Setter Property="local:MouseBehavior.IsMouseLeaveAttached" Value="True" />
        </Style>
    </telerik:BarSeriesDefinition.ItemStyle>
</telerik:BarSeriesDefinition>

I have attached a small demo project that demonstrates this approach. If you have any trouble with it I will be happy to assist you.

Kind regards,
Yavor
the Telerik team

[Abdulhameed]

This is great, In addition I would like to have the event to send data back to the main control. In other words based on the data item entered I would like to alter another chart or control.

As an end result I would like to have two charts, When I hover over the first chart data item, it updates the second chart.

[Petar Marchev]

Hi,

In the chartItem_MouseLeave method you can add the following code

MainPage mainPage = Telerik.Windows.Controls.ParentOfTypeExtensions.GetVisualParent<MainPage>(chartItem);
mainPage.HandleMouseLeave(chartItem);

And you will need to define the HandleMouseLeave method in your user control, where you can place your logic on updating the second chart.

Regards,
Petar Marchev
the Telerik team