Binding Chart to Legend with CombineMode Stack

4 posts, 0 answers
  1. Max
    Max avatar
    2 posts
    Member since:
    Nov 2017

    Posted 23 Nov Link to this post

    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?

     

     

     

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1475 posts

    Posted 28 Nov Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Max
    Max avatar
    2 posts
    Member since:
    Nov 2017

    Posted 28 Nov in reply to Martin Ivanov Link to this post

    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?

     

  4. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1475 posts

    Posted 28 Nov Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top