I am trying to use style "text-align: center" only on one column from the table (for example the slice's column in my code), but I only found how to add it in the Google Charts function. I didnt find anything showing how to do it with Ajax and Json.
I am calling the Google Charts in the Main.php.
And I am using Ajax to get the data from the Ajax.php file, using PHP and Arrays to create a Json.
Main.php
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type='text/javascript' src='../../jquery-1.11.1.min.js'></script>
<script type='text/javascript'>
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['table']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
//$('#chart_div').html("<img src='carregando.gif'>");
var jsonData = $.ajax({
url: "ajax.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.Table(document.getElementById('chart_div'));
chart.draw(data, {width: 200});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Ajax.php
<?php
$table = array();
$table['cols'] = array(
array('label' => 'Topping', 'type' => 'string'),
array('label' => 'Slices', 'type' => 'number')
);
$rows = array();
$temp = array();
$temp[] = array('v' => 'Mushrooms');
$temp[] = array('v' => 3);
$rows[] = array('c' => $temp);
$temp = array();
$temp[] = array('v' => 'Onions');
$temp[] = array('v' => 1);
$rows[] = array('c' => $temp);
$table['rows'] = $rows;
$jsontable = json_encode($table);
echo $jsontable;
?>
