0

Estou fazendo um gráfico, recuperando via ajax, estou transformando em json, depois converto em array, e coloco na areá de labels porém o resultado não tem nada haver com o que eu quero

Meu código php

<?php 
   $vetor = array('jose'=>1,'maria'=>2,'joao'=>90,'pedro'=>19);
   print json_encode($vetor);
?>

Meu código html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            let valores = JSON.parse(this.responseText)
            console.log(valores)
            let vetor = []
            for(let i in valores){
               vetor.push(i)
            }
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['jose','maria','joão','pedro'],
                datasets: [{
                    label: '# of Votes',
                    data: [1.2,1,2,3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
         }
        };
   xhttp.open("GET", "app.php", true);
   xhttp.send();

</script>
</body>

Como era para ser Como ficou com meu código acima

1
  • Acredito que o problema seja que você não está setando nas configurações do chart os valores que você recebe na variável vetor no seu js.
    – sant0will
    Commented 20/03/2019 às 17:56

1 Resposta 1

1

Para você alimentar o chart é necessário duas informações vindas da sua requisição e elas devem estar montadas e duas arrays diferentes, uma para as chaves(nomes, barrinhas) e outra para os valores.

Assim que receber o json você o transforma nas duas arrays.

Por fim seta no campo labels as chaves(keys) e no campo data os valores(values).

Código comentado para facilitar.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    
      // unica diferença é que você receberá o json dinamicamente
      // valor que chegará da requisição            
      let json = JSON.parse('{ "jose":1 , "maria":2, "joão":3 , "pedro":4}')

      // cria uma array para nomes e valore
      let nomes = [];
      let valores = [];

      // percorre o json
      for(let i in json){
         // adiciona na array nomes a key do campo do json
         nomes.push(i);
         // adiciona na array de valore o value do campo do json
         valores.push(json[i]);
      }

      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          //labels são cada uma das barrinhas. Basta adicionar a array abaixo:
          labels: nomes,
          datasets: [{
              label: '# of Votes',
              //data serve para adicionar o valor de cada barrinha. Basta adicionar a array abaixo:
              data: valores,
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }
  });
   

</script>
</body>

1
  • Nossa muito obrigado
    – Thor
    Commented 20/03/2019 às 18:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .