user123 user123 - 1 month ago 14
ASP.NET (C#) Question

How can i display multi series column chart in asp.net

In my web application, I need to display column chart data bind from data table i have 3 columns in that Month,Charges,Payments based on Month is X-axis in my chart area i need to display charges one side and payments column and i need to display different colors for charges and payments display legend also from data table.

My Chart image here:

enter image description here

i need same like this how can i do this please anyone can help me how to do this.

My code is:

<asp:Chart ID="Chart1" runat="server" Height="700px" Width="947px" BorderlineDashStyle="NotSet" BorderlineColor="Black" Visible="false">
<Series>

<asp:Series ChartType="Column" Color="blue" ></asp:Series>
<asp:Series ChartType="Column" Color="red"></asp:Series></Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="false">
<AxisX LineColor="DarkGray"><MajorGrid LineColor="LightGray" /></AxisX>
<AxisY LineColor="DarkGray"><MajorGrid LineColor="LightGray" /></AxisY>
<Area3DStyle Enable3D="false"></Area3DStyle>
</asp:ChartArea>
<asp:ChartArea Name="ChartArea2" Area3DStyle-Enable3D="false">
<AxisX LineColor="DarkGray"><MajorGrid LineColor="LightGray" /></AxisX>
<AxisY LineColor="DarkGray"><MajorGrid LineColor="LightGray" /></AxisY>
<Area3DStyle Enable3D="false"></Area3DStyle>
</asp:ChartArea>
</ChartAreas>

</asp:Chart>


enter image description here

Thank you

Answer

Assuming your DataTable has the following column/types:

    Columns.Add("Month", typeof(DateTime));
    Columns.Add("Charges", typeof(double));
    Columns.Add("Payments", typeof(double));

ASPX:

    <asp:Chart ID="Chart1" runat="server" Height="400px" Width="600px">
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1">
                <AxisY>
                    <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
                    <LabelStyle Format="C2" />
                </AxisY>
                <AxisX>
                    <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
                </AxisX>
            </asp:ChartArea>
        </ChartAreas>
        <Legends>
            <asp:Legend Name="Legend1">
            </asp:Legend>
        </Legends>
    </asp:Chart>

CS:

    protected void Page_Load(object sender, EventArgs e)
    {
        foreach (DataRow r in dt.Rows)
        {
            Series s = new Series(string.Format("{0} {1}", ((DateTime)r["Month"]).ToString("MMM"), ((DateTime)r["Month"]).Year));
            s.ChartType = SeriesChartType.Column;
            s.Points.AddXY("Charges", new object[] { r["Charges"] });
            s.Points.AddXY("Payments", new object[] { r["Payments"] });

            Chart1.Series.Add(s);
        }
    }

enter image description here


EDIT: Assuming your DataTable has the following column / types:

    Columns.Add("Month", typeof(string));
    Columns.Add("Charges", typeof(double));
    Columns.Add("Payments", typeof(double));

OR

    Columns.Add("Month");
    Columns.Add("Charges");
    Columns.Add("Payments");

Then you should change the the code to this:

    protected void Page_Load(object sender, EventArgs e)
    {
        foreach (DataRow r in dt.Rows)
        {
            Series s = new Series((string)r["Month"]);
            s.ChartType = SeriesChartType.Column;
            s.Points.AddXY("Charges", new object[] { r["Charges"] });
            s.Points.AddXY("Payments", new object[] { r["Payments"] });

            Chart1.Series.Add(s);
        }
    }