I'm currently trying to show a google chart that's populated with info I'm pulling from a data source. I have a connection to the data base established, I can query the data I want and store the results in a json object. What I'm having trouble with is displaying the chart. I'm close, but not there yet. Here is what I have in my php code
`<?php
$mysqli =mysqli_connect('localhost', 'root', '', 'prueba');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$sql = mysqli_query($mysqli, 'SELECT * FROM pizza');
if (!$sql) {
die("Error running $sql: " . mysql_error());
}
$results = array(
'cols' => array(
array('label' => 'Topping', 'type' => 'varchar'),
array('label' => 'cantidad', 'type' => 'number')
),
'rows' => array()
);
while($row = mysqli_fetch_assoc($sql))
{
$results = array(
'Topping' => $row['Topping'],
'cantidad' => $row['cantidad']
);
$results ['rows'][] = array('c' => array(
array('v' => $row['Topping']),
array('v' => $row['cantidad'])
));
}
$json = json_encode($results, JSON_NUMERIC_CHECK);
echo $json;
?>`
Then, my html code for the chart:
<head>
<!--Load the AJAX API-->
<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.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
$.ajax({
url: 'http://localhost/cakesetup/pizza',
dataType: "json",
success: function (jsonData){
var data = new google.visualization.DataTable(jsonData);
// Set chart options
var options = {'title':'Distribucion de pizzas',
'width':800,
'height':600};
}
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
</div>
</div>
When I run the code what I get is this "{"Topping":"Peperonni","cantidad":6,"rows":[{"c":[{"v":"Peperonni"},{"v":6}]}]} "
Thanks in advance.
Check your url
// Create the data table.
$.ajax({
url: 'http://localhost/cakesetup/pizza', // i dont think a url localhost will work. try cakesetup or /pizza
dataType: "json",
success: function (jsonData){
var data = new google.visualization.DataTable(jsonData);
// Set chart options
var options = {'title':'Distribucion de pizzas',
'width':800,
'height':600};
}
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
});