[Chartjs]-Grouped Bar Chart from mySQL database using ChartJS and PHP

by

1👍

There’s a very small mistake in the code that needs to be removed.

Current Code:

quality.push(data[i]).quality);

Correction:

quality.push(data[i].quality);

There’s just an additional ‘)’ that needs to be removed and it worked…

Bar Chart

1👍

Complete working code as below;

<!-- index.php  -->

<?php

header('Content-Type: application/json');

$conn = mysqli_connect('localhost', 'root', '', 'registration');

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$query = sprintf("SELECT ratingid, variety, quality FROM chartdata ORDER BY
ratingid");

$result = mysqli_query($conn, $query);

$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

mysqli_close($conn);

print json_encode($data);
//-- app.js

$(document).ready(function () {
    $.ajax({
            url: "http://localhost/test/barChart/index.php",
            method: "GET",
            success: function (data) {
                console.log(data);
                var rating = [];
                var variety = [];
                var quality = [];

                for (var i in data) {
                    rating.push(data[i].ratingid);
                    variety.push(data[i].variety);
                    quality.push(data[i].quality);
            }

            var chartdata = {
                labels: rating,
                datasets: [{
                        label: 'Red',
                        backgroundColor: 'rgb(255, 0, 0)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: variety
                    },
                    {
                        label: 'Blue',
                        backgroundColor: 'rgb(0, 0, 255)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: quality
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata,
                options: {
                    barValueSpacing: 20,
                    title: {
                        display: true,
                        text: 'Variety',
                        fontSize: 20
                    },
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Rating options'
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Amount'
                            },
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        },
        error: function (data) {
            console.log(data);
        }
    });
});
<!-- bargraph.html -->

<!DOCTYPE html>
<html>
<head>
  <title>ChartJS - BarGraph</title>
  <style type="text/css">
  #chart-container {
    width: 640px;
    height: auto;
  }
</style>
</head>
<body>
<div id="chart-container">
  <canvas id="mycanvas"></canvas>
</div>

<!-- javascript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

Leave a comment