PHP MySQL Charts JS Chart Example Tutorial

03-Apr-2023

.

Admin

PHP MySQL Charts JS Chart Example Tutorial

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/bootstrap@5.0.2/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.....

#MySQL

#PHP