A pie chart<\/b> is a circular graph which is divided into slices to represent numerical proportion. The pie chart mainly used to show comparison and the graphical representation helps understand the comparison easily. The pie chart is the perfect choice to illustrate data in a percentage format.<\/p>\n
If you have a requirement to show the statistics of data with a pie chart, there is an easy way to create the pie chart in the web application. In this tutorial, we will show you how to create a dynamic pie chart with PHP and MySQL<\/b>.<\/p>\n
Google Visualization API provides an easy way to create charts on the website. Using Google charts API, you can generate pie chart to populate data from the database within minutes. Here we’ll create different types of pie charts to show dynamic data from the MySQL database using PHP and Google charts API<\/b>. Also, this tutorial will help you to make Google pie chart dynamic<\/b> with PHP and MySQL.<\/p>\nMaking a Dynamic Pie Chart with PHP and MySQL<\/h2>\n
In our example pie chart script, we’ll show some programming languages on the pie chart. Also, the data will be retrieved from the MySQL database and their popularity will be shown on the pie chart.<\/p>\n
Database Table Creation<\/b> Dynamic Data on Google Pie Chart<\/b> You can make various types of pie charts with Google Charts API. Some popular types of the pie chart are given below.<\/p>\n Set Donut Chart is same like the normal pie chart with a hole in the center. Set
\nTo store the programming languages data a table needs to be created in the database. The following SQL creates a table named programming_languages<\/code> in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `programming_languages<\/span>` (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT NULL<\/span> AUTO_INCREMENT,\r\n `name`<\/span> varchar<\/span>(255<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `rating`<\/span> int<\/span>(5<\/span>) NOT NULL<\/span>,\r\n `status`<\/span> enum('1'<\/span>,'0'<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span> DEFAULT '1'<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE=<\/span>InnoDB DEFAULT CHARSET=<\/span>utf8 COLLATE=<\/span>utf8_unicode_ci;\r\n<\/pre>\n
\nAt first dynamic data will be retrieved from the programming_languages<\/code> table using PHP and MySQL. After that, the programming language names and ratings will be specified in the data<\/code> variable.
\nIn options<\/code> variable, you can specify the desired title, width, and height of the pie chart.<\/p>\n<?php
<\/span>\/\/ Database credentials
<\/span>$dbHost <\/span>= <\/span>'localhost'<\/span>;
<\/span>$dbUsername <\/span>= <\/span>'root'<\/span>;
<\/span>$dbPassword <\/span>= <\/span>'root'<\/span>;
<\/span>$dbName <\/span>= <\/span>'codexworld'<\/span>;
<\/span>\/\/ Create connection and select db
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Get data from database
<\/span>$result <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT name,rating FROM programming_languages WHERE status = '1' ORDER BY rating DESC\"<\/span>);
<\/span>?><\/span><\/pre>\n<!DOCTYPE<\/span> html>\r\n<html<\/span> lang<\/span>=\"en\"<\/span>>\r\n<head<\/span>>\r\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"https:\/\/www.gstatic.com\/charts\/loader.js\"<\/span>><\/script<\/span>>\r\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span>>\r\ngoogle.charts.load<\/span>('current'<\/span>, {'packages'<\/span>:['corechart'<\/span>]});\r\ngoogle.charts.setOnLoadCallback(drawChart);\r\n\r\nfunction<\/span> drawChart<\/span>() {\r\n\r\n var<\/span> data =<\/span> google.visualization.arrayToDataTable([\r\n ['Language'<\/span>, 'Rating'<\/span>],\r\n <?php
<\/span>if(<\/span>$result<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$result<\/span>-><\/span>fetch_assoc<\/span>()){
echo <\/span>\"['\"<\/span>.<\/span>$row<\/span>[<\/span>'name'<\/span>].<\/span>\"', \"<\/span>.<\/span>$row<\/span>[<\/span>'rating'<\/span>].<\/span>\"],\"<\/span>;
}
}
<\/span>?><\/span>\r\n ]);\r\n \r\n var<\/span> options =<\/span> {\r\n title: 'Most Popular Programming Languages'<\/span>,\r\n width: 900<\/span>,\r\n height: 500<\/span>,\r\n };\r\n \r\n var<\/span> chart =<\/span> new<\/span> google.visualization<\/span>.PieChart(document<\/span>.getElementById<\/span>('piechart'<\/span>));\r\n \r\n chart.draw(data, options);\r\n}\r\n<\/script<\/span>>\r\n<\/head<\/span>>\r\n<body<\/span>>\r\n <!-- Display the pie chart --><\/span>\r\n <div<\/span> id<\/span>=<\/span>\"piechart\"<\/span>><\/div<\/span>>\r\n<\/body<\/span>>\r\n<\/html<\/span>>\r\n<\/pre>\nMaking a Dynamic 3D Pie Chart<\/h2>\n
is3D<\/code> option to true<\/code> to make a 3D pie chart.<\/p>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span>>\r\ngoogle.charts.load<\/span>('current'<\/span>, {'packages'<\/span>:['corechart'<\/span>]});\r\ngoogle.charts.setOnLoadCallback(drawChart);\r\n\r\nfunction<\/span> drawChart<\/span>() {\r\n\r\n var<\/span> data =<\/span> google.visualization.arrayToDataTable([\r\n ['Language'<\/span>, 'Rating'<\/span>],\r\n <?php
<\/span>if(<\/span>$result<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$result<\/span>-><\/span>fetch_assoc<\/span>()){
echo <\/span>\"['\"<\/span>.<\/span>$row<\/span>[<\/span>'name'<\/span>].<\/span>\"', \"<\/span>.<\/span>$row<\/span>[<\/span>'rating'<\/span>].<\/span>\"],\"<\/span>;
}
}
<\/span>?><\/span>\r\n ]);\r\n \r\n var<\/span> options =<\/span> {\r\n title: 'Most Popular Programming Languages'<\/span>,\r\n width: 900<\/span>,\r\n height: 500<\/span>,\r\n is3D: true<\/span>,\r\n };\r\n \r\n var<\/span> chart =<\/span> new<\/span> google.visualization<\/span>.PieChart(document<\/span>.getElementById<\/span>('piechart'<\/span>));\r\n \r\n chart.draw(data, options);\r\n}\r\n<\/script<\/span>>\r\n<\/pre>\nMaking a Dynamic Donut Pie Chart<\/h2>\n
pieHole<\/code> option to make a Donut Pie Chart.<\/p>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span>>\r\ngoogle.charts.load<\/span>('current'<\/span>, {'packages'<\/span>:['corechart'<\/span>]});\r\ngoogle.charts.setOnLoadCallback(drawChart);\r\n\r\nfunction<\/span> drawChart<\/span>() {\r\n\r\n var<\/span> data =<\/span> google.visualization.arrayToDataTable([\r\n ['Language'<\/span>, 'Rating'<\/span>],\r\n <?php
<\/span>if(<\/span>$result<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$result<\/span>-><\/span>fetch_assoc<\/span>()){
echo <\/span>\"['\"<\/span>.<\/span>$row<\/span>[<\/span>'name'<\/span>].<\/span>\"', \"<\/span>.<\/span>$row<\/span>[<\/span>'rating'<\/span>