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: 42198
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: 42198
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: 42198
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: 42198
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: 42198
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: 545
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: 545
Joined: Fri Oct 07, 2005 2:17 pm
Location: Lima - Peru
Top
Post a reply

Return to FiveWin para Harbour/xHarbour

Who is online

Users browsing this forum: Horizon and 21 guests

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