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
);

PHP Signature Pad using Jquery Ajax Example

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);
}
?>

Crop and Save Image Using jQuery Croppie and PHP

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();
?>

Ajax Image Upload Using PHP and jQuery Without Refreshing Page

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.

Send Reset Password Link Email PHP

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.