Detecting barchart header click

10 posts, 1 answers
  1. Oliver
    Oliver avatar
    263 posts
    Member since:
    Feb 2011

    Posted 18 Jan 2012 Link to this post

    Hi,

    in my project I have a chart with multiple bars, each bar have a label. I generated and ItemClick event to do something when the user click on a bar. I would like to know if it's possible to do the samething when the user click on each bar label because sometime the height of the bars is not visible and we can see only theirs labels.

    Thank's
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 23 Jan 2012 Link to this post

    Hi,

    Yes, this is possible.

    1. First you need to set the IsHitTestVisible property of the SeriesItemLabels to true. You can use a style to achieve this. Read about using styles here - Styling the Item Labels. I think the code below should suffice.
    <Style x:Key="SeriesItemLabelStyle" TargetType="telerik:SeriesItemLabel">
      <Setter Property="IsHitTestVisible" Value="True" />
    </Style>
    this.radChart1.DefaultSeriesDefinition.SeriesItemLabelStyle = this.Resources["SeriesItemLabelStyle"] as Style;

    2. Attach a handler to the chart area's mouse left down event.

    3. Now, in this handler you need to check if the original source has a parent of type SeriesItemLabel. If yes - an item label was hit and you can implement your logic there.
    void ChartArea_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
     var originalSource = e.OriginalSource as DependencyObject;
     
     var seriesItemLabel = Telerik.Windows.Controls.ParentOfTypeExtensions.GetVisualParent<SeriesItemLabel>(originalSource);
     
     if (seriesItemLabel != null)
     {
       //seriesItemLabel.DataPoint.DataItem as Your busness object
     }
    }

    Hope this helps.

    Greetings,
    Petar Marchev
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Oliver
    Oliver avatar
    263 posts
    Member since:
    Feb 2011

    Posted 23 Jan 2012 Link to this post

    Hi,

    actually I have a ChartArea_ItemClick(object sender, ChartItemClickEventArgs e) associated to each bars.
    When the use click directly on a bar, I execute some logic.

    When the user click on a bar label, I want to call the ChartArea_ItemClick, how I can do this?

    Thank's
  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 26 Jan 2012 Link to this post

    Hello,

    Is it not possible in your project to do the following refactoring:

    1. Extract all of the logic from inside the ChartArea_ItemClick into a new method MyLogic.

    2. C
    all MyLogic from both ChartArea_ItemClick and ChartArea_MouseLeftButtonDown.

    All the best,
    Petar Marchev
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  6. Oliver
    Oliver avatar
    263 posts
    Member since:
    Feb 2011

    Posted 26 Jan 2012 Link to this post

    Hi,

    the suggested solution might be nice but my chart reside in usercontrol and my appl need to register to a specific event
    of my usercontrol to know on which graphic bar the user clicked. How could I have the same kind of eventargs between
    my label click and graphic bar click because I have to raise an event to my app because my app need to know some infos
    from the raise eventargs parameters.

    Here is the content of my UserControl:
            public event EventHandler<ChartItemClickEventArgs> ChartItemClick;

            private void ChartArea_ItemClick(object sender, ChartItemClickEventArgs e)
            {
                if (ChartItemClick != null)
                {               
                    ChartItemClick(sender, e);
                }
            }

            private void ChartArea_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                var originalSource = e.OriginalSource as DependencyObject;
                var seriesItemLabel = Telerik.Windows.Controls.ParentOfTypeExtensions.GetVisualParent<SeriesItemLabel>(originalSource);

                if (seriesItemLabel != null)
                {
                    //TODO: Simulate the associated bar click
                    //seriesItemLabel.DataPoint.DataItem as Your busness object == RadButton associated to a graphicbar
                }
            }

    Here is the code in my app when the user click on a graph bar of my usercontrol:

            private void GraphicItemClick(object sender, ChartItemClickEventArgs e)
            {
                if (e.DataPoint.DataItem != null && e.DataPoint.DataItem is RadButton)
                {         
                    radButton_Click(e.DataPoint.DataItem as RadButton, null);
                }
            }

    Thank's

  7. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 31 Jan 2012 Link to this post

    Hello,

    I will have to suggest that you create a class MyCustomItemClickEventArgs and create all the properties you will need.

    Now your event should be
    public event EventHandler<MyCustomItemClickEventArgs> ChartItemClick;

    Now in both event handlers ChartArea_ItemClick and ChartArea_MouseLeftButtonDown you will need to create an instance of MyCustomItemClickEventArgs and fire ChartItemClick.

    I hope this helps.

    Kind regards,
    Petar Marchev
    the Telerik team

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

  8. Oliver
    Oliver avatar
    263 posts
    Member since:
    Feb 2011

    Posted 24 Feb 2012 Link to this post

    Hi,

    do you have a small sample to achieve it?

    Thank's
  9. Answer
    Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 29 Feb 2012 Link to this post

    Hello,

    I have attached a sample project that demonstrates the previously suggested approach. As a result of the demo now when you click a bar - a message pops up and tells you that a bar was hit. If you have clicked a label - a message pops up letting you know that a label was hit.

    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 >>
  10. Magnus
    Magnus avatar
    1 posts
    Member since:
    Jun 2013

    Posted 30 Oct 2014 in reply to Petar Marchev Link to this post

    Hi we need the same thing but for ChartView; problem is that we cant right-click a bar with zero height. In this case, clicking the label would be great!
    How is this accomplished?
  11. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 30 Oct 2014 Link to this post

    Hello Magnus,

    I will ask that you open a new thread in the ChartView section, so that we do not clutter this one. Thank you.

    Regards,
    Petar Marchev
    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
UI for WPF is Visual Studio 2017 Ready