1

inserir a descrição da imagem aquiPreciso fazer um gráfico onde mostra o total de entradas e saídas em pizza, tentei algo como:

<?php

//Estrutura básica do gráfico

$grafico = array(
    'dados' => array(
        'cols' => array(
        ),
        'rows' => array()
    ),
);

//Consulta dados no BD
$pdo = new PDO('mysql:host=localhost;dbname=despesas', 'root', '');
$sql = 'select 'Saidas',SUM(contas.valor) as TotalSaidas
from contas
union
select 'Entradas',SUM(contas_receber.valor) as TotalEntradas
from contas_receber';
$stmt = $pdo->query($sql);
while ($obj = $stmt->fetchObject()){
    $grafico['dados']['rows'][] = array('c' => array(
        array('v' => (int)$obj->Saidas),
        array('v' => (int)$obj->TotalSaidas),
    ));
}

// Enviar dados na forma de JSON
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($grafico);
exit(0);

Com essa consulta eu consigo montar o gráfico da maneira que preciso? Como coloco esses dados na montagem do gráfico?

7
  • pode mostrar a estrutura do seu array? com os dados. após o prenchimento Commented 7/02/2018 às 17:39
  • Desculpa, não entendi? Commented 7/02/2018 às 17:54
  • você só quer saber a maneira que precisa dos dados para montar o gráfico e como coloca esses dados no javascript para montar o gráfico? Commented 7/02/2018 às 17:57
  • Dei um edit com uma imagem do resultado da query. Preciso criar um gráfico onde tenha duas colunas 'Saidas' com o TotalSaidas e a coluna 'Entradas' com o TotalEntradas, não sei se tem como fazer isso com essa query? Se sim, onde devo colocar esses dados? Pois da maneira que fiz não deu certo: array('v' => (int)$obj->Saidas), array('v' => (int)$obj->TotalSaidas), não faço ideia de como fazer isso Commented 7/02/2018 às 18:02
  • colunas? mas não é grafico de pizza? Commented 7/02/2018 às 18:03

1 Resposta 1

2

Com essa consulta eu consigo montar o gráfico da maneira que preciso?

O gráfico de pizza do Google recebe este formato de data para ser gerado:

[
   ['Task', 'Hours per Day'],
   ['Entradas',  500],
   ['Saidas',    1100]
]

ou seja, um array de arrays aonde o primeiro item do array no array é o nome da métrica ex (Task), e o segundo é o valor (que ele ocupara no gráfico)

Veja um exemplo funcional:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Entradas',  500],
          ['Saidas',    1100]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

inserir a descrição da imagem aqui

Ou seja no primeiro item do array é o titulo "Entradas" e o segundo o valor 500

Como coloco esses dados na montagem do gráfico?

Primeiro vamos deixar seu gráfico na estrutura que o google charts pede para pizza:

$grafico = [
             ['Task', 'Hours per Day']
           ];
//aonde esse primeiro array com esse elemento é o que está pedindo no [site][2]

depois você precisa inserir o resultado nos lugares certo para gerar o array como esperado.

//crio um array auxiliar
$array_auxiliar = [];

//esse while irá retornar duas linhas (conforme sua foto)
while ($obj = $stmt->fetchObject()){

    //coloco o titulo para saidas (que na sua foto representa o texto)
    $array_auxiliar[0] = $obj->Saidas;
    //coloco o valor para saidas (que na sua foto representa o valor)
    $array_auxiliar[1] = (int)$obj->TotalSaidas;

    //adiciono em gráfico o array com os dados e o titulo saida.
    $grafico[] =  $array_auxiliar;

}

no final seu array $grafico ficará assim:

[
   ['Task', 'Hours per Day'],      
   ['Saidas',    1100],
   ['Entradas',  500]
]

Conforme mostra sua foto. É obvio que agora você precisará elaborar uma lógica para que ao mandar esse array pro seu html com esse código:

echo json_encode($grafico);

Ele monte o gráfico corretamente. pode se basear no exemplo funcional desta pergunta.

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 .