API do Google para gerar gráficos

Martinsrj · Abril 7, 2010

Link do Fórum Imasters:

http://forum.imasters.uol.com.br/index.php...gerar-gráficos/

Olá campeão, 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&amp;cht=p3&amp;chtt=Grafico Midia&amp;chd=s:CDDEFH,Wps679&amp;chco=ff0000,0000ff&amp;chdl=sales|visits&amp;chxl=0:|jan|feb|mar|apr|may|jun|&amp;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 o teste manualmente e não dinamico.

<%
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&amp;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>

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...ficogoogle2.jpg

Existe alguma solução?

Achei os gráficos gerados pelo Google (http://brunoamarelo.wordpress.com/2008/05/15/api-do-google-para-gerar-gráficos/) muito mais bonito que a do próprio ASP: OWC11.ChartSpace

Desde já agradeço.

bareta · Abril 8, 2010

não aceita Ç

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%20JUSTICA&chxt=x

Martinsrj · Abril 9, 2010

Essa foi violento... nunca iria imaginar que o problema era o Ç.... rsrsrsr :D

Fiz um pequeno ajuste colocando dessa forma:

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

não aceita Ç

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%20JUSTICA&chxt=x

bareta · Abril 9, 2010

kkkkkkkkkkkkkkkk, muito bom esses gráfico.. mais cliente sem Ç é encomodação.

Martinsrj · Abril 9, 2010

Não entendi a intenção do Poderoso Google a esse respeito... rsrsrsr

Valeu aí Bareta pela descoberta. :D

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...ficogoogle3.png

Abraços.

Paulo Martins.

kkkkkkkkkkkkkkkk, muito bom esses gráfico.. mais cliente sem Ç é encomodação.

Editado Abril 9, 2010 por Martinsrj

bareta · Abril 12, 2010

você já definiu a faixa de valores para y?

Martinsrj · Abril 13, 2010

Sim, veja:

<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&chxp=1,20,40,60,80,100,120,140,160 "/>

Aqui coloquei no maximo 160, mas necessito que vá até 300.

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...ficogoogle4.png

Escrive em duas colunas do grafico 321 e a outra 156, repare que a barra vai até 200, porem coloquei até 220.

você já definiu a faixa de valores para y?

Editado Abril 13, 2010 por Martinsrj

bareta · Abril 13, 2010

referente as legendas é:

a doicumentação dele é bem chata... o que tre recomendo fazer é...

pegue a documentação de seu gráfico e vá implementado item a item da documentação...

porque realmente é triste essa parte dos valor nas legendas

bareta · Abril 14, 2010

ontem tive analisando o sistema dos gráficos...

todos os valores que ele trabalha pelo que entendi são porcentagem...

100/200/300/400 sai tudo igual. no caso do gráfico de barras, os valores de y correspondem de 0 a 100%

Entrar

API do Google para gerar gráficos

Pergunta

Martinsrj

Link para o comentário

Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

bareta

Link para o comentário

Compartilhar em outros sites

Martinsrj

Link para o comentário

Compartilhar em outros sites

bareta

Link para o comentário

Compartilhar em outros sites

Martinsrj

Link para o comentário

Compartilhar em outros sites

bareta

Link para o comentário

Compartilhar em outros sites

Martinsrj

Link para o comentário

Compartilhar em outros sites

bareta

Link para o comentário

Compartilhar em outros sites

bareta

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades