How set legend items and display horizontaly from code behind?

7 posts, 0 answers
  1. Chinmaya
    Chinmaya avatar
    24 posts
    Member since:
    Aug 2014

    Posted 08 Sep 2014 Link to this post

    my code is as below
     
    chart = new RadCartesianChart();

             PointSeries valueSeries = new PointSeries();
                            valueSeries.PointTemplate = App.Current.Resources["PointTemplate" + SeriesCounter] as DataTemplate;                       
                            valueSeries.ItemsSource = location.Parameter.Results;
                            valueSeries.FontSize= 1;
                            valueSeries.CategoryBinding = new PropertyNameDataPointBinding("Time");
                            valueSeries.ValueBinding = new PropertyNameDataPointBinding("Val");
                            valueSeries.Visibility = System.Windows.Visibility.Visible;
                            valueSeries.LegendSettings = new SeriesLegendSettings() { Title = "valueSeries"};

    // stuck to here to set
    MarkerGeometry property and   Dispatcher

    RadLegend legendSettings = new RadLegend();                       
                            legendSettings.Items = chart.LegendItems;                        
                            legendSettings.HorizontalAlignment = HorizontalAlignment.Center;                     
                            Grid.SetRow(legendSettings, 3);
                            Grid.SetColumn(legendSettings, 0);
                            LayoutRoot.Children.Add(legendSettings);

    further I would like to add check box to each legend item to make it invisible.

    thank you in advance 

                           
  2. Milena
    Admin
    Milena avatar
    203 posts

    Posted 10 Sep 2014 Link to this post

    Hi Chinmaya, 

    If you need to add CheckBoxes to the RadLegend, I’d suggest you use the ItemTemplate property of the legend to customize it instead of setting MarkerGeometry property and Dispatcher like so: 

    <DataTemplate x:Key="legendTemplate">
        <StackPanel Orientation="Horizontal">                 
            <CheckBox IsChecked="{Binding Presenter.Visibility, Mode=TwoWay, Converter={StaticResource visibilityToBooleanConverter}}"
                    BorderBrush="{Binding MarkerFill}"  BorderThickness="5" />
            <TextBlock Text="{Binding Title}" />
        </StackPanel>
    </DataTemplate>

    You can notice that in the code snippet: 
    - I use VisibilityToBooleanConverter (which is provided in Telerik.Windows.Controls namespace), to bind the check state of the CheckBox to the Visibility of the chart series;
    - the CheckBoxs BorderBrush is bound to MarkerFill in order to be with the same color as the corresponding PointSeries.

    As for the horizontally displaying of the LegendItems you can set the ItemsPanel property of the RadLegend to be a RadWrapPanel in order to arrange the items per your requirements and wraps them to new lines if no space is left. When you write this in code-behind it would be like this: 

    legendSettings.ItemsPanel = App.Current.Resources["legendPanelTemplate"] as ItemsPanelTemplate;

    For your convenience I implemented this approach in the attached project. Please take a look at it and let us know if it works for you.

    Regards,
    Milena
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. DevCraft banner
  4. Chinmaya
    Chinmaya avatar
    24 posts
    Member since:
    Aug 2014

    Posted 10 Sep 2014 in reply to Milena Link to this post

    I greatly appreciate the assistance, thank you very much for your help in solving this problem
  5. Chinmaya
    Chinmaya avatar
    24 posts
    Member since:
    Aug 2014

    Posted 01 Oct 2014 in reply to Milena Link to this post

    Hello Milena,

    with same above example now
    I am trying to bind IsChecked  and Unchecked  property with the to trigger RoutedEvent  and from that i want to set visibility of the particular series.

    below is what i tried.... !!! but i understood as this code is in app.resource is not binding properly

    can you suggest how to achieve this ?

        <DataTemplate x:Key="legendTemplate">
            <StackPanel Orientation="Horizontal">
                <Rectangle Height="10" Width="10" Fill="{Binding MarkerFill}" Margin="5,0,0,0"/>
                <CheckBox IsChecked="{Binding Path=myCheckBox_Checked}" Unchecked="{Binding Path=myCheckBox_Unchecked}"
                          BorderBrush="{Binding MarkerFill}"  BorderThickness="5" Margin="5,0,0,0"/>                                  
                <TextBlock Text="{Binding Title}" />
            </StackPanel>
        </DataTemplate>

    and I also tried by giving name to check box and to get hold of the checkbox but its was also not possible as this is in app.resource and inside DataTemplate.
  6. Milena
    Admin
    Milena avatar
    203 posts

    Posted 02 Oct 2014 Link to this post

    Hi Chinmaya,

    If I understood you right,you need to set visibility of the particular series. You can achieve this by using the Visibility property of the chart series. In the project I sent in my previous post you can use the method where you populate the series of the chart: 

    //add Series
    for (int i = 0; i < 5; i++)
    {
        PointSeries valueSeries = new PointSeries();
           ...
        if (i % 3 == 0)
        {
            valueSeries.Visibility = System.Windows.Visibility.Visible;
        }
        else
        {
            valueSeries.Visibility = System.Windows.Visibility.Collapsed;
        }
          ...
        chart.Series.Add(valueSeries);
    }

    The series' Visibility is bound to the Checkboxes in the Legend, so when you load the chart for the first time the result would look like this

    Please give this approach a try and let us know if further questions arise.

    Regards,
    Milena
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  7. Chinmaya
    Chinmaya avatar
    24 posts
    Member since:
    Aug 2014

    Posted 06 Oct 2014 in reply to Milena Link to this post

    Hello Milena,

    Ya that solved the problem.

    I have one more question regarding PointSeries TemplateSelector property 

    I am trying to implement as said in below example
    http://www.telerik.com/help/silverlight/radchartview-styles-and-templates-customizing-scatter-points.html

    but the problem is as i am creating chart and its series in code behind I dont know how to set the static resource from code behind.

    below is what i tried

     
                foreach (ParameterResults parameterResults in dictionaryParameterResults.Values)
                {
                    PointSeries valueSeries = new PointSeries();
                    valueSeries.Name = "ValueSeries" + i;
                    valueSeries.ItemsSource = parameterResults.Data;
                    valueSeries.PointSize = new Size() { Height = size, Width = size };
                    valueSeries.CategoryBinding = new PropertyNameDataPointBinding("Time");
                    valueSeries.ValueBinding = new PropertyNameDataPointBinding("Val");
                    valueSeries.Visibility = System.Windows.Visibility.Visible;
                    valueSeries.LegendSettings = new SeriesLegendSettings();
                    valueSeries.LegendSettings.Title = parameterResults.Location.Replace(locationInfo.Name + ".", "");

    // trying to select point template type
                    valueSeries.PointTemplateSelector =new  ScatterPointTemplateSelector();
                    
                    chart.Series.Add(valueSeries);
                    valueSeries.Visibility = System.Windows.Visibility.Collapsed;
                    valueSeries.Visibility = System.Windows.Visibility.Visible;

                    LineSeries upperTolerance = new LineSeries();
                    upperTolerance.Name = "UpperTolerance" + i;
                    upperTolerance.Stroke = new SolidColorBrush(Colors.Red);
                    upperTolerance.StrokeThickness = 1;
                    upperTolerance.ItemsSource = parameterResults.Data;
                    upperTolerance.CategoryBinding = new PropertyNameDataPointBinding("Time");
                    upperTolerance.ValueBinding = new PropertyNameDataPointBinding("Upp");
                    upperTolerance.Visibility = System.Windows.Visibility.Visible;

                    chart.Series.Add(upperTolerance);

                    LineSeries lowerTolerance = new LineSeries();
                    lowerTolerance.Name = "LowerTolerance" + i;
                    lowerTolerance.Stroke = new SolidColorBrush(Colors.Red);
                    lowerTolerance.StrokeThickness = 1;
                    lowerTolerance.ItemsSource = parameterResults.Data;
                    lowerTolerance.CategoryBinding = new PropertyNameDataPointBinding("Time");
                    lowerTolerance.ValueBinding = new PropertyNameDataPointBinding("Low");
                    lowerTolerance.Visibility = System.Windows.Visibility.Visible;

                    chart.Series.Add(lowerTolerance);


                    //RadLegend
                    RadLegend legendSettings = new RadLegend();
                    legendSettings.Items = chart.LegendItems;
                    legendSettings.ItemsPanel = App.Current.Resources["legendPanelTemplate"] as ItemsPanelTemplate;
                    legendSettings.ItemTemplate = App.Current.Resources["legendTemplate"] as DataTemplate;
                    legendSettings.Visibility = Visibility.Visible;
                    legendSettings.DefaultMarkerGeometry = new EllipseGeometry() { Center = new System.Windows.Point(6, 6), RadiusX = 4, RadiusY = 4 };
                    //legendSettings.HorizontalAlignment = HorizontalAlignment.Center;
                    Grid.SetColumn(legendSettings, 0);
                    slidingPanel.Children.Add(legendSettings);

                    i++;
                }
            }


      public class ScatterPointTemplateSelector : DataTemplateSelector
            {
                public override DataTemplate SelectTemplate(object item, DependencyObject container)
                {
                    var low = new PropertyNameDataPointBinding("Low");
                    var upp = new PropertyNameDataPointBinding("Upp");
                    var scatterPoint = (DataPoint)item;
                    var itemIndex = scatterPoint.Index;
                    var valSeries = container as PointSeries;         
                    var valDataPoint = valSeries.DataPoints[itemIndex];
                    var chart = valSeries.GetVisualParent<RadCartesianChart>();

                 
                    if ((valDataPoint.Value > 30) && (valDataPoint.Value <100 ))
                    {
                       return App.Current.Resources["ellipseTemplate"] as DataTemplate;  
                    }
                    else
                    {
                        return App.Current.Resources["rectangleTemplate"] as DataTemplate;
                    }
                }
            }

    here I have  two line series which have value upp and low which gives the tolerance of a chart series and i am trying to set rectangle shape for the values out side the upp and low tolerance.

  8. Milena
    Admin
    Milena avatar
    203 posts

    Posted 08 Oct 2014 Link to this post

    Hello Chinmaya,

    the code snippet you sent should work. You have set right the static resource in the ScatterPointTemplateSelector , the DataTemplate could be added in a ResourceDictionary (for instance in App.xaml) - we have used the same approach for the Legend template. Just don't forget to include Brush property in your business object. As you can see in the help topic for Customizing Scatter Points - the Fill property of the Ellipse is bound to the Brush property of ChartData class and the DataItem represents your business object: 

    <DataTemplate x:Key="ellipseTemplate">
    <Ellipse Height="10" Width="10" Fill="{Binding DataItem.Brush}" />
    </DataTemplate>

    Let me know if I was clear enough or if you need more information.

    And something in addition - please note that the topic of this forum post is about setting the legend in code behind. If you have other question related to this you can use the current thread, but if you have questions that are not related to previous questions from this thread, I would ask you to open a new support ticket or forum post. I ask this because it is much easier to follow communication and a single thread does not get too cluttered or confusing for both us and you.

    Thank you for understanding.

    Regards,
    Milena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner