Basic Pie Chart using mysql data
44 views
Skip to first unread message
Gregg Somes
Dec 26, 2017, 4:01:40 PM12/26/17
to Google Visualization API
Hi I have a basic Pie Chart that, upon running the PHP script and viewing the page source in the browser shows that the data is retrieved correctly using mysql_fetch_array()
however, no pie chart is displayed in the browser. here is the php script
<!DOCTYPE html>
<?php
include("config.php");
$my_db = "asmf";
$link = mysqli_connect($dbhost, $dbuname, $dbpass, $my_db);
$q = "select * from $my_db.expenses GROUP BY exp_type";
$r = mysqli_query($link, $q);
if (!$link) {
echo "Error: Unable to connect to MySQL." . PHP_EOL;
echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
exit;
}
?>
<html>
<head>
<title>ASMF-eTrucker Expense Pie Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Expense Type', 'Amount'],
<?php
while($row = mysqli_fetch_array($r)) {
//echo $row["amount"]."<br>";
echo "['".$row['exp_type']."', '".$row['amount']."'],";
}
?>
]);
var options = {
title: 'Percent of Expense Types'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div style="width:900px;">
<h3>ASMF-eTrucker Expense Pie Chart</h3>
<br />
<div id="piechart" style="width: 900px; height: 500px;"></div>
</div>
Where could the code be failing?
Gregg
however, no pie chart is displayed in the browser. here is the php script
<!DOCTYPE html>
<?php
include("config.php");
$my_db = "asmf";
$link = mysqli_connect($dbhost, $dbuname, $dbpass, $my_db);
$q = "select * from $my_db.expenses GROUP BY exp_type";
$r = mysqli_query($link, $q);
if (!$link) {
echo "Error: Unable to connect to MySQL." . PHP_EOL;
echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
exit;
}
?>
<html>
<head>
<title>ASMF-eTrucker Expense Pie Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Expense Type', 'Amount'],
<?php
while($row = mysqli_fetch_array($r)) {
//echo $row["amount"]."<br>";
echo "['".$row['exp_type']."', '".$row['amount']."'],";
}
?>
]);
var options = {
title: 'Percent of Expense Types'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div style="width:900px;">
<h3>ASMF-eTrucker Expense Pie Chart</h3>
<br />
<div id="piechart" style="width: 900px; height: 500px;"></div>
</div>
Where could the code be failing?
Gregg
Carlos da Cunha e Silva
Dec 27, 2017, 7:15:20 AM12/27/17
to Google Visualization API
Start up your devtool in Chrome/IE or whatever browser and look at the console log. It will contain some error message that will help you understand why it's not working.
Reply all
Reply to author
Forward
0 new messages