Today we are going to learn how we can use Bar chart with php in our application or wherever you want to use it. When we do use charts to some short of values like sales chart, purchase chart, profit chart and activity chart etc. Then we have many options like there are many libraries that you can use to build responsive charts just by putting the library in your code. Today I’m going to do the same things let’s see how we will do it.
I am gonna use Chart.js , I usually do use it because it’s open-source and secondly it has multiple Charts options. Like
- Line Chart
- Bar Chart
- Area Chart
and many more. But we will use bar chart.
Create an Empty Page to use bar Chart
By creating this empty page, I’ll also use the boostrap css cdn to use in built compenents.
When you will create an empty page then we will create a chart there with some new data and data will be manual when you will have dynamic data then you can manage accordingly.
Well, let’s how we can do it and move on the main part. I’ll create an empty page. And then I’ll add a card div to that page. See how :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charts Implementation</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container d-flex align-items-center justify-content-center " style="min-height: 600px;">
<div class="row">
<div class="card">
<div class="card-content">
<div class="card-body">
<div class="card-title">
This is card
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Output will be, I div in the center of the body.
After making this div we will use some charts into this and see how we can use them. We would also try with some dynamic data and also with some manual data. And we also can change it on screen.
We will cover everything in this tutorial.
Now, Include chart.js Cdn and start implementing the chart interface.
In front of you, you can see the documentation button.
from getting started, you can get the CDN link so that you can embed that in your code otherwise, you can copy from here and if it will not work you can copy from there.
Implement Chart.js CDN
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>Then I have added some data through script and It became very easy to create a chart through custom data.
Create Data Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charts Implementation</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<script>
const labels = ['march', 'april', 'may', 'jun', 'july', 'Aug', 'Sep'];
const data = {
labels: labels,
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
};
</script>
<div class="container d-flex align-items-center justify-content-center " style="min-height: 600px;">
<div class="row">
<div class="card" >
<div class="card-content">
<div class="card-body">
<canvas id="chart2" style="min-height: 300px;" width="400" height="100">
<p>Hello Fallback World</p>
</canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const config = {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
};
const myChart = new Chart(
document.getElementById('chart2'),
config
);
</script>
</body>
</html>After Implementing this code in your index.php file you will see that you will have an awesome look of bar chart.
Conclusion
I hope you get understood that how you can use a bar chart easily in your application. Although you can change and manipulate the labels array and also from dataset you can give desired colors to the bars.
I hope it will help you. Thanks Larachamp
1 thought on “How to Use A Bar Chart in PHP”