Tuesday, 28 May 2013

Pie chart using ASP.NET with AJAX Library

Step 1:

 Download latest  AjaxToolKit from  here . (Please download with compatible version of .net 3.5/4/4.5)

Step 2: 
 
  Add library to reference for solution.

Step 3:
 
  Default.aspx page code:

  <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
  
       <cc1:ToolkitScriptManager ID="scriptmanager1" runat ="server"></cc1:ToolkitScriptManager>
        <asp:DropDownList ID="ddlCountries" runat="server" OnSelectedIndexChanged="ddlCountries_SelectedIndexChanged"
            AutoPostBack="true">
        </asp:DropDownList>
        <hr />
        <cc1:piechart id="PieChart1" runat="server" chartheight="300"
        chartwidth="300" charttype="Column"
            charttitlecolor="#0E426C" visible="false">
        </cc1:piechart>
   
    </form>
</body>
</html>



Step 4:

  Default.aspx.cs page code:

    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string query = "select distinct shipcountry from [Test].[dbo].[Ship_orders]";
                DataTable dt = GetData(query);
                ddlCountries.DataSource = dt;
                ddlCountries.DataTextField = "shipcountry";
                ddlCountries.DataValueField = "shipcountry";
                ddlCountries.DataBind();
                ddlCountries.Items.Insert(0, new ListItem("Select", ""));
            }
 
        }

        protected void ddlCountries_SelectedIndexChanged(object sender, EventArgs e)
        {
            string query = string.Format("SELECT  [shipCity],count([orderId]) TotalOrders FROM [Test].[dbo].[Ship_orders] where [shipCountry] ='{0}' group by shipcity", ddlCountries.SelectedItem.Value);
            DataTable dt = GetData(query);           
            PieChart PieChart1 = (PieChart)Page.FindControl("PieChart1");
            foreach (DataRow row in dt.Rows)
            {
               
                PieChart1.PieChartValues.Add(new AjaxControlToolkit.PieChartValue
                {
                    Category = row["ShipCity"].ToString(),
                    Data = Convert.ToDecimal(row["TotalOrders"])                  
                });
            }
            PieChart1.Visible = ddlCountries.SelectedItem.Value != "";          
        }

        private static DataTable GetData(string query)
        {
            DataTable dt = new DataTable();
            string constr = ConfigurationManager.ConnectionStrings["SQLServerConnectionString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter())
                    {
                        cmd.CommandType = CommandType.Text;
                        cmd.Connection = con;
                        sda.SelectCommand = cmd;
                        sda.Fill(dt);
                    }
                }
                return dt;
            }
        }



Step 5: Make sql server connection with Table design as
         
           id                  int
           shipCity         nvarchar(50)
           orderId          int
           shipCountry    nvarchar(50)


Step 6: Note: [If you will get java runtime exception.then its browser issue]
           Above code only support IE 9 + , Firfox,Chrome .Does't support IE 8 Version
           So copy localhost url from IE 8 to any mention browsers

Step 7: Enjoy output




No comments:

Post a Comment