Custom ChartView legend

9 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
    2165 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. 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

  4. 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

  5. Dess
    Admin
    Dess avatar
    2165 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
  6. 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

     

  7. Dess
    Admin
    Dess avatar
    2165 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
  8. Saulo
    Saulo avatar
    3 posts
    Member since:
    Jul 2017

    Posted 29 Aug in reply to Manuel Link to this post

    Igual como hacerle para visual basic
  9. Dess
    Admin
    Dess avatar
    2165 posts

    Posted 30 Aug Link to this post

    Hello Saulo, 

    Thank you for writing.  

    I would like to note that the official language for communication in the forum is English. Thank you for your understanding.

    As to the VB.NET example, here is the converted code:
    Public Sub New()
        InitializeComponent()
        AddHandler Me.RadChartView1.ChartElement.LegendElement.VisualItemCreating, AddressOf LegendElement_VisualItemCreating
     
        Dim barSeries As 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"))
        Me.RadChartView1.Series.Add(barSeries)
     
        Dim barSeries2 As 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"))
        Me.RadChartView1.Series.Add(barSeries2)
     
        Me.RadChartView1.ShowLegend = True
        Me.RadChartView1.LegendTitle = "Legend"
    End Sub
     
    Private Sub LegendElement_VisualItemCreating(sender As Object, e As LegendItemElementCreatingEventArgs)
        e.ItemElement = New CustomLegendItemElement(e.LegendItem)
    End Sub
     
    Public Class CustomLegendItemElement
        Inherits LegendItemElement
        Public Sub New(item As LegendItem)
            MyBase.New(item)
        End Sub
     
        Private cb As RadCheckBoxElement
     
        Protected Overrides Sub CreateChildElements()
            MyBase.CreateChildElements()
            cb = New RadCheckBoxElement()
            Me.MarkerElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
            cb.ToggleState = Telerik.WinControls.Enumerations.ToggleState.[On]
            Me.Children.Add(cb)
            AddHandler cb.ToggleStateChanged, AddressOf cb_ToggleStateChanged
        End Sub
     
        Private Sub cb_ToggleStateChanged(sender As Object, args As StateChangedEventArgs)
            If args.ToggleState = Telerik.WinControls.Enumerations.ToggleState.[On] Then
                Me.LegendItem.Element.IsVisible = True
            Else
                Me.LegendItem.Element.IsVisible = False
            End If
        End Sub
    End Class

    Feel free to use our free online converter in future: http://converter.telerik.com/

    I hope this information helps. Should you have further questions I would be glad to help.

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top