Need a complete stacked column example

10 posts, 0 answers
  1. Lanto
    Lanto avatar
    8 posts
    Member since:
    Jan 2008

    Posted 20 Sep 2010 Link to this post

    I am looking for a complete Silverlight 4 stacked column chart example with XAM with databinding and a variable number of series
     
    Thanks
  2. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 22 Sep 2010 Link to this post

    Hi Jacobus,

    You can view a demo of stacked bar chart for Silverlight 4 - http://demos.telerik.com/silverlight/#Chart/Gallery/StackedBar with all the code. Please review the code and if you have any more questions don't hesitate to contact us!

    Sincerely yours,
    Evgenia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Lanto
    Lanto avatar
    8 posts
    Member since:
    Jan 2008

    Posted 22 Sep 2010 Link to this post

    Where is the code?
  4. Lanto
    Lanto avatar
    8 posts
    Member since:
    Jan 2008

    Posted 30 Sep 2010 Link to this post

    I am trying to draw a stacked bar as shown in picture link Required Stacked.

    Can you please give me the sample code of the same to draw.


    Thanks,
    Jacobus
  5. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 06 Oct 2010 Link to this post

    Hi Jacobus,

    The following code creates StackedBar as the one you wanted in your picture.
    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 };
                  
                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);
                RadChart1.DefaultView.ChartArea.AxisY.DefaultLabelFormat = "C";
            }    
      
        }

    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.
    To be able to show custom labels for Axis X tickpoints - chart uses Categories. In above XAML each XCategory is mapped to Name property of the class Company.
    Aditionally  to show Currency format for YAxis I set AxisY.DefaultLabelFormat property. This is described in our help article - http://www.telerik.com/help/silverlight/chart-custom-labels.html.
    I saw in your picture that you wanted the YAxis to start from 0. RadChart calculates it's range based on it's items values. You can manually set the appropriate range for your chart. This happens when you turn off AutoRange property and set custom values for MinValue, MaxValue and Step. You can find more information about this here - http://www.telerik.com/help/silverlight/radchart-features-axes-overview.html.

    Hope this information helps.

    Kind regards,
    Evgenia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Cale
    Cale avatar
    1 posts
    Member since:
    Aug 2011

    Posted 18 Nov 2011 Link to this post

    This is a good illustration of how to map the business data to stacked bars.  But how do we then set the stack colors?
  7. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 23 Nov 2011 Link to this post

    Hello Cale,

    You can set custom colors to your Series by using a PaletteBrushes as described in our help topic with sample code provided.

    Regards,
    Evgenia
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  8. Martin
    Martin avatar
    1 posts
    Member since:
    Jun 2011

    Posted 02 Mar 2012 Link to this post

    -deleted-  wrong forum
  9. Lucie
    Lucie avatar
    28 posts
    Member since:
    Jun 2011

    Posted 11 Jan 2013 Link to this post

    Good example, but in class Company are three values Value1, Value2, Value3 which should be displayed. I use Chart for different classes and I need variable number of values which should be displayed. For Class1 for example 3 value, for Class2 for example 5 values and so on.

    Is It possible and how?

     

    Regards

     

  10. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 16 Jan 2013 Link to this post

    Hello Lucie,

     For the purpose I suggest that you use Chart's SeriesMapping.ItemsSource feature. As its name implies, the feature allows each series having a separate items source. You might also take a look at our demo with source code provided.
    We highly reccomend that you use the new charting control RadChartView for any project that you are starting or if possible to migrate the old Chart to the new one. It has proven exceptional performance and intuitive and easy-to-use model (compared to the old Chart). Even though the migration process is not straightforward, you may find this help topic helpful in getting to know the main highlights of the two controls.
    It would be very useful for your scenario as each series in RadChartView has its own collection of data points which you may provide via ItemsSource property.

    Kind regards,
    Evgenia
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top