Show Combo chart using json - php

Question

I am trying to make a google ComboChart using data from json. the query that I am using is working fine in sql engine but the chart is not displaying.
This is the google chart script:
<div id="ranking_panel">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Some raw data (not necessarily accurate)
var json = $.ajax({
url: 'get_json_rank.php',
dataType: 'json',
async: false
}).responseText;
var data = new google.visualization.DataTable(json);
var options = {
title : 'Restaurant Ranking Stats',
vAxis: {title: "Business Growth"},
hAxis: {title: "Restaurants"},
seriesType: "bars",
series: {1: {type: "line"}}
};
var chart = new google.visualization.ComboChart(document.getElementById('rank_chart'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="rank_chart"></div>
</div>
This is json code
<?php
$con = mysql_connect('localhost', 'root', '') or die('Error connecting to server');
mysql_select_db('db_MarkitBerry', $con);
$query = mysql_query('SELECT r_name, priority FROM tbl_restro ORDER BY priority DESC');
$table = array();
$table['cols'] = array(
array('label' => 'Priority', 'type' => 'string'),
array('label' => 'Restaurants', 'type' => 'string')
);
$rows = array();
while($r = mysql_fetch_assoc($query)) {
$temp = array();
// each column needs to have data inserted via the $temp array
$temp[] = array('v' => $r['priority']);
$temp[] = array('v' => $r['r_name']);
$temp[] = array('v' => $r['r_name']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo $jsonTable;
?>

Answer 1

Debug!
From php/json side - use 'pre' tags and print_r function to see what is output via your request. Alternatively, install Firebug extension in Firefox, go to Network tab and set it to record every request - open the page, it will make ajax request - scroll down and see what is response.
In Javascript part, which calls up Google API - use console.log, and also use Firebug extension to see what is stored in every variable.
function drawVisualization() {
// Some raw data (not necessarily accurate)
var json = $.ajax({
url: 'get_json_rank.php',
dataType: 'json',
async: false
}).responseText;
**console.log(json);**
var data = new google.visualization.DataTable(json);
**console.log(data);**
var options = {
title : 'Restaurant Ranking Stats',
vAxis: {title: "Business Growth"},
hAxis: {title: "Restaurants"},
seriesType: "bars",
series: {1: {type: "line"}}
};
var chart = new google.visualization.ComboChart(document.getElementById('rank_chart'));
chart.draw(data, options);
}

Answer 2

You have two problems. First, you create two columns in your DataTable, but add three columns of data (though the third is a duplicate, and so it may just have been a copy error):
$temp[] = array('v' => $r['priority']);
$temp[] = array('v' => $r['r_name']);
$temp[] = array('v' => $r['r_name']); // <-- this is a duplicate, either add a third column or delete this line
Your second problem is that you are setting both column types to 'string', and most charts (including everything you can build with a ComboChart) require at least one 'number' column. Typically, you can build a chart with the first (domain) column as a string type, but all others must be number types.