Error: First row is not an array. Google Pie Chart

Question

I am trying to use the Google Pie Chart. I am feeding the data to chart from my API call. I am using ASP.NET Page for this work. Below is the complete code of page.

"[{\"AuditStatusId\":2,\"Number\":5},{\"AuditStatusId\":3,\"Number\":1}, 
{\"AuditStatusId\":19,\"Number\":1},{\"AuditStatusId\":23,\"Number\":27}, 
{\"AuditStatusId\":24,\"Number\":2},{\"AuditStatusId\":27,\"Number\":1}, 
{\"AuditStatusId\":31,\"Number\":1},{\"AuditStatusId\":38,\"Number\":1}]"

My API is returning the Above data.

I am doing some work in my below code in the each loop to convert my data into an Array. But this is still not working.

[['Task', 'Hours per Day'], ['2', 5], ['3', 1], ['19', 1], ['23', 27], ['24', 2], ['27', 1], ['31', 1], ['38', 1]]

This above string is formatted by self, If I put this static in the arrayToDataTable method, it works, but if I give the variable name in the method then I get the error "Error: First row is not an array."

<script type="text/javascript">
var data01 = "[['Task', 'Hours per Day']";
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    $.ajax({
        type: 'GET',
        url: 'http://class.localtest.me/api/dashboard/chartdata',
        dataType: 'json',
        async: false,
        contentType: "application/json; charset=utf-8",
        data: {},
        success: function (result) {
            $.each(JSON.parse(result), function (data, value) {
                data01 = data01.concat(',[\'' + value.AuditStatusId + '\',' + value.Number + ']');
            })

            data01 = data01.concat(']');

        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });

    //var data = new google.visualization.DataTable([['Task', 'Hours per Day'], ['2', 5], ['3', 1], ['19', 1], ['23', 27], ['24', 2], ['27', 1], ['31', 1], ['38', 1]]);
    var arr = $.makeArray(data01);
    console.log(arr);
    var data = new google.visualization.arrayToDataTable(arr);


    var options = {
        title: 'My Assessments'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
}

Answer 1

looks like you're trying to build the array using a string,
just use an actual array...

var data01 = [['Task', 'Hours per Day']];

$.each(result, function (data, value) {
    data01.push([value.AuditStatusId.toString(), value.Number]);
})

that's all you need

---

see following working snippet...
(data has been hard-coded in the fail callback, which can be removed)

 var data01 = [['Task', 'Hours per Day']]; google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { $.ajax({ type: 'GET', url: 'http://class.localtest.me/api/dashboard/chartdata', dataType: 'json', contentType: "application/json; charset=utf-8", data: {} }).done(function (result) { loadData(result); }).fail(function (jqXHR, textStatus, errorThrown) { var result = "[{\\"AuditStatusId\\":2,\\"Number\\":5},{\\"AuditStatusId\\":3,\\"Number\\":1}, {\\"AuditStatusId\\":19,\\"Number\\":1},{\\"AuditStatusId\\":23,\\"Number\\":27}, {\\"AuditStatusId\\":24,\\"Number\\":2},{\\"AuditStatusId\\":27,\\"Number\\":1}, {\\"AuditStatusId\\":31,\\"Number\\":1},{\\"AuditStatusId\\":38,\\"Number\\":1}]"; loadData(JSON.parse(result)); }); function loadData(result) { $.each(result, function (data, value) { data01.push([value.AuditStatusId.toString(), value.Number]); }) var data = new google.visualization.arrayToDataTable(data01); var options = { title: 'My Assessments' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="piechart"></div> 

notes:

1) async: false has been deprecated