Remove From My Forums

How to make Stacked Column and Column Chart appear side by side C#

Question

User-322746205 posted

Hi all,
I am trying to draw a chart with stacked column and column chart appear to be side by side in a chart. However, its seem like not working, stacked column and column chart overlapped. Please help.

 private Series DrawSeriesChart1(TestDTOList objList, Color c, string flag,string customProperties = "")
    {
        try
        {
            Series s = new Series(flag);
            s.Color = c;

            foreach (TestDTO obj in objList.DTOList)
            {
                DataPoint p = new DataPoint();
                if (flag == "CarCount")
                {
                    p.SetValueXY(obj.Desc, obj.CarCount);
                    p.Label = objCarCount.ToString();
                }
                else if (flag == "VanCount")
                {
                    p.SetValueXY(obj.Desc, obj.VanCount);
                    p.Label = obj.VanCount.ToString();
                }
                else if (flag == "MotorCount")
                {
                    p.SetValueXY(obj.Desc, obj.MotorCount);
                    p.Label = obj.MotorCount.ToString();
                }
                s.Points.Add(p);
                s.IsValueShownAsLabel = true;

                if (customProperties != "")
                {
                    s.CustomProperties = customProperties;
                }
            }

            return s;
        }
        catch (Exception ex)
        {
          
            return null;
        }
    }
    private void DrawChart(TestDTOList objList)
    {
        try
        {
            Series sCar = DrawSeriesChart1(objList, Color.CornflowerBlue, "CarCount");
            sCar.ChartType = SeriesChartType.StackedColumn;
            sCar.IsXValueIndexed = false;
            sCar["DrawSideBySide"] = "True";
            Series sVan = DrawSeriesChart1(objList, Color.Yellow, "VanCount");
            sVan.ChartType = SeriesChartType.StackedColumn;
            sVan.IsXValueIndexed = false;
            sVan["DrawSideBySide"] = "True";
            Series sMotor = DrawSeriesChart1(objList, Color.MediumSpringGreen, "MotorCount");
            sMotor.ChartType = SeriesChartType.Column;
            sMotor.IsXValueIndexed = false;
            sMotor["DrawSideBySide"] = "True";
            chart1.Series.Add(sCar);
            chart1.Series.Add(sVan);
            chart1.Series.Add(sMotor);
       
            chart1.Legends.Add(new Legend());
            chart1.Legends[0].Docking = Docking.Right;
            chart1.Legends[0].LegendStyle = LegendStyle.Table;
            chart1.Legends[0].TableStyle = LegendTableStyle.Tall;
            chart1.Legends[0].Enabled = true;
            chart1.Legends[0].Font = new Font("Arial", 9, FontStyle.Regular);
           
            chart1.ChartAreas[0].AxisX.LabelStyle.Font = new Font("Arial", 9, FontStyle.Regular);
            chart1.ChartAreas[0].AxisX.LabelStyle.Interval = 1;
           
            chart1.ChartAreas[0].AxisX.Title = "";
            chart1.ChartAreas[0].AxisY.Title = "Total";
            chart1.ChartAreas[0].AxisY.IntervalAutoMode = IntervalAutoMode.VariableCount;
            chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.White;
            chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.White;
            chart1.ChartAreas[0].Area3DStyle.PointDepth = 25;
            
        
        }
        catch (Exception ex)
        {
          
        }
    }

Sunday, June 26, 2016 10:53 AM

Answers

User-271186128 posted

Hi ctee,

I am trying to draw a chart with stacked column and column chart appear to be side by side in a chart.

From your description, I suggest you could refer to the following code:

        <asp:Chart ID="Chart1" runat="server">
            <Series>
                <asp:Series Name="DevelopmentBacklog"></asp:Series>
                 <asp:Series Name="NewDaysScheduled"></asp:Series>
                  <asp:Series Name="DevDaysCompleted"></asp:Series>
                 <asp:Series Name="DevCapacity"></asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="chartArea"></asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

Code behind:

        protected void Page_Load(object sender, EventArgs e)
        {
            string[] xAxis = { "Jan 2011", "Feb 2011", "Mar 2011", "Apr 2011", "May 2011", "Jun 2011", "Jul 2011", "Aug 2011" };
            double[] yAxisDevBacklog = { 220, 200, 120, 30, 25, 50, 30, 590 };
            double[] yAxisDevDaysCompleted = { 140, 145, 165, 105, 98, 140, 80, 100 };
            double[] yAxisDevCapacity = { 140, 155, 182, 122, 184, 210, 190, 205 };
            double[] yAxisNewDaysScheduled = { 29, 40, 55, 48, 59, 75, 70, 182 };

            Chart1.Series["DevelopmentBacklog"].Points.DataBindXY(xAxis, yAxisDevBacklog);
            Chart1.Series["DevelopmentBacklog"].ChartType = SeriesChartType.StackedColumn;
            Chart1.Series["DevelopmentBacklog"].BorderWidth = 3;
            Chart1.Series["DevelopmentBacklog"].Color = Color.Blue;
            //// Uncomment this line to use the secondary y axis
            //// Chart1.Series["DevelopmentBacklog"].YAxisType = AxisType.Secondary;
            Chart1.Series["DevelopmentBacklog"]["StackedGroupName"] = "DevelopmentBacklog";

            Chart1.Series["NewDaysScheduled"].Points.DataBindXY(xAxis, yAxisNewDaysScheduled);
            Chart1.Series["NewDaysScheduled"].ChartType = SeriesChartType.StackedColumn;
            Chart1.Series["NewDaysScheduled"].BorderWidth = 3;
            Chart1.Series["NewDaysScheduled"].Color = Color.Green;
            Chart1.Series["NewDaysScheduled"]["StackedGroupName"] = "NewDaysScheduled";

            Chart1.Series["DevDaysCompleted"].Points.DataBindXY(xAxis, yAxisDevDaysCompleted);
            Chart1.Series["DevDaysCompleted"].ChartType = SeriesChartType.StackedColumn;
            Chart1.Series["DevDaysCompleted"].BorderWidth = 3;
            Chart1.Series["DevDaysCompleted"].Color = Color.LightGray;
            Chart1.Series["DevDaysCompleted"]["StackedGroupName"] = "DevDaysCompleted";

            Chart1.Series["DevCapacity"].Points.DataBindXY(xAxis, yAxisDevCapacity);
            Chart1.Series["DevCapacity"].ChartType = SeriesChartType.StackedColumn;
            Chart1.Series["DevCapacity"].BorderWidth = 3;
            Chart1.Series["DevCapacity"].Color = Color.OrangeRed;
            Chart1.Series["DevCapacity"]["StackedGroupName"] = "DevDaysCompleted";

            Chart1.ChartAreas["chartArea"].AxisX.MajorGrid.Enabled = false;
            Chart1.ChartAreas["chartArea"].AxisY2.MajorGrid.Enabled = false;

        }

Code from this link

The output screenshot:

You could use StackedGroupName attribute to place multiple series in the same stacked group, and assign the same name to them.

Best regards,
Dillion

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, June 29, 2016 9:48 AM

Answered by:

How to make Stacked Column and Column Chart appear side by side C#

Question

Answers