В таблице нет столбцов - Диаграммы Google - PHP AJAX

Question

Я начал изучать, как использовать Google Charts сегодня, и я немного застрял.

У меня есть динамические данные (изменения примерно 3-4 раза в день) для накачки в диаграмму (Круговая диаграмма). Я использую AJAX в качестве источника данных и PHP как мой бэкэндом .. Я пытался сделать это так, но безрезультатно:

AJAX:

<?php 
include $_SERVER['DOCUMENT_ROOT'].'/includes/galaxy-connect.php'; 

$database = new Connection(); 
$database = $database->Connect(); 
$statement = $database->Prepare(" SELECT COUNT(Membership_Level_Name) AS MemTotal, Membership_Level_Name 
FROM membership AS M 
LEFT JOIN membership_levels AS L 
ON M.`Membership_Level_Id` = L.`Membership_Level_Id` 
LEFT JOIN membership_status AS S 
ON M.`MembershipStatusId` = S.MembershipStatusId 
WHERE M.`MembershipStatusId` = 1 
GROUP BY L.`Membership_Level_Name` 
ORDER BY L.`Membership_Level_Id` "); 

$statement->execute(); 
$MembershipTotals = $statement->fetchall(PDO::FETCH_ASSOC); 

if (!empty($MembershipTotals)) { 
    foreach ($MembershipTotals as $MembershipTotal) { 
     $data[] = array(
      "cols" => array("id"=>"Membership_Level_Name", "label"=>"Membership Level", "type"=>"varchar"), 
       array("id"=>"MemTotal", "label"=>"Total", "pattern"=>"", "type"=>"number"), 
      "rows" => array($MembershipTotal['Membership_Level_Name'], $MembershipTotal['MemTotal']) 
     ); 
    } 
} 

echo json_encode($data); 

так вот мой Аякса, и он производит:

(ок обыкновение позвольте мне опубликовать изображение, но ЭРВО результаты)

[{"cols":{"id":"Membership_Level_Name","label":"Membership Level","type":"varchar"},"0":{"id":"MemTotal","label":"Total","pattern":"","type":"number"},"rows":["Start Up","24"]},{"cols":{"id":"Membership_Level_Name","label":"Membership Level","type":"varchar"},"0":{"id":"MemTotal","label":"Total","pattern":"","type":"number"},"rows":["Member","131"]},{"cols":{"id":"Membership_Level_Name","label":"Membership Level","type":"varchar"},"0":{"id":"MemTotal","label":"Total","pattern":"","type":"number"},"rows":["Member Plus","170"]},{"cols":{"id":"Membership_Level_Name","label":"Membership Level","type":"varchar"},"0":{"id":"MemTotal","label":"Total","pattern":"","type":"number"},"rows":["Premier Member","31"]},{"cols":{"id":"Membership_Level_Name","label":"Membership Level","type":"varchar"},"0":{"id":"MemTotal","label":"Total","pattern":"","type":"number"},"rows":["Bronze","97"]},{"cols":{"id":"Membership_Level_Name","label":"Membership Level","type":"varchar"},"0":{"id":"MemTotal","label":"Total","pattern":"","type":"number"},"rows":["Silver","145"]},{"cols":{"id":"Membership_Level_Name","label":"Membership Level","type":"varchar"},"0":{"id":"MemTotal","label":"Total","pattern":"","type":"number"},"rows":["Gold","188"]},{"cols":{"id":"Membership_Level_Name","label":"Membership Level","type":"varchar"},"0":{"id":"MemTotal","label":"Total","pattern":"","type":"number"},"rows":["Affiliate","3"]},{"cols":{"id":"Membership_Level_Name","label":"Membership Level","type":"varchar"},"0":{"id":"MemTotal","label":"Total","pattern":"","type":"number"},"rows":["Charity\/Education","4"]}] 

Так что следующий шаг должен назвать эти данные, я взял код из Google Charts «Подключение к базе данных» (или что-то подобный) страница:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['corechart']}); 

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

    function drawChart() { 
     var jsonData = $.ajax({ 
      url: "/ajax/charts/membershiptotals.php", 
      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}); 
    } 


    </script> 

Обновить страницу и выдает ошибку:

Таблица не имеет колонн

я не понимаю, почему, хотя .. я посмотрел на другие решения и размещены на Quora и группа Google для API, но безрезультатно .. может кто-то сказать мне, что не так с кодом?

Answer 1

Я нашел ответ:

AJAX было изменено на:

<?php 

    include $_SERVER['DOCUMENT_ROOT'].'/includes/galaxy-connect.php'; 

    $database = new Connection(); 
    $database = $database->Connect(); 
    $statement = $database->Prepare(" SELECT COUNT(Membership_Level_Name) AS MemTotal, Membership_Level_Name 
       FROM membership AS M 
       LEFT JOIN membership_levels AS L 
           ON M.`Membership_Level_Id` = L.`Membership_Level_Id` 
       LEFT JOIN membership_status AS S 
                                 ON M.`MembershipStatusId` = S.MembershipStatusId 
                                 WHERE M.`MembershipStatusId` = 1 
           GROUP BY L.`Membership_Level_Name` 
     ORDER BY L.`Membership_Level_Id` "); 
    $statement->execute(); 
    $MembershipTotals = $statement->fetchall(PDO::FETCH_OBJ); 


    $col1=array(); 
    $col1["id"]=""; 
    $col1["label"]="Membership Type"; 
    $col1["pattern"]=""; 
    $col1["type"]="string"; 

    $col2=array(); 
    $col2["id"]=""; 
    $col2["label"]="Total"; 
    $col2["pattern"]=""; 
    $col2["type"]="number"; 

    $cols = array($col1,$col2); 

    $rows=array(); 

     foreach ($MembershipTotals AS $MembershipTotal) { //foreach ($Event->TrainingTotals['ConfirmedTotal'] AS $Key => $Value) { 
      $cell0["v"]=$MembershipTotal->Membership_Level_Name; 
      $cell1["v"]=intval($MembershipTotal->MemTotal); 

     $row0["c"]=array($cell0,$cell1); 
     array_push($rows, $row0); 
     } 

    $data=array("cols"=>$cols,"rows"=>$rows); 
    echo json_encode($data); 

, который сделал это немного легче, а затем на фактической странице:

<script type="text/javascript"> 
    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var jsonData = $.ajax({ 
      url: "/ajax/charts/membershiptotals.php", 
      dataType:"json", 
      async: false 
     }).responseText; 

    // Create our data table out of JSON data loaded from server. 
    var data = new google.visualization.DataTable(jsonData); 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, {title:'Membership Bookings', width: 800, height: 500}); 
    } 


</script> 

В основном я должен был ясно объявить столбцы, а intval - превратить его в целое число, иначе оно вернет номер в виде строки, которой не нравится Google .. надеюсь, это поможет любому :)

спасибо Харишу за ответ, но мне нужно было более динамично :-)

Answer 2

Это формат передаваемого массива.

JavaScript:

var jsondata; //json data recived from php script 
var data = google.visualization.arrayToDataTable(jsondata); 

PHP:

$data = array(
    array('Membership Level', 'MemTotal'), 
     array('Member Plus', 170), 
     array('Member', 131) 
    ); 
echo json_encode($data); 

Ваш должны пройти Json массив не возражали.