Bar Chart in PHP and MySQL


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.

Recommended Tutorials

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518
Open chat
Scan the code
Hello 👋
Can we help you?