Dynamically bind (populate) multiple google line chart using jQuery and AJAX in ASP.Net

Hi sofia,

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

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/GetIpAddress",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                for (var i = 0; i < r.d.length; i++) {
                    MakeAjaxCall(r.d[i], $("#chart" + (i + 1))[0]);
                }
            },
            failure: function (r) {
                alert(r.responsetext);
            },
            error: function (r) {
                alert(r.responsetext);
            }
        });
    }

    function MakeAjaxCall(ipAddress, dvElement) {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChartData",
            data: '{ipAddress:"' + ipAddress + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = new google.visualization.DataTable();
                data.addColumn('date', 'pingtime');
                data.addColumn('number', 'ipstatus');
                for (var i = 0; i < r.d.length; i++) {
                    data.addRow([new Date(parseInt(r.d[i][0].substr(6))), parseInt(r.d[i][1])]);
                }

                var maxValue = Math.max.apply(Math, r.d.map(function (x) { return x[1]; }));
                var tick = [];
                for (var i = 0; i <= (maxValue / 25) + 1; i++) {
                    tick.push(i * 25);
                }

                var chart = new google.visualization.LineChart(dvElement);
                var options = {
                    title: 'ipaddress : ' + ipAddress,
                    width: 400,
                    height: 400,
                    bar: { groupWidth: "95%" },
                    legend: { position: "none" },
                    isStacked: true,
                    vAxis: {
                        viewWindow: {
                            min: 0,
                            max: maxValue
                        },
                        ticks: tick,
                        title: 'IPSTATUS',
                        textStyle:
                        {
                            fontStyle: "bold",
                            italic: true,
                            fontSize: 12,
                            color: '#0000FF'
                        },
                        titleTextStyle:
                        {
                            fontStyle: "normal",
                            fontWeight: 'bold',
                            italic: true,
                            fontSize: 12,
                            color: '#0000FF'
                        }
                    },
                    hAxis: {
                        title: 'Time',
                        titleTextStyle:
                        {
                            fontStyle: "normal",
                            fontWeight: 'bold',
                            italic: true,
                            color: '#0000FF'
                        }
                    }
                };

                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.responseText);
            },
            error: function (r) {
                alert(r.responseText);
            }
        });
    }
</script>
<table>
    <tr>
        <td><div id="chart1"></div></td>
        <td><div id="chart2"></div></td>
        <td><div id="chart3"></div></td>
        <td><div id="chart4"></div></td>
    </tr>
    <tr>
        <td><div id="chart5"></div></td>
        <td><div id="chart6"></div></td>
        <td><div id="chart7"></div></td>
        <td><div id="chart8"></div></td>
    </tr>
</table>

Namespaces

C#

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

VB.Net

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

Code

C#

[WebMethod]
public static List<object> GetChartData(string ipAddress)
{
    string query = string.Format("SELECT [pingtime],[ipstatus] FROM [dbo].[record] WHERE ipaddress='{0}' AND CONVERT(DATE,pingtime,103) BETWEEN CONVERT(DATE,DATEADD(DAY, -7, GETDATE()),103) AND CONVERT(DATE,GETDATE(),103) ORDER BY CONVERT(DATETIME,pingtime,103) ASC", ipAddress);
    string constr = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
    List<object> chartData = new List<object>();
    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[] { Convert.ToDateTime(sdr["pingtime"]), sdr["ipstatus"] });
                }
            }
            con.Close();

            return chartData;
        }
    }
}

[WebMethod]
public static List<string> GetIpAddress()
{
    string query = "SELECT DISTINCT ipaddress FROM [dbo].[record]";
    string constr = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
    List<string> ips = new List<string>();
    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())
                {
                    ips.Add(sdr["ipaddress"].ToString());
                }
            }
            con.Close();

            return ips;
        }
    }
}

VB.Net

<WebMethod>
Public Shared Function GetChartData(ByVal ipAddress As String) As List(Of Object)
    Dim query As String = String.Format("SELECT [pingtime],[ipstatus] FROM [dbo].[record] WHERE ipaddress='{0}' AND CONVERT(DATE,pingtime,103) BETWEEN CONVERT(DATE,DATEADD(DAY, -7, GETDATE()),103) AND CONVERT(DATE,GETDATE(),103) ORDER BY CONVERT(DATETIME,pingtime,103) ASC", ipAddress)
    Dim constr As String = ConfigurationManager.ConnectionStrings("dbcs").ConnectionString
    Dim chartData As List(Of Object) = New List(Of Object)()
    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() {Convert.ToDateTime(sdr("pingtime")), sdr("ipstatus")})
                End While
            End Using
            con.Close()

            Return chartData
        End Using
    End Using
End Function

<WebMethod>
Public Shared Function GetIpAddress() As List(Of String)
    Dim query As String = "SELECT DISTINCT ipaddress FROM [dbo].[record]"
    Dim constr As String = ConfigurationManager.ConnectionStrings("dbcs").ConnectionString
    Dim ips As List(Of String) = New List(Of String)()
    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()
                    ips.Add(sdr("ipaddress").ToString())
                End While
            End Using
            con.Close()

            Return ips
        End Using
    End Using
End Function

Screenshot