Chart Sereis Events

4 posts, 2 answers
  1. Abdulhameed
    Abdulhameed avatar
    27 posts
    Member since:
    Jul 2010

    Posted 03 Jan 2012 Link to this post

    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.

  2. Answer
    Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 05 Jan 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Abdulhameed
    Abdulhameed avatar
    27 posts
    Member since:
    Jul 2010

    Posted 28 Jan 2012 Link to this post

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

    Posted 01 Feb 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top