ChartView Indicators in Legend

1 Answer 20 Views
ChartView
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
Benedikt asked on 20 Jan 2022, 01:29 PM | edited on 20 Jan 2022, 01:29 PM

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

1 Answer, 1 is accepted

Sort by
1
Accepted
Stenly
Telerik team
answered on 21 Jan 2022, 01:41 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
commented on 24 Jan 2022, 01:03 PM

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

Tags
ChartView
Asked by
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Stenly
Telerik team
Share this question
or