The doughnut chart is just like the pie chart aside from the cutout space in the course of the pie graph.
It reveals the partitions out of a boundary taken. The circle of the pie or doughnut chart is the boundary and the partitions give relational statistics.
This fast instance has the Chart JS JavaScript to show a doughnut chart. Earlier, we began with Chart JS line chart and have seen many examples for this library.
Fast instance
<!DOCTYPE html>
<html>
<head>
<title>Chart JS Doughnut</title>
<hyperlink rel="stylesheet" href="https://phppot.com/javascript/chartjs-doughnut/model.css" sort="textual content/css" />
</head>
<physique>
<div class="phppot-container">
<h1>Chart JS Doughnut</h1>
<div>
<canvas id="chartjs-doughnut"></canvas>
</div>
</div>
<script
src="https://cdn.jsdelivr.internet/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script>
<script>
new Chart(doc.getElementById("chartjs-doughnut"), {
sort: 'doughnut',
information: {
labels: ["Lion", "Horse", "Elephant", "Tiger",
"Jaguar"],
datasets: [{
backgroundColor: ["#51EAEA", "#FCDDB0",
"#FF9D76", "#FB3569", "#82CD47"],
information: [418, 263, 434, 586, 332]
}]
},
choices: {
title: {
show: true,
textual content: 'Chart JS Doughnut.'
},
cutout: '60%', // the portion of the doughnut that's the cutout within the center
radius: 200
}
});
</script>
</physique>
</html>
In a earlier article, we have now seen the best way to create Chart JS JavaScript library to create a pie chart.
The code doughnut chart differs solely by the property sort: doughnut as a substitute of sort: pie.
Output
It shows the depend of an animal on every wing of the doughnut chat.
As within the pie chart instance, the animal names are taken for the “labels” property. The depend of every animal is the chart information. Completely different background colours classify it within the doughnut chart.
The beneath determine reveals the output of this Chart JS doughnut instance.
Doughnut Chart with PHP and MySQL Database
This instance will probably be useful if you wish to show dynamic information from an exterior supply.
It makes use of a database supply to provide information for the Chart JS doughnut chart.
The db_chartjs_data is the database that incorporates the tbl_marks desk. It has pupil’s mark in share.
The doughnut chart ought to show the variety of college students who obtained a specific share.
doughnut-chart-with-php-database.php
<?php
$conn = new mysqli('localhost', 'root', '', 'db_chartjs_data');
$sql = "SELECT depend(*) as marks_percentage_count, share FROM tbl_marks GROUP BY share";
$consequence = $conn->question($sql);
{
$label = array();
$share = array();
whereas ($row = $result->fetch_assoc()) {
$label[] = $row["percentage"] . "%";
$share[] = $row["marks_percentage_count"];
}
}
$chartLabel = json_encode($label);
$chartData = json_encode($share);
?>
<!DOCTYPE html>
<html>
<head>
<title>Doughnut Chart with PHP and MySQL Database</title>
<hyperlink rel="stylesheet" href="https://phppot.com/javascript/chartjs-doughnut/model.css" sort="textual content/css" />
</head>
<physique>
<div class="phppot-container">
<h1>Doughnut Chart with PHP and MySQL Database</h1>
<div>
<canvas id="chartjs-doughnut"></canvas>
</div>
</div>
<script
src="https://cdn.jsdelivr.internet/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script>
<script>
new Chart(doc.getElementById("chartjs-doughnut"), {
sort: 'doughnut',
information: {
labels: <? php echo $chartLabel; ?>,
datasets: [{
backgroundColor: ["#51EAEA", "#FCDDB0",
"#FF9D76", "#FB3569", "#82CD47"],
information: <? php echo $chartData; ?>
}]
},
choices: {
title: {
show: true,
textual content: 'Chart JS Doughnut'
},
cutout: '60%', // the portion of the doughnut that's cutout within the center
radius: 200
}
});
</script>
</physique>
</html>
That is the database script to import earlier than operating this instance.
db_chartjs_data.sql
--
-- Database: `db_chartjs_data`
--
--
-- Desk construction for desk `tbl_marks`
--
CREATE TABLE `tbl_marks` (
`id` int(11) NOT NULL,
`identify` varchar(55) NOT NULL,
`share` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping information for desk `tbl_marks`
--
INSERT INTO `tbl_marks` (`id`, `identify`, `share`) VALUES
(1, 'John', 85),
(2, 'Matthew', 85),
(3, 'Tim', 65),
(4, 'Clare', 75),
(5, 'Viola', 85),
(6, 'Vinolia', 75),
(7, 'Laura', 85),
(8, 'Leena', 75),
(9, 'Evan', 85),
(10, 'Ellen', 90);
--
-- Indexes for desk `tbl_marks`
--
ALTER TABLE `tbl_marks`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for desk `tbl_marks`
--
ALTER TABLE `tbl_marks`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
This code prepares a question to fetch the coed’s depend grouped by share. There are 4 distinct percentages within the database.
This output screenshot shows the variety of college students who scored a specific share.
Output
The ChartJS script to show a doughnut chart requires extra (elective) property. That’s, the cutout property specified beneath the ChartJS choices array.
It accepts worth in share. It decides the clear space cutout from the center of the doughnut chart.
