Post
Ask Question

Showing Google Chart (Pie) in ASP.Net With Database Using jQuery

The following is my SQL Server Data Table with the data I will show in the chart.

SQL server Data Table

                                                                              Image 1.

Here I will show the total number of users by their city (Address). The following is my table in design mode.

Table in design mode

                                                Image 2.

The following is the script of my table:

  1. CREATE TABLE [dbo].[Employee](  
  2.     [CompanyName] [varchar](50) NULL,  
  3.     [EmployeeCode] [int] NOT NULL,  
  4.     [EmployeeSupervisorCode] [int] NULL,  
  5.     [EmployeeName] [varchar](50) NULL,  
  6.     [ProjectName] [varchar](50) NULL,  
  7.     [JoiningDate] [datetime] NULL,  
  8.     [Experience] [varchar](50) NULL,  
  9.     [Mobile] [varchar](15) NULL,  
  10.     [Address] [varchar](50) NULL,  
  11.     [CreatedDate] [datetime] NULL,  
  12.  CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED   
  13. (  
  14.     [EmployeeCode] ASC  
  15. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  16. ) ON [PRIMARY]  
  17.   
  18. GO  
  19.   
  20. SET ANSI_PADDING OFF  
  21. GO  
The following is the aspx:

 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQueryGoogleChart.aspx.cs" Inherits="jQueryChartApplication.jQueryGoogleChart" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>  
  9.     <script src="http://www.google.com/jsapi" type="text/javascript"></script>  
  10.     <script type="text/javascript">           
  11.         google.load('visualization', '1', { packages: ['corechart'] });  
  12.     </script>  
  13.     <script type="text/javascript">  
  14.         $(function () {  
  15.             $.ajax({  
  16.                 type: 'POST',  
  17.                 dataType: 'json',  
  18.                 contentType: 'application/json',  
  19.                 url: 'jQueryGoogleChart.aspx/GetChartData',  
  20.                 data: '{}',  
  21.                 success:  
  22.                 function (response) {  
  23.                     drawchart(response.d);  
  24.                 },  
  25.   
  26.                 error: function () {  
  27.                     alert("Error loading data!");  
  28.                 }  
  29.             });  
  30.         })  
  31.         function drawchart(dataValues) {  
  32.             var data = new google.visualization.DataTable();  
  33.             data.addColumn('string', 'Column Name');  
  34.             data.addColumn('number', 'Column Value');  
  35.             for (var i = 0; i < dataValues.length; i++) {  
  36.                 data.addRow([dataValues[i].EmployeeCity, dataValues[i].Total]);  
  37.             }  
  38.             new google.visualization.PieChart(document.getElementById('myChartDiv')).  
  39.             draw(data, { title: "Google Chart in Asp.net using jQuery" });  
  40.         }  
  41.     </script>  
  42. </head>  
  43. <body>  
  44.     <form id="form1" runat="server">  
  45.         <div id="myChartDiv" style="width: 700px; height: 450px;">  
  46.         </div>  
  47.     </form>  
  48. </body>  
  49. </html>  
The following is the aspx.cs code:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. using System.Web.Services;  
  10.   
  11. namespace jQueryChartApplication  
  12. {  
  13.     public partial class jQueryGoogleChart : System.Web.UI.Page  
  14.     {  
  15.         protected void Page_Load(object sender, EventArgs e)  
  16.         {  
  17.   
  18.         }  
  19.   
  20.         [WebMethod]  
  21.         public static List<employeeDetails> GetChartData()  
  22.         {  
  23.             DataTable dt = new DataTable();  
  24.             using (SqlConnection con = new SqlConnection(@"Data Source=MyPC\SqlServer2k8;Integrated Security=true;Initial Catalog=Test"))  
  25.             {  
  26.                 con.Open();  
  27.                 SqlCommand cmd = new SqlCommand("SELECT Address as Name, COUNT(EMPLOYEECODE) AS Total  FROM Employee GROUP BY Address", con);  
  28.                 SqlDataAdapter da = new SqlDataAdapter(cmd);  
  29.                 da.Fill(dt);  
  30.                 con.Close();  
  31.             }  
  32.             List<employeeDetails> dataList = new List<employeeDetails>();  
  33.             foreach (DataRow dtrow in dt.Rows)  
  34.             {  
  35.                 employeeDetails details = new employeeDetails();  
  36.                 details.EmployeeCity = dtrow[0].ToString();  
  37.                 details.Total = Convert.ToInt32(dtrow[1]);  
  38.                 dataList.Add(details);  
  39.             }  
  40.             return dataList;  
  41.         }  
  42.   
  43.         public class employeeDetails  
  44.         {  
  45.             public string EmployeeCity { get; set; }  
  46.             public int Total { get; set; }  
  47.         }  
  48.     }  
  49. }  
Now run the application.

google chart
                                                                           Image 3.

Now hover the mouse on the chart.

pia chart
                                                                           Image 4.

Showing Google Chart
                                                                           Image 5.

 


Similar Articles