Bar graph rows in the database and order by status, using jscharts and php

Question

I need help debugging this prob, I'm using javascript and php

here are my files

 data.php -> display the data from database
 bargraph.html -> bar graph display
 chart.min.js, jquery-3.2.1.min.js, and my defined js file app.js - js files

The problem is that I wanted bar graph display of database's reservation status. (Pending, Accepted, Cancelled) but the bar graph only shows the highest number of the reference_id in the database

The database table have these data inside:

column: reference_id, reservation_status

1. reference_id = "1", reservation_status = "Accepted"
2. reference_id = "2", reservation_status = "Pending"
3. reference_id = "3", reservation_status = "Accepted"

but the output shows the Accepted reference_id = "3" as the highest number and doesn't show the pending

I wanted my output to show that there are two rows in the database that is "Accepted" and one row that is "Pending"

So the score for the Accepted should be = 2 and Pending is = 3

here are my files.

data.php

      <?php
    //setting header to json
    header('Content-Type: application/json');

    //database
    define('DB_HOST', '127.0.0.1');
    define('DB_USERNAME', 'root');
    define('DB_PASSWORD', '');
    define('DB_NAME', 'catering');

    //get connection
    $mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

    if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
    }

    //query to get data from the table
    $query = sprintf("SELECT reference_id, reservation_status FROM client_record ORDER BY reservation_status");

    //execute query
    $result = $mysqli->query($query);




    //loop through the returned data
    $data = array();
    foreach ($result as $row) {
    $data[] = $row;
    }

    //free memory associated with result
    $result->close();

    //close connection
    $mysqli->close();

    //now print the data
    print json_encode($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="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/Chart.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
    </html>

and app.js

    $(document).ready(function(){
    $.ajax({
        url: "http://localhost/samples/data.php",
        method: "GET",
        success: function(data) {
            console.log(data);
            var status = [];
            var client = [];

            for(var i in data) {
                status.push("Status " + data[i].reservation_status);
                client.push(data[i].reference_id);
            }

            var chartdata = {
                labels: status,
                datasets : [
                    {
                        label: 'Client',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: client
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata
            });
        },
        error: function(data) {
            console.log(data);
        }
    });
    });

Bar graph rows in the database and order by status, using jscharts and php

0 Answers0