+- 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 Pie Chart Example (/thread-100364.html)
[Tut] Chart JS Pie Chart Example - xSicKxBot - 12-08-2022
Chart JS Pie Chart Example
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/12/chart-js-pie-chart-example.jpg" width="550" height="561" title="" alt="" /></div><div><div class="modified-on" readability="7.1304347826087"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on December 7th, 2022.</div>
<p>In this tutorial, we are going to learn how to create a pie chart using JavaScript libraries. We have used Chart.js library for the generating the pie charts. As an alternate option, I have also presented a 3d pie chart example using Google charts library.</p>
<p>Let us see the following examples of creating a pie chart using JavaScript.</p>
<ul>
<li>Quick example – Simple pie chart example via ChartJS.</li>
<li>3D pie chart with Google Charts library.</li>
<li>Responsive ChartJS pie chart.</li>
</ul>
<h2>Quick example – Simple pie chart example via ChartJS</h2>
<div class="post-section-highlight" readability="53">
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>Chart JS Pie Chart</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body> <div class="phppot-container"> <h1>Responsive Pie Chart</h1> <div> <canvas id="pie-chart"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> <script> new Chart(document.getElementById("pie-chart"), { type : 'pie', 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 Pie Chart Example' } } }); </script>
</body>
</html>
</code></pre>
</div>
<p>Creating a ChartJS pie chart is a three-step process as shown below.</p>
<ol>
<li>Add the ChartJS library include to the head section of your HTML.</li>
<li>Add a canvas element to the HTML.</li>
<li>Add the ChartJS class initiation and invoking script before closing the HTML body tag.</li>
</ol>
<h3>About the ChartJS pie chart script</h3>
<p>The script sets the following properties to initiate the ChartJS library.</p>
<ul>
<li><em>type</em> – The type of the chart supported by the ChartJS library.</li>
<li><em>data</em> – It sets the chart labels and datasets. The dataset contains the data array and the display properties.</li>
<li><em>options</em> – It sets the chart title text and its display flag as a boolean true to show it on the browser.</li>
</ul>
<p><strong>Output:</strong></p>
<p><img loading="lazy" class="alignnone size-large wp-image-20136" src="https://phppot.com/wp-content/uploads/2022/12/chartjs-pie-chart-550x561.jpg" alt="chartjs pie chart" width="550" height="561" srcset="https://phppot.com/wp-content/uploads/2022/12/chartjs-pie-chart-550x561.jpg 550w, https://phppot.com/wp-content/uploads/2022/12/chartjs-pie-chart-294x300.jpg 294w, https://phppot.com/wp-content/uploads/2022/12/chartjs-pie-chart-768x783.jpg 768w, https://phppot.com/wp-content/uploads/2022/12/chartjs-pie-chart.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p>In a previous tutorial, we have seen the various ways of <a href="https://phppot.com/javascript/chartjs-line-chart/">creating line charts using the Chart JS library</a>.</p>
<p><a class="demo" href="https://phppot.com/demo/chartjs-pie-chart/">View Demo</a></p>
<h2>Creating 3D pie chart</h2>
<p>There is no option for a 3D pie chart using chart JS. For those users who have landed here looking for a 3D pie chart, you may try Google Charts.</p>
<p>This example uses Google Charts to create a 3D pie chart for a webpage. In a previous code, we use <a href="https://phppot.com/php/how-to-render-attendance-graph-using-google-charts/">Google Charts to render a bar chart</a> to show students’ attendance statistics.</p>
<p>The Google Charts JavaScript code prepares the array of animal distribution data. This array is for sending it to the chart data table which helps to draw the pie chart.</p>
<p>The Google Charts library accepts the <strong>is3D</strong> with a boolean <em>true</em> to output a 3D pie chart.</p>
<p>It creates a chart visualization object with the reference with respect to the UI element target. Then, it calls the Google Charts library function to draw and render the chart.</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>3d Pie Chart JavaScript with Google Charts</title>
<link rel='stylesheet' href='style.css' type='text/css' /> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"> google.charts.load("current", { packages : [ "corechart" ] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ [ 'Animal', 'Distribution' ], [ 'Horse', 11 ], [ 'Elephant', 2 ], [ 'Tiger', 2 ], [ 'Lion', 2 ], [ 'Jaguar', 7 ] ]); var options = { title : '3d Pie Chart JavaScript with Google Charts', is3D : true, }; var chart = new google.visualization.PieChart(document .getElementById('3d-pie-chart')); chart.draw(data, options); }
</script>
</head>
<body> <div class="phppot-container"> <h1>3d Pie Chart JavaScript with Google Charts</h1> <div id="3d-pie-chart" style="width: 700px; height: 500px;"></div> </div>
</body>
</html>
</code></pre>
<p><img loading="lazy" class="alignnone size-large wp-image-20144" src="https://phppot.com/wp-content/uploads/2022/12/3d-pie-chart-550x444.jpg" alt="3d pie chart" width="550" height="444" srcset="https://phppot.com/wp-content/uploads/2022/12/3d-pie-chart-550x444.jpg 550w, https://phppot.com/wp-content/uploads/2022/12/3d-pie-chart-300x242.jpg 300w, https://phppot.com/wp-content/uploads/2022/12/3d-pie-chart.jpg 600w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Responsive pie chart using Chart JS</h2>
<p>The Chart JS library provides JavaScript options to make the output pie chart responsive.</p>
<p>This example script uses those options to render a responsive pie chart in a browser.</p>
<p>The JavaScript code to render a responsive pie chart is the same as we have seen in the quick example above.</p>
<p>The difference is nothing but to set <strong>responsive: true</strong> in the ChartJS <em>options</em> properties.</p>
<p>If you want to <a href="https://phppot.com/php/draw-responsive-charts-pie-bar-column-using-google-charts/">create a responsive chart using Google Charts</a>, then the linked article has an example.</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html>
<head>
<title>Responsive Pie Chart</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> <div class="phppot-container"> <h1>Responsive Pie Chart</h1> <div> <canvas id="pie-chart"></canvas> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> <script> new Chart(document.getElementById("pie-chart"), { type : 'pie', 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 : 'Responsive Pie Chart' }, responsive : true } }); </script>
</body>
</html>
</code></pre>
<p><a class="demo" href="https://phppot.com/demo/chartjs-pie-chart/">View Demo</a><a class="download" href="https://phppot.com/downloads/javascript/chartjs-pie-chart.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-pie-chart/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/12/07/chart-js-pie-chart-example/