Graphic in Bars Char.js

Question

Well personal I have a database query that returns an array of data. and wanted to put the values to be displayed on the chart in Bars. I tried this but with values coming from vector the graph does not load.

   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>

Answer 1

What’s right is you do with ajax, mounts an array with the result of SELECT and converts to json.

Ex: creates a file consulta_estoque.php and do the following:

$estoques = 'SELECT ...';

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

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

already on your page, use jquery to do 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);
        }
    });
});

In php you can configure the array and make it ready for the Chart.js and within the success you assemble the chart according to the data.

Answer 2

Change:

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];?>]

For:

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];?>]