Google Charts and Graphs API - https://developers.google.com/chart/
This package requires you to include Javascript into your solution
1. Insert Library source code into header of HTML page
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
2. Set up JS Script at the bottom of the document - <script type="text/javascript">code in here..</script>
<html>
<head>
<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([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
//insert the graph into the div section called pie chart
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div> #this reference the getElemementbyId above
</body>
</html>
<?php
//set up connection to the server
$servername = "localhost";
$username ="root";
$password = "root";
$dbname = "ec_sport";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error){
die("Connection Error: " . $conn->connect_error);
}else{
echo("Connection ok ");
}
//SQL query results stored
$gender_count = $conn->query("SELECT Gender, Count(Gender) as count from nominations group by Gender");
?>
<html>
<head>
<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([
['Gender', 'Count'],
<?php
//dynamically format query results into Javascript
if($gender_count->num_rows > 0){
while($row = $gender_count->fetch_assoc()){
echo("['".$row['Gender']."',".$row['count']."],");
}
}
?>
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h1>Analyse Data</h1>
<div id = "piechart"></div>
</body>
</html>