Buen dia.
Abra algun ejemplo de twebview2 con google chart, pasando parametros por javascript desde prg ?
Board index FiveWin para Harbour/xHarbour Algun ejemplo de twebview2 con google chart ?
Page: 1 2 (19 posts)
Albeiro,
Tienes el ejemplo FWH\samples\webchart.prg que usa TWebView()
Vamos a modificarlo para que use TWebView2()
Antonio Linares wrote:Albeiro,Muchas Gracias Antonio, revise el ejemplo, si no es mucho pedir, me gustaria si puedes agregar un Bar Chart o Pie Chart de google
Tienes el ejemplo FWH\samples\webchart.prg que usa TWebView()
Vamos a modificarlo para que use TWebView2()
usando oWebView:InjectJavascript.
webchart2.prg
#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> 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()
Antonio, gracias funciona bien.
Modifique tu ejemplo para mostrar el envio de los valores a webview, lo pongo aqui para quien quiera
entenderlo mejor.
Modifique tu ejemplo para mostrar el envio de los valores a webview, lo pongo aqui para quien quiera
entenderlo mejor.
#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 cHtmlMuy bien! :-)
Excelente !
no hay imagen ? :D
no hay imagen ? :D
Cesar Cortes Cruz
SysCtrl Software
Mexico
' Sin +- FWH es mejor "
SysCtrl Software
Mexico
' Sin +- FWH es mejor "
Un gran ejemplo maestro,
gracias por compartir.
Cesar Cortes Cruz
SysCtrl Software
Mexico
' Sin +- FWH es mejor "
SysCtrl Software
Mexico
' Sin +- FWH es mejor "
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 25.01, BCC74, MySQL 8.0.X, SQLLIB 1.9m
Lima-Peru
xHb 1.23.1026X, Fwh 25.01, BCC74, MySQL 8.0.X, SQLLIB 1.9m
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 25.01, BCC74, MySQL 8.0.X, SQLLIB 1.9m
Lima-Peru
xHb 1.23.1026X, Fwh 25.01, BCC74, MySQL 8.0.X, SQLLIB 1.9m
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! :-)
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! :-)
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 25.01, BCC74, MySQL 8.0.X, SQLLIB 1.9m
Lima-Peru
xHb 1.23.1026X, Fwh 25.01, BCC74, MySQL 8.0.X, SQLLIB 1.9m
La solución correcta es añadir esta regla despues del include:
include "FiveWin.ch"
xcommand TEXT INTO <v> => #pragma __cstream|<v>:=%s
Page: 1 2 (19 posts)