FiveTech Software tech support forums

www.FiveTechSoft.com

Skip to content

Algun ejemplo de twebview2 con google chart ?

Post a reply

Algun ejemplo de twebview2 con google chart ?

Postby albeiroval » Mon Dec 16, 2024 3:29 pm

Buen dia.

Abra algun ejemplo de twebview2 con google chart, pasando parametros por javascript desde prg ?
Saludos,
Regards,

Albeiro Valencia
www.avcsistemas.com
User avatar
albeiroval
 
Posts: 383
Joined: Tue Oct 16, 2007 5:51 pm
Location: Barquisimeto - Venezuela
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby Antonio Linares » Mon Dec 16, 2024 6:19 pm

Albeiro,

Tienes el ejemplo FWH\samples\webchart.prg que usa TWebView()

Vamos a modificarlo para que use TWebView2()
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 42200
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby albeiroval » Tue Dec 17, 2024 2:15 am

Antonio Linares wrote:Albeiro,

Tienes el ejemplo FWH\samples\webchart.prg que usa TWebView()

Vamos a modificarlo para que use TWebView2()


Muchas Gracias Antonio, revise el ejemplo, si no es mucho pedir, me gustaria si puedes agregar un Bar Chart o Pie Chart de google
usando oWebView:InjectJavascript.
Saludos,
Regards,

Albeiro Valencia
www.avcsistemas.com
User avatar
albeiroval
 
Posts: 383
Joined: Tue Oct 16, 2007 5:51 pm
Location: Barquisimeto - Venezuela
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby Antonio Linares » Wed Dec 18, 2024 6:36 am

webchart2.prg

Code: Select all  Expand view  RUN
#include "FiveWin.ch"

function Main()

   local oWnd, oWebView  

   DEFINE WINDOW oWnd TITLE "Google chart using Class TWebView2" SIZE 900, 500

   oWebView = TWebView2():New( oWnd )

   oWebView:SetHtml( Html() )

   ACTIVATE WINDOW oWnd CENTERED ;
      ON RESIZE oWebView:SetSize( nWidth, nHeight )

return nil

function Html()

   local cHtml

   TEXT INTO cHtml
        <!DOCTYPE html>
        <html>
        <head>
            <title>Google Bar Chart Example</title>
            <style>
                #loading {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding: 20px;
                    font-family: Arial, sans-serif;
                }

                .spinner {
                    width: 40px;
                    height: 40px;
                    border: 4px solid #f3f3f3;
                    border-top: 4px solid #3498db;
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
                    margin-bottom: 10px;
                }

                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }

                #chart_div {
                    min-height: 400px;
                }
            </style>
        </head>
        <body>
            <div id="loading">
                <div class="spinner"></div>
                <div>Cargando gráfico...</div>
            </div>
            <div id="chart_div"></div>

            <!-- Usar JSAPI directamente es más rápido -->
            <script src="https://www.google.com/jsapi"></script>
            <script>
                // Cargar la versión más ligera de Charts
                google.load('visualization', '1', {
                    packages: ['corechart'],
                    callback: drawChart
                });

                function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                        ['Año', 'Ventas', 'Gastos'],
                        ['2020', 1000, 400],
                        ['2021', 1170, 460],
                        ['2022', 660, 1120],
                        ['2023', 1030, 540]
                    ]);

                    var options = {
                        title: 'Rendimiento de la Compañía',
                        width: 800,
                        height: 400,
                        bar: {groupWidth: "75%"},
                        legend: { position: "right" },
                        hAxis: { title: 'Valores en miles' },
                        vAxis: { title: 'Año' }
                    };

                    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
                    chart.draw(data, options);
                    document.getElementById('loading').style.display = 'none';
                }
            </script>
        </body>
        </html>
   ENDTEXT

return cHtml
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 42200
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby Antonio Linares » Wed Dec 18, 2024 7:21 am

> usando oWebView:InjectJavascript

Eso solo tiene sentido si vas a modificar una web que no has hecho tu.

Si lo que quieres es modificar desde tu aplicación los valores mostrados en el gráfico entonces se usa oWebView:Eval()
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 42200
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby albeiroval » Fri Dec 20, 2024 3:32 am

Antonio, gracias funciona bien.

Modifique tu ejemplo para mostrar el envio de los valores a webview, lo pongo aqui para quien quiera
entenderlo mejor.
Code: Select all  Expand view  RUN

#include "FiveWin.ch"

function Main()

   local oWnd, oWebView  

   DEFINE WINDOW oWnd TITLE "Google chart using Class TWebView2" SIZE 900, 500

   oWebView = TWebView2():New( oWnd )

   oWebView:SetHtml( Html() )
   oWebView:InjectJavascript( aDataJS() )
   oWebView:InjectJavascript( cJavaScript() )
   oWebView:Eval( "loadChart()" )

   ACTIVATE WINDOW oWnd CENTERED ;
      ON RESIZE oWebView:SetSize( nWidth, nHeight )

return nil

static function Html()

   local cHtml

   TEXT INTO cHtml
        <!DOCTYPE html>
        <html>
        <head>
            <title>Google Bar Chart Example</title>
            <style>
                #loading {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding: 20px;
                    font-family: Arial, sans-serif;
                }

                .spinner {
                    width: 40px;
                    height: 40px;
                    border: 4px solid #f3f3f3;
                    border-top: 4px solid #3498db;
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
                    margin-bottom: 10px;
                }

                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }

                #chart_div {
                    min-height: 400px;
                }
            </style>
        </head>
        <body>
            <div id="loading">
                <div class="spinner"></div>
                <div>Cargando gráfico...</div>
            </div>
            <div id="chart_div"></div>

            <!-- Usar JSAPI directamente es más rápido -->
            <script src="https://www.google.com/jsapi"></script>
            <script>
               
            </script>
        </body>
        </html>
   ENDTEXT

return cHtml

static function cJavaScript()
  Local cHtml
 
    TEXT INTO cHtml
        // Cargar la versión más ligera de Charts
     function loadChart() {
        google.load('visualization', '1', {
         packages: ['corechart'],
         callback: drawChart
        });
     }
     
     function drawChart() {
         var data = google.visualization.arrayToDataTable( aData );

         var options = {
             title: 'Rendimiento de la Compañía',
             width: 800,
             height: 400,
             bar: {groupWidth: "75%"},
             legend: { position: "right" },
             hAxis: { title: 'Valores en miles' },
             vAxis: { title: 'Año' }
         };

         var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
         chart.draw(data, options);
         document.getElementById('loading').style.display = 'none';
     }
    ENDTEXT
   
return cHtml         

static function aDataJS()
    Local cHtml
    Local i
    Local nPos
    Local aData := { { "2020", 1000,  400 },;
                     { "2021", 1170,  460 },;
                     { "2022",  660, 1120 },;
                     { "2023", 1000,  540 },;
                     { "2024", 1030,  125 },;
                     { "2025",  235,  230 } }
       
  cHtml  = "var aData = [ " + CRLF
  cHtml += "['Año', 'Ventas', 'Gastos']," + CRLF
 
  FOR i:=1 TO Len(aData)
        cHtml += "["
        cHtml += "'" + aData[i,1] + "'" + ","
        cHtml += Str(aData[i,2]) + ","
        cHtml += Str(aData[i,3])
        cHtml += "]," + CRLF
    NEXT i
   
    cHtml += "]"
   
  ? cHtml
   
return cHtml

 
Saludos,
Regards,

Albeiro Valencia
www.avcsistemas.com
User avatar
albeiroval
 
Posts: 383
Joined: Tue Oct 16, 2007 5:51 pm
Location: Barquisimeto - Venezuela
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby Antonio Linares » Fri Dec 20, 2024 6:52 am

Muy bien! :-)
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 42200
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby sysctrl2 » Fri Dec 20, 2024 4:10 pm

Excelente !
no hay imagen ? :D
Cesar Cortes Cruz
SysCtrl Software
Mexico

' Sin +- FWH es mejor "
User avatar
sysctrl2
 
Posts: 1030
Joined: Mon Feb 05, 2007 7:15 pm
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby Antonio Linares » Fri Dec 20, 2024 8:47 pm

https://github.com/FiveTechSoft/screenshots/blob/master/webchart2.jpg?raw=true

Image
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 42200
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby sysctrl2 » Fri Dec 20, 2024 11:06 pm

Un gran ejemplo maestro,
gracias por compartir.
Cesar Cortes Cruz
SysCtrl Software
Mexico

' Sin +- FWH es mejor "
User avatar
sysctrl2
 
Posts: 1030
Joined: Mon Feb 05, 2007 7:15 pm
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby Enrrique Vertiz » Sun Dec 22, 2024 7:43 pm

Saludos

Alguna idea de porque NO me carga el grafico, uso xHarbour y FWH 24.09, se queda mostrando el texto de "Cargando grafico" y no pasa nada !!!
Enrrique Vertiz Pitta
Lima-Peru
xHb 1.23.1026X, Fwh 24.09, BCC74, MySQL 8.0.X, SQLLIB 1.9m
Enrrique Vertiz
 
Posts: 547
Joined: Fri Oct 07, 2005 2:17 pm
Location: Lima - Peru
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby Enrrique Vertiz » Mon Dec 23, 2024 3:27 am

Saludos Antonio

Solo para complementar, compile con Harbour y si funciono, el problema esta con xHarbour favor hay solucion ?
Enrrique Vertiz Pitta
Lima-Peru
xHb 1.23.1026X, Fwh 24.09, BCC74, MySQL 8.0.X, SQLLIB 1.9m
Enrrique Vertiz
 
Posts: 547
Joined: Fri Oct 07, 2005 2:17 pm
Location: Lima - Peru
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby Antonio Linares » Mon Dec 23, 2024 11:04 am

Estimado Enrique,

La solución para que funcione con xHarbour es eliminar esta línea:

// Cargar la versión más ligera de Charts

Por lo visto el contenido de TEXT ... ENDTEXT se procesa de forma diferente en Harbour y xHarbour

xHarbour no procesa los retornos de carro y a partir de ese comentario, considera todo el código que sigue como parte del comentario.

Esta es una gran diferencia entre ambos compiladores (Harbour y xHarbour) que hay que investigar (estamos en ello) pues puede ocasionar
comportamientos muy diferentes como en este ejemplo.

Gracias por tu observación ya que ha puesto de manifiesto un detalle muy importante! :-)
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 42200
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby Enrrique Vertiz » Mon Dec 23, 2024 11:46 am

Saludos Antonio

Es correcto, sin esa linea, funciono bien, GRACIAS !!! ... ya tarea de los gurus como solucionar la diferencia.
Enrrique Vertiz Pitta
Lima-Peru
xHb 1.23.1026X, Fwh 24.09, BCC74, MySQL 8.0.X, SQLLIB 1.9m
Enrrique Vertiz
 
Posts: 547
Joined: Fri Oct 07, 2005 2:17 pm
Location: Lima - Peru
Top

Re: Algun ejemplo de twebview2 con google chart ?

Postby Antonio Linares » Mon Dec 23, 2024 2:08 pm

La solución correcta es añadir esta regla despues del include:

#include "FiveWin.ch"

#xcommand TEXT INTO <v> => #pragma __cstream|<v>:=%s
regards, saludos

Antonio Linares
www.fivetechsoft.com
User avatar
Antonio Linares
Site Admin
 
Posts: 42200
Joined: Thu Oct 06, 2005 5:47 pm
Location: Spain
Top
Next
Post a reply

Return to FiveWin para Harbour/xHarbour

Who is online

Users browsing this forum: Google [Bot] and 40 guests

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group