This is a migrated thread and some comments may be shown as answers.

Chart Legend Template and Series

23 Answers 268 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Pierre-François
Top achievements
Rank 1
Pierre-François asked on 26 Nov 2009, 02:21 PM
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

23 Answers, 1 is accepted

Sort by
0
Pierre-François
Top achievements
Rank 1
answered on 27 Nov 2009, 07:55 PM
In other words, is there a way to change opacity or to hide a serie ?
thanks
Pierre-Fran├žois
0
Pierre-François
Top achievements
Rank 1
answered on 29 Nov 2009, 04:45 PM
Well.... finaly found the solution
Thanks ;-)
0
overlord
Top achievements
Rank 1
answered on 02 Dec 2009, 01:54 PM
Well what was it? I'm trying to put a checkbox into each legend label that turns the series visibility on or off.
0
Pierre-François
Top achievements
Rank 1
answered on 02 Dec 2009, 02:08 PM
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


0
overlord
Top achievements
Rank 1
answered on 02 Dec 2009, 02:10 PM
Brilliant, thanks. Found something similar out there as soon as I put up the question, but its nice to have it here. appreciate it.
0
Pierre-François
Top achievements
Rank 1
answered on 02 Dec 2009, 02:13 PM
You are welcome! Don't hesitate to post how to hide the PointMarks if you have to deal with
0
overlord
Top achievements
Rank 1
answered on 02 Dec 2009, 02:13 PM
did you put it in the 

<

 

Controls:RadChart.Resources>    </>  section?

 

0
Pierre-François
Top achievements
Rank 1
answered on 02 Dec 2009, 02:15 PM
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;

 

0
overlord
Top achievements
Rank 1
answered on 02 Dec 2009, 02:16 PM
That makes sense, I'll let you know if I find a solution to the point marks deal.
0
overlord
Top achievements
Rank 1
answered on 02 Dec 2009, 04:06 PM

 

 

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">

 

0
Pierre-François
Top achievements
Rank 1
answered on 02 Dec 2009, 04:11 PM

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"

 


0
Joel
Top achievements
Rank 1
answered on 02 Jun 2011, 11:14 PM
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
0
Randy
Top achievements
Rank 1
answered on 04 Aug 2011, 02:26 AM
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?
0
Missing User
answered on 08 Aug 2011, 03:16 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

0
Joel
Top achievements
Rank 1
answered on 08 Aug 2011, 04:23 PM
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.
0
Randy
Top achievements
Rank 1
answered on 08 Aug 2011, 11:49 PM
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.
0
Missing User
answered on 11 Aug 2011, 04:30 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

0
Krasimir
Top achievements
Rank 1
answered on 24 Aug 2011, 02:49 PM
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
0
Yavor
Telerik team
answered on 29 Aug 2011, 08:04 AM
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

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
jfkrueger
Top achievements
Rank 1
answered on 20 Nov 2011, 04:20 PM
This is awsome, any way you could provider a vb.net example?

Thanks!
0
jfkrueger
Top achievements
Rank 1
answered on 21 Nov 2011, 05:34 PM
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!

0
jfkrueger
Top achievements
Rank 1
answered on 21 Nov 2011, 05:41 PM
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'..

0
jfkrueger
Top achievements
Rank 1
answered on 22 Nov 2011, 05:33 PM
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.
Tags
Chart
Asked by
Pierre-François
Top achievements
Rank 1
Answers by
Pierre-François
Top achievements
Rank 1
overlord
Top achievements
Rank 1
Joel
Top achievements
Rank 1
Randy
Top achievements
Rank 1
Missing User
Krasimir
Top achievements
Rank 1
Yavor
Telerik team
jfkrueger
Top achievements
Rank 1
Share this question
or