MSChart - Multiple columns grouped by date

Question

I need to display % utilization for several production lines over several days. So my Y axis will be the % values. I need bars for each of the production lines on each of the days. So my X axis would be groups of columns each labeled for the production line and then grouped and labeled for the date. How would I do this with the MSchart.

Below is a sample of what I need. It shows only 2 production lines (I will need to display more than 2 production lines) and does not include the production line name in the X-axis label.

enter image description here

I am almost there. Here is an image of the chart I am creating:

enter image description here

And here is the code that created it:

Private Sub ChartSetup()
    Try
        dvCapacityUtilization.RowFilter = ""
        dvCapacityUtilization.Sort = "Period ASC, CutUpSet ASC"
        Me.cuChart.BeginInit()
        With Me.cuChart
            .ChartAreas(0).AxisX.Interval = 30
            .ChartAreas(0).AxisX.LabelStyle.Format = "MM/yy"
            .ChartAreas(0).AxisX.LabelStyle.Angle = -90
            .ChartAreas(0).AxisY.MajorGrid.LineColor = Color.Gray
            .ChartAreas(0).AxisX.MajorGrid.LineColor = Color.White
            .ChartAreas(0).AxisX.MinorGrid.LineColor = Color.White
            .DataBindCrossTable(dvCapacityUtilization, _
                "CutUpSet", "Period", "CapacityUtilization", "Label = CapacityUtilization")
        End With
        '
        For Each series In Me.cuChart.Series
            series.IsValueShownAsLabel = False
            series.LabelFormat = "0.0%"
            series.SetCustomProperty("PointWidth", "0.5")
            series.SetCustomProperty("DrawingStyle", "Cylinder")
            series.XValueType = DataVisualization.Charting.ChartValueType.Date
        Next
        Me.cuChart.EndInit()
    Catch ex As Exception
        ErrHandler(Me.Name & " - Chart Setup", ex)
    End Try
End Sub

How do I turn the value labels off? In my code I used IsValueShownAsLabel = False but they are still displayed. I eventually will allow the user to turn the values on or off.
How do I format the values as XX.X%. In my code I used LabelFormat = 0.0% but that did not work.
How can I get the X axis labels to be the dates associated with the data values. In my code I used AxisX.Interval = 30 just to get the labels on the chart.

Follow up: As stated in #1 above, I used series.IsValueShownAsLabel = False but the value labels were still displayed. To remove them I had to do the following:

For Each point in series.Points point.Label = String.Empty Next

Why should I have to do this instead of using IsValueShownAsLabel = False?

mit mit · Accepted Answer · 2013-10-29T11:16:12

WINFORM : Finally find out with some R&D. Please follow below steps.

1. Drag and Drop new chart control from ToolBox in new winform.

2. Remove default "Series1" as it's dynamically generated as per column values.

3. Assume that we have following sample datatable.

 public DataTable GetDataTable()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("UtilizationDate", typeof(DateTime));
            dt.Columns.Add("ProductionLine", typeof(string));
            dt.Columns.Add("UtilizationValue", typeof(int));

            DataRow dr = dt.NewRow();
            dr[0] = DateTime.Now;
            dr[1] = "Proy01";
            dr[2] = 25;
            dt.Rows.Add(dr);          

            dr = dt.NewRow();
            dr[0] = DateTime.Now;
            dr[1] = "Proy02";
            dr[2] = 15;
            dt.Rows.Add(dr);


            dr = dt.NewRow();
            dr[0] = DateTime.Now;
            dr[1] = "Proy03";
            dr[2] = 125;
            dt.Rows.Add(dr);



            dr = dt.NewRow();
            dr[0] = DateTime.Now.AddMonths(1);
            dr[1] = "Proy01";
            dr[2] = 13;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Now.AddMonths(1);
            dr[1] = "Proy02";
            dr[2] = 111;
            dt.Rows.Add(dr);


            dr = dt.NewRow();
            dr[0] = DateTime.Now.AddMonths(1);
            dr[1] = "Proy03";
            dr[2] = 77;
            dt.Rows.Add(dr);


            dr = dt.NewRow();
            dr[0] = DateTime.Now.AddMonths(2);
            dr[1] = "Proy01";
            dr[2] = 13;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Now.AddMonths(2);
            dr[1] = "Proy02";
            dr[2] = 111;
            dt.Rows.Add(dr);


            dr = dt.NewRow();
            dr[0] = DateTime.Now.AddMonths(2);
            dr[1] = "Proy03";
            dr[2] = 77;
            dt.Rows.Add(dr);

            return dt;
        }

4. Now add following line of code using DataBindCrossTable.

chart1.ChartAreas["ChartArea1"].AxisX.IntervalType = DateTimeIntervalType.Months;
            chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;
            chart1.ChartAreas[0].AxisX.LabelStyle.Format = "MM-yy";
            DataTable dt = GetDataTable();
            chart1.DataBindCrossTable(dt.DefaultView, "ProductionLine", "UtilizationDate", "UtilizationValue", "Label=UtilizationValue");



            foreach (Series item in chart1.Series)
            {              
                item.IsValueShownAsLabel = true;
                item["PixelPointWidth"] = "50";
                item["DrawingStyle"] = "Cylinder";
                item.XValueType = ChartValueType.DateTime;
            }

MSChart - Multiple columns grouped by date

1 Answers