stacking bar chart and total on top of bar

6 posts, 0 answers
  1. David Ocasio
    David Ocasio avatar
    147 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
  2. Evgenia
    Admin
    Evgenia avatar
    1407 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
  3. DevCraft banner
  4. David Ocasio
    David Ocasio avatar
    147 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>
  5. Evgenia
    Admin
    Evgenia avatar
    1407 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>>
  6. David Ocasio
    David Ocasio avatar
    147 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
  7. Evgenia
    Admin
    Evgenia avatar
    1407 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>>
Back to Top
DevCraft banner