Search code examples
c#asp.net.netdata-visualizationmschart

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 X-axis in my chart area i need to display col1 one side and column 2nd and i need to display different colors for series display legend also from data table.

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

Thank you


Solution

  • 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);
            }
        }