Google Chart, mysql e php

rfrancisco · February 24, 2012 at 04:26 PM

Olá a todos,

Preciso de criar gráficos através de uma base de dados, por exemplo.

O cliente A gastou 100€ no mês 02

O cliente A gastou 50€ no mês 03

O cliente B gastou 70€ no mês 01

O cliente B gastou 90€ no mês 02

O gráfico tem de mostrar o mês, o valor gasto e quem gastou esse valor, no entanto posso tem 2 clientes como ter 10 o que multiplica os valores a inserir no gráfico.

Estive a ler a documentação relativa ao google chart e já percebi +/- como funciona, achei que seria uma boa solução, tenho de construir a url com os dados da bd mas estou parado porque não percebo qual a melhor forma de fazer isto, talvez um array?

Alguém aqui já trabalhou com este "trio" que me possa dar uma orientação sobre a melhor forma de fazer isto?

Desde já agradeço a vossa ajuda.

Roberto Francisco

rfrancisco · February 24, 2012 at 07:08 PM

algum bitaite!?

mjamado · February 24, 2012 at 08:01 PM

...tenho de construir a url com os dados da bd mas estou parado porque não percebo qual a melhor forma de fazer isto...

URL? Qual URL?

Aquilo tem uma API AJAX e vais fazer os pedidos por query string? Isso é de loucos. Usa a API. A documentação é bastante clara.

rfrancisco · February 24, 2012 at 11:56 PM

URL? Qual URL?

Aquilo tem uma API AJAX e vais fazer os pedidos por query string? Isso é de loucos. Usa a API. A documentação é bastante clara.

Bom parece que estive a ver outra coisa, algo que produz uma imagem de um gráfico sobre os dados... ?

Estou a ver agora algo que bate mais certo com o que referiste, vou ver o que consigo montar com isto. obrigado.

rfrancisco · February 29, 2012 at 07:06 PM

boas noites,

Já tenho o gráfico montado, compreendi as opções que preciso para o gráfico mas não entendo como ligo isto com os dados da bd.

[...]
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Consumo');
        data.addRows([
          ["marca1", 12.00],
          ["marca2", 15.00],
          ["marca3", 45.00],
          ["marca4", 23.00],
        ]);

        var options = {
          title: 'Custos', titleTextStyle: {color: '#333'},
          is3D: 'false'
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 500px; height: 400px;"></div>
[...]

Tentei montar os dados que estão em data.addRows com o php no entanto depois não sei adicionar o resultado do php no js...

Não sei se estou a proceder correctamente mas não estou a chegar lá.

Alguma ajuda?

Obrigado.

mjamado · February 29, 2012 at 10:34 PM

Já tenho o gráfico montado, compreendi as opções que preciso para o gráfico mas não entendo como ligo isto com os dados da bd.
Tentei montar os dados que estão em data.addRows com o php no entanto depois não sei adicionar o resultado do php no js...

Não sei se estou a proceder correctamente mas não estou a chegar lá.

Da mesma maneira que injectas outro tipo de dados nos templates.

data.addRows([
<?php 
    if(!empty($dados) && is_array($dados)):
        for($i = 0; $i < count($dados); $i++):
            echo '["' . $dados[$i]['label'] . '", ' . $dados[$i]['valor'] . ']' . (($i < count($dados) - 1) ? ',' : '');
?>
]);

rfrancisco · March 1, 2012 at 06:25 PM

Da mesma maneira que injectas outro tipo de dados nos templates.

data.addRows([
<?php 
    if(!empty($dados) && is_array($dados)):
        for($i = 0; $i < count($dados); $i++):
            echo '["' . $dados[$i]['label'] . '", ' . $dados[$i]['valor'] . ']' . (($i < count($dados) - 1) ? ',' : '');
?>
]);

A variável $dados será a consulta à bd? Só estou a conseguir carregar uma linha da tabela 🙂

mjamado · March 1, 2012 at 06:27 PM

A variável $dados será a consulta à bd? Só estou a conseguir carregar uma linha da tabela 🙂

A variável $dados é um exemplo. Tu é que sabes o que é que tens disponível, se é um array ou um resource da BD ou até um factory duma ORM.

rfrancisco · March 1, 2012 at 07:59 PM

Bom acho que vou ser chamado de burro mas... ?

O código escreveste estava a dar um erro:

Parse error: syntax error, unexpected $end in F:\webserver\root\teste\index3.php on line 9

Tentei perceber o que faltava mas não cheguei lá!

Bom mas resolvi assim:

[...]
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Consumo');
        data.addRows([
         <?php

        $cons = mysql_query('SELECT * FROM dados');

		while($ln = mysql_fetch_array($cons))
		{
			echo '["' . $ln['valor_um'] . '", ' . $ln['valor_dois'] . '], ';
		}

         ?>
        ]);

        var options = {
          title: 'Consumos', titleTextStyle: {color: '#333'},
          is3D: 'false'
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 300px; height: 200px;"></div>
  </body>
</html>
[...]

... ou seja "enfiei" a consulta à base de dados dentro de data.addRows e retornei o código montado como já tinha que é o que o js precisa.

Não sei se estou a fazer isto correctamente ou se tem alguma desvantagem fazer assim mas funcionou... :dontgetit:

Sign In

Google Chart, mysql e php

Recommended Posts

rfrancisco

Link to comment

Share on other sites

rfrancisco

Link to comment

Share on other sites

mjamado

Link to comment

Share on other sites

rfrancisco

Link to comment

Share on other sites

rfrancisco

Link to comment

Share on other sites

mjamado

Link to comment

Share on other sites

rfrancisco

Link to comment

Share on other sites

mjamado

Link to comment

Share on other sites

rfrancisco

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information