[Solved] ASP.Net Google API Chart Error: Loading Data Try again

Last Reply 8 days ago By dharmendr

Posted 11 days ago

Dear Sir

I have issue when generate google Chart 

Could not shown google Chart and error: Loading Data Try again

Pls advice me

thank you

Maideen 

    <script>
        var chartData_P; 
        google.load("visualization", "1", { packages: ["corechart"] });
        $(document).ready(function () {
            $.ajax({
                url: "default.aspx/LoadByExecutive",
                data: "",
                dataType: "json",
                type: "POST",
                contentType: "application/json; chartset=utf-8",
                success: function (data) {
                    chartData_P = data.d;
                },
                error: function () {
                    alert("Error loading data! Please try again.");
                }
            }).done(function () {
                 google.setOnLoadCallback(drawChart_P);
                drawChart_P();
            });
        });
        function drawChart_P() {
            var data = google.visualization.arrayToDataTable(chartData_P);
            var options = {
                //title: "Company Revenue-Year",
                pointSize: 5
            };
            var pieChart = new google.visualization.ColumnChart(document.getElementById('line_chart_1'));
            pieChart.draw(data, options);
        }
    </script>

Code Bind Page

    <WebMethod()>
    Public Shared Function LoadByExecutive() As List(Of Object)

        Dim query As String = "SELECT * FROM [JP_Core_DB].[dbo].[vw_Market_Revenue] " &
             "WHERE YEARNO = '" & Date.Now.Year & "' and MarketEXE_Name ='" & Request.Cookies("username").Value & "'"

        Dim constr As String = ConfigurationManager.ConnectionStrings("ConnectString").ConnectionString
        Dim CharData_AREA As New List(Of Object)()
        CharData_AREA.Add(New Object() {"MarketExe_Name", "Value"})
        Using con As New SqlConnection(constr)
            Using cmd As New SqlCommand(query)
                cmd.CommandType = CommandType.Text
                cmd.Connection = con
                con.Open()
                Using sdr As SqlDataReader = cmd.ExecuteReader()
                    While sdr.Read()
                        CharData_AREA.Add(New Object() {sdr("MarketExe_Name"), sdr("Value")})
                    End While
                End Using
                con.Close()
                Return CharData_AREA
            End Using
        End Using
    End Function

 

Posted 11 days ago Modified on 8 days ago

Hi maideen,

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    var chartData_P;
    google.charts.load('current', { 'packages': ['corechart'] });
    $(document).ready(function () {
        $.ajax({
            url: "Default.aspx/GetChartData",
            data: "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; chartset=utf-8",
            success: function (data) {
                chartData_P = data.d;
            },
            error: function () {
                alert("Error loading data! Please try again.");
            }
        }).done(function () {
            google.setOnLoadCallback(drawChart_P);
            drawChart_P();
        });
    });
    function drawChart_P() {
        var data = google.visualization.arrayToDataTable(chartData_P);
        var options = {
            //title: "Company Revenue-Year",
            pointSize: 5
        };
        var pieChart = new google.visualization.ColumnChart(document.getElementById('line_chart_1'));
        pieChart.draw(data, options);
    }
</script>
<div id="line_chart_1" style="width: 900px; height: 500px;">
</div>

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#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        HttpCookie nameCookie = new HttpCookie("Country");
        nameCookie.Values["Country"] = "USA";
        nameCookie.Expires = DateTime.Now.AddDays(30);
        Response.Cookies.Add(nameCookie);
    }
}

[WebMethod]
public static List<object> GetChartData()
{
    string query = "SELECT ShipCity, COUNT(orderid) TotalOrders";
    query += " 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.Parameters.AddWithValue("@Country", HttpContext.Current.Request.Cookies["Country"].Value.Split('=')[1]);
            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

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim nameCookie As HttpCookie = New HttpCookie("Country")
        nameCookie.Values("Country") = "USA"
        nameCookie.Expires = DateTime.Now.AddDays(30)
        Response.Cookies.Add(nameCookie)
    End If
End Sub

<WebMethod()>
Public Shared Function GetChartData() As List(Of Object)
    Dim query As String = "SELECT ShipCity, COUNT(orderid) TotalOrders"
    query += " FROM Orders WHERE ShipCountry = @Country GROUP BY ShipCity"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim chartData As New List(Of Object)()
    chartData.Add(New Object() {"ShipCity", "TotalOrders"})
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand(query)
            cmd.CommandType = CommandType.Text
            cmd.Parameters.AddWithValue("@Country", HttpContext.Current.Request.Cookies("Country").Value.Split("="c)(1))
            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


Posted 8 days ago Modified on 8 days ago
maideen says:
SELECT * FROM [JP_Core_DB].[dbo].[vw_Market_Revenue] " &
 "WHERE YEARNO = '" & Date.Now.Year & "' and MarketEXE_Name ='" & Request.Cookies("username").Value & "'"

Replace with below code.

"SELECT * FROM [JP_Core_DB].[dbo].[vw_Market_Revenue] " &
"WHERE YEARNO = '" & Date.Now.Year & "' and MarketEXE_Name ='" & HttpContext.Current.Request.Cookies("username").Value.Split("="c)(1) & "'""

You need to split the named Cookies to get the value.

https://www.aspforums.net/Threads/176638/Could-not-shown-google-Chart-and-error-Loading-Data-Try-again/Replies/2#Replies

Refer the updated sample.