0

Tenho este gráfico com a seguinte query à base de dados:

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Ano','Janeiro', 'Fevereiro','Marco', 'Abril','Maio', 'Junho','Julho', 'Agosto','Setembro', 'Outubro','Novembro', 'Dezembro'],
          <?php 
                   $query = "SELECT `B`.`DescricaoProd`,
       YEAR(`A`.`Data`) AS `Ano`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 1 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Janeiro`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 2 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Fevereiro`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 3 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Marco`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 4 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Abril`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 5 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Maio`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 6 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Junho`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 7 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Julho`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 8 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Agosto`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 9 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Setembro`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 10 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Outubro`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 11 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Novembro`,
       CAST(SUM(IF(MONTH(`A`.`Data`) = 12 , `A`.`Quantidade`, 0)) AS DECIMAL (15 , 0 )) AS `Dezembro`

FROM(
SELECT `centrodb`.`regSaidahigieneAntigo`.`Produto`,        
       `centrodb`.`regSaidahigieneAntigo`.`DataAtribuicao` AS `Data`,
       `centrodb`.`regSaidahigieneAntigo`.`Quantidade`

FROM `centrodb`.`regSaidahigieneAntigo`

UNION ALL

SELECT `A`.`Produto`,        
       `A`.`DataAtribuicao` AS `Data`,
       `A`.`Quantidade`

FROM `centrodb`.`regSaidahigiene` AS `A` 

UNION ALL

SELECT `centrodb`.`RegSaidaLuvas`.`Produto`,
       `centrodb`.`RegSaidaLuvas`.`DataSaida`,
       `centrodb`.`RegSaidaLuvas`.`QtaHigiene`


 FROM `centrodb`.`RegSaidaLuvas`

 WHERE `centrodb`.`RegSaidaLuvas`.`Produto` IS NOT NULL) AS `A` LEFT OUTER JOIN `centrodb`.`ProdHigiene` AS `B`
ON `B`.`IDProd` = `A`.`Produto`

WHERE YEAR(`A`.`Data`) = EXTRACT(YEAR FROM CURDATE() - INTERVAL 0 YEAR)
      OR
      YEAR(`A`.`Data`) = EXTRACT(YEAR FROM CURDATE() - INTERVAL 1 YEAR)

GROUP BY `B`.`DescricaoProd`,  `Ano`

ORDER BY `B`.`DescricaoProd`, YEAR(`A`.`Data`)";    
                   $exec = mysqli_query($conn,$query);

                   while($row = mysqli_fetch_array($exec)){    
                      echo "['".$row['Ano']."',".$row['Janeiro'].",".$row['Fevereiro'].",".$row['Marco'].",".$row['Abril'].",".$row['Maio'].",".$row['Junho'].",".$row['Julho'].",".$row['Agosto'].",".$row['Setembro'].",".$row['Outubro'].",".$row['Novembro'].",".$row['Dezembro']."],";
                   }
                ?>     
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 2000px; height: 1000px;"></div>
  </body>
</html>

Está tudo a funcionar correto com o código, não estou a conseguir é apresentar os dados como pretendo. Nas imagens mostro como me aparecem os resultados no gráfico de duas formas:

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

Na primeira imagem aparece o ano e o mês mas não aprece o nome do produto a que se refere aquela quantidade. Na segunda imagem aparece o produto e o mês, mas não aparece o ano a que se refere, uma vez que mostro o resultado do ano atual e do ano anterior.

O que pretendo mostrar no gráfico é o nome do produto, o total gasto por mês e a que ano e mês pertence aquele total.

6
  • Vc usou o Google charts? Ou outra api de graficos? Commented 15/03/2018 às 16:10
  • Usei google charts
    – Bruno
    Commented 15/03/2018 às 16:14
  • Me passa o link do grafico q vc usou Commented 15/03/2018 às 16:14
  • link
    – Bruno
    Commented 15/03/2018 às 16:16
  • Sugere que utilize outro gráfico do google charts?
    – Bruno
    Commented 15/03/2018 às 17:11

1 Resposta 1

1

Aonde você nomeia as colunas, acho que fica melhor com o nome dos produtos

var data = google.visualization.arrayToDataTable([
          ['DescricaoProd','Janeiro', 'Fevereiro','Marco', 'Abril','Maio', 'Junho','Julho', 'Agosto','Setembro', 'Outubro','Novembro', 'Dezembro'],

E no loop onde você imprime, não consegui fazer com que fosse possivel "Pular linha" então coloquei o ano do lado, não sei se te atende da forma ideal.

 while($row = mysqli_fetch_array($exec)){    
                      echo "['".$row['DescricaoProd']." - ".$row['Ano']."',".$row['Janeiro'].",".$row['Fevereiro'].",".$row['Marco'].",".$row['Abril'].",".$row['Maio'].",".$row['Junho'].",".$row['Julho'].",".$row['Agosto'].",".$row['Setembro'].",".$row['Outubro'].",".$row['Novembro'].",".$row['Dezembro']."],";
                   }

Se isso não te atende e você quer a informação de forma "independente", ai sugiro que vc utilize outro grafico

Resp: Um exemplo de filtro, seria fazer o usuario antes de acessar o gráfico, escolher um produto, como o Álcool, ele vai pra uma variável ($produto), e quando seu gráfico for carregado, o Select saia desse jeito:

$Query = "SELECT * FROM BANCOX.TABELAX WHERE DescricaoProd = '$produto'";

Só um exemplo generico :D

9
  • Sim, é isso que pretendo, só tenho outro problema, as barras ficam muito finas, queria que ficassem mais grossas de forma a ser mais fácil a análise
    – Bruno
    Commented 15/03/2018 às 17:41
  • Está saindo pequeno assim devido a quantidade de barras Se você colcocar um filtro de um um produto exibido por vez, fica melhor a exibição do msm Ou dividir os produtos por graficos nesta pagina, mas ai já é gambiarra dms kkk Commented 15/03/2018 às 17:45
  • e como posso colocar um filtro por produto, pode colocar um exemplo?
    – Bruno
    Commented 15/03/2018 às 17:46
  • Editei a resposta com um exemplo Commented 15/03/2018 às 17:58
  • E não é possível o usuário escolher mais do que 1 produto? por exemplo 3 produtos?
    – Bruno
    Commented 15/03/2018 às 18:10

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 .