Table has no columns error

[Trey Taylor]

Hey all,

Just started using Google Charts and came across a weird error: Table has no columns.
After a bit of searching I saw that Google does a cols and rows thing to tell the chart whats what, so you kind of have to change the JSON around and here's what I wrote to get it that way:

Ajax File:

<?php
 include $_SERVER['DOCUMENT_ROOT'].'/includes/database-connect.php'; //Connects to database
   
 $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);    
    
 if (!empty($MembershipTotals)) {
     foreach ($MembershipTotals as $MembershipTotal) {
         $data[0][] = array(
             "cols" => array("Membership_Level_Name"=>"", "label"=>"Membership Level", "type"=>"string"),
                       array("MemTotal"=>"", "label"=>"Total", "pattern"=>"", "type"=>"number"),
             "rows" => array($MembershipTotal->Membership_Level_Name, $MembershipTotal->MemTotal)
         );
     }
 }

 echo json_encode($data);

And that [JSON] outputs:


Here's how I call the 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);
   
     // 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>

and I get:



Where am I goin' wrong??

[laks...@asod.in]

How do you run the file?? Using any IDE or??

[Trey Taylor]

I use XAMPP to run a local web server, I've done it now:

AJAX:

<?php

  

  include $_SERVER['DOCUMENT_ROOT'].'/includes/database-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) {
            $cell0["v"]=$MembershipTotal->Membership_Level_Name." (".$MembershipTotal->MemTotal.")";
            $cell1["v"]=intval($MembershipTotal->MemTotal);

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

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

and then the Google 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);

            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                    chart.draw(data,
                                                            {

                                                            colors: ['#8A8C8D', '#4698AF', '#616365', '#BED600', '#DEB388', '#E7E6F4', '#D1B53A', '#1800d6', '#d600be']
                                                        });
            }
           
    </script>

    It was because it was passing the "number" in double quotes, needs to be an integer