Hi there, Today I am going to explain how to create Dynamic Data Graph using PHP/Mysql and Chart.js
Step 1: Configure your database connection
create a database chart_db
Let's create a MySQL table: student_marks
Step 1: Configure your database connection
create a database chart_db
Let's create a MySQL table: student_marks
CREATE TABLE student_marks(
id int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
name varchar(50) NULL,
mark float(10,2) NULL
)ENGINE = INNODB AUTO_INCREMENT = 1;
student_marks Table data:
INSERT INTO `student_marks` (`name`, `mark`) VALUES ('prabakar', '78'),
('baskar', '98'),
('sujith', '80'),
('michel', '76'),
('swamy', '96');
To create the connection copy/paste the code below and name it config.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
try {
$conn = new PDO("mysql:host=$servername;dbname=chart_db", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e)
{
echo "Connection failed: " . $e->getMessage();
}
?>
Step 2: Create get_data.php to fetch json data from mysql table <?php
require("config.php");
$get_data = $conn->prepare("SELECT name, mark FROM student_marks");
$get_data->execute();
if($get_data->rowCount()>0){
while($value = $get_data->fetch(PDO::FETCH_OBJ)){
$name = $value->name;
$mark = $value->mark;
$result_array[] = ['name'=>$name, 'mark'=>$mark];
}
echo json_encode($result_array);
die();
}
?>
Output data of get_data.php
[
{
"name":"prabakar",
"mark":"78.00"
},
{
"name":"prabakar",
"mark":"78.00"
},
{
"name":"baskar",
"mark":"98.00"
},
{
"name":"sujith",
"mark":"80.00"
},
{
"name":"michel",
"mark":"76.00"
},
{
"name":"swamy",
"mark":"96.00"
}
]
Step 3: Create index.html to display graph
Download chart.js using the following link https://www.chartjs.org/docs/latest/getting-started/
Here I gonna use cdn link.
Place the following script in your <head> tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Chart Display</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</head>
<body>
<table class="table table-bordered table-striped table-striped">
<tr>
<td><canvas id="pie_canvas"></canvas><br>
<b>Pie Chart</b>
</td>
<td><canvas id="bar_canvas"></canvas><br>
<b>Bar Chart</b>
</td>
<td><canvas id="line_canvas"></canvas><br>
<b>Line Chart</b>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "get_data.php",
method: "GET",
success: function(data) {
var data = JSON.parse(data);
var name = [];
var mark = [];
for(var i in data) {
name.push(data[i].name);
mark.push(data[i].mark);
}
var chartdata = {
labels: name,
datasets : [
{
label: 'Student Marks:',
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: mark
}
]
};
var pie_canvas = $("#pie_canvas");
var bar_canvas = $("#bar_canvas");
var line_canvas = $("#line_canvas");
var barGraph = new Chart(bar_canvas, {
type: 'bar',
data: chartdata
});
var lineGraph = new Chart(line_canvas, {
type: 'line',
data: chartdata
});
var pieGraph = new Chart(pie_canvas, {
type: 'pie',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
</script>
</body>
</html>
Output 
Comments
Post a Comment