Need a complete stacked column example

[Lanto]

I am looking for a complete Silverlight 4 stacked column chart example with XAM with databinding and a variable number of series
 
Thanks

[Evgenia]

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

[Lanto]

Where is the code?

[Lanto]

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

[Evgenia]

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

[Cale]

This is a good illustration of how to map the business data to stacked bars.  But how do we then set the stack colors?

[Evgenia]

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

[Martin]

-deleted-  wrong forum

[Lucie]

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

 

[Evgenia]

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