ChartView Indicators in Legend

[Benedikt]

Hey guys,

I want to use a Indicator in a Chartview.
This works without problems. But is it possible to show a entry in the RadLegend for this Indicator?
Some people wonder what the line is and if I could add a legend-entry it would be clear.

                    <telerik:MovingAverageIndicator 
                        Period="3"                                                   
                        CategoryBinding="LabelZeitebene"                                              
                        ValueBinding="Belastung" 
                        ItemsSource="{Binding DatenAnzeige}"
                        Stroke="{telerik:MaterialResource ResourceKey=MarkerBrush}"
                        />

 

Greetings Benedikt

[Stenly]

Hello Benedikt,

One way of achieving the wanted result is to manually add the MovingAverageIndicator element to the Items collection of the RadLegend instance. For example, you could subscribe to the Loaded event of the RadLegend element, and get the MovingAverageIndicator from the Indicators collection the RadCartesianChart control instance. Then, create a LegendItem class and set the Title property to the desired value (this will be displayed inside the RadLegend element). Finally, add the newly created LegendItem to the Items collection of the RadLegend instance. 

The following code snippets show the abovementioned approach's implementation:

<telerik:RadCartesianChart.Indicators>
    <telerik:MovingAverageIndicator Name="movingAverageIndicator"
                        Period="3"          
                        DisplayName="Moving Average Indicator"
                        CategoryBinding="Category"                                              
                        ValueBinding="Value" 
                        ItemsSource="{Binding Data}"
                        Stroke="{telerik:MaterialResource ResourceKey=MarkerBrush}">
    </telerik:MovingAverageIndicator>
</telerik:RadCartesianChart.Indicators>

private void RadLegend_Loaded(object sender, RoutedEventArgs e)
{
    var legend = (RadLegend)sender;
    //find the needed indicator from the Idnicators collection
    var indicator = this.chart.Indicators.FirstOrDefault(x => x.Name == "movingAverageIndicator");

    if (indicator != null)
    {
        legend.Items.Add(new Telerik.Windows.Controls.Legend.LegendItem() { Title = indicator.DisplayName } );
    }
}

Additionally, you could customize the appearance of the LegendItem through the MarkerGeometry, MarkerFill, and MarkerStroke properties.

<Window.Resources>
    <RectangleGeometry x:Key="indicatorGeometry" Rect="2, 5, 9, 2" />
</Window.Resources>

Setting the custom RectangleGeometry element to the MarkerGeometry property of the LegendItem class:

private void RadLegend_Loaded(object sender, RoutedEventArgs e)
{
    var legend = (RadLegend)sender;
    //find the needed indicator from the Idnicators collection
    var indicator = this.chart.Indicators.FirstOrDefault(x => x.Name == "movingAverageIndicator");
 
    if (indicator != null)
   {
        //custom geometry
	 var rectGeometry = this.Resources["indicatorGeometry"] as RectangleGeometry;

        legend.Items.Add(new Telerik.Windows.Controls.Legend.LegendItem() { Title = indicator.DisplayName, MarkerGeometry = rectGeometry, MarkerFill = Brushes.Black } );
    }
}

The produced result is as follows:

With that said, I have prepared a sample project, so, could you give it a try?

Regards,
Stenly
Progress Telerik

[Benedikt]

Hi Stenly,

thanks for the solution, this works great.

I have additionally set the MarkerFill to the Stroke of the indicator in case it changes.

                var rectGeometry = this.Resources["indicatorGeometry"] as RectangleGeometry;
                legend.Items.Add(new Telerik.Windows.Controls.Legend.LegendItem() { Title = indicator.DisplayName, MarkerGeometry = rectGeometry, MarkerFill = ((MovingAverageIndicator)indicator).Stroke});

 

Greetings
Benedikt