Chart Legend Template and Series

[Pierre-François]

Hi all,

I've changed the style of the chart legend by adding a checkbox. The goal is to display / hide the associeted serie depending on the checkbox's status.
How to do that please ?
Thank you for you help

Regards
Pierre-François

[Pierre-François]

In other words, is there a way to change opacity or to hide a serie ?
thanks
Pierre-François

[Pierre-François]

Well.... finaly found the solution
Thanks ;-)

[overlord]

Well what was it? I'm trying to put a checkbox into each legend label that turns the series visibility on or off.

[Pierre-François]

Well you have to add a checkbox in the chartlegenditem like this

<SolidColorBrush x:Key="LegendForeground" Color="White"/>
        <System:Double x:Key="LegendItemMarkerStrokeThickness">2</System:Double>
        <Style x:Key="ChartLegendItemStyle1" TargetType="telerikCharting:ChartLegendItem">
            <Setter Property="Foreground" Value="{StaticResource LegendForeground}"/>
            <Setter Property="MarkerStrokeThickness" Value="{StaticResource LegendItemMarkerStrokeThickness}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikCharting:ChartLegendItem">
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <CheckBox  Click="CheckBox_Click" HorizontalAlignment="Left" Width="30" IsChecked="True" VerticalAlignment="Center"  Grid.Column="0" Tag="{TemplateBinding Label}" x:Name="cb_Legend"/>
                            <Rectangle  Grid.Column="1" x:Name="PART_LegendItemMarker" StrokeThickness="{TemplateBinding MarkerStrokeThickness}" RadiusX="2" RadiusY="2" Height="15" HorizontalAlignment="Left" Margin="0,0,0,5" Style="{TemplateBinding ItemStyle}" VerticalAlignment="Bottom" Width="30" />
                            <TextBlock Margin="5,5,5,5" VerticalAlignment="Center" Grid.Column="2" Foreground="{TemplateBinding Foreground}" Padding="0" Text="{TemplateBinding Label}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 And in the CheckBox_Click event handler, you add something like this:

CheckBox chk = (sender as CheckBox);
SeriesMapping coll = null;
// MyTagValue is the LegendItemLabel
if ((String)chk.Tag == "MyTagValue") {coll = RadChartStocks.SeriesMappings[0];}
....
if (chk.IsChecked.Value)
{
    coll.SeriesDefinition.Appearance.Stroke.Opacity = 1;
}
else
{
    coll.SeriesDefinition.Appearance.Stroke.Opacity = 0;
}

It works fine but I still have a problem with PointMarks. I can't hide them. So I've created a new post for this but no telerik expert answered.
Hope it helps

[overlord]

Brilliant, thanks. Found something similar out there as soon as I put up the question, but its nice to have it here. appreciate it.

[Pierre-François]

You are welcome! Don't hesitate to post how to hide the PointMarks if you have to deal with

[overlord]

did you put it in the 

<

 

Controls:RadChart.Resources>    </>  section?

 

[Pierre-François]

No in the

<Page.Resources>

section because I've multiple charts.
and in MyChart_Loaded event handler:

MyChart.DefaultView.ChartLegend.LegendItemStyle =

this.Resources["ChartLegendItemStyle1"] as Style;

 

[overlord]

That makes sense, I'll let you know if I find a solution to the point marks deal.

[overlord]

 

 

Why does this not work, I get Invalid attribute value in the TargetType="Controls:ChartLegendItem"> I thought this was jsut a pointer to the Telerik.Windows.Controls.Charting.ChartItemLegend object. works fine if I put something obvious like TargetType="TextBox">

What gives?


<UserControl x:Class="SilverlightApplication1.TeaLeaf2"

 

 

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

 

    Width="800" Height="300"

 

 

    xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting">

 

 

 

 

    <Grid>

 

 

 

 

        <Controls:RadChart x:Name="RadChart1">

 

 

 

        <Controls:RadChart.Resources>

 

 

 

                <Style x:Key="ChartLegendItemStyle1" TargetType="Controls:ChartLegendItem">

 

[Pierre-François]

I believe you may use another namespace:

 

xmlns

 

:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"

and then

 

TargetType

 

="telerikCharting:ChartLegendItem"

 

[Joel]

I tried this with the most recent bits, but it had some kind of issue with a TemplateBinding parameter.  I'd given up, but then I found a demo that does the same thing!

http://demos.telerik.com/silverlight/#Chart/SimpleFiltering

It works pretty well, but I have an issue when I repopulate the chart with new data.  The legend's checkboxes are always checked after populating, even if the line is still hidden from the last set of data.

Any ideas how to keep the check boxes synced with the lines?

To reproduce:
Populate chart
Turn off line
Repopulate chart

[Randy]

Having the same problem any resolutions?
After their demo code is in place, I click the checkbox and the data series hides but the checkbox stays checked.
Even if I explicitly uncheck it in the code behind.
Same thing for a radtogglebutton, the state of the toggle button will not change even as the data series hides or shows.

Telerik?

[Missing User]

Hi Randy,

Based on the supplied information, it is hard to determine what is causing this unwanted behavior. If the issue persist, you can open a formal support ticket, and send us a small working sample, incorporating your logic and showing the unwanted behavior. We will debug it locally, and advise you further.

Kind regards,

Polina

the Telerik team

[Joel]

Hi Polina,

The example on the demo page doesn't have this issue because the data being displayed never changes.  If you modify the example at http://demos.telerik.com/silverlight/#Chart/SimpleFiltering to update the data, you can see the problem by displaying some data, changing the series visibility through the legend and then repopulating the chart with data.

If Randy is experiencing the same issue I was, then all of the series lines will be displayed, but the legend will still show the state from before the chart was repopulated.

[Randy]

Thanks Joel.

A workaround I have at the moment is setting series definition visibility to hidden instead of collapsed.
It then all works.
Only bummer is the chart doesn't then rescale itself based on the series x & y values that are left visible.

[Missing User]

Hi,

Thank you for elaborating on this.

The checkboxes in the Legend by default have their IsChecked property set to True. That is why when the data source is changed, that does not affect their state. Basically, CheckBoxe.IsChecked property cannot be bound according to the corresponding series, because this is just a template for the hole legend checkboxes. However, you can implement custom logic in the code-behind of the chart, that will synchronize the series visibility with the corresponding checkboxes. When the data source is updated this causes the layout of the chart to be updated, too. For example you can get all generated checkboxes and their properties by ChildrenOfType<T> method which is part of the UIElementExtensions Class. In order to use it, you need to include namespace reference to Telerik.Windows.Controls. After you have all generated checkboxes you can make a verification according to their content values and to differentiate them.

In the attached file, you can find a sample project based on the Simple Filtering demo, that demonstrates the described solution. I hope that this helps.

Greetings,

Polina

the Telerik team

[Krasimir]

Hello Polina,

I saw your example and it's working OK for me, but I have some questions.
There are 2 series with default colors, but when I uncheck the first one and the Line of the RadChart is drawn with that exact color and not with the second color which is the actual color. How can I resolve this issue without hardcoding the colors of the series.
My second question is how can I resolve the problem when both checkboxes are unchecked (from the example). The ChartArea and Legend all disappear?

Thank you for your time,
Regards,
Krasimir

[Yavor]

Hello Krasimir,

This behavior can be observed when you set the visibility of the series to Collapsed. If you only hide your series everything works as expected. You can check the demo example that Polina shared in her previous post. It hides the series instead of collapsing them and that's why this problem is not observed.

Best wishes,
Yavor Ivanov
the Telerik team

[jfkrueger]

This is awsome, any way you could provider a vb.net example?

Thanks!

[jfkrueger]

well I don't think I need the entire thing in vb.net, just a little help translating this:

this is in the WireCommands() method:

this

 

 

.ChangeSeriesVisibilityCommand = new DelegateCommand(this.ChangeSeriesVisibility);

But when converted to vb.net:

 

ChangeSeriesVisibilityCommand =

 

New DelegateCommand(Me.ChangeSeriesVisibility)

 

It doesn't let me have any parameters in the ChangeSeriesVisibility method (parameter as Object) which is the whole point. So how do I get this specific piece to work in vb?

Thanks!

[jfkrueger]

I wasn't inheriting the ViewModelBase like in the example, so now that I am doing that I am getting a different error on this line:

ChangeSeriesVisibilityCommand = New DelegateCommand(ChangeSeriesVisibility)

It is now telling me that argument not specified for parameter 'parameter'..

[jfkrueger]

Nevermind, I see that the code converter missed the AddressOf in front of ChangeSeriesVisibility. I also found the "Simple Filtering Example" which was immensely helpful.