||Plustcharts||
How to create a Donut Chart using PHP and JavaScript
Donut charts are an advancement to Pie charts. They are hollow in the middle to add additional information. Here we are going to discuss the steps to create a Donut chart using PHP and JavaScript with Pluscharts, a JavaScript charting library to build charts.
Step 1: Creating the MySQL table
For this, consider a table of data, consisting of seven data entries. The columns are labeled id, month and sales. This table can be created using the following code.
CREATE TABLE shop (
id INT NOT NULL,
month VARCHAR(30) NOT NULL,
sales INT NOT NULL,
PRIMARY KEY (id),
UNIQUE (month)
);
INSERT INTO shop
(id, month, sales)
VALUES
(1, “Jan”, 50),
(2, “Feb”, 10),
(3, “Mar”, 20),
(4, “Apr”, 20),
(5, “May”, 30),
(6, “Jun”, 10),
(7, “Jul”, 20);
Step 2: Setting up the connection with the database
After entering the data in the database, you can start with creating your project folder and the main file. But before you begin with the main code, don’t forget to create a subfolder (optional), to hold the secondary files that need to be included in the main code.
Now, let us move to create a new file, that will contain a PHP code to fetch the data from the database.
<?php
$dbservername = “localhost”;
$dbusername = “”;
$dbpassword = “”;
$dbname = “test”;
$conn = mysqli_connect($dbservername, $dbusername, $dbpassword, $dbname);
if (!$conn) {
die(“Connection failed: “. mysqli_connect_error());
}
?>
Include the file, in the main file and in order to check the connection establishment, run the code in the browser, preferably Chrome. Store both sets of data, months and sales in two arrays.
<?php
include_once ‘dbh.php’;
$sql= “SELECT*FROM shop”;
$result= mysqli_query($conn, $sql);
$shops= array();
if (mysqli_num_rows($result) >0)
{
while ($row= mysqli_fetch_assoc($result)) {
$shops[]= $row;
}
}
$a= array();
foreach ($shops as $shop) {
$a[]= $shop[‘sales’];
}
$b= array();
foreach ($shops as $shop) {
$b[]= $shop[‘month’];
}
?>
Also read: Key Elements For An Effective Dashboard Design
Step 3: Writing the Donut Chart example code
Create an element, where you want to render your chart, using the following code.
For example, here we create an element with id, ‘donut-chart-example’.
<div id=”donut-chart-example”></div>
Now, since the pluscharts library is built upon d3, we load d3 first and then pluscharts, using the following scripts.
<script src=”https://d3js.org/d3.v5.min.js”></script>
<script src=”path-to/src/pluscharts.js”></script>
Next, assign the data from PHP variables to JS variables, using the following code.
<script type=”text/javascript”>
var sales= <?php echo json_encode($a ); ?>;
var months= <?php echo json_encode($b ); ?>;
After this, we can move to write a Javascript code to create a donut chart.
pluscharts.draw({
drawOn : “#donut-chart-example”,
type: “donut”,
dataset : {
data: [70,80,50],
backgroundColor: [“#324e8f”, “#9c4a64”, “#20b98e”],
label: [“Web”, “Mobile”, “Plugins”],
borderColor: “#ffffff”,
borderWidth: 2,
},
options: {
width: 80,
text: {
display: true,
color: “#f6f6f6”
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘container’, //give ‘container’ if you want the width and height of the initiated container
height: ‘400’
}
}
})
For better understanding let us break this code into parts.
pluscharts.draw
({ })
This function is used to initiate the chart. Under this draw function, we pass the details of the chart including the data and options as the argument to the draw() function.
drawOn : ‘#donut-chart-example’,
The drawOn element is used to indicate the element where the chart is to be generated.
type: “donut”,
The type of chart to be drawn is specified in the type element.
dataset: {
data: sales,
backgroundColor: [“#324e8f”, “#9c4a64”, “#20b98e”],
label: months,
borderColor: “#ffffff”,
borderWidth: 2,
},
The dataset is used to insert data values, background color, border color, border width, label and legend labels. Since we have assigned the data values to specific arrays, instead of specifying each value the array names “sales” and “labels” respectively, are mentioned here.
options: {
width: 80,
text: {
display: true,
color: “#f6f6f6”
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘container’, //give ‘container’ if you want the width and height of the initiated container
height: ‘400’
}
}
})
Recommended reading: What Role Does A Dashboard Play In Social Media Management?
This element is for customization of the chart. Here, we have the option to adjust the display, color, and position of the text. The visibility and dimension of legends can be set. The total width and height of the chart can be adjusted. ‘Container’ can be set instead of value when there is a need to set the dimension of the chart the same as its initiated container.
