ashraft1 says:
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(function () {
drawChart();
$("#DrpMonth").on("change", function () {
drawChart();
});
});
Change the above with the below code.
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(function () {
$("#DrpMonth").on("change", function () {
drawChart();
});
});
Refering the below article i have created an example.
Check this example. Now please take its reference and correct your code.
HTML
<script type="text/javascript" src="http://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(function () {
// Draw Chart on DropDownList change.
$("[id*=DrpMonth]").on("change", function () {
drawChart();
});
// Draw Chart on Button click.
$("[id*=btnShowChart]").on("click", function () {
drawChart();
return false;
});
});
function drawChart() {
var country = $("[id*=DrpMonth] option:selected").val();
$.ajax({
type: "POST",
url: "Default.aspx/GetChartData",
data: "{country: '" + country + "'}",
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, { title: country + ' Distribution', is3D: false });
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<center>
<asp:DropDownList ID="DrpMonth" runat="server">
<asp:ListItem Text="Select" Value="Select" Selected="True"></asp:ListItem>
<asp:ListItem Text="Finland" Value="Finland"></asp:ListItem>
<asp:ListItem Text="Brazil" Value="Brazil"></asp:ListItem>
<asp:ListItem Text="USA" Value="USA"></asp:ListItem>
<asp:ListItem Text="Italy" Value="Italy"></asp:ListItem>
<asp:ListItem Text="Germany" Value="Germany"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnShowChart" Text="Show Chart" runat="server" />
</center>
<div id="chart" style="width: 900px; height: 500px;">
</div>
Namespace
C#
using System.Data;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Data
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient
Code
C#
[WebMethod]
public static List<object> GetChartData(string country)
{
string query = "SELECT ShipCity, COUNT(orderid) TotalOrders FROM Orders WHERE ShipCountry = @Country GROUP BY ShipCity";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
List<object> chartData = new List<object>();
chartData.Add(new object[] { "ShipCity", "TotalOrders" });
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Country", country);
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
chartData.Add(new object[] { sdr["ShipCity"], sdr["TotalOrders"] });
}
}
con.Close();
return chartData;
}
}
}
VB.Net
<WebMethod()>
Public Shared Function GetChartData(ByVal country As String) As List(Of Object)
Dim query As String = "SELECT ShipCity, COUNT(orderid) TotalOrders FROM Orders WHERE ShipCountry = @Country GROUP BY ShipCity"
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim chartData As List(Of Object) = New List(Of Object)()
chartData.Add(New Object() {"ShipCity", "TotalOrders"})
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand(query)
cmd.CommandType = CommandType.Text
cmd.Connection = con
cmd.Parameters.AddWithValue("@Country", country)
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
chartData.Add(New Object() {sdr("ShipCity"), sdr("TotalOrders")})
End While
End Using
con.Close()
Return chartData
End Using
End Using
End Function