ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Google Chart API: Load Google Chart on DropDownList Change in ASP.Net using C# and VB.Net<p>Hi&nbsp;kitty,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p>Database</p> <p>For this example I have used of Northwind database that you can download using the link given below.</p> <p><a href="https://www.aspsnippets.com/Articles/Install-Microsoft-Northwind-and-Pubs-Sample-databases-in-SQL-Server-Management-Studio.aspx">Download Northwind Database</a></p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://www.gstatic.com/charts/loader.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { google.charts.load(&#39;current&#39;, { &#39;packages&#39;: [&#39;corechart&#39;] }); //google.charts.setOnLoadCallback(drawChart); $(&#39;#ddlCountries&#39;).on(&#39;change&#39;, function () { drawChart($(this).find(&#34;option:selected&#34;).val()); }); function drawChart(country) { $.ajax({ url: &#34;Default.aspx/GetChartData&#34;, data: &#39;{country:&#34;&#39; + country + &#39;&#34;}&#39;, type: &#34;POST&#34;, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34; }).done(function (data) { var info = new google.visualization.DataTable(); info.addColumn(&#39;string&#39;, &#39;ShipCity&#39;); info.addColumn(&#39;number&#39;, &#39;TotalOrders&#39;); var json = data.d; json.forEach(function (row) { info.addRow([row[0], row[1]]); }); var options = { &#39;title&#39;: $(&#39;#ddlCountries&#39;).find(&#34;option:selected&#34;).val() + &#39; City Distribution&#39;, &#39;width&#39;: 400, &#39;height&#39;: 300 }; var chart = new google.visualization.PieChart(document.getElementById(&#39;divChart&#39;)); chart.draw(info, options); }).fail(function (err) { debugger; console.log(err); }); } }); &lt;/script&gt; &lt;asp:DropDownList ID=&#34;ddlCountries&#34; runat=&#34;server&#34;&gt; &lt;/asp:DropDownList&gt; &lt;hr /&gt; &lt;div id=&#34;divChart&#34; style=&#34;width: 900px; height: 500px;&#34;&gt; &lt;/div&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Configuration Imports System.Data Imports System.Data.SqlClient Imports System.Web.Services </pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { DataTable dt = new DataTable(); string constr = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand(&#34;SELECT DISTINCT ShipCountry FROM Orders&#34;, con)) { cmd.CommandType = CommandType.Text; SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(dt); } } ddlCountries.Items.Clear(); ddlCountries.Items.Insert(0, new ListItem(&#34;--Select--&#34;, &#34;0&#34;)); ddlCountries.AppendDataBoundItems = true; ddlCountries.DataTextField = &#34;ShipCountry&#34;; ddlCountries.DataValueField = &#34;ShipCountry&#34;; ddlCountries.DataSource = dt; ddlCountries.DataBind(); } } [WebMethod] public static List&lt;object&gt; GetChartData(string country) { List&lt;object&gt; chartData = new List&lt;object&gt;(); string query = &#34;SELECT TOP 5 ShipCity, COUNT(orderid) TotalOrders FROM Orders WHERE ShipCountry = @Country GROUP BY ShipCity&#34;; string constr = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand(query)) { cmd.CommandType = CommandType.Text; cmd.Connection = con; cmd.Parameters.AddWithValue(&#34;@Country&#34;, country); con.Open(); using (SqlDataReader sdr = cmd.ExecuteReader()) { while (sdr.Read()) { chartData.Add(new object[] { sdr[&#34;ShipCity&#34;], sdr[&#34;TotalOrders&#34;] }); } } con.Close(); return chartData; } } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load If Not Me.IsPostBack Then Dim dt As DataTable = New DataTable() Dim constr As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Using con As SqlConnection = New SqlConnection(constr) Using cmd As SqlCommand = New SqlCommand(&#34;SELECT DISTINCT ShipCountry FROM Orders&#34;, con) cmd.CommandType = CommandType.Text Dim da As SqlDataAdapter = New SqlDataAdapter(cmd) da.Fill(dt) End Using End Using ddlCountries.Items.Clear() ddlCountries.Items.Insert(0, New ListItem(&#34;--Select--&#34;, &#34;0&#34;)) ddlCountries.AppendDataBoundItems = True ddlCountries.DataTextField = &#34;ShipCountry&#34; ddlCountries.DataValueField = &#34;ShipCountry&#34; ddlCountries.DataSource = dt ddlCountries.DataBind() End If End Sub &lt;WebMethod()&gt; Public Shared Function GetChartData(ByVal country As String) As List(Of Object) Dim chartData As List(Of Object) = New List(Of Object)() Dim query As String = &#34;SELECT TOP 10 ShipCity, COUNT(orderid) TotalOrders FROM Orders WHERE ShipCountry = @Country GROUP BY ShipCity&#34; Dim constr As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Using con As SqlConnection = New SqlConnection(constr) Using cmd As SqlCommand = New SqlCommand(query) cmd.CommandType = CommandType.Text cmd.Connection = con cmd.Parameters.AddWithValue(&#34;@Country&#34;, country) con.Open() Using sdr As SqlDataReader = cmd.ExecuteReader() While sdr.Read() chartData.Add(New Object() {sdr(&#34;ShipCity&#34;), sdr(&#34;TotalOrders&#34;)}) End While End Using con.Close() Return chartData End Using End Using End Function</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/iJl83Ce.gif" alt="" width="363" height="376" /></span></strong></p>https://www.aspforums.net:443/Threads/155910/Google-Chart-API-Load-Google-Chart-on-DropDownList-Change-in-ASPNet-using-C-and-VBNet/https://www.aspforums.net:443/Threads/155910/Google-Chart-API-Load-Google-Chart-on-DropDownList-Change-in-ASPNet-using-C-and-VBNet/Mon, 07 Jan 2019 02:48:32 GMT