UPDATE: Now the labels and the graph showing the quantity appear, but all gray with the names as undefined
.
I'm trying to create a chart with Chart.js , but it does not appear in div
, it is blank. I had already done one in this same project, but since I deleted a module and the DB related to it, I had to create another graphic with other data, and now it goes blank.
I have the latest Chart.min.js
installed.
The function for generating the data is this:
public function getTypeList($id_company){
$array = array('0'=>0, '1'=>0, '2'=>0, '3'=>0, '4'=>0);
$sql = "SELECT COUNT(id) as total, type FROM inventory WHERE "
. "id_company = :id_company "
. "GROUP BY type ORDER BY type ASC";
$sql = $this->db->prepare($sql);
$sql->bindValue(':id_company', $id_company);
$sql->execute();
if($sql->rowCount() > 0){
$rows = $sql->fetchAll();
foreach ($rows as $sale_item){
$array[$sale_item['type']] = $sale_item['total'];
}
}
return $array;
}
The file js
of the chart:
var rel2 = new Chart(document.getElementById("rel2"), {
type:'pie',
data:{
labels: status_name_list,
datasets: [{
data: status_list,
backgroundColor:['#0000FF','#32CD32','#FF0000', '#FFFFFF', '#000000']
}]
}
});
The call on screen:
<div class="db-row row2">
<div class="grid-1">
<div class="db-info">
<div class="db-info-title">Tipos de imóveis disponíveis para venda</div>
<div class="db-info-body" style="height: 300px">
<canvas id="rel2"></canvas>
</div>
</div>
</div>
</div>
And finally the call in the controller:
$data['status_list'] = $i->getTypeList($user->getCompany());
It is not returning errors, the div
where the graph should appear appears blank. When I gave a var_dump($rows)
returned this data, but I do not know how to check it, I'm a beginner. It really came up with the name of the fields I need, (apartment, etc) but I do not know if it's returning the quantity correctly, or the reason it does not appear on the screen.
array(7) {
[0]=> array(4) {
["total"]=> string(1) "4"
[0]=> string(1) "4"
["type"]=> string(11) "Apartamento"
[1]=> string(11) "Apartamento"
}
[1]=> array(4) {
["total"]=> string(2) "25"
[0]=> string(2) "25"
["type"]=> string(4) "Casa"
[1]=> string(4) "Casa"
}
[2]=> array(4) {
["total"]=> string(1) "1"
[0]=> string(1) "1"
["type"]=> string(19) "Casa em Condomínio"
[1]=> string(19) "Casa em Condomínio"
}
[3]=> array(4) {
["total"]=> string(1) "2"
[0]=> string(1) "2"
["type"]=> string(9) "Cobertura"
[1]=> string(9) "Cobertura"
}
[4]=> array(4) {
["total"]=> string(1) "1"
[0]=> string(1) "1"
["type"]=> string(4) "cond"
[1]=> string(4) "cond"
}
[5]=> array(4) {
["total"]=> string(1) "1"
[0]=> string(1) "1"
["type"]=> string(11) "Condomínio"
[1]=> string(11) "Condomínio"
}
[6]=> array(4) {
["total"]=> string(1) "3"
[0]=> string(1) "3"
["type"]=> string(4) "Loja"
[1]=> string(4) "Loja"
}
}