StackedBar Chart, can this be done?

7 posts, 1 answers
  1. Roger
    Roger avatar
    25 posts
    Member since:
    Sep 2007

    Posted 12 Jul 2010 Link to this post

    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 { getset; }
                public double PurchasePrice { getset; }
                public DateTime PurchaseDate { getset; }

                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)));

                //????
            }
        }
  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 14 Jul 2010 Link to this post

    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
    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. Roger
    Roger avatar
    25 posts
    Member since:
    Sep 2007

    Posted 16 Jul 2010 Link to this post

    Here is an example based on the code in the snippet
  4. Answer
    Ves
    Admin
    Ves avatar
    2926 posts

    Posted 19 Jul 2010 Link to this post

    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
    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
  5. Roger
    Roger avatar
    25 posts
    Member since:
    Sep 2007

    Posted 19 Jul 2010 Link to this post

    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

  6. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 20 Jul 2010 Link to this post

    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
    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
  7. Roger
    Roger avatar
    25 posts
    Member since:
    Sep 2007

    Posted 20 Jul 2010 Link to this post

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