Chart.js does not appear

2

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"
  }
}
    
asked by anonymous 06.11.2017 / 22:31

1 answer

-1

From what I'm seeing, the problem is in status_name_list , you did not post how this array is being filled, undefined appears when the chart does not find the legend name for that part of the graph.

Then the label would have something like:

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

and there the date would have the values:

data: [5,10,15]

So the grid brings you to apartment legend has 5 and so on!

    
28.11.2018 / 19:43