In this article I’m going
to explain how to create dynamic Google chart in ASP.NET using C#. I have already written many articles for Google charts
Create google column chart from database in
ASP.NET
Create google multi series column chart from
database in ASP.NET
Create google stacked column chart from
database in ASP.NET
Create google multi series Line chart from
database in ASP.NET
Create google Gauge chart from database in
ASP.NET
Create google Geochart with Region mode in
ASP.NET
Create google Geochart with Marker mode in
ASP.NET
I got a requirement that I
should make graphical representation for statistics data. So I’ve preferred to create
Pie Chart. Already we’ve standard web control for Pie Chart in ASP.NET and
AjaxControl Toolkit provides controls for Pie Chart.
Google provides
functionality to create Pie Chart in ASP.NET. Here I’ll show you how to create
Google Pie Chart
First create
a class that defines data which is required to display in Google chart. Sample
code is given below,
Sample
Code:
public class Data
{
public string
ColumnName = "";
public int Value = 0;
public Data(string
columnName, int value)
{
ColumnName = columnName;
Value = value;
}
}
Here
we’ve to create a WebMethod to get the data
from server.
[WebMethod]
public static List<Data> GetData()
{
SqlConnection
conn = new SqlConnection("Data Source=SPIDER;Initial Catalog=Northwind;Integrated Security=True");
DataSet
ds = new DataSet();
DataTable
dt = new DataTable();
conn.Open();
string
cmdstr = "select top 5 Country,
COUNT(CompanyName) [Total Suppliers] from [Suppliers] group by Country";
SqlCommand
cmd = new SqlCommand(cmdstr,
conn);
SqlDataAdapter
adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
dt = ds.Tables[0];
List<Data> dataList = new
List<Data>();
string
cat="";
int
val=0;
foreach
(DataRow dr in
dt.Rows)
{
cat=dr[0].ToString();
val=Convert.ToInt32(
dr[1]);
dataList.Add(new Data(cat,
val));
}
return
dataList;
}
Here we’ve to use following code to load google JSAPI
and JQuery libraries
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"> </script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
Then we’ve to use following code to load Google
visualization and package libraries
<script type="text/javascript">
google.load('visualization',
'1', { packages: ['corechart']
});
</script>
Here I’ll make Ajax call from client to get json object
with containing data to be displayed
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'Default.aspx/GetData',
data: '{}',
success:
function
(response) {
drawVisualization(response.d);
}
});
})
Here is the function that can be used to draw the chart
function drawVisualization(dataValues) {
var
data = new google.visualization.DataTable();
data.addColumn('string', 'Column Name');
data.addColumn('number', 'Column Value');
for
(var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
}
new
google.visualization.PieChart(document.getElementById('visualization')).
draw(data, { title: "Google Chart demo" });
}
Here we need to create a div tag that would be
displayed Google chart
<div id="visualization" style="width: 600px; height: 350px;">
</div>
Designer
source code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
<!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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization',
'1', { packages: ['corechart']
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'Default.aspx/GetData',
data: '{}',
success:
function
(response) {
drawVisualization(response.d);
}
});
})
function
drawVisualization(dataValues) {
var
data = new google.visualization.DataTable();
data.addColumn('string', 'Column Name');
data.addColumn('number', 'Column Value');
for
(var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
}
new
google.visualization.PieChart(document.getElementById('visualization')).
draw(data, { title: "Google Chart demo" });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="visualization" style="width: 600px; height: 350px;">
</div>
</form>
</body>
</html>
Code
Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
public partial class _Default :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
[WebMethod]
public static List<Data> GetData()
{
SqlConnection
conn = new SqlConnection("Data Source=SPIDER;Initial Catalog=Northwind;Integrated Security=True");
DataSet
ds = new DataSet();
DataTable
dt = new DataTable();
conn.Open();
string
cmdstr = "select top 5 Country,
COUNT(CompanyName) [Total Suppliers] from [Suppliers] group by Country";
SqlCommand
cmd = new SqlCommand(cmdstr,
conn);
SqlDataAdapter
adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
dt = ds.Tables[0];
List<Data> dataList = new
List<Data>();
string
cat="";
int
val=0;
foreach
(DataRow dr in
dt.Rows)
{
cat=dr[0].ToString();
val=Convert.ToInt32(
dr[1]);
dataList.Add(new Data(cat,
val));
}
return
dataList;
}
}
public class Data
{
public string ColumnName = "";
public int Value = 0;
public
Data(string columnName, int value)
{
ColumnName = columnName;
Value = value;
}
}