www.FiveTechSoft.com
https://fivetechsupport.com/forums/
Muchas Gracias Antonio, revise el ejemplo, si no es mucho pedir, me gustaria si puedes agregar un Bar Chart o Pie Chart de googleAntonio Linares wrote:Albeiro,
Tienes el ejemplo FWH\samples\webchart.prg que usa TWebView()
Vamos a modificarlo para que use TWebView2()
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 cHtmlCode: 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
