[Solved] Binding Chart to Legend with CombineMode Stack

[Max]

Hi Guys,

I've got a very simple example I have been trying to get to work, specifically, I am binding a RadCartesianChart with a stacked barseries. However unfortunately I have been unable to get the RadLegend control to work with my example.

So my model looks like this.

public class DissectionMonthlySales
{
    public DateTime Date { get; set; }
    public string Name { get; set; }
    public decimal Total { get; set; }
    public Brush Color { get; private set; }

    public override string ToString()
    {
        return string.Format("{0} - {1:c}", this.Name, this.Total);
    }
}

 

and my chart xaml looks like this

<telerik:RadCartesianChart x:Name="SalesByDissectionsChart">
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartTooltipBehavior Placement="Top" />
    </telerik:RadCartesianChart.Behaviors>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:DateTimeCategoricalAxis LabelFitMode="Rotate" LabelFormat="MMM-yyyy" />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis
        LabelFormat="c0"
        Minimum="0"
        SmartLabelsMode="SmartStep" />
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:BarSeries
    x:Name="SalesByDissectionSeries"
    CombineMode="Stack"
    ValueBinding="Total"
    StackGroupKey="Name"
    CategoryBinding="Date"
    ItemsSource="{Binding}"
    ShowLabels="False">

        <telerik:BarSeries.TooltipTemplate>
            <DataTemplate>
                <Border Padding="4" BorderBrush="LightGray">
                    <Border.Background>
                        <SolidColorBrush Opacity="0.7" Color="SlateGray" />
                    </Border.Background>
                    <Border.BitmapEffect>
                        <DropShadowBitmapEffect />
                    </Border.BitmapEffect>
                    <TextBlock Foreground="White" Text="{Binding DataItem}" />
                </Border>

            </DataTemplate>
        </telerik:BarSeries.TooltipTemplate>


        <telerik:BarSeries.PointTemplate>
            <DataTemplate>
                <Rectangle Fill="{Binding DataItem.Color}" />
            </DataTemplate>
        </telerik:BarSeries.PointTemplate>
    </telerik:BarSeries>
</telerik:RadCartesianChart>

 

and my radlegend looks like this.

 

<telerik:RadLegend
x:Name="RadLegend"
Margin="6"
Items="{Binding LegendItems, ElementName=SalesByDissectionsChart}" />

 

Basically what I want to achieve is the ability to display the StackGroup items in the radlegend.

However no matter what I do Chart.LegendItems seems to contain zero elements and I consequently can't get it to display my stacked groups in the legend. 

Can anyone provide any guidance on what I might be doing wrong?

 

 

 

[Martin Ivanov]

Hello Max,

In order to populate the LegendSettings collection of the chart you will need to set the LegendSettings property of the series. Otherwise, the collection will be empty and the legend won't display anything.

<telerik:BarSeries.LegendSettings>
    <telerik:SeriesLegendSettings Title="Bar Series" />
</telerik:BarSeries.LegendSettings>

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik

[Max]

I think I may not have explained myself properly.

In my case the RadLegendSeries needs to dynamically populate the legend based on the values inside my DissectionMonthlySales collection utilising the Name property.

I am able to do this programmatically by directly populating the RadLegend as such:

 

 RadLegend.Items = new LegendItemCollection();

 

but obviously I would prefer a binding approach to this if one is available?

 

[Martin Ivanov]

Hello Max,

RadLegend can work only with LegendItemCollection which is populated with LegendItems. Currently, it doesn't support data binding. However, you can achieve your requirement by using a an IValueConverter. Basically, you can bind your collection with business items using the converter to convert it to LegendItemCollection. You can assign the business object (DissectionMonthlySales) to the Presenter property of the corresponding LegendItem from where you can reach it. To change the appearance of the legend item control you can set the ItemTemplate property of the RadLegend control.

Regards,
Martin Ivanov
Progress Telerik