Gráfico Pie Chart do Google.

Mensagem por **Itamar M. Lins Jr.** » 25 Out 2020 18:56

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 )

Saudações,
Itamar M. Lins Jr.

Mensagem por **Itamar M. Lins Jr.** » 25 Out 2020 19:07

Continuando!
Detalhe do HTML que será gerado.

Código: Selecionar todos

<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

Código: Selecionar todos

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.

Mensagem por **rochinha** » 26 Out 2020 15:10

Amiguinhos,

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

Mensagem por **JoséQuintas** » 26 Out 2020 15:55

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.

Mensagem por **Itamar M. Lins Jr.** » 26 Out 2020 17:16

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.

Saudações,
Itamar M. Lins Jr.

Mensagem por **Itamar M. Lins Jr.** » 26 Out 2020 17:24

Olá!
Rochinha testei aqui, funcionou.

Saudações,
Itamar M. Lins Jr.

Mensagem por **Itamar M. Lins Jr.** » 27 Out 2020 16:03

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.

Mensagem por **JoséQuintas** » 27 Out 2020 16:11

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.

Mensagem por **JoséQuintas** » 27 Out 2020 17:16

Fiz o teste, copiei o html para um arquivo x.html
W10 20 H2

Mensagem por **JoséQuintas** » 27 Out 2020 17:19

No internet explorer também

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.

Mensagem por **JoséQuintas** » 27 Out 2020 17:23

Talvez o detalhe fique por conta disto:

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

Mensagem por **JoséQuintas** » 27 Out 2020 19:32

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

Código: Selecionar todos

 <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.

Código: Selecionar todos

    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.

Mensagem por **Itamar M. Lins Jr.** » 27 Out 2020 20:12

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.