Google Line chart join two data table

Question

I want to generate two lines into one chart, so i using join method in google chart. I can retrieve data from SQL, but the script mentioned the data in data table is not array.

I tried to use $.parseJSON but still cannot plot to chart.

anyone can give me some hint?

Thank you in advance.

here is my script:

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

and the console:

Answer 1

$.ajax runs asynchronously.
which means the lines of code after the $.ajax call,
will run before the $.ajax call has finished.

so you're trying to create the data tables, before the data has been received.

you need to wait for the done callback, before continuing to the next step.
(you can also use success as in your post, but that is old and deprecated)

try something similar to the following...

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