locked
Need to render the chart RRS feed

  • Question

  • User197405698 posted

    Hi All,

    Using ASP.NET, I want to render a pie chart for below data.

    Project name Total Defects Active Defects Resolved Defects Closed Defects
    Project12 30 20 5 5

    please provide some sample code.

    Monday, September 4, 2017 11:45 PM

All replies

  • User2103319870 posted

    amolsaraf79

    Hi All,

    Using ASP.NET, I want to render a pie chart for below data.

    Project name Total Defects Active Defects Resolved Defects Closed Defects
    Project12 30 20 5 5

    please provide some sample code.

    You can try with the below implemenation

    HTML

    <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Chart ID="Chart1" runat="server">
                <Series>
                    <asp:Series Name="Series1" ChartType="Pie" Color="White" IsValueShownAsLabel="true"></asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
                </ChartAreas>
            </asp:Chart>
        </form>
    </body>
    </html>
    

    C#:

      protected void Page_Load(object sender, EventArgs e)
            {
    
                DataTable dt = new DataTable();
                dt.Columns.Add("Project Name", typeof(string));
                dt.Columns.Add("Project12", typeof(int));
                DataRow r1 = dt.NewRow();
                r1[0] = "Total Defects";
                r1[1] = 30;
                dt.Rows.Add(r1);
                DataRow r2 = dt.NewRow();
                r2[0] = "Active Defects";
                r2[1] = 20;
                dt.Rows.Add(r2);
                DataRow r3 = dt.NewRow();
                r3[0] = "Resolved Defects";
                r3[1] = 5;
                dt.Rows.Add(r3);
                DataRow r4 = dt.NewRow();
                r4[0] = "Closed Defects";
                r4[1] = 5;
                dt.Rows.Add(r4);
    
    
                string[] x = new string[dt.Rows.Count];
                int[] y = new int[dt.Rows.Count];
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    x[i] = dt.Rows[i][0].ToString();
                    y[i] = Convert.ToInt32(dt.Rows[i][1]);
                }
                Chart1.Series[0].Points.DataBindXY(x, y);
                Chart1.Series[0].ChartType = SeriesChartType.Pie;
                Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
            }

    Make sure you have the namespace reference added to your page

    using System.Web.UI.DataVisualization.Charting;

    Also you can take a look at this article for more details : https://www.aspsnippets.com/Articles/Create-ASPNet-Chart-Control-from-Database-using-C-and-VBNet-Example.aspx

    Demo

    Tuesday, September 5, 2017 1:55 AM
  • User-335504541 posted

    Hi amolsaraf79,

    You could also try to use ASP.Net AJAX Pie Chart Control.

    For example:

    In aspx:

                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <ajaxToolkit:PieChart ID="PieChart1" runat="server" ChartHeight="300" ChartWidth = "300"
        ChartType="Column" ChartTitleColor="#0E426C">
                   
                </ajaxToolkit:PieChart>

    In the behind code:

     protected void Page_Load(object sender, EventArgs e)
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("Active Defects");
                dt.Columns.Add("Resolved Defects");
                dt.Columns.Add("Closed Defects");
                dt.Rows.Add(20, 5, 5);
                //Add to the Pie Chart Values
                foreach (DataRow row in dt.Rows)
                {
                    PieChart1.PieChartValues.Add(new AjaxControlToolkit.PieChartValue
                    {
                        Category = "Active Defects",
                        Data = Convert.ToDecimal(row["Active Defects"])
                    });
                    PieChart1.PieChartValues.Add(new AjaxControlToolkit.PieChartValue
                    {
                        Category = "Resolved Defects",
                        Data = Convert.ToDecimal(row["Resolved Defects"])
                    });
                    PieChart1.PieChartValues.Add(new AjaxControlToolkit.PieChartValue
                    {
                        Category = "Closed Defects",
                        Data = Convert.ToDecimal(row["Closed Defects"])
                    });
                }
            }

    And the result is:

    And you could refer to link below for more information:

    https://www.aspsnippets.com/Articles/ASPNet-AJAX-Pie-Chart-Control-Populate-from-Database-example.aspx

    Best Regards,

    Billy

    Thursday, September 21, 2017 5:06 AM