Algun ejemplo de twebview2 con google chart ?

albeiroval · Post by **albeiroval** » Mon Dec 16, 2024 3:29 pm

Buen dia.

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

Post by **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()

albeiroval · Post by **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.

Post by **Antonio Linares** » Wed Dec 18, 2024 6:36 am

webchart2.prg

Code: Select all | Expand

#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

Post by **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()

albeiroval · Post by **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

#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

Post by **Antonio Linares** » Fri Dec 20, 2024 6:52 am

Muy bien!

sysctrl2 · Post by **sysctrl2** » Fri Dec 20, 2024 4:10 pm

Excelente !
no hay imagen ?

Post by **Antonio Linares** » Fri Dec 20, 2024 8:47 pm

https://github.com/FiveTechSoft/screens ... g?raw=true

sysctrl2 · Post by **sysctrl2** » Fri Dec 20, 2024 11:06 pm

Un gran ejemplo maestro,
gracias por compartir.

Enrrique Vertiz · Post by **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 · Post by **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 ?

Post by **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!

Enrrique Vertiz · Post by **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.

Post by **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

FiveTech Software tech support forums

Algun ejemplo de twebview2 con google chart ?

Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?

Re: Algun ejemplo de twebview2 con google chart ?