Custom ChartView legend

7 posts, 0 answers
  1. pixie
    pixie avatar
    3 posts
    Member since:
    Mar 2015

    Posted 07 Aug 2015 Link to this post

    Hi,

    I'm wondering if we could customize a chartView Legend to display a checkbox instead of default colored square.

    The aim is the have the possibility to show/hide the related serie.

     

    Regards,

     

    Pixie

     

  2. Dess
    Admin
    Dess avatar
    1609 posts

    Posted 07 Aug 2015 Link to this post

    Hello Pixie,

    Thank you for writing.

    In order to achieve your goal, you can subscribe to the ChartElement.LegendElement.VisualItemCreating event and replace the default LegendItemElement with your custom one containing a RadCheckBoxElement. Here is a sample code snippet:
    public Form1()
    {
        InitializeComponent();
        this.radChartView1.ChartElement.LegendElement.VisualItemCreating += LegendElement_VisualItemCreating;
     
        BarSeries barSeries = new BarSeries("Performance", "RepresentativeName");
        barSeries.LegendTitle = "Q1";
        barSeries.DataPoints.Add(new CategoricalDataPoint(177, "Harley"));
        barSeries.DataPoints.Add(new CategoricalDataPoint(128, "White"));
        barSeries.DataPoints.Add(new CategoricalDataPoint(143, "Smith"));
        barSeries.DataPoints.Add(new CategoricalDataPoint(111, "Jones"));
        barSeries.DataPoints.Add(new CategoricalDataPoint(118, "Marshall"));
        this.radChartView1.Series.Add(barSeries);
     
        BarSeries barSeries2 = new BarSeries("Performance", "RepresentativeName");
        barSeries2.LegendTitle = "Q2";
        barSeries2.DataPoints.Add(new CategoricalDataPoint(153, "Harley"));
        barSeries2.DataPoints.Add(new CategoricalDataPoint(141, "White"));
        barSeries2.DataPoints.Add(new CategoricalDataPoint(130, "Smith"));
        barSeries2.DataPoints.Add(new CategoricalDataPoint(88, "Jones"));
        barSeries2.DataPoints.Add(new CategoricalDataPoint(109, "Marshall"));
        this.radChartView1.Series.Add(barSeries2);
         
        this.radChartView1.ShowLegend = true;
        this.radChartView1.LegendTitle = "Legend";
    }
     
    private void LegendElement_VisualItemCreating(object sender, LegendItemElementCreatingEventArgs e)
    {
        e.ItemElement = new CustomLegendItemElement(e.LegendItem);
    }
     
    public class CustomLegendItemElement : LegendItemElement
    {
        public CustomLegendItemElement(LegendItem item) : base(item)
        {
        }
     
        RadCheckBoxElement cb = new RadCheckBoxElement();
     
        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            this.MarkerElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
            cb.ToggleState = Telerik.WinControls.Enumerations.ToggleState.On;
            this.Children.Add(cb);
            cb.ToggleStateChanged += cb_ToggleStateChanged;
        }
     
        private void cb_ToggleStateChanged(object sender, StateChangedEventArgs args)
        {
            if (args.ToggleState == Telerik.WinControls.Enumerations.ToggleState.On)
            {
                this.LegendItem.Element.IsVisible = true;
            }
            else
            {
                this.LegendItem.Element.IsVisible = false;
            }
        }
    }

    I hope this information helps. Should you have further questions I would be glad to help.
     
    Regards,
    Dess
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WinForms is Visual Studio 2017 Ready
  4. pixie
    pixie avatar
    3 posts
    Member since:
    Mar 2015

    Posted 10 Aug 2015 in reply to Dess Link to this post

    Hi,

    Thank you very much, it's exactly what i'm looking for.

     

     

    Regards,

    Pixie

  5. Manuel
    Manuel avatar
    43 posts
    Member since:
    Jul 2010

    Posted 27 Nov 2015 in reply to pixie Link to this post

    Hi,

     

    in my case it is not working.

    the checkbox is in the middle, and the text is behind.

    the checkbox should be located on the left and the text should follow...

     

    Thank you,

    Manuel

  6. Dess
    Admin
    Dess avatar
    1609 posts

    Posted 02 Dec 2015 Link to this post

    Hello Manuel,

    Thank you for writing.

    Please find attached a sample project which result is illustrated on the attached screenshot.

    I hope this information helps. Should you have further questions I would be glad to help.
     
    Regards,
    Dess
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Manuel
    Manuel avatar
    43 posts
    Member since:
    Jul 2010

    Posted 03 Dec 2015 in reply to Dess Link to this post

    Hi Des,

     

    than k you for the example.

    The checkbox is now at the left, but the text is not on the left. It also goes out of the control/screen. (see attached file)

    This is my code:

    public class CustomLegendItemElement : LegendItemElement
    {
        public CustomLegendItemElement(LegendItem item)
            : base(item)
        {
        }
     
        RadCheckBoxElement cb = new RadCheckBoxElement();
     
        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            this.MarkerElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
            cb.ToggleState = Telerik.WinControls.Enumerations.ToggleState.On;
            this.Children.Insert(0, cb);
            cb.ToggleStateChanged += cb_ToggleStateChanged;
     
           this.TitleElement.DrawFill = true;
            this.TitleElement.DrawBorder = true;
        }
     
        private void cb_ToggleStateChanged(object sender, StateChangedEventArgs args)
        {
            if (args.ToggleState == Telerik.WinControls.Enumerations.ToggleState.On)
            {
                this.LegendItem.Element.IsVisible = true;
            }
            else
            {
                this.LegendItem.Element.IsVisible = false;
            }
        }
     
        protected override void Synchronize()
        {
            base.Synchronize();
            this.SyncVisualStyleProperties(this.LegendItem.Element, this.TitleElement);
        }
    }

    Thank you,

    Manuel

     

  8. Dess
    Admin
    Dess avatar
    1609 posts

    Posted 07 Dec 2015 Link to this post

    Hello Manuel,

    Thank you for writing back.

    The LegendItemElement.TitleElement is stretched horizontally by default. That is why you obtained the illustrated result. In order to left align the text part, you should set the LegendItemElement.TitleElement.StretchHorizontally property to false:
    public class CustomLegendItemElement : LegendItemElement
    {
        public CustomLegendItemElement(LegendItem item)
            : base(item)
        {
        }
     
        RadCheckBoxElement cb = new RadCheckBoxElement();
     
        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            this.MarkerElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
            cb.ToggleState = Telerik.WinControls.Enumerations.ToggleState.On;
            this.TitleElement.StretchHorizontally = false;
            this.Children.Insert(0,cb);
            cb.ToggleStateChanged += cb_ToggleStateChanged;
        }
     
        private void cb_ToggleStateChanged(object sender, StateChangedEventArgs args)
        {
            if (args.ToggleState == Telerik.WinControls.Enumerations.ToggleState.On)
            {
                this.LegendItem.Element.IsVisible = true;
            }
            else
            {
                this.LegendItem.Element.IsVisible = false;
            }
        }
    }

    I hope this information helps. If you have any additional questions, please let me know.

    Regards,
    Dess
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WinForms is Visual Studio 2017 Ready