Telerik Forums / UI for Silverlight Forum / Chart /

stacking bar chart and total on top of bar

Telerik UI for Silverlight
Resources Buy Try

6 posts, 0 answers

David Ocasio

157 posts

Member since:
Nov 2009

Posted 06 Dec 2010 Link to this post

In using the stacking bar chart I find that the labels display for each segment properly . I would also like to see the total of each bars segments appear above each respecive bar. Is that possible.

thanks
dco
Evgenia
Admin

1437 posts

Posted 09 Dec 2010 Link to this post

Hi David,

You can hide the labels for all the series, except for the last one. For it, you can use the #STSUM token (described here - http://www.telerik.com/help/silverlight/radchart-features-format-expressions.html) to display the stacked sum. Here is an example:

public partial class MainPage : UserControl

   {

       public class Company

       {

           public string Name { get; set; }

           public double Value1 { get; set; }

           public double Value2 { get; set; }

           public double Value3 { get; set; }

           public Company(string name, double value1, double value2, double value3)

           {

               Name = name;

               Value1 = value1;

               Value2 = value2;

               Value3 = value3;

           }

       }

       public MainPage()

       {

           InitializeComponent();

           List<Company> sampleData = new List<Company>();

           sampleData.Add(new Company("Physical", 100, 400, 300));

           sampleData.Add(new Company("Virtualized", 600, 200, 240));

           SeriesMapping seriesMapping = new SeriesMapping { LegendLabel = "Series 1" };

           seriesMapping.ItemMappings.Add(new ItemMapping("Value1", DataPointMember.YValue));

           seriesMapping.ItemMappings.Add(new ItemMapping("Name", DataPointMember.XCategory));

           seriesMapping.SeriesDefinition = new StackedBarSeriesDefinition() { ShowItemLabels = true };

           SeriesMapping seriesMapping2 = new SeriesMapping { LegendLabel = "Series 2" };

           seriesMapping2.ItemMappings.Add(new ItemMapping("Value2", DataPointMember.YValue));

           seriesMapping2.ItemMappings.Add(new ItemMapping("Name", DataPointMember.XCategory));

           seriesMapping2.SeriesDefinition = new StackedBarSeriesDefinition() { ShowItemLabels = true };

           SeriesMapping seriesMapping3 = new SeriesMapping { LegendLabel = "Series 3" };

           seriesMapping3.ItemMappings.Add(new ItemMapping("Value3", DataPointMember.YValue));

           seriesMapping3.ItemMappings.Add(new ItemMapping("Name", DataPointMember.XCategory));

           seriesMapping3.SeriesDefinition = new StackedBarSeriesDefinition() { ShowItemLabels = true, ItemLabelFormat= "#STSUM" };



           radChart1.ItemsSource = sampleData;

           radChart1.DefaultView.ChartArea.AxisY.AutoRange = false;

           radChart1.DefaultView.ChartArea.AxisY.AddRange(0, 1200, 100);

           radChart1.SeriesMappings.Add(seriesMapping);

           radChart1.SeriesMappings.Add(seriesMapping2);

           radChart1.SeriesMappings.Add(seriesMapping3);

       }

   }

The chart is bound using a list of business objects. List has two elements (that means you'll have two stacked bars). In order to map to such kind of business objects, you have to create a new instance of SeriesMapping. Each SeriesMapping has ItemMapping property. For each ItemMappings the following properties are set - DataPointMember and FieldName which specifies from where the data should be taken.

Regards,
Evgenia
the Telerik team

Browse the videos here>> to help you get started with RadControls for Silverlight
David Ocasio

157 posts

Member since:
Nov 2009

Posted 12 Jan 2011 Link to this post

I have used your suggestion of using the #stsum for displaying the sum of the stack.

The bottom series does not have a displayed label and the top has the #stsum.

Interestingly the displayed sum does not update if the bottom stacked (no label) value changes.
The bar size does increase and so i suspect it is bound correctly.

thanks
dco

<telerik:RadChart Grid.Row="0" x:Name="chartForcast"   >

    <telerik:RadChart.SeriesMappings>

        <telerik:SeriesMapping LegendLabel="Shipped Orders" >

            <telerik:SeriesMapping.SeriesDefinition >

                <telerik:StackedBarSeriesDefinition StackGroupName="Actual" ShowItemLabels="False" ShowItemToolTips="True" >

                    <telerik:StackedBarSeriesDefinition.Appearance>

                        <telerik:SeriesAppearanceSettings />

                    </telerik:StackedBarSeriesDefinition.Appearance>

                    <telerik:StackedBarSeriesDefinition.LabelSettings >

                        <telerik:BarLabelSettings LabelDisplayMode="Inside"    />

                    </telerik:StackedBarSeriesDefinition.LabelSettings>

                </telerik:StackedBarSeriesDefinition>

            </telerik:SeriesMapping.SeriesDefinition>

            <telerik:SeriesMapping.ItemMappings>

                <telerik:ItemMapping DataPointMember="XCategory"    FieldName="ForcastPeriodName" />

                <telerik:ItemMapping DataPointMember="YValue"       FieldName="Shipped" />

            </telerik:SeriesMapping.ItemMappings>

        </telerik:SeriesMapping>

        <telerik:SeriesMapping LegendLabel="Open Orders">

            <telerik:SeriesMapping.SeriesDefinition >

                <telerik:StackedBarSeriesDefinition StackGroupName="Actual" ItemLabelFormat="#STSUM" ShowItemToolTips="True" >

                    <telerik:BarSeriesDefinition.LabelSettings>

                        <telerik:BarLabelSettings LabelDisplayMode="Outside" />

                    </telerik:BarSeriesDefinition.LabelSettings>

                </telerik:StackedBarSeriesDefinition>

            </telerik:SeriesMapping.SeriesDefinition>

            <telerik:SeriesMapping.ItemMappings>

                <telerik:ItemMapping DataPointMember="XCategory"    FieldName="ForcastPeriodName" />

                <telerik:ItemMapping DataPointMember="YValue"       FieldName="Extended" />

            </telerik:SeriesMapping.ItemMappings>

        </telerik:SeriesMapping>

        <telerik:SeriesMapping LegendLabel="Forcast">

            <telerik:SeriesMapping.SeriesDefinition>

                <telerik:BarSeriesDefinition ItemLabelFormat="#DATAITEM.ForcastLabel" >

                    <telerik:BarSeriesDefinition.LabelSettings>

                        <telerik:BarLabelSettings LabelDisplayMode="Inside" />

                    </telerik:BarSeriesDefinition.LabelSettings>

                </telerik:BarSeriesDefinition>

            </telerik:SeriesMapping.SeriesDefinition>

            <telerik:SeriesMapping.ItemMappings>

                <telerik:ItemMapping DataPointMember="XCategory" FieldName="ForcastPeriodName" />

                <telerik:ItemMapping DataPointMember="YValue" FieldName="Forcast" />

            </telerik:SeriesMapping.ItemMappings>

        </telerik:SeriesMapping>

    </telerik:RadChart.SeriesMappings>

</telerik:RadChart>
Evgenia
Admin

1437 posts
Posted 17 Jan 2011 Link to this post

Hello David,

I was able to reproduce the scenario you described in your last post and everything is working as expected. You can find a sample project attached.
As I inspected your code snippet I saw that you are trying to change the LabelDisplayMode property to Outside by accessing it through BarSeriesDefinition. When you are using StackedBarSeriesDefinition you can set this property like this:

StackedBarSeriesDefinition stackedBar = new StackedBarSeriesDefinition();

            stackedBar.ItemLabelFormat = "#STSUM";

            stackedBar.ShowItemLabels = true;

            stackedBar.LabelSettings.LabelDisplayMode = LabelDisplayMode.Outside;

            seriesMapping3.SeriesDefinition = stackedBar;

No need of BarSeriesDefinition.

Greetings,
Evgenia
the Telerik team

Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>

SeriesMappingSL.rar
David Ocasio

157 posts

Member since:
Nov 2009

Posted 17 Jan 2011 Link to this post

Thanks Evgenia for your reply ,

Are you saying that you do not consider the sum not changing when the data changes a bug.
i would think that when the bar height changes the sum should change as well

I checked your project but it does not represent what i have done. Specifically it does not use an observablecollection and your class does not implement the notification interface

your button1 rebinds everytime . that is in fact how i corrected by code to change the sum ... but that is not the most desired . it would be prefered that as the data changed the sum increase/decreases along with the bar size.

thanks
dco
Evgenia
Admin

1437 posts

Posted 20 Jan 2011 Link to this post

Hello David,

Could you open a Support thread and send us a sample stripped down project where this issue reproduces so that we will be able to investigate it and help you?

Best wishes,
Evgenia
the Telerik team

Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>

stacking bar chart and total on top of bar

David Ocasio

Evgenia

David Ocasio

Evgenia

David Ocasio

Evgenia