5

Bem pessoal eu tenho uma consulta do Banco que retorna um array de dados. e queria colocar os valores para serem exibidos no grafico em Barras. Eu tentei isso mas com valores vindos de vetor o gráfico não carrega.

   while ($estoque = $estoques->fetch_assoc()) {?>

            <?$semana[$i]=$estoque['week'];
            $valor[$i]=$estoque['quant'];
);
        }
        $i=$semana[$i];
        print"<script>alert('$i')</script>";

    ?>  
      <canvas id="GraficoBarra" style="width:50%;"></canvas>

        <script type="text/javascript">                                        

            var options = {
                responsive:true
            };

            var data = {
                labels: [<?print $semana[1];?>, <?print $semana[2];?>,<?print $semana[3];?>, <?print $semana[4];?>, <?print $semana[5];?>, <?print $semana[6];?>, <?print $semana[7];?>, <?print $semana[8];?>],
                datasets: [

                    {
                        label: "Dados secundários",
                        fillColor: "rgba(151,187,205,0.5)",
                        strokeColor: "rgba(151,187,205,0.8)",
                        highlightFill: "rgba(151,187,205,0.75)",
                        highlightStroke: "rgba(151,187,205,1)",
                        labels: [<?print $valor[1];?>, <?print $valor[2];?>,<?print $valor[3];?>, <?print $valor[4];?>, <?print $valor[5];?>, <?print $valor[6];?>, <?print $valor[7];?>, <?print $valor[8];?>]
                    }
                ]
            };                

            window.onload = function(){
                var ctx = document.getElementById("GraficoBarra").getContext("2d");
                var BarChart = new Chart(ctx).Bar(data, options);
            }           
        </script>
4
  • 2
    Cara, eu acho melhor fazer isso por ajax ao invés de tentar carregar desta forma. Commented 22/01/2016 às 12:58
  • Não possuo conhecimento em Ajax o suficiente. Commented 22/01/2016 às 13:12
  • 2
    Se está usando PHP podia simplesmente já gerar a imagem com GD. Quanto mais camada coloca, mais complexo fica, sem benefício. Aliás, até com HTML+CSS você gera belos gráficos hoje, e sem perder a semântica.
    – Largato
    Commented 22/01/2016 às 14:21
  • Consegue editar a pergunta colocando o exatamente oque o array renderiza em um novo bloco? Commented 4/02/2016 às 13:12

2 Respostas 2

1

O correto é você fazer com ajax, monta um array com o resultado do SELECT e converte em json.

Ex: cria um arquivo consulta_estoque.php e faz o seguinte:

$estoques = 'SELECT ...';

$dados = [];
while ($estoque = $estoques->fetch_assoc())
{
    $dados[] = $estoque;
}

header('Content-Type: application/json');
echo json_encode($dados);
exit;

já na sua pagina, usa o jquery para fazer o ajax, Ex:

$(document).ready(function () {
    //chama o ajax após a pagina ser carregada
    $.ajax({
        type: 'post',
        url: 'consulta_estoque.php',
        success: function (dados) {
            //gera o grafico
            var options = {
                responsive:true
            };
            var ctx = document.getElementById("GraficoBarra").getContext("2d");
            var BarChart = new Chart(ctx).Bar(dados, options);
        }
    });
});

No php você pode configurar o array e deixar pronto para o Chart.js e dentro do success você monta o gráfico conforme os dados.

1
  • Show!! Ajudou muito! Estava quebrando a cabeça aqui, faltava o header('Content-Type: application/json'); Mudou tudo. rs Commented 11/05/2017 às 15:56
0

Troque:

labels: [<?print $valor[1];?>, <?print $valor[2];?>,<?print $valor[3];?>, <?print $valor[4];?>, <?print $valor[5];?>, <?print $valor[6];?>, <?print $valor[7];?>, <?print $valor[8];?>]

Por:

data: [<?print $valor[1];?>, <?print $valor[2];?>,<?print $valor[3];?>, <?print $valor[4];?>, <?print $valor[5];?>, <?print $valor[6];?>, <?print $valor[7];?>, <?print $valor[8];?>]

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 .