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

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.