Make Selected line work like Hover

3 posts, 0 answers
  1. Mike
    Mike avatar
    11 posts
    Member since:
    Oct 2010

    Posted 18 Mar 2011 Link to this post

    I need to make a selected Line in a line chart work the same way as in hover. 

    In other words:

    If there are no lines selected, then they should all be set to a default thickness, 100% opaque.
    If one or more lines are selected, these lines become fully opaque and all other lines become partially opaque (25%).

    I looked into the C# code for line, and it doesn't look like it can be done using the built in visual states.  Is there any easy work around?
  2. Sia
    Admin
    Sia avatar
    765 posts

    Posted 24 Mar 2011 Link to this post

    Hi Mike,

    First of all please excuse me for the delay of my answer. The needed behavior is achievable using the following approach:

    1. Please use as many custom styles as line series in your application. For example in my test application I have three line series and that is why there are three custom styles: LineStyle1, LineStyle2, LineStyle3:

    2. Set the custom styles to the series definitions (please check the code-behind)

    3.  On ChartArea_SelectionChanged set all line series except the one which is selected to be unselected. Our default behavior is to have unselected line series, when you first select it and then unselect it.
    private void ChartArea_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
    {
        if (e.AddedSeries.Count == 0)
            return;
     
        var otherseries = this.RadChart1.DefaultView.ChartArea.DataSeries.Except(e.AddedSeries);
     
        this.RadChart1.DefaultView.ChartArea.UnselectSeries(otherseries);
    }

    I hope this helps.

    All the best,
    Sia
    the Telerik team
  3. Sia
    Admin
    Sia avatar
    765 posts

    Posted 24 Mar 2011 Link to this post

    Hi Mike,

    Here is a quick follow-up. I reviewed again your requirements and I have changed my code to fit your needs in a more accurate manner.
    private bool selectionInProgress = false;
    private void ChartArea_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
    {
        if (selectionInProgress)
            return;
     
        var chartArea = sender as ChartArea;
        selectionInProgress = true;
     
        if (chartArea.SelectedSeries.Count == 0)
        {
            chartArea.SelectSeries(chartArea.DataSeries);
        }
        else
        {
            var other = chartArea.DataSeries.Except(chartArea.SelectedSeries);
            chartArea.UnselectSeries(other);
        }
     
        selectionInProgress = false;
    }

    When you have for example only one selected data series and you unselect it, your requirements are all data series to appear as selected (with no opacity). The problem with this code is that our control is not designed to work in this way - when you unselect selected series, the expected behavior is to have it unselected, not to select all other data series. I hope you understand my point.

    All the best,
    Sia
    the Telerik team
Back to Top