Code:
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="dist/Chart.bundle.js"></script>
<script src="utils.js"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var config = {
type: 'line',
data: {
labels: ["1", "2", "3",
"4", "5", "6",
"7", "8", "9",
"10", "11", "12",
"13", "14", "15",
"16", "17", "18",
"19", "20", "21",
"22", "23", "24",
"25", "26", "27",
"28", "29", "30",
"31"],
datasets: [{
<?php
$servername = "192.168.0.29";
$username = "root";
$password = "";
$dbname = "ocomon_rc6";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM view_chamadosrow";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($result)) {
$TECNICO = $row["TEC"];
$DIA1 = $row["1"]; $DIA2 = $row["2"]; $DIA3 = $row["3"];
$DIA4 = $row["4"]; $DIA5 = $row["5"]; $DIA6 = $row["6"];
$DIA7 = $row["7"]; $DIA8 = $row["8"]; $DIA9 = $row["8"];
$DIA10 = $row["10"]; $DIA11 = $row["11"]; $DIA12 = $row["11"];
$DIA13 = $row["13"]; $DIA14 = $row["14"]; $DIA15 = $row["14"];
$DIA16 = $row["16"]; $DIA17 = $row["17"]; $DIA18 = $row["17"];
$DIA19 = $row["19"]; $DIA20 = $row["20"]; $DIA21 = $row["20"];
$DIA22 = $row["22"]; $DIA23 = $row["23"]; $DIA24 = $row["23"];
$DIA25 = $row["25"]; $DIA26 = $row["26"]; $DIA27 = $row["26"];
$DIA28 = $row["28"]; $DIA29 = $row["29"]; $DIA30 = $row["30"];
$DIA31 = $row["31"];
}
mysqli_close($conn);
?>
label: "<?php echo "$TECNICO"; ?>",
data: [
<?php echo "$DIA1"; ?> , <?php echo "$DIA2"; ?> , <?php echo "$DIA3"; ?> ,
<?php echo "$DIA4"; ?> , <?php echo "$DIA5"; ?> , <?php echo "$DIA6"; ?> ,
<?php echo "$DIA7"; ?> , <?php echo "$DIA8"; ?> , <?php echo "$DIA9"; ?> ,
<?php echo "$DIA10"; ?> , <?php echo "$DIA11"; ?> , <?php echo "$DIA12"; ?> ,
<?php echo "$DIA13"; ?> , <?php echo "$DIA14"; ?> , <?php echo "$DIA15"; ?> ,
<?php echo "$DIA16"; ?> , <?php echo "$DIA17"; ?> , <?php echo "$DIA18"; ?> ,
<?php echo "$DIA19"; ?> , <?php echo "$DIA20"; ?> , <?php echo "$DIA21"; ?> ,
<?php echo "$DIA22"; ?> , <?php echo "$DIA23"; ?> , <?php echo "$DIA24"; ?> ,
<?php echo "$DIA25"; ?> , <?php echo "$DIA26"; ?> , <?php echo "$DIA27"; ?> ,
<?php echo "$DIA28"; ?> , <?php echo "$DIA29"; ?> , <?php echo "$DIA30"; ?> ,
<?php echo "$DIA31"; ?>
]
}]
},
options: {
responsive: true,
title:{
display:true,
text:'CONTROLE DE CHAMADOS FECHADOS'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Dias'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Quantidades'
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
My query returns as follows:
Aline 0 2 0 0 1 0 0 0 0 1 4 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Antonio 0 0 0 0 0 0 0 0 3 2 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Leonardo 0 0 0 1 0 0 0 0 1 5 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Daniel 0 6 2 8 1 0 0 10 2 8 6 5 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Danilo 0 2 0 2 9 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Marcelo 0 4 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Fernando 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Paulo 0 5 0 0 3 2 0 5 4 5 0 7 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Leandro 0 0 0 0 0 0 0 0 7 0 4 1 0 0 4 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Portuga 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Rodrigo 0 0 0 0 0 0 0 0 4 0 6 2 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Vieira 0 1 1 27 3 0 0 1 0 1 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Ass. Tec. 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Chart Doc: Chart.js
Only the chart is populated only with the last record:
SQLexample: link