Display (Show) multiple Google Charts on single page in ASP.Net using C# and VB.Net

Hi samsmuthu,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<div id="chart" style="width: 500px; height: 300px;">
</div>
<div id="chart1" style="width: 500px; height: 300px;">
</div>
<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 data1 = google.visualization.arrayToDataTable(r.d[0]);
                var data2 = google.visualization.arrayToDataTable(r.d[1]);
                var chart1 = new google.visualization.PieChart($("#chart")[0]);
                chart1.draw(data1, { title: 'USA City Distribution' });

                var chart2 = new google.visualization.PieChart($("#chart1")[0]);
                chart2.draw(data2, { title: 'Germany City Distribution' });
            },
            failure: function (r) {
                alert(r.responseText);
            },
            error: function (r) {
                alert(r.responseText);
            }
        });
    }
</script>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;
using System.Web.Services;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Collections.Generic
Imports System.Web.Services

Code

C#

[WebMethod]
public static List<List<object>> GetChartData()
{
    List<List<object>> chartDatas = new List<List<object>>();
    string query = "SELECT ShipCity, COUNT(orderid) TotalOrders FROM Orders WHERE ShipCountry = 'USA' GROUP BY ShipCity";
    chartDatas.Add(GetData(query));

    query = "SELECT ShipCity, COUNT(orderid) TotalOrders FROM Orders WHERE ShipCountry = 'Germany' GROUP BY ShipCity";
    chartDatas.Add(GetData(query));

    return chartDatas;
}

private static List<object> GetData(string query)
{
    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 List(Of Object))
    Dim chartDatas As List(Of List(Of Object)) = New List(Of List(Of Object))()
    Dim query As String = "SELECT ShipCity, COUNT(orderid) TotalOrders FROM Orders WHERE ShipCountry = 'USA' GROUP BY ShipCity"
    chartDatas.Add(GetData(query))
    query = "SELECT ShipCity, COUNT(orderid) TotalOrders FROM Orders WHERE ShipCountry = 'Germany' GROUP BY ShipCity"
    chartDatas.Add(GetData(query))
    Return chartDatas
End Function

Private Shared Function GetData(ByVal query As String) As List(Of Object)
    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()
        End Using
    End Using

    Return chartData
End Function

Screenshot