StackedBar Chart, can this be done?

[Roger]

I need a stacked bar chart where each individual 'block' that stacks up to a bar is a unique item/value. The examples I have seen seem to show the individual blocks of items making up the stack, so that each block is a category, that is in each bar. (Wow.. does what I said even make sense...)

Imagine 10 indivdual datapoints each point represents a sale to a company, with a name, price, and date. I need a bar chart by month where the total height of the bars is the total sales for the month, but the individual stacks in the bar represent the individual sales. I need to hover over an item in the bar and show the company name. Is this possible?

Here is some sample data:

    public partial class MainPage : UserControl
    {
        public class Company
        {
            public string Name { get; set; }
            public double PurchasePrice { get; set; }
            public DateTime PurchaseDate { get; set; }
 
            public Company(string name, double price, DateTime date)
            {
                Name = name;
                PurchasePrice = price;
                PurchaseDate = date;
            }
        }
 
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }
 
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            List<Company> sampleData = new List<Company>();
            sampleData.Add(new Company("AAA", 500, new DateTime(2010, 1, 1)));
            sampleData.Add(new Company("BBB", 600, new DateTime(2010, 1, 1)));
            sampleData.Add(new Company("CCC", 100, new DateTime(2010, 1, 1)));
            
            sampleData.Add(new Company("DDD", 100, new DateTime(2010, 2, 1)));
            sampleData.Add(new Company("EEE", 300, new DateTime(2010, 2, 1)));
            sampleData.Add(new Company("FFF", 200, new DateTime(2010, 2, 1)));
            sampleData.Add(new Company("GGG", 900, new DateTime(2010, 2, 1)));
            
            sampleData.Add(new Company("HHH", 400, new DateTime(2010, 3, 1)));
            sampleData.Add(new Company("III", 400, new DateTime(2010, 3, 1)));
            sampleData.Add(new Company("JJJ", 200, new DateTime(2010, 3, 1)));
 
            //????
        }
    }

[Vladimir Milev]

Hi Roger,

I have read your description several times and unfortunately I am unable to exactly understand what kind of chart you need. Can you please post a picture (generated by excel) or even drawn in mspaint. All I need is an illustration of how the data should be structured in the chart. It doesn't need to be pretty :-)

Regards,
Vladimir Milev
the Telerik team

[Roger]

Here is an example based on the code in the snippet

[Ves]

Hi Roger,

Please, find attached a small example, showing how to achieve the desired result with RadChart. A few words about it:
 - It uses Manual Series Mappings approach to create DataSeries - http://www.telerik.com/help/silverlight/radchart-populating-with-data-data-binding-with-manual-series-mapping.html
 - A ChartGroupDescriptor with a FieldName = "Name" is added. This effectively sends every single DataPoint to a new DataSeries, so that every DataPoint has a distinct color and a separate legend item. You can find more details about grouping here - http://www.telerik.com/help/silverlight/radchart-features-grouping-and-aggregation.html. Note, that the default chart palettes have 10 brushes, if you need more bruhs-- you can create your own palettes. Check this example for more details - http://demos.telerik.com/silverlight/#Chart/CustomPalette
 - I have wired the ItemDataBound event of RadChart to populate each individual item's tooltip.


Kind regards,
Ves
the Telerik team

[Roger]

Excellent, that gets me almost there. I left out one thing...

The chart will be showing one stacked bar per 12 month period. How do I ensure a space for the months with no value, but just put the date at the bottom of the chart?

Thanks,
Roger

[Ves]

Hello Roger,

RadChart allows two modes of displaying values for X axis - categorical and strict. The categorical mode treats the labels as strings and places the chart items (bars, pointmarks, etc) evenly spaced along the X axis, providing a "Category" for each X axis position. On the other hand -- in strict mode the chart items should keep their positions according to the XValue property, which is numeric, so items with XValue = 1, XValue = 2 and XValue = 5 will not be evenly spaced.

Unfortunately, there is a problem with StackedBars and strict mode, which would not allow you to achieve the desired result at the moment. This is why I would suggest keeping the categorical approach. Now, you will need to keep the list sorted and "full". That is -- there should be at least one item for each category(month). If there isn't any -- add one fake item with a value of 0. Do not forget to sort the list in the end and you will get a chart with empty spaces where no bars appear. Unfortunately, this will add legend items for the fake series, so you will need to hide the legend items completely. I hope this is acceptable. The problem I mentioned is logged in our system here, so you can track its resolution.

You can find attached the updated example.

Best regards,
Ves
the Telerik team

[Roger]

I got it to work by just adding empty records with 0 value for each month.