How set legend items and display horizontaly from code behind?

[Chinmaya]

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 

                       

[Milena]

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

 

 

[Chinmaya]

I greatly appreciate the assistance, thank you very much for your help in solving this problem

[Chinmaya]

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.

[Milena]

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

 

 

[Chinmaya]

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.

[Milena]

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