Hi samsmuthu,
Please refer below sample.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
SQL(Stored Procedure)
CREATE PROC [GetChartsByCountries]
AS
BEGIN
SELECT ShipCity, COUNT(orderid) TotalOrders
FROM Orders
WHERE ShipCountry = 'USA'
GROUP BY ShipCity
SELECT ShipCity, COUNT(orderid) TotalOrders
FROM Orders
WHERE ShipCountry = 'UK'
GROUP BY ShipCity
END
HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "Default.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
for (var i = 0; i < r.d.length; i++) {
var data = google.visualization.arrayToDataTable(r.d[i]);
var id = "chart" + (i + 1);
$('#charts').append($('<div id="' + id + '" style="height: 400px; width: 100%;">'));
new google.visualization.PieChart($("#" + id)[0]).draw(data, { is3D: true });
}
},
failure: function (r) {
alert(r.responseText);
},
error: function (r) {
alert(r.responseText);
}
});
}
</script>
<div id="charts"></div>
Namespaces
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
Code
C#
[WebMethod]
public static List<List<object>> GetChartData()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
List<List<object>> chartDatas = new List<List<object>>();
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("GetChartsByCountries"))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = con;
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataSet ds = new DataSet();
sda.Fill(ds);
foreach (DataTable dt in ds.Tables)
{
List<object> chartData = new List<object>();
chartData.Add(new object[] { "ShipCity", "TotalOrders" });
foreach (DataRow row in dt.Rows)
{
chartData.Add(new object[] { row["ShipCity"], row["TotalOrders"] });
}
chartDatas.Add(chartData);
}
}
return chartDatas;
}
}
}
VB.Net
<WebMethod()>
Public Shared Function GetChartData() As List(Of List(Of Object))
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim chartDatas As List(Of List(Of Object)) = New List(Of List(Of Object))()
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("GetChartsByCountries")
cmd.CommandType = CommandType.StoredProcedure
cmd.Connection = con
Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim ds As DataSet = New DataSet()
sda.Fill(ds)
For Each dt As DataTable In ds.Tables
Dim chartData As List(Of Object) = New List(Of Object)()
chartData.Add(New Object() {"ShipCity", "TotalOrders"})
For Each row As DataRow In dt.Rows
chartData.Add(New Object() {row("ShipCity"), row("TotalOrders")})
Next
chartDatas.Add(chartData)
Next
End Using
Return chartDatas
End Using
End Using
End Function
Screenshot