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]
  18. GO
  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" %>
  3. <!DOCTYPE html>
  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. },
  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;
  11. namespace jQueryChartApplication
  12. {
  13. public partial class jQueryGoogleChart : System.Web.UI.Page
  14. {
  15. protected void Page_Load(object sender, EventArgs e)
  16. {
  18. }
  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. }
  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.