+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] Chart JS Doughnut (/thread-100677.html)
[Tut] Chart JS Doughnut - xSicKxBot - 01-31-2023
Chart JS Doughnut
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2023/01/chart-js-doughnut.jpg" width="550" height="501" title="" alt="" /></div><div><div class="modified-on" readability="7.1304347826087"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on January 30th, 2023.</div>
<p>The doughnut chart is similar to the pie chart except for the cutout area in the middle of the pie graph.</p>
<p>It shows the partitions out of a boundary taken. The circle of the pie or doughnut chart is the boundary and the partitions give relational statistics.</p>
<p>This quick example has the Chart JS JavaScript to display a doughnut chart. Earlier, we started with <a href="https://phppot.com/javascript/chartjs-line-chart/">Chart JS line chart</a> and have seen many examples for this library.</p>
<h2>Quick example</h2>
<div class="post-section-highlight" readability="55">
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>Chart JS Doughnut</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>Chart JS Doughnut</h1> <div> <canvas id="chartjs-doughnut"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> <script> new Chart(document.getElementById("chartjs-doughnut"), { type: 'doughnut', data: { labels: ["Lion", "Horse", "Elephant", "Tiger", "Jaguar"], datasets: [{ backgroundColor: ["#51EAEA", "#FCDDB0", "#FF9D76", "#FB3569", "#82CD47"], data: [418, 263, 434, 586, 332] }] }, options: { title: { display: true, text: 'Chart JS Doughnut.' }, cutout: '60%', // the portion of the doughnut that is the cutout in the middle radius: 200 } }); </script>
</body>
</html>
</code></pre>
</div>
<p>In a previous article, we have seen how to create <a href="https://phppot.com/javascript/chartjs-pie-chart/">Chart JS JavaScript library to create a pie chart</a>.</p>
<p>The code doughnut chart differs only by the property <strong><em>type: doughnut</em></strong> instead of <strong><em>type: pie</em></strong><em>. </em></p>
<p><strong>Output</strong></p>
<p>It displays the count of an animal on each wing of the doughnut chat.</p>
<p>As in the pie chart example, the animal names are taken for the “<em>labels”</em> property. The count of each animal is the chart data. Different background colors classify it in the doughnut chart.</p>
<p>The below figure shows the output of this Chart JS doughnut example.</p>
<p><a href="https://phppot.com/wp-content/uploads/2023/01/chartjs-doughnut.jpg"><img loading="lazy" class="alignnone size-large wp-image-20369" src="https://phppot.com/wp-content/uploads/2023/01/chartjs-doughnut-550x501.jpg" alt width="550" height="501" srcset="https://phppot.com/wp-content/uploads/2023/01/chartjs-doughnut-550x501.jpg 550w, https://phppot.com/wp-content/uploads/2023/01/chartjs-doughnut-300x273.jpg 300w, https://phppot.com/wp-content/uploads/2023/01/chartjs-doughnut-768x700.jpg 768w, https://phppot.com/wp-content/uploads/2023/01/chartjs-doughnut.jpg 891w" sizes="(max-width: 550px) 100vw, 550px"></a></p>
<h2>Doughnut Chart with PHP and MySQL Database</h2>
<p>This example will be helpful if you want to display dynamic data from an external source.</p>
<p>It uses a database source to supply data for the Chart JS doughnut chart.</p>
<p>The <em>db_chartjs_data</em> is the database that contains the <em>tbl_marks</em> table. It has student’s mark in percentage.</p>
<p>The doughnut chart should display the number of students who got a particular percentage.</p>
<p class="code-heading">doughnut-chart-with-php-database.php</p>
<pre class="prettyprint"><code class="language-php-template"><?php
$conn = new mysqli('localhost', 'root', '', 'db_chartjs_data');
$sql = "SELECT count(*) as marks_percentage_count, percentage FROM tbl_marks GROUP BY percentage";
$result = $conn->query($sql);
{ $label = array(); $percentage = array(); while ($row = $result->fetch_assoc()) { $label[] = $row["percentage"] . "%"; $percentage[] = $row["marks_percentage_count"]; }
}
$chartLabel = json_encode($label);
$chartData = json_encode($percentage);
?>
<!DOCTYPE html>
<html>
<head>
<title>Doughnut Chart with PHP and MySQL Database</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head> <body> <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.net/npm/[email protected]/dist/chart.umd.min.js"></script> <script> new Chart(document.getElementById("chartjs-doughnut"), { type: 'doughnut', data: { labels: <? php echo $chartLabel; ?>, datasets: [{ backgroundColor: ["#51EAEA", "#FCDDB0", "#FF9D76", "#FB3569", "#82CD47"], data: <? php echo $chartData; ?> }] }, options: { title: { display: true, text: 'Chart JS Doughnut' }, cutout: '60%', // the portion of the doughnut that is cutout in the middle radius: 200 } }); </script>
</body>
</html>
</code></pre>
<p>This is the database script to import before running this example.</p>
<p class="code-heading">db_chartjs_data.sql</p>
<pre class="prettyprint"><code class="language-sql">--
-- Database: `db_chartjs_data`
-- --
-- Table structure for table `tbl_marks`
-- CREATE TABLE `tbl_marks` ( `id` int(11) NOT NULL, `name` varchar(55) NOT NULL, `percentage` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; --
-- Dumping data for table `tbl_marks`
-- INSERT INTO `tbl_marks` (`id`, `name`, `percentage`) 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 table `tbl_marks`
--
ALTER TABLE `tbl_marks` ADD PRIMARY KEY (`id`); --
-- AUTO_INCREMENT for dumped tables
-- --
-- AUTO_INCREMENT for table `tbl_marks`
--
ALTER TABLE `tbl_marks` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
</code></pre>
<p>This code prepares a query to fetch the student’s count grouped by percentage. There are four distinct percentages in the database.</p>
<p>This output screenshot displays the number of students who scored a particular percentage.</p>
<p><strong>Output</strong></p>
<p><a href="https://phppot.com/wp-content/uploads/2023/01/dynamic-doughnut-chart.jpg"><img loading="lazy" class="alignnone size-large wp-image-20384" src="https://phppot.com/wp-content/uploads/2023/01/dynamic-doughnut-chart-550x512.jpg" alt="dynamic doughnut chart" width="550" height="512" srcset="https://phppot.com/wp-content/uploads/2023/01/dynamic-doughnut-chart-550x512.jpg 550w, https://phppot.com/wp-content/uploads/2023/01/dynamic-doughnut-chart-300x280.jpg 300w, https://phppot.com/wp-content/uploads/2023/01/dynamic-doughnut-chart-768x716.jpg 768w, https://phppot.com/wp-content/uploads/2023/01/dynamic-doughnut-chart.jpg 893w" sizes="(max-width: 550px) 100vw, 550px"></a></p>
<p>The ChartJS script to display a doughnut chart requires additional (optional) property. That is, the <em>cutout</em> property specified under the ChartJS <em>options</em> array.</p>
<p>It accepts value in percentage. It decides the transparent area cutout from the middle of the doughnut chart.</p>
<p><a class="download" href="https://phppot.com/downloads/javascript/chartjs-doughnut.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/chartjs-doughnut/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2023/01/30/chart-js-doughnut/