Hi tripurarijha1...,
Refer below sample code.
HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'USA City Distribution'
};
var chartType = $("#rblChartType input:checked").val();
//3D Pie Chart
if (chartType == "2") {
options.is3D = true;
}
//Doughnut Chart
if (chartType == "3") {
options.pieHole = 0.5;
}
$.ajax({
type: "POST",
url: "Default.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<asp:RadioButtonList ID="rblChartType" runat="server" AutoPostBack="true" RepeatDirection="Horizontal">
<asp:ListItem Text="Pie" Value="1" Selected="True" />
<asp:ListItem Text="Pie-3D" Value="2" />
<asp:ListItem Text="Doughnut" Value="3" />
</asp:RadioButtonList>
<div id="chart" style="width: 600px; height: 500px;">
</div>
Code
sqlwebmethod
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
public class sqlwebmethod
{
public SqlDataReader dr;
[WebMethod]
public IDataReader getdr(string cmd)
{
SqlConnection con = new SqlConnection();
{
if (con.State == ConnectionState.Open)
{
con.Close();
}
con.ConnectionString = ConfigurationManager.ConnectionStrings["cs"].ConnectionString;
if (con.State == ConnectionState.Closed)
{
con.Open();
}
SqlCommand execmd = new SqlCommand(cmd, con);
dr = execmd.ExecuteReader(CommandBehavior.CloseConnection);
if (dr.Read())
{
return dr;
}
else
{
return null;
}
}
}
}
C#
[WebMethod]
public static List<object> GetChartData()
{
sqlwebmethod sql = new sqlwebmethod();
string query = "SELECT ShipCity, COUNT(orderid) TotalOrders FROM Orders WHERE ShipCountry = 'USA' GROUP BY ShipCity";
IDataReader idr = sql.getdr(query);
List<object> chartData = new List<object>();
chartData.Add(new object[] { "ShipCity", "TotalOrders" });
idr.Read();
while (idr.Read())
{
chartData.Add(new object[] { idr["ShipCity"], idr["TotalOrders"] });
}
idr.Close();
return chartData;
}
Screenshot
![](https://i.imgur.com/Tlr7pxM.gif)