Member 14946863 Ответов: 2

Google chart с динамической генерацией данных

Я готовлю код для генерации google chart в vb.net, и нет никакого сообщения об ошибке и никакого отображения на странице. кто-нибудь может мне подсказать?

Что я уже пробовал:

При этом сценарий:
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);
        }
    });
}

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

И код тоже:
<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

2 Ответов

Рейтинг:
2

Sandeep Mewara

Кажется, ваша проблема заключается в следующем коде:

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);
    }

Не думайте, что данные, возвращаемые в виде списка, будут автоматически интерпретироваться и использоваться. Вам нужно будет определить данные на стороне клиента. Документация[^] скажет:
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

Таким образом, у вас есть два варианта: передать строку json с сервера или создать строку JSON на стороне клиента.


Вариант 2 будет выглядеть примерно так:
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');
...
...
}


Ссылающийся: Создайте круговую диаграмму Google с помощью динамических данных и веб - сервиса[^]

Для вышеприведенного случая лучше всего было бы отладить. С помощью отладчика вы получите представление о том, как происходит выполнение tos и какие данные извлекаются. Вы должны были бы сделать это, было бы трудно для кого-либо еще, чтобы помочь с этим.

Рейтинг:
2

Member 14946863

Привет Сандип,

Спасибо за ваш совет, попробую еще раз отладить.

Энди

Richard Deeming

Если вы хотите ответить на решение, нажмите кнопку "есть вопрос или комментарий?" нажмите кнопку под этим решением и оставьте комментарий. Не опубликуйте свой комментарий как новое "решение".