This is a migrated thread and some comments may be shown as answers.

StackedBarSeries Question

2 Answers 11 Views
Chart
This is a migrated thread and some comments may be shown as answers.
ALAN
Top achievements
Rank 1
ALAN asked on 06 Mar 2014, 04:17 PM
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>

2 Answers, 1 is accepted

Sort by
0
ALAN
Top achievements
Rank 1
answered on 10 Mar 2014, 10:01 AM
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>
0
Martin Ivanov
Telerik team
answered on 11 Mar 2014, 12:06 PM
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

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

Tags
Chart
Asked by
ALAN
Top achievements
Rank 1
Answers by
ALAN
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or