Skip to content

All topics  /  MySQL

PHP MySQL Charts JS Chart Example Tutorial

MySQL ·

Teams applying “PHP MySQL Charts JS Chart Example Tutorial” in a production project can use the related Monitask article to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official MySQL website and test it against the project’s actual database and runtime.

Hi friends,

In this quick example, let's see php mysql chart js chart example tutorial. This tutorial will give you simple example of how to create chart js chart in php mysql. Here you will learn how to creating dynamic data graph using php and chart js. I explained simply about how to implement dynamic graph from php mysql with chart js. follow bellow step for how to dynamic graph from php mysql with chart js.

Creating graph view using Chart.js is simple and easy. I have created the graph output for dynamic data retrieved from the database. I have a MySQL database table tbl_marks containing student marks.

I read the mark data and supplied it to the Chart.js function to create the graph with the mark statistics.

So let's see bellow example:

MySQL table


For this tutorial we will consider a very simple score table having three columns student_id , student_name and marks and 5 entries.

tbl_marks Table :- 

CREATE TABLE IF NOT EXISTS `tbl_marks` (
    `student_id` int(10) unsigned NOT NULL,
    `student_name` varchar(35) NOT NULL,
    `marks` int(11) DEFAULT '0'
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

tbl_marks Table Data :- 

INSERT INTO `tbl_marks` (`student_id`, `student_name`, `marks`) VALUES
    (1, 'John', 39),
    (2, 'Mary ', 46),
    (3, 'Maya', 65),
    (4, 'Rahul', 90),
    (5, 'Priya', 75);

index.php 

<!DOCTYPE html>
<html>
<head>
    <title>PHP MySQL Charts JS Chart Example Tutorial - Nicesnippets.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <div class="container-fluid w-75"> 
        <div class="row">
            <div class="col-md-12 my-5 d-flex justify-content-center">
                <h1>PHP MySQL Charts JS Chart Example Tutorial</h1>
            </div>
            <div class="col-md-12">
                <canvas id="graph"></canvas>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(document).ready(function () {
            showGraph();
        });
        const showGraph = () => {
            {
                $.post("data.php",function (data)
                {
                    console.log(data);
                    var name = [];
                    var marks = [];
                    for (var i in data) {
                        name.push(data[i].student_name);
                        marks.push(data[i].marks);
                    }
                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: 'green',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]
                    };
                    var graphTarget = $("#graph");
                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
            }
        }
    </script>
</body>
</html>

data.php 

<?php
    header('Content-Type: application/json');
    $conn = mysqli_connect("localhost","root","","chart");
    $sqlQuery = "SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id";
    $result = mysqli_query($conn,$sqlQuery);
    $data = [];
    foreach ($result as $row) {
        $data[] = $row;
    }
    mysqli_close($conn);
    echo json_encode($data);
?>

Output:

I hope it will help you.....

More on this topic