API do Google para gerar gráficos

Martinsrj · Abril 7, 2010

Olá pessoal, boa tarde!

Preciso gerar um grafico onde apenas o primeiro é gerado corretamente o segundo falta dados e ainda aparece apenas numero aos invés de aparecer os dados.

Link da imagem que está ocorrendo no 2° grafico: http://uploaddeimagens.com.br/imagem/index/graficogoogle.jpg

Abaixo segue o código:

<!-----#include file="includes/SmartSourceP.asp"-->
<!-----#include file="includes/SmartSourceS_v01.asp"---------------->
<!-----#include file="includes/SmartSourceR_v05.asp"--------------->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gráfico</title>


<script type="text/javascript" src="http://www.google.com/jsapi"></script> 

<style>
.legenda {
	font-family:Arial;
	font-size:12px;
}
</style>

</head>

<body>
<% 
vtQuery = Split(Session("gpSQL1"),"from")

'###############################################  MIDIA GRÁFICO    ###############################################
strQueryMidia = "SELECT nomecliente, midia, tipo_medida, sum(qtd) as qtd, sum(qtd_negativa) as qtd_negativa, sum(qtd_neutra) as qtd_neutra, sum(tempo) as tempo, sum(tempo_negativo) as tempo_negativo, sum(tempo_neutra) as tempo_neutra  FROM "& vtQuery(1) & " group by midia, nomecliente, tipo_medida"
	
'Response.Write(strQueryMidia)
Set rs_midia = gpExecuteSQL(strQueryMidia)

var_tituloMidia =  rs_midia.fields("nomecliente") & " - " & rs_midia.fields("midia")  
'Response.Write(var_tituloVeiculo)
'Response.End()


while not rs_midia.eof
	if rs_midia.fields("tipo_medida") <> "TEMPO" then
		
		ctValsQtd = ctValsQtd + CInt(rs_midia.fields("qtd"))
		ctValsQtdNeg = ctValsQtdNeg + CInt(rs_midia.fields("qtd_negativa"))
		ctValsQtdNeu = ctValsQtdNeu + CInt(rs_midia.fields("qtd_neutra"))
	Else
		ctValsQtd = ctValsQtd + CInt(rs_midia.fields("tempo"))
		ctValsQtdNeg = ctValsQtdNeg + CInt(rs_midia.fields("tempo_negativo"))
		ctValsQtdNeu = ctValsQtdNeu + CInt(rs_midia.fields("tempo_neutra"))
	End if

	rs_midia.movenext
wend

%> 
<!--
<img src="http://chart.apis.google.com/chart?chs=480x256&cht=p3&chtt=Grafico Midia&chd=s:CDDEFH,Wps679&chco=ff0000,0000ff&chdl=sales|visits&chxl=0:|jan|feb|mar|apr|may|jun|&chxt=x"/>
Parametros: http://code.google.com/intl/pt-BR/apis/chart/docs/chart_params.html
-->
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:<%=ctValsQtd%>,<%=ctValsQtdNeg%>,<%=ctValsQtdNeu%>&chs=700x250&chl=Positivo|Negativo|Neutro&chtt=<%=var_tituloMidia%>"/>

<br><br>
<div align="center" class="legenda">
<%

var_totalPNegNeu = Cint(ctValsQtd) + Cint(ctValsQtdNeg) + Cint(ctValsQtdNeu)
'Response.Write(var_totalPNegNeu)

varPorcentagemPos = (ctValsQtd * 100) / var_totalPNegNeu
varPorcentagemNeg = (ctValsQtdNeg * 100) / var_totalPNegNeu
varPorcentagemNeu = (ctValsQtdNeu * 100) / var_totalPNegNeu


Response.Write "Positivo: " & Round(varPorcentagemPos) & "%" & " | Negativo: " & Round(varPorcentagemNeg) & "%" & " | Neutro: " & Round(varPorcentagemNeu) & "%"  
%>
</div>
<br><br><br>

'Aqui segue o 2° Grafico - No momento estou fazendo teste manualmente!!! <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
<%
strQueryVeiculo = "SELECT nomecliente, midia, veiculo, tipo_medida, sum(qtd) as qtd, sum(qtd_negativa) as qtd_negativa, sum(qtd_neutra) as qtd_neutra, sum(tempo) as tempo, sum(tempo_negativo) as tempo_negativo, sum(tempo_neutra) as tempo_neutra FROM "& vtQuery(1) & " group by veiculo, midia, nomecliente, tipo_medida"
	
'Response.Write(strQueryVeiculo)
'Response.End()
Set rs_veiculo = gpExecuteSQL(strQueryVeiculo)

var_tituloVeiculo =  rs_veiculo.fields("nomecliente") & " - " & rs_veiculo.fields("midia")
'Response.Write(var_tituloVeiculo)
'Response.End()

While Not rs_veiculo.Eof
	var_categories = var_categories & rs_veiculo("veiculo") & "|"
    'Response.Write var_categories
	'Positivo
	If rs_veiculo.fields("tipo_medida") <> "TEMPO" then
		var_Serie1 = var_Serie1 & rs_veiculo("qtd") & ","
	Else
		var_Serie1 = var_Serie1 & rs_veiculo("tempo") & ","
	End if
	
	If rs_veiculo.fields("tipo_medida") <> "TEMPO" then
		var_Serie2 = var_Serie2 & rs_veiculo("qtd_negativa") & ","
	Else
		var_Serie2 = var_Serie2 & rs_veiculo("tempo_negativo") & ","
	End if
	
	If rs_veiculo.fields("tipo_medida") <> "TEMPO" then
		var_Serie3 = var_Serie3 & rs_veiculo("qtd_neutra") & ","
	Else
		var_Serie3 = var_Serie3 & rs_veiculo("tempo_neutra") & ","
	End if  

	rs_veiculo.movenext		 
Wend	
    Response.Write var_categories & "<br>"
    Response.Write left(var_Serie1,len(var_Serie1)-1)
    
%>
<br />
<!--
Retirei desse site: http://code.google.com/intl/pt-BR/apis/visualization/documentation/gallery/columnchart.html
-->


<img src="http://chart.apis.google.com/chart?chs=1000x300&cht=bvg&chco=4D89F9,C6D9FD,00FFFF&chd=t:30,0,0,22,10,0,156,10,33|10,0,20,0,0,122,0,5,0|0,0,0,0,0,0,0,0,0&chxl=0:|BAND|GLOBONEWS|RECORD|REDE GLOBO|REDE TV|SBT|TV ALERJ|TV BRASIL|TV JUSTIÇA&chxt=x"/> 
                                                                                                                                                                                                                                    
</body>
</html>

Uma observação, se for retirado o ultima categoria: TV JUSTIÇA o grafico aparece normalmente

Vejam a imagem abaixo: http://uploaddeimagens.com.br/imagem/index/graficogoogle2.jpg

Existe alguma solução?

Achei os graficos gerados pelo google muito mais bonito que a do próprio ASP: OWC11.ChartSpace

Desde já agradeço pela ajuda de todos.

xanburzum · Abril 8, 2010

ele esta gerando algum erro ???

Martinsrj · Abril 8, 2010

Não aparece nenhum erro. O que ocorre ao invés de aparecer os nomes da categoria aparece numeros.

Veja a imagem nesse link: http://uploaddeimagens.com.br/imagem/index/graficogoogle.jpg

Obs.: Atualmente está com 9, mas pode aumentar pra 10 ou 12... etc...

no meu código estou no momento colocando manualmente dessa forma:

Quando funcionar manualmente aí sim irei colocar dinamico (ASP) dessa forma:

Se alguem souber de uma solução me envie uma resposta até mesmo por email: paulomartinsrj@gmail.com ou pelo Messenger: falecommartins@hotmail.com

Obs.: Antes de me adicionarem no MSN enviar email informando.

Abraços. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Paulo Martins

ele esta gerando algum erro ???

Gutoffline · Abril 8, 2010

Cara aqui eu colei seu código desta maneira:

<html>
<head>
<title></title>

</head>

<body>
<img src="http://chart.apis.google.com/chart?chs=1000x300&cht=bvg&chco=4D89F9,C6D9FD,00FFFF&chd=t:30,0,0,22,10,0,156,10,33|10,0,20,0,0,122,0,5,0|0,0,0,0,0,0,0,0,0&chxl=0:|BAND|GLOBONEWS|RECORD|REDE GLOBO|REDE TV|SBT|TV ALERJ|TV BRASIL&chxt=x"/> 
</body>
</html>

e funcionou, o retorno foi o seguinte: http://linkaaa.com/mu0v

Você tentou criar com o arquivo acima(.html)?

Martinsrj · Abril 8, 2010

Faz o seguinte Gutoffline, insere todas essas categorias:

Conforme eu mencionei no post anterior se eu colocar até umas 8 gategorias funciona normalmente, agora se eu colocar nove ou mais não funciona.

Cara aqui eu colei seu código desta maneira:
<html>
<head>
<title></title>

</head>

<body>
<img src="http://chart.apis.google.com/chart?chs=1000x300&cht=bvg&chco=4D89F9,C6D9FD,00FFFF&chd=t:30,0,0,22,10,0,156,10,33|10,0,20,0,0,122,0,5,0|0,0,0,0,0,0,0,0,0&chxl=0:|BAND|GLOBONEWS|RECORD|REDE GLOBO|REDE TV|SBT|TV ALERJ|TV BRASIL&chxt=x"/> 
</body>
</html>
e funcionou, o retorno foi o seguinte: http://linkaaa.com/mu0v

Você tentou criar com o arquivo acima(.html)?

Felipe Antunes · Abril 8, 2010

Já pensou que o erro que você esta enfrentando possa ser a acentuação?

Se eu não me egano a API de CHAR do google nao aceita acentuação, faz o teste retirando a acentuação :P

Faz o seguinte Gutoffline, insere todas essas categorias:

BAND|GLOBONEWS|RECORD|REDE GLOBO|REDE TV|SBT|TV ALERJ|TV BRASIL|TV JUSTIÇA

Conforme eu mencionei no post anterior se eu colocar até umas 8 gategorias funciona normalmente, agora se eu colocar nove ou mais não funciona.

( BAND|GLOBONEWS|RECORD|REDE GLOBO|REDE TV|SBT|TV ALERJ|TV BRASIL|TV JUSTIÇA )
Cara aqui eu colei seu código desta maneira:
<html>
<head>
<title></title>

</head>

<body>
<img src="http://chart.apis.google.com/chart?chs=1000x300&cht=bvg&chco=4D89F9,C6D9FD,00FFFF&chd=t:30,0,0,22,10,0,156,10,33|10,0,20,0,0,122,0,5,0|0,0,0,0,0,0,0,0,0&chxl=0:|BAND|GLOBONEWS|RECORD|REDE GLOBO|REDE TV|SBT|TV ALERJ|TV BRASIL&chxt=x"/> 
</body>
</html>
e funcionou, o retorno foi o seguinte: http://linkaaa.com/mu0v

Você tentou criar com o arquivo acima(.html)?

Martinsrj · Abril 9, 2010

Realmente Felipe Antunes os acentos foram os responsáveis por não imprimir todas as categorias.

Coloquei no Pastebin o meu código atualizado (09/04/2010 - 12:59), Segue o link:

http://pastebin.com/uG6jKVwK

Uma coisa que está me deixando grilado é que existe valores acima de 100 e o eixo y vai até 100 vejam a imagem no link abaixo:

http://uploaddeimagens.com.br/imagem/index/graficogoogle3.png

xanburzum · Abril 9, 2010

existe um exemplo no lab. de scrip, pode te ajudar

A ferrementa funciona da seguinte maneira:

Você cria uma tag de imagem normal em seu html e no src da img você coloca a seguinte linha de código:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Ficando assim sua imagem:

”Gráfico”

Onde nos parametros cht, chd, chs e chl são passados os tipo do grafico, valores, tamanho e labels

No link abaixo você encontra todas as informações necessárias para customizar seu gráfico e entender como funciona essa maravilhosa API da Google.

http://code.google.com/apis/chart/

Martinsrj · Abril 13, 2010

Agora realizei alguma modificações no código e deixei dessa forma:

<img src="http://chart.apis.google.com/chart?chtt=<%= var_tituloVeiculo %>&chdl=Positivo|Negativo|Neutro&chs=1000x300&cht=bvg&chco=4D89F9,C6D9FD,00FFFF&chd=t:<%= SemAcento(left(var_Serie1,len(var_Serie1)-1))%>|<%= SemAcento(left(var_Serie2,len(var_Serie2)-1))%>|<%= SemAcento(left(var_Serie3,len(var_Serie3)-1))%>&chxl=0:|<%= SemAcento(var_categories) %>&chxt=x,y&chxr=0,0,500|1,0,200&chxp=1,20,40,60,80,100,120,140,160,180,200,220 "/>

Verifique o print que dei da tela do Grafico:

http://uploaddeimagens.com.br/imagem/index/graficogoogle4.png

Escrevi em duas colunas (barras) do grafico 321 e a outra 156, repare que a barra vai até 200, porem coloquei até 220 no eixo.

Verifiquei uma situação interessante nesse link: http://code.google.com/intl/pt-BR/apis/chart/docs/chart_params.html

Todos os gráficos requerem o tamanho a ser especificado. Este parâmetro determina a largura total e altura da imagem do gráfico, incluindo lendas , as margens , e títulos. Legendas, margens, e os títulos são ajustados para caber dentro do tamanho do quadro total.

Largura x altura não pode exceder 300.000.

Obs.: no meu caso pode ocorrer situações de ter mais de 300, acredito que não deva passar 500.

Desde já agradeço pela luz.

existe um exemplo no lab. de scrip, pode te ajudar

A ferrementa funciona da seguinte maneira:

Você cria uma tag de imagem normal em seu html e no src da img você coloca a seguinte linha de código:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Ficando assim sua imagem:

”Gráfico”

Onde nos parametros cht, chd, chs e chl são passados os tipo do grafico, valores, tamanho e labels

No link abaixo você encontra todas as informações necessárias para customizar seu gráfico e entender como funciona essa maravilhosa API da Google.

http://code.google.com/apis/chart/

Felipe Antunes · Abril 13, 2010

não entendi se você fez uma indagação ou um comentário uheuheuheuhe.

Se você reparar, você disse que

Verifiquei uma situação interessante nesse link: http://code.google.com/intl/pt-BR/apis/chart/docs/chart_params.html

Todos os gráficos requerem o tamanho a ser especificado. Este parâmetro determina a largura total e altura da imagem do gráfico, incluindo lendas , as margens , e títulos. Legendas, margens, e os títulos são ajustados para caber dentro do tamanho do quadro total.

Se você precisa de determinar um tamanho "full" ou ele vai "compactar" o grafico, esta justamente ai o problema a altura de 300p é poca aumente-a e deve resolver o problema, repare que o 220 esta na mesma altura do "titulo do grafico".

bom ACHO que seja esse o vilão da vez.

Agora realizei alguma modificações no código e deixei dessa forma:
<img src="http://chart.apis.google.com/chart?chtt=<%= var_tituloVeiculo %>&chdl=Positivo|Negativo|Neutro&chs=1000x300&cht=bvg&chco=4D89F9,C6D9FD,00FFFF&chd=t:<%= SemAcento(left(var_Serie1,len(var_Serie1)-1))%>|<%= SemAcento(left(var_Serie2,len(var_Serie2)-1))%>|<%= SemAcento(left(var_Serie3,len(var_Serie3)-1))%>&chxl=0:|<%= SemAcento(var_categories) %>&chxt=x,y&chxr=0,0,500|1,0,200&chxp=1,20,40,60,80,100,120,140,160,180,200,220 "/>
Verifique o print que dei da tela do Grafico:

http://uploaddeimagens.com.br/imagem/index/graficogoogle4.png

Escrevi em duas colunas (barras) do grafico 321 e a outra 156, repare que a barra vai até 200, porem coloquei até 220 no eixo.

Verifiquei uma situação interessante nesse link: http://code.google.com/intl/pt-BR/apis/chart/docs/chart_params.html

Todos os gráficos requerem o tamanho a ser especificado. Este parâmetro determina a largura total e altura da imagem do gráfico, incluindo lendas , as margens , e títulos. Legendas, margens, e os títulos são ajustados para caber dentro do tamanho do quadro total.

Largura x altura não pode exceder 300.000.

Obs.: no meu caso pode ocorrer situações de ter mais de 300, acredito que não deva passar 500.

Desde já agradeço pela luz.

existe um exemplo no lab. de scrip, pode te ajudar

A ferrementa funciona da seguinte maneira:

Você cria uma tag de imagem normal em seu html e no src da img você coloca a seguinte linha de código:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Ficando assim sua imagem:

”Gráfico”

Onde nos parametros cht, chd, chs e chl são passados os tipo do grafico, valores, tamanho e labels

No link abaixo você encontra todas as informações necessárias para customizar seu gráfico e entender como funciona essa maravilhosa API da Google.

http://code.google.com/apis/chart/

Martinsrj · Abril 14, 2010

Felipe Antunes,

Repare no meu post anterior que disponibilizei um link da imagem do grafico e as barras não chegam até 220.

você tem como fazer um exemplo manualmente(que tenha acima de 9 categorias e acima de 250 unid.)?

Abraços.

Felipe Antunes · Abril 14, 2010

Pois é como eu disse, as barras não chegam a 220 pois o 220 e o titulo do grafico estão no mesmo "alinhamento"

pega o seu grafico e muda ele para 400pixeis de largura, acredito que assim funcionara.

Felipe Antunes,

Repare no meu post anterior que disponibilizei um link da imagem do grafico e as barras não chegam até 220.

você tem como fazer um exemplo manualmente(que tenha acima de 9 categorias e acima de 250 unid.)?

Abraços.

ivanferrer · Dezembro 13, 2010

Experimente fazer isso:

http://chart.apis.google.com/chart?chs=1000x300&cht=bvg&chco=4D89F9,C6D9FD,00FFFF&chd=t:30,0,0,22,10,0,156,10,33|10,0,20,0,0,122,0,5,0|0,0,0,0,0,0,0,0,0&chxl=0:|BAND|GLOBONEWS|RECORD|REDE%20GLOBO|REDE%20TV|SBT|TV%20ALERJ|TV%20BRASIL&chxt=x

Já pensou que o erro que você esta enfrentando possa ser a acentuação?

Se eu não me egano a API de CHAR do google nao aceita acentuação, faz o teste retirando a acentuação :P
Faz o seguinte Gutoffline, insere todas essas categorias:

BAND|GLOBONEWS|RECORD|REDE GLOBO|REDE TV|SBT|TV ALERJ|TV BRASIL|TV JUSTIÇA

Conforme eu mencionei no post anterior se eu colocar até umas 8 gategorias funciona normalmente, agora se eu colocar nove ou mais não funciona.

( BAND|GLOBONEWS|RECORD|REDE GLOBO|REDE TV|SBT|TV ALERJ|TV BRASIL|TV JUSTIÇA )
Cara aqui eu colei seu código desta maneira:
<html>
<head>
<title></title>

</head>

<body>
<img src="http://chart.apis.google.com/chart?chs=1000x300&cht=bvg&chco=4D89F9,C6D9FD,00FFFF&chd=t:30,0,0,22,10,0,156,10,33|10,0,20,0,0,122,0,5,0|0,0,0,0,0,0,0,0,0&chxl=0:|BAND|GLOBONEWS|RECORD|REDE GLOBO|REDE TV|SBT|TV ALERJ|TV BRASIL&chxt=x"/> 
</body>
</html>
e funcionou, o retorno foi o seguinte: http://linkaaa.com/mu0v

Você tentou criar com o arquivo acima(.html)?

xanburzum · Dezembro 13, 2010

olha este link

Arquivado

API do Google para gerar gráficos

Recommended Posts

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gutoffline 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felipe Antunes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felipe Antunes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felipe Antunes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ivanferrer 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante