Make Unselected Series semi-transparent when SelectSeries is called?

4 posts, 0 answers
  1. Brett
    Brett avatar
    7 posts
    Member since:
    Dec 2011

    Posted 31 Oct 2012 Link to this post

    I have several StepLine Series that I am displaying on a RadChart.  when I mouse over them  (HoverScope = InteractivityScope.Series) I get a nice effect where the hovered series is bolded and the others fade out somewhat.

    what I would like to do is duplicate this effect without using a mouse.  the SelectSeries function is available, but it only bolds the selected series.  is there a way that I can also fade out the others?
  2.
  3. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 05 Nov 2012 Link to this post

    Hi Brett,

    The RadChart does not support this functionality out-of-the-box, however you can implement it relatively easy. Here is one possible solution: 
    this.chart.DefaultView.ChartArea.SelectSeries(0);
    for (int i = 1; i < this.chart.SeriesMappings.Count; i++)
    {
        this.chart.SeriesMappings[i].SeriesDefinition.Appearance.Fill.Opacity = 0.2;
    }
    In the above example the 0-th element is selected and the others are faded-out.

    If you have any further questions feel free to ask.
     
    Regards,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Brett
    Brett avatar
    7 posts
    Member since:
    Dec 2011

    Posted 05 Dec 2012 Link to this post

    Thanks for the Feedback Petar.  I've just had a chance to test this (this isn't a HUGE priority, hence the delay)

    when I try to apply your code it fails, as .Fill==null.  I'm creating this Chart programatically.  in the creation routine a went ahead and gave .Fill a value.  this removes the error, but oddly the fill on the chart is still all default colors.  and I still don't get my faded lines.

    any thoughts?
  7. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 11 Dec 2012 Link to this post

    Hi Brett,

    Let me start with my apologies for the late reply.

    It seams that the code-snippet I provided in my previous post was taken from larger project, and that's why it wasn't correct. So let me clear up some things:
    • The SeriesDefinition.Appearance.Stroke property is used to color Line, StepLine, Spline and etc. series
    • The SeriesDefinition.Appearance.Fill property is used to color the area of the Area, Bar, Pie and etc series. If you need to color the border of those series use the Stroke property. The Fill property also affects the series item labels.
    • The SeriesDefinition.Appearance settings do not reflect the current state of the series (for example the Stroke applied by the theme, or from PaletteBrushes) and that's why if the user hasn't set them, they are null
    • The changes to the brushes settings of the SeriesDefinition.Appearance will not be reflected in the Chart Legend. If you are using chart legend you can use PaletteBrushes
    Here is a revamped example: 
    //sample colors
    // [i][0] - Fill
    // [i][1] - Stroke
    private Color[,] seriesColors = new Color[,]
    {
        { Colors.Orange, Colors.Blue },
        { Colors.Red, Colors.Yellow }
    };
       
    private void SelectSeries(int index)
    {
        //reset the the Fill and Stroke brushes to the initial Color and Opacity
        this.chart.SeriesMappings[index].SeriesDefinition.Appearance.Fill =
            new SolidColorBrush(seriesColors[index, 0]);
        this.chart.SeriesMappings[index].SeriesDefinition.Appearance.Stroke =
            new SolidColorBrush(seriesColors[index, 1]);
       
        this.chart.DefaultView.ChartArea.SelectSeries(index);
       
        for (int i = 0; i < this.chart.SeriesMappings.Count; i++)
        {
            if (i == index)  //Skip the currently selected series
                continue;
              
            //reset the Fill and Stroke brushes of the series
            //that are not currently selected
            this.chart.SeriesMappings[i].SeriesDefinition.Appearance.Fill =
                new SolidColorBrush(seriesColors[i, 0]);
            this.chart.SeriesMappings[i].SeriesDefinition.Appearance.Stroke =
                new SolidColorBrush(seriesColors[i, 1]);
       
            //lower the opacity
            this.chart.SeriesMappings[i].SeriesDefinition.Appearance.
                Fill.Opacity = 0.1;
            this.chart.SeriesMappings[i].SeriesDefinition.Appearance.
                Stroke.Opacity = 0.1;
      
            //make sure that the rest of the series is not selected
            this.chart.DefaultView.ChartArea.UnselectSeries(index);
        }
    }

    I hope this helps.

    All the best,
    Petar Kirov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8.
Back to Top