Graph in Bars Char.js

Question

Graph in Bars Char.js

Navigation

#1 by (1 votes)
#2 by (0 votes)

5

Well folks I have a query of the Bank that returns an array of data. and wanted to put the values to be displayed in the graph 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>

php javascript char

asked by anonymous 22.01.2016 / 13:56

2 answers

Doubt xss exercise How to save a base64 image in SQL and save it locally as PNG

score 1 · Answer 1

The correct thing is you do with ajax , mount an array with the result of SELECT and convert to json.

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

$estoques = 'SELECT ...';

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

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

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 leave ready for Chart.js and within success you mount the graph according to the data.

score 0 · Answer 2

Switch:

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

By:

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