OT: API Google crear gráficas

HMG en Español

Moderator: Rathinagiri

User avatar
tonton2
Posts: 444
Joined: Sat Jun 29, 2013 1:26 pm
Location: Algerie
Contact:

Re: OT: API Google crear gráficas

Post by tonton2 »

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).
L'Algerie vous salut
Y.TABET
mlnr
Posts: 126
Joined: Fri Aug 28, 2015 1:52 pm
DBs Used: DBF

Re: OT: API Google crear gráficas

Post by mlnr »

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 
Attachments
GoogleChart.png
GoogleChart.png (19.49 KiB) Viewed 4615 times
Best regards,
Gabor
User avatar
mustafa
Posts: 1158
Joined: Fri Mar 20, 2009 11:38 am
DBs Used: DBF
Location: Alicante - Spain
Contact:

Re: OT: API Google crear gráficas

Post by mustafa »

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
mlnr
Posts: 126
Joined: Fri Aug 28, 2015 1:52 pm
DBs Used: DBF

Re: OT: API Google crear gráficas

Post by mlnr »

Hello Mustafa,

Great!
It really works, thank you so much.
Best regards,
Gabor
mlnr
Posts: 126
Joined: Fri Aug 28, 2015 1:52 pm
DBs Used: DBF

Re: OT: API Google crear gráficas

Post by mlnr »

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?
Best regards,
Gabor
edk
Posts: 909
Joined: Thu Oct 16, 2014 11:35 am
Location: Poland

Re: OT: API Google crear gráficas

Post by edk »

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 
mlnr
Posts: 126
Joined: Fri Aug 28, 2015 1:52 pm
DBs Used: DBF

Re: OT: API Google crear gráficas

Post by mlnr »

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.
Best regards,
Gabor
edk
Posts: 909
Joined: Thu Oct 16, 2014 11:35 am
Location: Poland

Re: OT: API Google crear gráficas

Post by edk »

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.
mlnr
Posts: 126
Joined: Fri Aug 28, 2015 1:52 pm
DBs Used: DBF

Re: OT: API Google crear gráficas

Post by mlnr »

Oh, ok that's clear.
Thank you.
Best regards,
Gabor
User avatar
tonton2
Posts: 444
Joined: Sat Jun 29, 2013 1:26 pm
Location: Algerie
Contact:

Re: OT: API Google crear gráficas

Post by tonton2 »

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 :idea:
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
L'Algerie vous salut
Y.TABET
Post Reply