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

Gráfico Pie Chart do Google.

Aqui você poderá oferecer suas Contribuições, Dicas e Tutoriais (Texto ou Vídeo) que sejam de interesse de todos.

Moderador: Moderadores

 

Gráfico Pie Chart do Google.

Mensagempor 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 )

Sem título.png


Saudações,
Itamar M. Lins Jr.
Avatar de usuário

Itamar M. Lins Jr.
Colaborador

Colaborador
 
Mensagens: 6927
Data de registro: 30 Mai 2007 11:31
Cidade/Estado: Ilheus Bahia
Curtiu: 309 vezes
Mens.Curtidas: 503 vezes

Gráfico Pie Chart do Google.

Mensagempor Itamar M. Lins Jr. » 25 Out 2020 19:07

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.
Avatar de usuário

Itamar M. Lins Jr.
Colaborador

Colaborador
 
Mensagens: 6927
Data de registro: 30 Mai 2007 11:31
Cidade/Estado: Ilheus Bahia
Curtiu: 309 vezes
Mens.Curtidas: 503 vezes

Gráfico Pie Chart do Google.

Mensagempor rochinha » 26 Out 2020 15:10

Amiguinhos,

Itamar você chegou a testar o mesmo código usando o httpd do Harbour?
OPS! LINK QUEBRADO? Veja ESTE TOPICO antes e caso não encontre ENVIE seu email com link do tópico para fivolution@hotmail.com. Agradecido.

@braços : ? )

A justiça divina tarda mas não falha, enquanto que a justiça dos homens falha porque tarda.
Avatar de usuário

rochinha
Membro Master

Membro Master
 
Mensagens: 4538
Data de registro: 18 Ago 2003 20:43
Cidade/Estado: São Paulo - Brasil
Curtiu: 800 vezes
Mens.Curtidas: 242 vezes

Gráfico Pie Chart do Google.

Mensagempor 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.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Gráfico Pie Chart do Google.

Mensagempor 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.
Sem título.png

Saudações,
Itamar M. Lins Jr.
Avatar de usuário

Itamar M. Lins Jr.
Colaborador

Colaborador
 
Mensagens: 6927
Data de registro: 30 Mai 2007 11:31
Cidade/Estado: Ilheus Bahia
Curtiu: 309 vezes
Mens.Curtidas: 503 vezes

Gráfico Pie Chart do Google.

Mensagempor Itamar M. Lins Jr. » 26 Out 2020 17:24

Olá!
Rochinha testei aqui, funcionou.

Saudações,
Itamar M. Lins Jr.
Avatar de usuário

Itamar M. Lins Jr.
Colaborador

Colaborador
 
Mensagens: 6927
Data de registro: 30 Mai 2007 11:31
Cidade/Estado: Ilheus Bahia
Curtiu: 309 vezes
Mens.Curtidas: 503 vezes

Gráfico Pie Chart do Google.

Mensagempor 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.
Avatar de usuário

Itamar M. Lins Jr.
Colaborador

Colaborador
 
Mensagens: 6927
Data de registro: 30 Mai 2007 11:31
Cidade/Estado: Ilheus Bahia
Curtiu: 309 vezes
Mens.Curtidas: 503 vezes

Gráfico Pie Chart do Google.

Mensagempor 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.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Gráfico Pie Chart do Google.

Mensagempor JoséQuintas » 27 Out 2020 17:16

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

html.png
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Gráfico Pie Chart do Google.

Mensagempor JoséQuintas » 27 Out 2020 17:19

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.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Gráfico Pie Chart do Google.

Mensagempor JoséQuintas » 27 Out 2020 17:23

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.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Gráfico Pie Chart do Google.

Mensagempor 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
 <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.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Gráfico Pie Chart do Google.

Mensagempor 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.
Avatar de usuário

Itamar M. Lins Jr.
Colaborador

Colaborador
 
Mensagens: 6927
Data de registro: 30 Mai 2007 11:31
Cidade/Estado: Ilheus Bahia
Curtiu: 309 vezes
Mens.Curtidas: 503 vezes




Retornar para Contribuições, Dicas e Tutoriais

Quem está online

Usuários vendo este fórum: Nenhum usuário registrado online e 16 visitantes


Ola Amigo, espero que meu site e forum tem lhe beneficiado, com exemplos e dicas de programacao.
Entao divulgue o link da Doacao abaixo para seus amigos e redes sociais ou faça uma doacao para o site forum...
MUITO OBRIGADO PELA SUA DOACAO!
Faça uma doação para o forum
cron
v
Olá visitante, seja bem-vindo ao Fórum Clipper On Line!
Efetue o seu login ou faça o seu Registro