Блог

Я хочу сгенерировать две строки в одну диаграмму, поэтому я использую метод join в Google chart. Я могу извлекать данные из SQL, но в скрипте указано, что данные в таблице данных не являются массивом.

Я пытался использовать $.parseJSON, но все еще не могу построить график.

кто-нибудь может дать мне подсказку?

Заранее благодарю вас.

вот мой скрипт:

     function drawMultiCavitiesChart() {
        var options = {
            title: 'Mulit Cavities vs Line',
            width: 1800,
            height: 700,
            //bar: { groupWidth: "95%" },
            //curveType: 'function',
            //isStacked: true
            pointSize: 8,
            hAxis: { title: 'Date', format: 'M/d/yy' },
            vAxis: { title: 'Total Cavities' },
            //colors: ['blue'],
            legend: { position: "bottom" }
        };

        var jsonData1 =
        $.ajax({
            type: "POST",
            url: "Chart.aspx/GetMultiCavitiesData1",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (jsonData1) {

                console.log(JSON.stringify(jsonData1));
            },

        });
        //var data1 = google.visualization.arrayToDataTable(jsonData1);
        //var data1 = google.visualization.arrayToDataTable($.parseJSON(jsonData1));

        var jsonData2 = 
        $.ajax({
            type: "POST",
            url: "Chart.aspx/GetMultiCavitiesData2",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (jsonData2) {
                
                console.log(JSON.stringify(jsonData2));
            },

        });
        //var data2 = google.visualization.arrayToDataTable(jsonData2);

        var data1 = google.visualization.arrayToDataTable($.parseJSON(jsonData1));
        var data2 = google.visualization.arrayToDataTable($.parseJSON(jsonData2));

        //var joinedData = new google.visualization.data.join(data1, data2, 'full', [[0, 0], [1, 1]], [2], [2]);
        var joinedData = new google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);

        var chart = new google.visualization.LineChart($("#divMultiCavitiesChart")[0]);
        chart.draw(joinedData, options);          
    }
  

и консоль:

$.ajax выполняется асинхронно.
это означает, что строки кода после $.ajax вызова
будут выполняться до завершения $.ajax вызова.

итак, вы пытаетесь создать таблицы данных до получения данных.

вам нужно дождаться done обратного вызова, прежде чем перейти к следующему шагу.
(вы также можете использовать success as в своем сообщении, но это старое и устаревшее)

попробуйте что-то похожее на следующее…

 function drawMultiCavitiesChart() {

    var data1;
    var data2;

    var options = {
        title: 'Mulit Cavities vs Line',
        width: 1800,
        height: 700,
        //bar: { groupWidth: "95%" },
        //curveType: 'function',
        //isStacked: true
        pointSize: 8,
        hAxis: { title: 'Date', format: 'M/d/yy' },
        vAxis: { title: 'Total Cavities' },
        //colors: ['blue'],
        legend: { position: "bottom" }
    };

    $.ajax({
        type: "POST",
        url: "Chart.aspx/GetMultiCavitiesData1",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
    }).done(function (r1) {
      data1 = google.visualization.arrayToDataTable(r1.d);

      $.ajax({
          type: "POST",
          url: "Chart.aspx/GetMultiCavitiesData2",
          data: '{}',
          contentType: "application/json; charset=utf-8",
          dataType: "json",
      }).done(function (r2) {
        data2 = google.visualization.arrayToDataTable(r2.d);

        var joinedData = new google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);

        var chart = new google.visualization.LineChart($("#divMultiCavitiesChart")[0]);
        chart.draw(joinedData, options);
      });
    });
}