Custom ChartView legend

[pixie]

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

 

[Dess | Tech Support Engineer, Principal]

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

[pixie]

Hi,

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

 

 

Regards,

Pixie

[Manuel]

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

[Dess | Tech Support Engineer, Principal]

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

[Manuel]

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

 

[Dess | Tech Support Engineer, Principal]

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

[Saulo]

Igual como hacerle para visual basic

[Dess | Tech Support Engineer, Principal]

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