03-Apr-2023
.
Admin
Hi Guys,
In this blog, I will show you how to draw donut chart using php with mysql. We will generate the simplest donut chart with Highcharts in php mysql. i am going to learn you how to create donut chart highchart using php with mysql. We will talk about highcharts donut chart example.
Highcharts is a one type js library, that provide to populate bar chart, line chart, area chart, column chart etc. Highcharts library also provide several theme and graphic design that way you can make better layout. Highcharts is a very popular and simple library for php developer.
In this post, we are learn how to implement simple dynamic donut highcharts using php mysql database. I will give you full example of donut highcharts.
In this three step, we will create one tables with some dummy data and represent in donut chart. After complete this example you will find layout of donut Highcharts is looks like as above image, it's pretty nice, i think:
Here i will give you full example for highcharts donut chart in php with mysql. So let's see the bellow example:
Create Table
In the first step, you have to need a students table for insert students data So let's create students table using bellow sql query :
CREATE TABLE IF NOT EXISTS `students` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`course` varchar(100) NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
Create View File index.php
<!DOCTYPE html>
<html>
<head>
<title>Make Donut HighChart in PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<style type="text/css">
.box{
width:800px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">PHP Donut HighChart Tutorial Example - NiceSnippets.com</h3>
</div>
<div class="panel-body" align="center">
<div id="donut_chart" style="width:750px; height:450px;">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'donut_chart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Course and Student'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: []
}
$.getJSON("data.php", function(json) {
options.series = json;
chart = new Highcharts.Chart(options);
});
});
</script>
</body>
</html>
Create data.php
<?php
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = "root"; /* Password */
$dbname = "new_blog"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
$result = mysqli_query($con, "SELECT course, COUNT('id') as id FROM `students` GROUP BY course");
$rows['type'] = 'pie';
$rows['name'] = 'Student';
//$rows['innerSize'] = '50%';
while ($r = mysqli_fetch_assoc($result)) {
$rows['data'][] = array($r['course'], $r['id']);
}
$rslt = array();
array_push($rslt,$rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);
mysqli_close($con);
?>
Now we are ready to run our example so run bellow command for quick run:
php -S localhost:8000
Now you can open bellow URL on your browser:
http://localhost:8000
It will help you....
#PHP
