php – Chart.js does not appear


UPDATE: Now the labels and the graph appear showing the amount, but all in gray with the names like undefined .

I'm trying to create a chart with Chart.js but it doesn't show up in the div , it's blank. I had already done one in this same project, but as I eliminated a module and respectively the DB related to it, I needed to create another chart with other data, and now it is 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);

   if($sql->rowCount() > 0){
        $rows = $sql->fetchAll();

        foreach ($rows as $sale_item){
            $array[$sale_item['type']] = $sale_item['total'];
    return $array;

The graph js file:

var rel2 = new Chart(document.getElementById("rel2"), {
    labels: status_name_list,
    datasets: [{
        data: status_list,
        backgroundColor:['#0000FF','#32CD32','#FF0000', '#FFFFFF', '#000000']

The screen call:

<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>

And finally the call in the controller:

$data['status_list'] = $i->getTypeList($user->getCompany());

It's not returning errors, the div where the chart should appear appears blank. When I gave a var_dump($rows) returned these data, but I don't know, I'm a beginner. The name of the fields I need actually appeared, (apartment, etc) but I don't know if it's returning the amount correctly, or the reason why it doesn't 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"


From what I'm seeing, the problem is with the status_name_list , you didn't post how this array is being populated, it appears undefined when the chart doesn't find the legend name for that part of the chart.

So the label would have something like:

labels: ['Apartamento', 'Casa', 'Casa em Condomínio']

and then the data would have the values:

data: [5,10,15]

Then the grid brings you that for apartment caption there are 5 and so on!

Scroll to Top