Hi, I am using yii2 basic application template. I wanted to display database records data using Chart JS.
Below is the code.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "shgreportingdatabase";
// Create connection
$conn = new mysqli($servername, $username, $password,$dbname);
// Check connection
if ($conn->connect_error) {
//die("Connection failed: " . $conn->connect_error);
}
//echo "Connected successfully";
$sql = "SELECT CONCAT(employee.FirstName,' ',employee.LastName) as FullName, count(*) as TotalGroups from groupdetails, employee WHERE groupdetails.EmpId=employee.EmpId group by groupdetails.EmpId";
$result = $conn->query($sql);
while($row=mysqli_fetch_array($result))
{
$name= $row['FullName'];
$groups = $row['TotalGroups'];
}
?>
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - BarGraph</title>
<style type="text/css">
#chart-container {
width: 500px;
height: auto;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="chart"></canvas>
</div>
<!-- javascript -->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script>
var emp = [];
var groups = [];
var data = [];
for(var i in data) {
emp.push(" " +data[i].FullName);
groups.push(data[i].TotalGroups);
}
var chartdata = {
labels: emp,
datasets : [
{
label: 'SHG Groups',
backgroundColor: 'rgba(200, 200, 200, 200)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: groups
}
]
};
var ctx = document.getElementById("chart").getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: chartdata
});
</script>
</body>
</html>
When I run the code, I get the foll output:
How should I resolve and achieve the target?