无法使用MYSQL数据库中的数据绘制谷歌饼图

Question

I have been creating a piechart on dashboard for the user. I have tried following code:

<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: "getData.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('piechart'));
  chart.draw(data, {width: 400, height: 240});
}


</script>

getData.php

$sent = mysqli_query($con,"SELECT name FROM table_name WHERE user_id='$user_id'");
$num_rows_sent = mysqli_num_rows($sent);


$viewed = mysqli_query($con,"SELECT viewed FROM table_name WHERE user_id='$user_id' AND viewed= 1 ");
$num_rows_viewed= mysqli_num_rows($viewed);


$accepted = mysqli_query($con,"SELECT accepted FROM table_name WHERE user_id='$user_id' AND accepted= 1 ");
$num_rows_accepted= mysqli_num_rows($accepted);


$declined = mysqli_query($con,"SELECT declined FROM table_name WHERE user_id='$user_id' AND declined= 1 ");
$num_rows_declined= mysqli_num_rows($declined);


$suggest = mysqli_query($con,"SELECT In_Discussion FROM table_name WHERE user_id='$user_id' AND In_Discussion= 1 ");
$num_rows_suggest= mysqli_num_rows($suggest);

$results = array(
"cols" => array(


    array("label" => "sent", "type" => "string"),
    array("label" => "viewed", "type" => "number"),
    array("label" => "accepted", "type" => "number"),
    array("label" => "declined", "type" => "number"),
    array("label" => "In_Discussion", "type" => "number"),
),
"rows" => array()
);

$results["rows"][] = array("c" => array(

    array("v" => $num_rows_sent,"f"=>"sent" ),
    array("v" => $num_rows_viewed,"f"=>"viewed"),
    array("v" => $num_rows_accepted,"f"=>"accepted"),
    array("v" => $num_rows_declined,"f"=>"declined"),
    array("v" => $num_rows_suggest,"f"=>"In Discussion"),
));

$json = json_encode($results,JSON_NUMERIC_CHECK);
echo $json;

I am getting JSON like dis:

{
    "cols":[
            {"label":"sent","type":"string"},
            {"label":"viewed","type":"number"},
            {"label":"accepted","type":"number"},
            {"label":"declined","type":"number"},{"label":"In_Discussion","type":"number"}
           ],

   "rows":[
           { "c":
                [
                   {"v":4,"f":"sent"},{"v":4,"f":"viewed"},{"v":1,"f":"accepted"},{"v":0,"f":"declined"},{"v":2,"f":"In Discussion"}

                ]
           }
         ]
}

I am getting this chart as output

Desired Chart

How can I output the desired chart using the data above??

Answer 1

Google visualization DataTables is really just a two dimensional array. What you need is just an array structure like this :

activity    |   count
--------------------------
sent        |   4
viewed      |   4
accepted    |   1
declined    |   0
... etc

Therefore the JSON delivered by the PHP script should look like this :

var jsonData = {
    "cols":[
       {"label":"activity","type":"string"},
       {"label":"count","type":"number"}
   ],
   "rows":[
       { "c": [ {"v":'sent' },{"v" : 4 }]},
       { "c": [ {"v":'viewed' },{"v" : 4 }]},
       { "c": [ {"v":'accepted' },{"v" : 1 }]},
       { "c": [ {"v":'declined' },{"v" : 0 }]},
       { "c": [ {"v":'In Discussion' },{"v" : 2 }]}       
   ]
}

So in the PHP script, create the JSON like this :

$cols = array(
    array('label' => 'activity', 'type' => 'string'),
    array('label' => 'count', 'type' => 'number')
);

$rows = array();
$rows[] = array('c' => array(array('v' => 'sent'), array('v' => $num_rows_sent )));
$rows[] = array('c' => array(array('v' => 'viewed'), array('v' => $num_rows_viewed )));
$rows[] = array('c' => array(array('v' => 'accepted'), array('v' => $num_rows_accepted )));
$rows[] = array('c' => array(array('v' => 'declined'), array('v' => $num_rows_declined )));
$rows[] = array('c' => array(array('v' => 'In Discussion'), array('v' => $num_rows_suggest )));

$results = array(
    'cols' => $cols,
    'rows' => $rows
);

echo json_encode($results);

And the chart will look like this -> http://jsfiddle.net/JP4ZJ/