Clipper On Line • Ver Tópico - Gráfico Pie Chart do Google.
Página 1 de 1

Gráfico Pie Chart do Google.

MensagemEnviado: 25 Out 2020 18:56
por Itamar M. Lins Jr.
Olá!

#xcommand TEXT TO VAR <var> => #pragma __stream|<var>:=%s      
#xcommand ENDTEXT => #pragma __endtext

FUNCTION Pie_Chart(cPedacos, cTitulo, cLegenda, cArq)
LOCAL cHtml, nHan
Text TO VAR cHTML
<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([
          xPedacos
        ]);

        var options = {
          title: xTitulo,
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>
ENDTEXT

cHTML := StrTran(cHtml,'xPedacos',cPedacos)
cHTML := StrTran(cHtml,'xTitulo',cTitulo)
cHtml += '</html>'

nHan := FCREATE( cARQ )         
FWRITE ( nHan , cHTML , LEN( cHTML ) )
FCLOSE( nHan )

__RUN( "START EXPLORER " + cArq )

Sem título.png


Saudações,
Itamar M. Lins Jr.

Gráfico Pie Chart do Google.

MensagemEnviado: 25 Out 2020 19:07
por Itamar M. Lins Jr.
Continuando!
Detalhe do HTML que será gerado.

<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([
          ['Grupos','Vendas Por Grupo'],
          ['BANHEIRO',       842.51],
          ['COZINHA',       596.87],
          ['MATERIAIS ELETRICOS',     45769.50],
          ['ESQUADRIAS MADEIRA',     15682.21],
          ['FERRAGENS',    126757.48],
          ['HIDRAULIC0 AGUA',     21202.68],
          ['HIDRAULICO ESGOTO',     20358.40],
          ['TUBOS',     33724.37],
          ['JARDINAGEM',       520.08],
          ['MADEIRA',      2329.80],
          ['MATERIAL BRUTO',    287457.03],
          ['METAIS SANITARIOS',     59051.48],
          ['PISOS',    126840.66],
          ['TINTAS',    113703.60],
          ['VEDACIT',      5380.93]
        ]);

        var options = {
          title: 'Vendas Por Grupos, Início: 01/10/20 Fim: 31/10/20 - Total:       860.279,60',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>
</html>


Pulo do gato, de como gerar a variável: cPedacos ou totais dos grupos
cGrupos :=  "['Grupos','Vendas Por Grupo']," + hb_eol()
Do while
   do while SeuCodGrupo == cCodGrupo
      nTotalGrupo +=  ...
      skip
   enddo

      cGrupos += "['" + AllTrim(gr->grupo) + "'," + Transform(nTotalGrupo,"9999999999.99") + "]"
   
   IF hm->(!Eof())
      cGrupos += ',' + hb_eol()
   ENDIF
   nTotal += nTotalGrupo
ENDDO

cTitulo :=  'Vendas Por Grupos, Início: ' + dtoc(dIni) + ' Fim: ' + dtoc(dFim) + ' - Total: ' + Transform(nTotal,"@e 99999,999,999.99")
Pie_Chart(cGrupos, cTitulo, cLegenda, "pie_chart_grupos.html")


Saudações,
Itamar M. Lins Jr.

Gráfico Pie Chart do Google.

MensagemEnviado: 26 Out 2020 15:10
por rochinha
Amiguinhos,

Itamar você chegou a testar o mesmo código usando o httpd do Harbour?

Gráfico Pie Chart do Google.

MensagemEnviado: 26 Out 2020 15:55
por JoséQuintas
rochinha escreveu:você chegou a testar o mesmo código usando o httpd do Harbour?


Acho que falou besteira.
Se quem mostra tudo é o navegador.... vai usar httpd pra que?
O máximo que poderia usar seria um activex, pra ter o navegador numa janela.

Gráfico Pie Chart do Google.

MensagemEnviado: 26 Out 2020 17:16
por Itamar M. Lins Jr.
Olá!
Itamar você chegou a testar o mesmo código usando o httpd do Harbour?

Vou testar, mas basta acesso para a internet.(acredito)

Tem muitos detalhes, o mouse quando passa nesses pedaços, aparece o total daquela parte além da porcentagem.
Sem título.png

Saudações,
Itamar M. Lins Jr.

Gráfico Pie Chart do Google.

MensagemEnviado: 26 Out 2020 17:24
por Itamar M. Lins Jr.
Olá!
Rochinha testei aqui, funcionou.

Saudações,
Itamar M. Lins Jr.

Gráfico Pie Chart do Google.

MensagemEnviado: 27 Out 2020 16:03
por Itamar M. Lins Jr.
Olá!
Não funcionou no navegador da M$. Alias o que está funcionando nos navegadores da M$ ? O windows 10 tem 3 versões de navegadores.

Saudações,
Itamar M. Lins Jr.

Gráfico Pie Chart do Google.

MensagemEnviado: 27 Out 2020 16:11
por JoséQuintas
Itamar M. Lins Jr. escreveu:O windows 10 tem 3 versões de navegadores.


Baixou pra duas.
Agora o Edge chromium é o oficial.
O explorer acaba precisando pra compatibilidade, e porque ele é mais do que um navegador.

Gráfico Pie Chart do Google.

MensagemEnviado: 27 Out 2020 17:16
por JoséQuintas
Fiz o teste, copiei o html para um arquivo x.html
W10 20 H2

html.png

Gráfico Pie Chart do Google.

MensagemEnviado: 27 Out 2020 17:19
por JoséQuintas
No internet explorer também

html2.png


Itamar M. Lins Jr. escreveu:Não funcionou no navegador da M$. Alias o que está funcionando nos navegadores da M$ ? O windows 10 tem 3 versões de navegadores.


funcionou nos dois.

Gráfico Pie Chart do Google.

MensagemEnviado: 27 Out 2020 17:23
por JoséQuintas
Talvez o detalhe fique por conta disto:

explorer.png


Precisa permitir, senão não mostra.
Não sei como ficaria numa tela do aplicativo por activex.

Gráfico Pie Chart do Google.

MensagemEnviado: 27 Out 2020 19:32
por JoséQuintas
Até que é interessante....
Vamos ver se entendi direito....

Aqui define uma área para o gráfico, como se fosse uma janela, ou uma picturebox do VB, ou a própria janela GT
O nome da janela é "piechart_3d", tamanho 900 x 500
 <body>
  <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>


aqui a coisa é interessante, é uma classe, passa a janela e as variáveis.

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);


Digamos em Harbour:

chart := ClassePieChart():New( "piechart_3d" )
chart:Draw( data, options )

O restante é código pra criar essas duas variáveis: data, options
E também pra carregar as classes do google, que no Harbour poderia ser DLL ou LIB ou outra coisa.

Ou seja, o java do html é a linguagem de programação, que carregou rotinas/classes prontas pra fazer o gráfico.
Foi tudo de um endereço pra outro, como fazer um COPY pela internet, ou coisa assim.
O google deixou disponível grátis, e basta usar.

Vantagem: é só usar o que tem pronto e está disponível
Desvantagem: talvez problema se não tem internet, num notebook isolado da internet, por exemplo, ou rede com domínio e internet bloqueada aos usuários comuns.

Mas é interessante, é uma versão resumida do que dá pra fazer pela internet, com java/php/mod_harbour/vbscript/etc.
Basta juntar qualquer coisa de qualquer lugar, não importa a linguagem de programação, ou o banco de dados.
A única coisa que importa é que o destino final seja padrão, que no caso seria o HTML.

Talvez até como local, talvez torne mais interessante centralizar tudo em html/java, e seja padrão final Windows/Linux.
Mas estão acontecendo tantas mudanças de segurança, que é bom fazer testes antes de colocar em prática.

O Itamar comentou que não funcionou no W10 dele, talvez dependa de outros fatores ainda desconhecidos.

Gráfico Pie Chart do Google.

MensagemEnviado: 27 Out 2020 20:12
por Itamar M. Lins Jr.
Olá!
que não funcionou no W10 dele,

Funcionou sim.
Não funcionou em um cliente com edge. Nem quis testar sei que deve ser falta de algum direito, o edge é uma copia do chrome e no chrome funciona.
Sobre usar offline:
Can I use charts offline?
Your users' computers must have access to https://www.gstatic.com/charts/loader.js in order to use the interactive features of Google Charts. This is because the visualization libraries that your page requires are loaded dynamically before you use them. The code for loading the appropriate library is part of the included script, and is called when you invoke the google.charts.load() method. Our terms of service do not allow you to download the google.charts.load or google.visualization code to use offline.
Can I download and host the chart code locally, or on an intranet?
Sorry; our terms of service do not allow you to download and save or host the google.charts.load or google.visualization code. However, if you don't need the interactivity of Google Charts, you can screenshot the charts and use them as you wish.


Mas com certeza para cada situação temos outras soluções.
http://pchart.sourceforge.net/

Saudações,
Itamar M. Lins Jr.