Google chart with dynamic data generate

Question

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 7-Oct-20 7:15am

Member 14946863

Updated 8-Oct-20 5:10am

Sandeep Mewara

v4

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sandeep Mewara · Answer 1 · 2020-10-07T09:01:00

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.

Member 14946863 · Answer 2 · 2020-10-08T05:11:00

Solution 2

Hi Sandeep,

Thanks for your advice, will try again to debug.

Andy

Posted 8-Oct-20 5:11am

Member 14946863

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".

Google chart with dynamic data generate

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us