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
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;
}
}
good job really good job . thanks for any good knowledge
ReplyDeletehttp://www.sai.com.sa/