2015-02-13 1 views
0

меня такая ситуация, когда я выполнить запрос и получить следующую таблицу из базы данных:Таблица не имеет столбцов при рисовании Google карт с JSON и Laravel из базы данных MySQL

GRAD_ACAD, subtotal 
'DOC', 79 
'LIC', 1 
'MTR', 6 

Следуя примеру показал в документы, я называю мой контроллер в URL: ...

// Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
     var jsonData = $.ajax({ 
      url: "{{URL::route('query01')}}", 
      dataType:"json", 
      async: false 
      }).responseText; 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(jsonData); 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, {width: 400, height: 240}); 

...

Когда я открыть окно, я получаю Tabl e не имеет столбцов ошибка. Однако, с помощью Firebug я вижу в JSON, который выглядит следующим образом:

[{"GRAD_ACAD":"DOC","subtotal":79},{"GRAD_ACAD":"LIC","subtotal":1},{"GRAD_ACAD":"MTR","subtotal":6}] 

Я понимаю, что я указать нужду отдельно имена столбцов и строк. Как мне это сделать? Или как я могу это исправить?

+0

Ваш результат имеет каждую строку как объект. Вам потребуется выполнить итерацию по вашему массиву и переформатировать в соответствии с данными, необходимыми для DataTable. См. Таблицу документов для таблицы данных на странице https://developers.google.com/chart/interactive/docs/reference#DataTable. – nbering

ответ

0

Простейшее способ форматировать правильно ваш JSON в массив, то вы можете использовать google.visualization.arrayToDataTable

function right_format(data){ 
var arr = []; 
for (var i = 0; i < data.length; i++) { 
    var element = []; 
    if (arr.length === 0){ 
     var columns = Object.keys(data[i]); 
     arr.push(columns); 
    }; 
    for (var j = 0; j < columns.length; j++){ 
     element.push(parseFloat(data[i][columns[j]])); 
    }; 
    arr.push(element); 
}; 
return arr; 

};

Смежные вопросы