How do I create a bar chart showing percentages bound to a list of objects?

Question

Using the DataVisualization.Charting.Chart control, I need to create a bar chart (maybe stacked bar chart) that shows per person the number of hours booked for that person and a those hours' percentage of total hours. So far I am a bit overwhelmed by the number of collections and properties to set on this beast, so I'd appreciate some help on first getting my chart up, then I'll explore more on my own.

I need to bind the chart to a list of the following object:

Public Class DOHoursChartItem

    Public Property Name As String
    Public Property Hours As Double
    Public Property Percent As Double

End Class

I'm not sure I need the percentage property here, in favour of somehow letting the chart control handle this and just give it the Hours value per point and a total hours value, but that's why I'm asking: how do I set up the chart I describe above?

Answer 1

I'm not very good in VB, so I will start posting an example in C# (then I can try to translate it if you really need).

Here are three examples of methods that you can use to bind your items to a mschart and get columns charts:

Example 1: single area and side-by-side columns

private void FillChartSingleArea()
{
    // this set the datasource
    this.chart1.DataSource = GetItems();

    // clear all the (possible) existing series
    this.chart1.Series.Clear();

    // add the hours series
    var hoursSeries = this.chart1.Series.Add("Hours");
    hoursSeries.XValueMember = "Name";
    hoursSeries.YValueMembers = "Hours";
    hoursSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;

    // add the percentages series
    var percSeries = this.chart1.Series.Add("Percentages");
    percSeries.XValueMember = "Name";
    percSeries.YValueMembers = "Percent";
    percSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;
}

Example 2: two charts one upon the other

private void FillChartDoubleArea()
{
    // this set the datasource
    this.chart1.DataSource = GetItems();

    // clear all the (possible) existing series
    this.chart1.Series.Clear();

    // clear all the existing areas and add 2 new areas
    this.chart1.ChartAreas.Clear();
    this.chart1.ChartAreas.Add("Area1");
    this.chart1.ChartAreas.Add("Area2");

    // add the hours series
    var hoursSeries = this.chart1.Series.Add("Hours");
    hoursSeries.ChartArea = "Area1";
    hoursSeries.XValueMember = "Name";
    hoursSeries.YValueMembers = "Hours";
    hoursSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;

    // add the percentages series
    var percSeries = this.chart1.Series.Add("Percentages");
    hoursSeries.ChartArea = "Area2";
    percSeries.XValueMember = "Name";
    percSeries.YValueMembers = "Percent";
    percSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;
}

Example 3: single area and stacked columns

private void FillStackedChartSingleArea()
{
    // this set the datasource
    this.chart1.DataSource = GetItems();

    // clear all the (possible) existing series
    this.chart1.Series.Clear();

    // add the hours series
    var hoursSeries = this.chart1.Series.Add("Hours");
    hoursSeries.XValueMember = "Name";
    hoursSeries.YValueMembers = "Hours";
    hoursSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.StackedColumn;

    // add the percentages series
    var percSeries = this.chart1.Series.Add("Percentages");
    percSeries.XValueMember = "Name";
    percSeries.YValueMembers = "Percent";
    percSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.StackedColumn;
}

---

Where GetItems method is defined as follows (for all the examples):

private List<DOHoursChartItem> GetItems()
{
    var items = new List<DOHoursChartItem>()
    {
        new DOHoursChartItem("John", 120),
        new DOHoursChartItem("Amanda", 40),
        new DOHoursChartItem("David", 70),
        new DOHoursChartItem("Rachel", 10),
    };
    // compute the percentages
    var totalHours = items.Sum(x => x.Hours);
    foreach (var item in items)
        item.Percent = (item.Hours * 100.0) / totalHours;
    return items;
}

and DOHoursChartItem as :

    class DOHoursChartItem
    {
        public String Name { get; set; }
        public double Hours { get; set; }
        public double Percent { get; set; }
        public DOHoursChartItem(string name, double hours)
        {
            this.Name = name;
            this.Hours = hours;
        }
    }

N.B.

these are actually Column charts; by setting the ChartType to Bar (or StackedBar), you will get the same result but the bars will have an horizontal orientation.