HMGforum.com

Posted: **Thu Nov 29, 2018 5:18 pm**

mais ,c'est avec une base de données variable que je n'arrive pas a réaliser(le nombre de référence est variable).

traduction google:
but it is with a variable database that I can not seem to realize (the reference number is variable).

Posted: **Mon May 27, 2019 7:23 am**

Hi,

Edward's sample is working like a charm, but when i modified a combo chart, then does not appear the generated html.
GoogleChart.html file is ready and appears in browser.
What could be the problem?

Code: Select all

/*
https://developers.google.com/chart/
*/

#include "hmg.ch"

Function Main()

DEFINE WINDOW Win_1 AT 192 , 422 WIDTH 600 HEIGHT 500 TITLE "Google Chart Html Sample" MAIN

	@ 60,390 TEXTBOX t_Width ;
		WIDTH 50 ;
		VALUE 480 ;
		NUMERIC INPUTMASK "999" 

	@ 100,390 TEXTBOX t_Height ;
		WIDTH 50 ;
		VALUE 250 ;
		NUMERIC INPUTMASK "999" 

	@ 60,340 LABEL Label_2 ;
		WIDTH 50 HEIGHT 20 ;
		VALUE 'Width'
    
	@ 100,340 LABEL Label_3 ;
		WIDTH 50 HEIGHT 20 ;
		VALUE 'Height'

	@ 100, 460 BUTTON Button_1 ;
		CAPTION "Generate" ;
		ACTION GoogleChartApi_() ;
		WIDTH  70 HEIGHT 28 

    DEFINE ACTIVEX Activex_1
        ROW    150
        COL    20
        WIDTH  540
        HEIGHT 200
        PROGID "shell.explorer.2"
    END ACTIVEX

END WINDOW

HMG_ChangeWindowStyle(GetControlHandle("Activex_1","Win_1"), WS_EX_CLIENTEDGE, NIL, .T.)
oActiveX:= GetProperty('Win_1','Activex_1','Object')
oActiveX:Silent := 1

END WINDOW

CENTER WINDOW Win_1

ACTIVATE WINDOW Win_1

Return Nil

****************************************************************************************
Function GoogleChartApi_()

Local cApiUrl := "https://chart.googleapis.com/chart"
Local cPOSTdata := ""
LOCAL oGoogle, cGoogleResp
Local cChartType := "ColumnChart"
Local cChartWidth := Alltrim(STR( Win_1.t_Width.Value ) )
Local cChartHeight := Alltrim(STR( Win_1.t_Height.Value ) )
Local i, cChartData := "", cChartLabel := ""
Local cHeaders := "User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)"
Local cHtmlFile := "GoogleChart.html"
Local cLocalUrl := "file:///" + GetCurrentFolder() + "/" + cHtmlFile
Local cHtmlString := "" 		//"<!-- saved from url=(0017)" + "http://localhost/" /* cLocalUrl */ + " -->" + CRLF

cHtmlString += "<html>" + CRLF 
cHtmlString += "<head>" + CRLF 
cHtmlString += '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>' + CRLF 
cHtmlString += '<script type="text/javascript">' + CRLF 
cHtmlString += "google.charts.load('current', {'packages':['corechart']});" + CRLF 
cHtmlString += "google.charts.setOnLoadCallback(drawVisualization);" + CRLF 

cHtmlString += "function drawVisualization() {" + CRLF 
	cHtmlString += "var data = google.visualization.arrayToDataTable([" + CRLF 
		cHtmlString += "['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average']," + CRLF 
    cHtmlString += "['2004/05',  165,      938,         522,             998,           450,      614.6]," + CRLF 
    cHtmlString += "['2005/06',  135,      1120,        599,             1268,          288,      682]," + CRLF 
    cHtmlString += "['2006/07',  157,      1167,        587,             807,           397,      623]," + CRLF 
    cHtmlString += "['2007/08',  139,      1110,        615,             968,           215,      609.4]," + CRLF 
    cHtmlString += "['2008/09',  136,      691,         629,             1026,          366,      569.6]" + CRLF 
		cHtmlString += "]);" + CRLF 

		cHtmlString += "var options = {" + CRLF 
          cHtmlString += "title : 'Monthly Coffee Production by Country'," + CRLF 
          cHtmlString += "vAxis: {title: 'Cups'}," + CRLF 
          cHtmlString += "hAxis: {title: 'Month'}," + CRLF 
          cHtmlString += "seriesType: 'bars'," + CRLF 
          cHtmlString += "series: {5: {type: 'line'}}" + CRLF 
					cHtmlString += "};" + CRLF 

        cHtmlString += "var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));" + CRLF 
        cHtmlString += "chart.draw(data, options);" + CRLF 
				cHtmlString += "}" + CRLF 
				cHtmlString += "</script>" + CRLF 
				cHtmlString += "</head>" + CRLF 
				cHtmlString += "<body>" + CRLF 
				cHtmlString += '<div id="chart_div" style="width: '+cChartWidth+'px; height: '+cChartHeight+'px;"></div>' + CRLF 
				cHtmlString += "</body>" + CRLF 
				cHtmlString += "</html>" + CRLF 

STRFILE( cHtmlString , cHtmlFile)

Win_1.Activex_1.Width := Win_1.t_Width.Value + 70
Win_1.Activex_1.Height := Win_1.t_Height.Value + 50
oActiveX:= GetProperty('Win_1','Activex_1','Object')

oActiveX:Silent := 1
oActiveX:Navigate( cLocalUrl , , , , cHeaders)

RETURN

Posted: **Mon May 27, 2019 10:38 am**

Hi friend minr
replace these lines

Code: Select all

* cHtmlString += "<html>" + CRLF 
* cHtmlString += "<head>" + CRLF

for this line of code

Code: Select all

cHtmlString += '<html>  <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <meta charset="utf-8">' + CRLF + '<!--Load the AJAX API-->'  + CRLF

This is working well

View

viewtopic.php?f=24&t=5718&start=10
"API de Google crea gráficas3.zip"

Regards
Mustafa

Posted: **Mon May 27, 2019 10:46 am**

Hello Mustafa,

Great!
It really works, thank you so much.

Posted: **Thu Jul 09, 2020 2:43 pm**

edk wrote: ↑Tue Nov 27, 2018 10:55 am

This version works with WebBrowse with a specified version of IE (tested on Win 10 64 bit). Just added this meta tag: <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Greetings goes to: https://weblog.west-wind.com/posts/2011 ... ie-version

Works also with:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="X-UA-Compatible" content="IE=11" />

Code: Select all

/*
https://developers.google.com/chart/
*/

#include "hmg.ch"

Function Main()

Local aRows[6], aCombo:={}

aRows [1]	:= {'Simpson',5}
aRows [2]	:= {'Mulder',30} 
aRows [3]	:= {'Smart',50} 
aRows [4]	:= {'Grillo',120} 
aRows [5]	:= {'Kirk',90} 
aRows [6]	:= {'Barriga',200}

PRIVATE aTypes [5]
aTypes [1] := {"Pie","PieChart"}
aTypes [2] := {"Pie 3D", "PieChart3D"}
aTypes [3] := {"Line", "LineChart"}
aTypes [4] := {"Bar", "BarChart"}
aTypes [5] := {"Column", "ColumnChart"}

AEVAL(aTypes, { |x| AADD( aCombo, x[1]) } )

DEFINE WINDOW Win_1 AT 192 , 422 WIDTH 600 HEIGHT 500 TITLE "Google Chart Html Sample" MAIN

	@ 20,20 GRID Grid_1 ;
		WIDTH 300 ;
		HEIGHT 110 ;
		HEADERS {'Label','Data'} ;
		WIDTHS {100,100};
		ITEMS aRows ;
		VALUE {1,1} ;
		EDIT ;
		CELLNAVIGATION 

	@ 20, 390 COMBOBOX Combo_1 ;
		WIDTH  135 ;
		HEIGHT 94 ;
		ITEMS aCombo ;  
		VALUE 1

	@ 60,390 TEXTBOX t_Width ;
		WIDTH 50 ;
		VALUE 480 ;
		NUMERIC INPUTMASK "999" 

	@ 100,390 TEXTBOX t_Height ;
		WIDTH 50 ;
		VALUE 250 ;
		NUMERIC INPUTMASK "999" 

	@ 20,340 LABEL Label_1 ;
		WIDTH 50 HEIGHT 20 ;
		VALUE 'Type'

	@ 60,340 LABEL Label_2 ;
		WIDTH 50 HEIGHT 20 ;
		VALUE 'Width'
    
	@ 100,340 LABEL Label_3 ;
		WIDTH 50 HEIGHT 20 ;
		VALUE 'Height'

	@ 100, 460 BUTTON Button_1 ;
		CAPTION "Generate" ;
		ACTION GoogleChartApi_() ;
		WIDTH  70 HEIGHT 28 


    DEFINE ACTIVEX Activex_1
        ROW    150
        COL    20
        WIDTH  540
        HEIGHT 200
        PROGID "shell.explorer.2"
    END ACTIVEX

END WINDOW

HMG_ChangeWindowStyle(GetControlHandle("Activex_1","Win_1"), WS_EX_CLIENTEDGE, NIL, .T.)
oActiveX:= GetProperty('Win_1','Activex_1','Object')
oActiveX:Silent := 1

END WINDOW

CENTER WINDOW Win_1

ACTIVATE WINDOW Win_1

Return Nil

****************************************************************************************
Function GoogleChartApi_()

Local cApiUrl := "https://chart.googleapis.com/chart"
Local cPOSTdata := ""
LOCAL oGoogle, cGoogleResp
Local cChartType := aTypes [Win_1.Combo_1.Value] [2]
Local cChartWidth := Alltrim(STR( Win_1.t_Width.Value ) )
Local cChartHeight := Alltrim(STR( Win_1.t_Height.Value ) )
Local i, cChartData := "", cChartLabel := ""
Local cHeaders := "User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)"
Local cHtmlFile := "GoogleChart.html"
Local cLocalUrl := "file:///" + GetCurrentFolder() + "/" + cHtmlFile
Local cHtmlString := "" 		//"<!-- saved from url=(0017)" + "http://localhost/" /* cLocalUrl */ + " -->" + CRLF

cHtmlString += '<html>  <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <meta charset="utf-8">' + CRLF + '<!--Load the AJAX API-->'  + CRLF
cHtmlString += '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>' + CRLF
cHtmlString += '<script type="text/javascript">' + CRLF 
cHtmlString += '// Load the Visualization API and the corechart package.' + CRLF
cHtmlString += "google.charts.load('current', {'packages':['corechart']});" + CRLF
cHtmlString += '// Set a callback to run when the Google Visualization API is loaded.' + CRLF
cHtmlString += 'google.charts.setOnLoadCallback(drawChart);' + CRLF
cHtmlString += '// Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.' + CRLF
cHtmlString += 'function drawChart() {' + CRLF
cHtmlString += '// Create the data table.' + CRLF
cHtmlString += 'var data = new google.visualization.DataTable();' + CRLF
cHtmlString += "data.addColumn('string', 'Topping');" + CRLF
cHtmlString += "data.addColumn('number', 'Slices');" + CRLF
cHtmlString += "data.addRows([" +CRLF

FOR i=1 TO Win_1.Grid_1.ItemCount
	
	cHtmlString += "['" + hb_StrToUTF8( Alltrim(hb_valToStr(Win_1.Grid_1.CellEx( i , 1 ))) ) + "', " + Alltrim(hb_valToStr(Win_1.Grid_1.CellEx( i , 2 ))) + "]"
	IF i < Win_1.Grid_1.ItemCount
		cHtmlString += ","
	ENDIF
	
	cHtmlString += CRLF
NEXT i

cHtmlString += "]);" + CRLF
cHtmlString += '// Set chart options' + CRLF
cHtmlString += "var options = {'title':'Sample Google Chart'," + CRLF
IF cChartType == 'PieChart3D'
	cHtmlString += "    'is3D': true,"
	cChartType := 'PieChart'
ENDIF
	
cHtmlString += "               'width':" + cChartWidth + "," + CRLF
cHtmlString += "               'height':" + cChartHeight + "};" + CRLF
cHtmlString += '// Instantiate and draw our chart, passing in some options.' + CRLF
cHtmlString += "var chart = new google.visualization." + cChartType + "(document.getElementById('chart_div'));" + CRLF
cHtmlString += "chart.draw(data, options);" + CRLF
cHtmlString += "}" + CRLF
cHtmlString += '</script>  </head>' + CRLF
cHtmlString += '<body>' + CRLF
cHtmlString += '<!--Div that will hold the pie chart-->' + CRLF 
cHtmlString += '<div id="chart_div" style="width: ' + cChartWidth + 'px; height: ' + cChartHeight + 'px"></div>' + CRLF
cHtmlString += '</body> </html>'

STRFILE( cHtmlString , cHtmlFile)

Win_1.Activex_1.Width := Win_1.t_Width.Value + 70
Win_1.Activex_1.Height := Win_1.t_Height.Value + 50
oActiveX:= GetProperty('Win_1','Activex_1','Object')

oActiveX:Silent := 1
oActiveX:Navigate( cLocalUrl , , , , cHeaders)

RETURN

The samples doesn't work now. Even though it worked. Do you have any idea?

Posted: **Sat Jul 11, 2020 9:16 am**

Maybe try this. It's works for me.

Code: Select all

/*
https://developers.google.com/chart/
*/

#include "hmg.ch"

Function Main()

Local aRows[6], aCombo:={}

aRows [1]	:= {'Simpson',5}
aRows [2]	:= {'Mulder',30} 
aRows [3]	:= {'Smart',50} 
aRows [4]	:= {'Grillo',120} 
aRows [5]	:= {'Kirk',90} 
aRows [6]	:= {'Barriga',200}

PRIVATE aTypes [5]
aTypes [1] := {"Pie","PieChart"}
aTypes [2] := {"Pie 3D", "PieChart3D"}
aTypes [3] := {"Line", "LineChart"}
aTypes [4] := {"Bar", "BarChart"}
aTypes [5] := {"Column", "ColumnChart"}

AEVAL(aTypes, { |x| AADD( aCombo, x[1]) } )

DEFINE WINDOW Win_1 AT 192 , 422 WIDTH 600 HEIGHT 500 TITLE "Google Chart Html Sample" MAIN

	@ 20,20 GRID Grid_1 ;
		WIDTH 300 ;
		HEIGHT 110 ;
		HEADERS {'Label','Data'} ;
		WIDTHS {100,100};
		ITEMS aRows ;
		VALUE {1,1} ;
		EDIT ;
		CELLNAVIGATION 

	@ 20, 390 COMBOBOX Combo_1 ;
		WIDTH  135 ;
		HEIGHT 94 ;
		ITEMS aCombo ;  
		VALUE 1

	@ 60,390 TEXTBOX t_Width ;
		WIDTH 50 ;
		VALUE 480 ;
		NUMERIC INPUTMASK "999" 

	@ 100,390 TEXTBOX t_Height ;
		WIDTH 50 ;
		VALUE 250 ;
		NUMERIC INPUTMASK "999" 

	@ 20,340 LABEL Label_1 ;
		WIDTH 50 HEIGHT 20 ;
		VALUE 'Type'

	@ 60,340 LABEL Label_2 ;
		WIDTH 50 HEIGHT 20 ;
		VALUE 'Width'
    
	@ 100,340 LABEL Label_3 ;
		WIDTH 50 HEIGHT 20 ;
		VALUE 'Height'

	@ 100, 460 BUTTON Button_1 ;
		CAPTION "Generate" ;
		ACTION GoogleChartApi_() ;
		WIDTH  70 HEIGHT 28 


    DEFINE ACTIVEX Activex_1
        ROW    150
        COL    20
        WIDTH  540
        HEIGHT 200
        PROGID "shell.explorer.2"
    END ACTIVEX

END WINDOW

HMG_ChangeWindowStyle(GetControlHandle("Activex_1","Win_1"), WS_EX_CLIENTEDGE, NIL, .T.)
oActiveX:= GetProperty('Win_1','Activex_1','Object')
//oActiveX:Silent := 1

END WINDOW

CENTER WINDOW Win_1

ACTIVATE WINDOW Win_1

Return Nil

****************************************************************************************
Function GoogleChartApi_()

Local cApiUrl := "https://chart.googleapis.com/chart"
Local cPOSTdata := ""
LOCAL oGoogle, cGoogleResp
Local cChartType := aTypes [Win_1.Combo_1.Value] [2]
Local cChartWidth := Alltrim(STR( Win_1.t_Width.Value ) )
Local cChartHeight := Alltrim(STR( Win_1.t_Height.Value ) )
Local i, cChartData := "", cChartLabel := ""
Local cHeaders := "User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)"
Local cHtmlFile := "GoogleChart.html"
Local cLocalUrl := "file:///" + GetCurrentFolder() + "/" + cHtmlFile
Local cHtmlString := "<!-- saved from url=(0014)about:internet -->" + CRLF + "<!DOCTYPE html>" + CRLF 		//"<!-- saved from url=(0017)" + "http://localhost/" /* cLocalUrl */ + " -->" + CRLF

cHtmlString += '<html>  <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>  <meta charset="utf-8">' + CRLF + '<!--Load the AJAX API-->'  + CRLF
cHtmlString += '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>' + CRLF
cHtmlString += '<script type="text/javascript">' + CRLF 
cHtmlString += '// Load the Visualization API and the corechart package.' + CRLF
cHtmlString += "google.charts.load('current', {'packages':['corechart']});" + CRLF
cHtmlString += '// Set a callback to run when the Google Visualization API is loaded.' + CRLF
cHtmlString += 'google.charts.setOnLoadCallback(drawChart);' + CRLF
cHtmlString += '// Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.' + CRLF
cHtmlString += 'function drawChart() {' + CRLF
cHtmlString += '// Create the data table.' + CRLF
cHtmlString += 'var data = new google.visualization.DataTable();' + CRLF
cHtmlString += "data.addColumn('string', 'Topping');" + CRLF
cHtmlString += "data.addColumn('number', 'Slices');" + CRLF
cHtmlString += "data.addRows([" +CRLF

FOR i=1 TO Win_1.Grid_1.ItemCount
	
	cHtmlString += "['" + hb_StrToUTF8( Alltrim(hb_valToStr(Win_1.Grid_1.CellEx( i , 1 ))) ) + "', " + Alltrim(hb_valToStr(Win_1.Grid_1.CellEx( i , 2 ))) + "]"
	IF i < Win_1.Grid_1.ItemCount
		cHtmlString += ","
	ENDIF
	
	cHtmlString += CRLF
NEXT i

cHtmlString += "]);" + CRLF
cHtmlString += '// Set chart options' + CRLF
cHtmlString += "var options = {'title':'Sample Google Chart'," + CRLF
IF cChartType == 'PieChart3D'
	cHtmlString += "    'is3D': true,"
	cChartType := 'PieChart'
ENDIF
	
cHtmlString += "               'width':" + cChartWidth + "," + CRLF
cHtmlString += "               'height':" + cChartHeight + "};" + CRLF
cHtmlString += '// Instantiate and draw our chart, passing in some options.' + CRLF
cHtmlString += "var chart = new google.visualization." + cChartType + "(document.getElementById('chart_div'));" + CRLF
cHtmlString += "chart.draw(data, options);" + CRLF
cHtmlString += "}" + CRLF
cHtmlString += '</script>  </head>' + CRLF
cHtmlString += '<body>' + CRLF
cHtmlString += '<!--Div that will hold the pie chart-->' + CRLF 
cHtmlString += '<div id="chart_div" style="width: ' + cChartWidth + 'px; height: ' + cChartHeight + 'px"></div>' + CRLF
cHtmlString += '</body> </html>'

STRFILE( cHtmlString , cHtmlFile)

Win_1.Activex_1.Width := Win_1.t_Width.Value + 70
Win_1.Activex_1.Height := Win_1.t_Height.Value + 50
oActiveX:= GetProperty('Win_1','Activex_1','Object')

oActiveX:Silent := 1
oActiveX:Navigate( cLocalUrl , , , , cHeaders)

RETURN

Posted: **Mon Jul 13, 2020 6:41 am**

Thank you Edward.

It now works, which didn't work a few days ago. I tried on 3 different PC's with same result. Stange.
But now everything is ok.

Posted: **Mon Jul 13, 2020 7:25 am**

Hi Gabor.
It seems to me that the problem was on Google side and associated with loader.js. There was a function in it that IE does not support - at least I received the results of script debugging.

Posted: **Mon Jul 13, 2020 7:55 am**

Oh, ok that's clear.
Thank you.

Posted: **Thu Mar 17, 2022 8:06 pm**

mustafa wrote: ↑Tue Nov 27, 2018 7:48 pm Hola amigos
Felicidades por la aplicación "edk"
He modificado el Sample de "edk" con la opción de Base de datos de "Tonton2"
Haber que os parece ?
Saludos
Mustafa
*---------------------------------------------- Google -------------------------------------*
Hello friends
Congratulations on the "edk" application
I modified the "edk" Sample with the "Tonton2" database option
What do you think?
Regards
Mustafa

bonsoir a toute l'equipe ,
sur un de mes PC(Windows 64) ,l'image du graphe n'apparait pas .c'est possible que ca vient de la configuration de Windows 64 comment
merci de votre aide

HMGforum.com

OT: API Google crear gráficas

Re: OT: API Google crear gráficas

Re: OT: API Google crear gráficas

Re: OT: API Google crear gráficas

Re: OT: API Google crear gráficas

Re: OT: API Google crear gráficas

Re: OT: API Google crear gráficas

Re: OT: API Google crear gráficas

Re: OT: API Google crear gráficas

Re: OT: API Google crear gráficas

Re: OT: API Google crear gráficas