OT: API Google crear gráficas

HMG en Español

Moderator: Rathinagiri

jparada
Posts: 430
Joined: Fri Jan 23, 2009 5:18 pm

OT: API Google crear gráficas

Post by jparada »

Hola,
Alguno de ustedes ha realizado pruebas para generar gráficas con la API de Google y cURL...?, alguna idea?.

Saludos,
Javier
edk
Posts: 909
Joined: Thu Oct 16, 2014 11:35 am
Location: Poland

Re: OT: API Google crear gráficas

Post by edk »

Hi, Javier.

If you mean Static Google Charts, maybe this will be helpful:

Code: Select all

/*
https://developers.google.com/chart/image/docs/making_charts
*/

#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","p"}
aTypes [2] := {"Pie 3D", "p3"}
aTypes [3] := {"Line", "lc"}
aTypes [4] := {"Line sparkless", "ls"}
aTypes [5] := {"Bar", "bvg"}

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

DEFINE WINDOW Win_1 AT 192 , 422 WIDTH 550 HEIGHT 350 TITLE "Google Chart Static 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 ;
		VALUE 360 ;
		NUMERIC INPUTMASK "999" 

	@ 100,390 TEXTBOX t_Height ;
		VALUE 150 ;
		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'

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

	@ 150, 20 IMAGE Image_1 ;
		PICTURE "" ;
		WIDTH  360 HEIGHT 150
		
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 := ""

FOR i=1 TO Win_1.Grid_1.ItemCount

	cChartData += Alltrim(hb_valToStr(Win_1.Grid_1.CellEx( i , 2 )))
	cChartLabel += Alltrim(hb_valToStr(Win_1.Grid_1.CellEx( i , 1 )))
	
	IF i < Win_1.Grid_1.ItemCount
		cChartData += ","
		cChartLabel += "|"
	ENDIF
NEXT i


//Init
BEGIN SEQUENCE WITH {|o| break(o)}
	oGoogle := Win_OleCreateObject( "MSXML2.ServerXMLHTTP" )

RECOVER
     MsgStop( "Microsoft XML Core Services (MSXML) 6.0 is not installed.")
     oGoogle:=""

END SEQUENCE

IF EMPTY(oGoogle)
	MsgStop("Error while init.")
	RETURN 
ENDIF

cPOSTdata := "cht=" + cChartType + "&chs=" + cChartWidth + "x" + cChartHeight + ;
		"&chd=t:" + cChartData + "&chl=" + cChartLabel + "&chds=a" 

//Sending POST
BEGIN SEQUENCE WITH {|o| break(o)}
	oGoogle:Open( "POST", cApiUrl, .F. )
	oGoogle:Send( cPOSTdata )
	cGoogleResp := oGoogle:ResponseBody()

	IF oGoogle:Status != 200
		BREAK
	ENDIF
	STRFILE( cGoogleResp , 'GoogleChart.png')

RECOVER
	MsgStop("ERROR! " + CRLF + cGoogleResp)
	RETURN
 
END SEQUENCE
 	
//Close
oGoogle:Abort()

Win_1.Image_1.Picture := 'GoogleChart.png'

RETURN 

Edward.
PeteWG
Posts: 176
Joined: Sun Mar 21, 2010 5:45 pm

Re: OT: API Google crear gráficas

Post by PeteWG »

edk wrote: Thu Jun 14, 2018 11:02 am If you mean Static Google Charts, maybe this will be helpful:
Very helpful, indeed. Thanks for sharing!
regards,
Pete
edk
Posts: 909
Joined: Thu Oct 16, 2014 11:35 am
Location: Poland

Re: OT: API Google crear gráficas

Post by edk »

Another sample of using Dynamic Google Charts (HTML).

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 400 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 ;
		VALUE 360 ;
		NUMERIC INPUTMASK "999" 

	@ 100,390 TEXTBOX t_Height ;
		VALUE 150 ;
		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'

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


    DEFINE ACTIVEX Activex_1
        ROW    150
        COL    20
        WIDTH  430
        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 cHtmlString := "" 

cHtmlString += '<html>  <head>' + 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 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 += "['" + 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 chart-->' + CRLF 
cHtmlString += '<div id="chart_div"></div>' + CRLF
cHtmlString += '</body> </html>'

STRFILE( cHtmlString , cHtmlFile)

oActiveX:= GetProperty('Win_1','Activex_1','Object')
oActiveX:Silent := 1
oActiveX:Navigate( "file:///" + GetCurrentFolder() + "\" + cHtmlFile , , , , cHeaders)

RETURN 
Edward
jparada
Posts: 430
Joined: Fri Jan 23, 2009 5:18 pm

Re: OT: API Google crear gráficas

Post by jparada »

Hi,

Thank you all for answering.

I will try to do tests.

I appreciate your help.

Regards,
Javier
mlnr
Posts: 126
Joined: Fri Aug 28, 2015 1:52 pm
DBs Used: DBF

Re: OT: API Google crear gráficas

Post by mlnr »

Google Chart Generator.
Maybe, useful link.
http://www.jonwinstanley.com/charts/
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 »

Hi Edk,
Salut à vous tous
dans votre exemple "Another sample of using Dynamic Google Charts (HTML). "lorsque j'appuie sur generate,il ne se passe rien du tout.
merci pour tous ce que vous faites.

translation google
Hi everybody
in your example " "Another sample of using Dynamic Google Charts (HTML). " " when I press generate, nothing happens at all.
thank you for all that you do.
L'Algerie vous salut
Y.TABET
edk
Posts: 909
Joined: Thu Oct 16, 2014 11:35 am
Location: Poland

Re: OT: API Google crear gráficas

Post by edk »

Check if the GoogleChart.html file has been created in the local folder.
Check if you can open this file with IE, or whether scripts and ActiveX controls are blocked.

This version, after generating the GoogleChart.html file, additionally launches IE and navigates to this file. Check how it behaves. If you are prompted for permission to run scripts, you probably have a lock set and therefore the shell.explorer.2 control does not run the script correctly:

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 400 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 ;
		VALUE 360 ;
		NUMERIC INPUTMASK "999" 

	@ 100,390 TEXTBOX t_Height ;
		VALUE 150 ;
		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'

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


    DEFINE ACTIVEX Activex_1
        ROW    150
        COL    20
        WIDTH  430
        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 cHtmlString := "" 

cHtmlString += '<html>  <head> <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( "file:///" + GetCurrentFolder() + "\" + cHtmlFile , , , , cHeaders)

oIE := Win_OleCreateObject( "InternetExplorer.Application" )
oIE:Visible := .T.
oIE:Navigate( "file:///" + GetCurrentFolder() + "\" + cHtmlFile )

RETURN 
You can try to REM oActiveX:Silent := 1

P.S. :It looks like something has changed in scripts on the Google side, and now IE blocks its automatic execution. 🤔
User avatar
andyglezl
Posts: 1461
Joined: Fri Oct 26, 2012 7:58 pm
Location: Guadalajara Jalisco, MX
Contact:

Re: OT: API Google crear gráficas

Post by andyglezl »

Hola
Desde WIN7 el IExplorer los bloquea automaticamente.
Usar controles ActiveX en Internet Explorer 10 e Internet Explorer 11
Se aplica: Windows Internet Explorer, Windows10, Windows 8.1, Windows 7.

Controles ActiveX
Los controles ActiveX son pequeñas aplicaciones que permiten a los sitios web proporcionar contenido, como vídeos y juegos. También te permiten interactuar con contenido como barras de herramientas y tableros de cotizaciones mientras navegas por Internet. A veces, estas aplicaciones pueden producir errores o proporcionar contenido no deseado. En algunos casos, estas aplicaciones pueden usarse para recopilar información de tu PC o pueden dañar tu información, instalar software sin tu consentimiento o permitir que otra persona controle el equipo de forma remota.

Filtrado ActiveX
El filtrado ActiveX de Internet Explorer impide que los sitios instalen y usen estas aplicaciones. Esto puede ayudar a mantener la seguridad durante la navegación, pero también puede afectar al rendimiento de determinados sitios. Por ejemplo, si el filtrado ActiveX está activado, es posible que algunos vídeos, juegos u otro contenido interactivo no funcionen.
*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Hello
From WIN7 the IExplorer automatically locks them.
Use ActiveX controls in Internet Explorer 10 and Internet Explorer 11
Applies: Windows Internet Explorer, Windows10, Windows 8.1, Windows 7.
 
ActiveX controls
ActiveX controls are small applications that allow websites to provide content, such as videos and games. They also allow you to interact with content such as toolbars and quote boards while you browse the Internet. Sometimes, these applications can cause errors or provide unwanted content. In some cases, these applications can be used to gather information from your PC or they can damage your information, install software without your consent or allow another person to control the computer remotely.

ActiveX filtering
Internet Explorer ActiveX filtering prevents sites from installing and using these applications. This can help maintain security during navigation, but it can also affect the performance of certain sites. For example, if ActiveX filtering is enabled, some videos, games or other interactive content may not work.
Andrés González López
Desde Guadalajara, Jalisco. México.
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 »

Bonjour,
Merci beaucoup pour vos explications
L'Algerie vous salut
Y.TABET
Post Reply