Populate multiple Google Chart in same page from database in ASP.Net using jQuery

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

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) {
                var data = google.visualization.arrayToDataTable(r.d);
                //Pie
                var options = {
                    title: 'USA City Distribution'
                };
                var chart = new google.visualization.PieChart($("#chart1")[0]);
                chart.draw(data, options);

                //3D Pie
                options = {
                    title: 'USA City Distribution',
                    is3D: true
                };
                chart = new google.visualization.PieChart($("#chart2")[0]);
                chart.draw(data, options);

                //Doughnut
                options = {
                    title: 'USA City Distribution',
                    pieHole: 0.5
                };
                chart = new google.visualization.PieChart($("#chart3")[0]);
                chart.draw(data, options);

                //.ComboChart
                options = {
                    title: 'USA City Distribution',
                    is3D: true
                };
                chart = new google.visualization.ComboChart($("#chart4")[0]);
                chart.draw(data, options);

                //.ColumnChart
                options = {
                    title: 'USA City Distribution',
                    is3D: true
                };
                chart = new google.visualization.ColumnChart($("#chart5")[0]);
                chart.draw(data, options);

                //Table
                options = {
                    title: 'USA City Distribution',
                    is3D: true
                };
                chart = new google.visualization.LineChart($("#chart6")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.responseText);
            },
            error: function (r) {
                alert(r.responseText);
            }
        });
    }
</script>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<div id="chart6"></div>

Namespace

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<object> GetChartData()
{
    string query = "SELECT ShipCity, COUNT(orderid) TotalOrders";
    query += " FROM Orders WHERE ShipCountry = 'USA' 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;
            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() As List(Of Object)
    Dim query As String = "SELECT ShipCity, COUNT(orderid) TotalOrders"
    query += " FROM Orders WHERE ShipCountry = 'USA' 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
            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

Screenshot