||Plustcharts||
How to create an Area Chart using PHP and JavaScript
Area charts are like area charts, the difference being that the area between the x-axis and line is filled with color or pattern. Let us discuss the steps to draw an area chart using PHP and JavaScript with Pluscharts, a JavaScript charting library to build charts.
Step 1: To create the MySQL table
Consider a table of data containing 3 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);
Also Read: Key Elements For An Effective Dashboard Design
Step 2: To set up the connection between the database and the main file
Once the data is stored 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’];
}
?>
Recommended Reading: Donut Chart Using PHP And JS
Step 3: Writing the Pie 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, ‘area-chart-example’.
<div id=”area-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>
After that we assign the data from PHP 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 an area chart.
pluscharts.draw({
drawOn : “#area-chart-example”,
type: “area”,
dataset : {
data: [
{
x: sales,
y: months
}
],
lineColor: “#e46161”,
lineWidth: 2,
fillColor: “#d8aabe”,
legendLabel: “visitors”
},
options: {
text: {
display: true,
color: “#6c478c”
},
points: {
display: true,
color: “#e46161”,
radius: 3
},
axes: {
x: {
display: true,
scale: 3,
min: 0,
max: 100
},
y: {
display: true,
scale: 3,
min: 0,
max: 100
}
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘container’, //give ‘container’ if you want width and height of initiated container
height: ‘400’
}
}
})
</script>
Let’s break this simple code further down to understand it better.
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 : ‘#area-chart-example’,
The drawOn element is used to indicate the element where the chart is to be generated.
type: “area”,
The type of chart to be drawn is specified in the type element.
dataset: {
data: [
{
x: sales,
y: months
}
],
lineColor: “#e46161”,
lineWidth: 2,
fillColor: “#d8aabe”,
legend label: “visitors”
},
The dataset is used to insert data values, line color, line width, fill color and legend labels. Note that here, instead of specifying the data values in data, we have given the name of the array where the data is stored, which is “sales” and “labels” respectively.
options: {
text: {
display: true,
color: “#fdfdfd”
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘400’, //give ‘container’ if you want width and height of initiated container
height: ‘400’
}
}
})
Recommended Reading: Spline Chart Using PHP And JS
Options are used for further customization of the chart. The display, color, and radius of text and points are specified. The scale of the x and y-axis is set along with a display option. The visibility and dimension of legends are set. The size of the chart can be adjusted and ‘container’ can be given in as a value when there’s a need to set the chart to the same dimension as its initiated container.
