StackedBarSeries Question

[ALAN]

Hi,

I would like to use RadChart to show a series of stacked bars (based on time as XCategory). as shown in the attachment 'MockUpChart'.

The Xaml I have is below. This creates the four series definitions and hooks up the YValue and XCategory elements. However, I am not sure how to hook up the series to the underlying data in the binding.  The underlying data has the following structure:-

RiskID: the primary key
Period: a String  in the format YYYY-MM (XCategory)
Category: The series (i.e. there are four categories in the data and therefore four series defined below)
DriverScore: The value of the category for the period (YValue)

How do I hook up the Category field to the series so that the chart uses the values provided by the datasource?

When I generate the chart (see attachment 'CurrentChart') the values in the bars seems to repeat for each category and the two periods report the same values where the correct values can be seen in the attachment 'dataset'.

What am I doing wrong?

Regards,

Alan



<UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="StackedBarControl.StackedBarChart"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="700">

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadChart x:Name="radChart" Height="400" Width="700" VerticalAlignment="Top"
                          ItemsSource="{Binding Screen.qryDriverScoreLast12Periods}">
            <telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView ChartLegendPosition="Bottom">

                    <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend x:Name="chartLegend" Header="Risk Type" UseAutoGeneratedItems="False"/>
                    </telerik:ChartDefaultView.ChartLegend>
                    <telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartArea LegendName="chartLegend">
                        </telerik:ChartArea>
                    </telerik:ChartDefaultView.ChartArea>

                </telerik:ChartDefaultView>
            </telerik:RadChart.DefaultView>
            
            <telerik:RadChart.SeriesMappings>
                <!--Series 0 - Financial Risk-->
                <!--=========================-->
                <telerik:SeriesMapping LegendLabel="Financial">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:StackedBarSeriesDefinition ShowItemLabels="False" ShowItemToolTips="False"></telerik:StackedBarSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>                   
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="DriverScore"></telerik:ItemMapping>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Period"></telerik:ItemMapping>
                </telerik:SeriesMapping>

                <!--Series 1 - Strategic Risk-->
                <!--=========================-->
                <telerik:SeriesMapping LegendLabel="Strategic">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:StackedBarSeriesDefinition ShowItemLabels="False" ShowItemToolTips="False"></telerik:StackedBarSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="DriverScore"></telerik:ItemMapping>                    
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Period"></telerik:ItemMapping>
                </telerik:SeriesMapping>
            

            <!--Series 2 - Operational Risk-->
            <!--===========================-->
                <telerik:SeriesMapping LegendLabel="Operational">
                <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:StackedBarSeriesDefinition ShowItemLabels="False" ShowItemToolTips="False"></telerik:StackedBarSeriesDefinition>
                </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="DriverScore"></telerik:ItemMapping>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Period"></telerik:ItemMapping>
            </telerik:SeriesMapping>

                <!--Series 3 - Hazard Risk-->
                <!--===========================-->
                <telerik:SeriesMapping LegendLabel="Hazard">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:StackedBarSeriesDefinition ShowItemLabels="False" ShowItemToolTips="False"></telerik:StackedBarSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="DriverScore"></telerik:ItemMapping>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Period"></telerik:ItemMapping>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
        </telerik:RadChart>
    </Grid>
</UserControl>

[ALAN]

Hi,

I found a solution that works for my use case.  In this solution I assign an Itemsource to each series, one for each category that I want represented.  For each series the StackedGroupFieldName  setting is set to the field I want to categorise the data by i.e. Category in the example below.

This approach looks a little clumsy as it will not handle changes to the number of categories. I am sure this scenario would be better handled in codebehind or using a different XAML based approach.

Note: The Itemsource is based on a LightSwitch screen query as I am using this control as a UserControl with LightSwitch.

Regards,

Alan

XAML below:

<telerik:RadChart x:Name="radChart" Height="400" Width="700" VerticalAlignment="Top"
>
<telerik:RadChart.DefaultView>
<telerik:ChartDefaultView ChartLegendPosition="Bottom">

<telerik:ChartDefaultView.ChartLegend>
<telerik:ChartLegend x:Name="chartLegend" Header="Risk Type" UseAutoGeneratedItems="True"/>
</telerik:ChartDefaultView.ChartLegend>
<telerik:ChartDefaultView.ChartArea>
<telerik:ChartArea LegendName="chartLegend">
</telerik:ChartArea>
</telerik:ChartDefaultView.ChartArea>

</telerik:ChartDefaultView>
</telerik:RadChart.DefaultView>

<telerik:RadChart.SeriesMappings>

<!--Series 0 - Financial Risk-->
<!--=========================-->
<telerik:SeriesMapping LegendLabel="Financial" ItemsSource="{Binding Screen.qryDriverScoreLast12Periods}">
<telerik:SeriesMapping.GroupingSettings>
<telerik:GroupingSettings StackGroupFieldName="Category">
</telerik:GroupingSettings>
</telerik:SeriesMapping.GroupingSettings>
<telerik:SeriesMapping.SeriesDefinition >
<telerik:StackedBarSeriesDefinition ShowItemLabels="True" ShowItemToolTips="False"></telerik:StackedBarSeriesDefinition>
</telerik:SeriesMapping.SeriesDefinition>
<telerik:ItemMapping DataPointMember="YValue" FieldName="DriverScore"></telerik:ItemMapping>
<telerik:ItemMapping DataPointMember="XCategory" FieldName="Period"></telerik:ItemMapping>
</telerik:SeriesMapping>

<!--Series 1 - Strategic Risk-->
<!--=========================-->
<telerik:SeriesMapping LegendLabel="Strategic" ItemsSource="{Binding Screen.qryStrategicDriverLast12Periods}">
<telerik:SeriesMapping.GroupingSettings>
<telerik:GroupingSettings StackGroupFieldName="Category">
</telerik:GroupingSettings>
</telerik:SeriesMapping.GroupingSettings>
<telerik:SeriesMapping.SeriesDefinition >
<telerik:StackedBarSeriesDefinition ShowItemLabels="True" ShowItemToolTips="False"></telerik:StackedBarSeriesDefinition>
</telerik:SeriesMapping.SeriesDefinition>
<telerik:ItemMapping DataPointMember="YValue" FieldName="DriverScore"></telerik:ItemMapping>
<telerik:ItemMapping DataPointMember="XCategory" FieldName="Period"></telerik:ItemMapping>

</telerik:SeriesMapping>


<!--Series 2 - Operational Risk-->
<!--===========================-->
<telerik:SeriesMapping LegendLabel="Operational" ItemsSource="{Binding Screen.qryOperationalDriverLast12Periods}">
<telerik:SeriesMapping.GroupingSettings>
<telerik:GroupingSettings StackGroupFieldName="Category">
</telerik:GroupingSettings>
</telerik:SeriesMapping.GroupingSettings>
<telerik:SeriesMapping.SeriesDefinition >
<telerik:StackedBarSeriesDefinition ShowItemLabels="True" ShowItemToolTips="False"></telerik:StackedBarSeriesDefinition>
</telerik:SeriesMapping.SeriesDefinition>
<telerik:ItemMapping DataPointMember="YValue" FieldName="DriverScore"></telerik:ItemMapping>
<telerik:ItemMapping DataPointMember="XCategory" FieldName="Period"></telerik:ItemMapping>

</telerik:SeriesMapping>

<!--Series 3 - Hazard Risk-->
<!--===========================-->
<telerik:SeriesMapping LegendLabel="Hazard" ItemsSource="{Binding Screen.qryHazardDriverLast12Periods}">
<telerik:SeriesMapping.GroupingSettings>
<telerik:GroupingSettings StackGroupFieldName="Category">
</telerik:GroupingSettings>
</telerik:SeriesMapping.GroupingSettings>
<telerik:SeriesMapping.SeriesDefinition >
<telerik:StackedBarSeriesDefinition ShowItemLabels="True" ShowItemToolTips="False"></telerik:StackedBarSeriesDefinition>
</telerik:SeriesMapping.SeriesDefinition>
<telerik:ItemMapping DataPointMember="YValue" FieldName="DriverScore"></telerik:ItemMapping>
<telerik:ItemMapping DataPointMember="XCategory" FieldName="Period"></telerik:ItemMapping>

</telerik:SeriesMapping>
</telerik:RadChart.SeriesMappings>
</telerik:RadChart>

[Martin Ivanov]

Hello Alan,

Note that the RadChart has many known limitations and because of them we have designed and created a new charting components(RadChartView) with better implementation and improved performance. You can read more about the differences between the charts in the RadChart vs RadChartView help article.

To achieve your scenario with the RadChartView you can use the RadCartesianChart component with three BarSeries. In order for your series to be stacked you will need to set the CombineMode property of the BarSeries to Stack. If you want to show the labels you can set the ShowLabels property to True. 

<telerik:RadCartesianChart Palette="Ground">
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:DateTimeCategoricalAxis LabelFormat="yyyy-MM" />
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:BarSeries ItemsSource="{Binding Items1}" CombineMode="Stack" ShowLabels="True" CategoryBinding="XCategory" ValueBinding="YValue"/>
    <telerik:BarSeries ItemsSource="{Binding Items2}" CombineMode="Stack" ShowLabels="True" CategoryBinding="XCategory" ValueBinding="YValue"/>
    <telerik:BarSeries ItemsSource="{Binding Items3}" CombineMode="Stack" ShowLabels="True" CategoryBinding="XCategory" ValueBinding="YValue"/>
</telerik:RadCartesianChart>

I attached a sample project demonstrating this approach.

Regards,
Martin
Telerik