Chart Legend Template and Series

24 posts, 0 answers
  1. Pierre-François
    Pierre-François avatar
    12 posts
    Member since:
    Mar 2009

    Posted 26 Nov 2009 Link to this post

    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
  2. Pierre-François
    Pierre-François avatar
    12 posts
    Member since:
    Mar 2009

    Posted 27 Nov 2009 Link to this post

    In other words, is there a way to change opacity or to hide a serie ?
    thanks
    Pierre-François
  3. DevCraft banner
  4. Pierre-François
    Pierre-François avatar
    12 posts
    Member since:
    Mar 2009

    Posted 29 Nov 2009 Link to this post

    Well.... finaly found the solution
    Thanks ;-)
  5. overlord
    overlord avatar
    5 posts
    Member since:
    Nov 2009

    Posted 02 Dec 2009 Link to this post

    Well what was it? I'm trying to put a checkbox into each legend label that turns the series visibility on or off.
  6. Pierre-François
    Pierre-François avatar
    12 posts
    Member since:
    Mar 2009

    Posted 02 Dec 2009 Link to this post

    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


  7. overlord
    overlord avatar
    5 posts
    Member since:
    Nov 2009

    Posted 02 Dec 2009 Link to this post

    Brilliant, thanks. Found something similar out there as soon as I put up the question, but its nice to have it here. appreciate it.
  8. Pierre-François
    Pierre-François avatar
    12 posts
    Member since:
    Mar 2009

    Posted 02 Dec 2009 Link to this post

    You are welcome! Don't hesitate to post how to hide the PointMarks if you have to deal with
  9. overlord
    overlord avatar
    5 posts
    Member since:
    Nov 2009

    Posted 02 Dec 2009 Link to this post

    did you put it in the 

    <

     

    Controls:RadChart.Resources>    </>  section?

     

  10. Pierre-François
    Pierre-François avatar
    12 posts
    Member since:
    Mar 2009

    Posted 02 Dec 2009 Link to this post

    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;

     

  11. overlord
    overlord avatar
    5 posts
    Member since:
    Nov 2009

    Posted 02 Dec 2009 Link to this post

    That makes sense, I'll let you know if I find a solution to the point marks deal.
  12. overlord
    overlord avatar
    5 posts
    Member since:
    Nov 2009

    Posted 02 Dec 2009 Link to this post

     

     

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

     

  13. Pierre-François
    Pierre-François avatar
    12 posts
    Member since:
    Mar 2009

    Posted 02 Dec 2009 Link to this post

    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"

     


  14. Joel
    Joel avatar
    41 posts
    Member since:
    Nov 2010

    Posted 02 Jun 2011 Link to this post

    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
  15. Randy
    Randy avatar
    40 posts
    Member since:
    Nov 2007

    Posted 03 Aug 2011 Link to this post

    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?
  16. Missing user
    Missing user avatar

    Posted 08 Aug 2011 Link to this post

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

  17. Joel
    Joel avatar
    41 posts
    Member since:
    Nov 2010

    Posted 08 Aug 2011 Link to this post

    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.
  18. Randy
    Randy avatar
    40 posts
    Member since:
    Nov 2007

    Posted 08 Aug 2011 Link to this post

    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.
  19. Missing user
    Missing user avatar

    Posted 11 Aug 2011 Link to this post

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

  20. Krasimir
    Krasimir avatar
    15 posts
    Member since:
    Jan 2011

    Posted 24 Aug 2011 Link to this post

    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
  21. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 29 Aug 2011 Link to this post

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

  22. jfkrueger
    jfkrueger avatar
    269 posts
    Member since:
    Jul 2012

    Posted 20 Nov 2011 Link to this post

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

    Thanks!
  23. jfkrueger
    jfkrueger avatar
    269 posts
    Member since:
    Jul 2012

    Posted 21 Nov 2011 Link to this post

    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!

  24. jfkrueger
    jfkrueger avatar
    269 posts
    Member since:
    Jul 2012

    Posted 21 Nov 2011 Link to this post

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

  25. jfkrueger
    jfkrueger avatar
    269 posts
    Member since:
    Jul 2012

    Posted 22 Nov 2011 Link to this post

    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.
Back to Top
DevCraft banner