Click here to Skip to main content
14,835,749 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I prepare the code to generate google chart in vb.net, and there is no error message and no display on the page. can anyone give me some hint?

What I have tried:

Herewith the script:
JavaScript
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var options = {
        title: 'Date vs Line',
        width: 1000,
        height: 600,
        bar: { groupWidth: "95%" },
        legend: { position: "none" },
        isStacked: true
    };
    $.ajax({
        type: "POST",
        url: "chart.aspx/GetChartData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var data = google.visualization.arrayToDataTable(r.d);
            data.addColumn('string', 'SelectedDate');
            data.addColumn('number', 'Line');		                   
            var chart = new google.visualization.LineChart($("#chart")[0]);
            chart.draw(data, options);
        },
        failure: function (r) {
            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
    });
}

HTML
<div id="chart" style="width: 900px; height: 500px">
</div>

AND the code:
VB
<webmethod()> _
Public Shared Function GetChartData() As List(Of Object)
    Dim query As String = "SELECT TOP (19) SelectedDate, Line, TotalCavities FROM TestTubeDailyReport ORDER BY SelectedDate"
    Dim constring As String = ConfigurationManager.ConnectionStrings("LocalDBConnectionString").ConnectionString
    Dim chartData As New List(Of Object)()
    chartData.Add(New Object() {"SelectedDate", "Line"})
    Using con As New SqlConnection(constring)
        Using cmd As 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("SelectedDate"), sdr("Line")})
                End While
            End Using
            con.Close()
            Return chartData
        End Using
    End Using
End Function
Posted
Updated 8-Oct-20 5:10am
v4

Seems your problem is with below code:
JavaScript
success: function (r) {
        var data = google.visualization.arrayToDataTable(r.d);
        data.addColumn('string', 'SelectedDate');
        data.addColumn('number', 'Line');		                   
        var chart = new google.visualization.LineChart($("#chart")[0]);
        chart.draw(data, options);
    }

Don't think data returned as list will automatically be interpreted and used. You would need to defined the data on client side. Documentation[^] says:
JavaScript
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

So, you have two options, pass json string from server OR create a JSON string on client side.


Option 2 would be something like:
JavaScript
success: function (data) {
    var arrValues = [['SelectedDate', 'Line']];        // DEFINE AN ARRAY.
    var iCnt = 0;

    $.each(data.d, function () {
        // POPULATE ARRAY WITH THE EXTRACTED DATA.
        arrValues.push([data.d[iCnt].SelectedDate, data.d[iCnt].Line]);
        iCnt += 1;
    });

    var data = google.visualization.arrayToDataTable(arrValues);
    data.addColumn('string', 'SelectedDate');
    data.addColumn('number', 'Line');
...
...
}


Referring: Create a Google Pie Chart using dynamic data and Web Service[^]

For above case, best would be to DEBUG. With help of debugger, you will have clue on how-tos execution is happening and the data retrieved. You would need to do this, would be difficult for anyone else to help with it.
   
Hi Sandeep,

Thanks for your advice, will try again to debug.

Andy
   
Comments
Richard Deeming 8-Oct-20 11:30am
   
If you want to reply to a solution, click the "Have a Question or Comment?" button under that solution and post a comment. Do not post your comment as a new "solution".

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900