UPDATE: Agora aparecem as labels e o gráfico exibindo a quantidade, porém todo em cinza com os nomes como undefined
.
Estou tentando criar um gráfico com o Chart.js, mas ele não aparece na div
, ela está em branco. Já havia feito um neste mesmo projeto, mas como eliminei um módulo e respectivamente o BD relativo a ele, precisei criar outro gráfico com outros dados, e agora fica em branco.
Tenho o Chart.min.js
mais recente instalado.
A função para a geração dos dados é esta:
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;
}
O arquivo js
do gráfico:
var rel2 = new Chart(document.getElementById("rel2"), {
type:'pie',
data:{
labels: status_name_list,
datasets: [{
data: status_list,
backgroundColor:['#0000FF','#32CD32','#FF0000', '#FFFFFF', '#000000']
}]
}
});
A chamada na tela:
<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>
E por fim a chamada no controller:
$data['status_list'] = $i->getTypeList($user->getCompany());
Não está retornando erros, a div
onde o gráfico deveria aparecer aparece em branco. Quando dei um var_dump($rows)
retornou estes dados, mas não sei conferir, sou iniciante. Apareceu realmente o nome dos campos que preciso, (apartamento, etc) mas não sei se está retornando a quantidade corretamente, ou o motivo de não aparecer na tela.
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"
}
}