Data visualization plays an important role in making complex information more understandable and accessible. While developing web applications, it is often necessary to present data in an attractive and intuitive format. Bar charts are an excellent choice for representing categorical data and for comparing values. In this tutorial, you will learn how to create a dynamic bar chart using PHP and MySQL to display data in web applications.
Dynamic Bar Chart in PHP and MySQL
By using the following steps, you can create a dynamic bar chart using PHP and MySQL:
- Step 1: Setting up the Database
- Step 2: Connecting to the Database
- Step 3: Fetching Data from the Database
- Step 4: Generating the Bar Chart
- Step 5: Testing the Chart
Step 1: Setting up the Database
First of all, you need to create a MySQL database and table to store the data for your web application. Open your preferred MySQL management tool (e.g., phpMyAdmin) and execute the following SQL query to create a table named chart_data:
CREATE TABLE chart_data ( id INT(11) PRIMARY KEY AUTO_INCREMENT, label VARCHAR(255) NOT NULL, value INT(11) NOT NULL );
Step 2: Connecting to the Database
Next, you need to connect to the MySQL database using PHP. So, Create a new PHP file named chart.php and add the following code:
<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
Step 3: Fetching Data from the Database
Now, you need to fetch or retrieve the data from the chart_data table and store it in an array. So, you can use the following code. Add the following code after the database connection code in chart.js php file:
<?php
// Fetch data from the database
$sql = "SELECT label, value FROM chart_data";
$result = $conn->query($sql);
$data = array();
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
// Close the database connection
$conn->close();
?>
Step 4: Generating the Bar Chart
Next, you need to create an HTML file named index.html and add the following code to create and show data in bar chart using charts.js library:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Bar Chart for Web Application Data</title>
<script src="js/Chart.min.js"></script>
</head>
<body>
<canvas id="barChart"></canvas>
<script>
// Retrieve data from PHP
var data = <?php echo json_encode($data); ?>;
// Extract labels and values from the data
var labels = data.map(function(item) {
return item.label;
});
var values = data.map(function(item) {
return item.value;
});
// Create a new bar chart
var ctx = document.getElementById("barChart").getContext("2d");
var chart = new Chart(ctx, {
type: "bar",
data: {
labels: labels,
datasets: [{
label: "Data",
data: values,
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
Note that:- Please visit Chart.js library from the official website (https://www.chartjs.org) and include it in your project by placing it in a directory named js within your project folder.
Step 5: Testing the Chart
Now open the index.html file in a web browser to visualize your web application data in the dynamic bar chart.
Conclusion
In this tutorial, you have learned how to create a dynamic bar chart using PHP, MySQL, and Chart.js. By retrieving data from the database, can update the chart dynamically as new data is added.
