File Name | Details |
---|---|
config.php | MySQLi Database connection details are stored here. |
sql_dump.txt | SQL Dump to create chart_data table with sample data. |
readme.txt | Instructions on how to run the script |
index.php | The main file to display records and the Pie chart. |
Download Zip file at end of this tutorial.
if($stmt = $connection->query("SELECT language, nos FROM chart_data")){
echo "No of records : ".$stmt->num_rows."<br>";
$php_data_array = Array(); // create PHP array
echo "<table>
<tr> <th>Language</th><th>Nos</th></tr>";
while ($row = $stmt->fetch_row()) {
echo "<tr><td>$row[0]</td><td>$row[1]</td></tr>";
$php_data_array[] = $row; // Adding to array
}
echo "</table>";
}else{
echo $connection->error;
}
$php_data_array
). While displaying the records in a table we store each record inside the PHP array.
$php_data_array[] = $row; // Adding to array
After displaying all the records in a table we have the $php_data_array
with all the data collected from MySQL table. We can display the Json string like this.
echo json_encode($php_data_array);
echo "<script>
var my_2d = ".json_encode($php_data_array)."
</script>";
my_2d
stores all the data required for creating the chart. We need to display them in the format required by our Chart library.
for(i = 0; i < my_2d.length; i++)
data.addRow([my_2d[i][0], parseInt(my_2d[i][1])]);
We used parseInt() function to convert input string value to Integer.
JavaScript part is here .
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['corechart']});
// Draw the pie chart when Charts is loaded.
google.charts.setOnLoadCallback(draw_my_chart);
// Callback that draws the pie chart
function draw_my_chart() {
// Create the data table .
var data = new google.visualization.DataTable();
data.addColumn('string', 'language');
data.addColumn('number', 'Nos');
for(i = 0; i < my_2d.length; i++)
data.addRow([my_2d[i][0], parseInt(my_2d[i][1])]);
// above row adds the JavaScript two dimensional array data into required chart format
var options = {title:'plus2net.com : How the tutorials are distributed',
pieHole: 0.5,
'width':600,
'height':500,
};
// Instantiate and draw the chart
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
<div id="donutchart"></div>
The chart drawn above can be displayed with live internet connection as the library is to be loaded from gstatic.com
Data is collected from MySQL database table so data can be edited by using script and the same will be reflected by the Chart. We have not included this part in the present script and there are many tutorials available here one handling data using PHP and MySQL.
You can read tutorials on other types of charts displayed by using data from database. 3D Pie Chart with change in data Understanding different types of Charts