<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>CucaDigital.com.br &#187; Google Chart API</title>
	<atom:link href="http://www.cucadigital.com.br/tag/google-chart-api/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cucadigital.com.br</link>
	<description>Tecnologia e conhecimento</description>
	<lastBuildDate>Thu, 13 May 2010 17:07:47 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Gerando gráficos com o Google Chart API</title>
		<link>http://www.cucadigital.com.br/2009/01/19/gerando-graficos-com-o-google-chart-api/</link>
		<comments>http://www.cucadigital.com.br/2009/01/19/gerando-graficos-com-o-google-chart-api/#comments</comments>
		<pubDate>Tue, 20 Jan 2009 00:09:19 +0000</pubDate>
		<dc:creator>Claudney</dc:creator>
				<category><![CDATA[Dicas]]></category>
		<category><![CDATA[Programação]]></category>
		<category><![CDATA[Tecnologia]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Google Chart API]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.cucadigital.com.br/?p=72</guid>
		<description><![CDATA[Geração de gráficos com Google Chart API]]></description>
			<content:encoded><![CDATA[<div class="postavatar"><img src="http://www.cucadigital.com.br/wp-content/uploads/icons/icon_b.png"  alt="gerando-graficos-com-o-google-chart-api" /></div>
<p>A API do Google Chart permite você gerar gráficos dinamicamente sem ter que instalar nenhum pacote adicional em seu aplicativo ou servidor.</p>
<p>E tem grandes facilidados como: Não precisa gerar XML ou alimentar Javascripts para gerar os gráficos.</p>
<p>É necessario somente uma imagem, uma imagem???</p>
<p><span id="more-72"></span><br />
Vou explicar melhor basta utilizar uma tag "IMG" com a propriedade "SRC" apontando para a api do goolgle com os devidos parametros preenchidos, facil d+.</p>
<p>Segue alguns exemplos retirados da propria documentação da API.</p>
<pre class="html4strict"><span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #fff; font-weight: bold;">&lt;img</span></a> <span style="color: #c0c0c0;">src</span>=<span style="color: #ff0000;">&quot;http://chart.apis.google.com/chart?cht=p3
&amp;amp;chd=t:60,40
&amp;amp;chs=250x100
&amp;amp;chf=a,s,efefeff0
&amp;amp;chl=Hello|World&quot;</span> <span style="color: #c0c0c0;">alt</span>=<span style="color: #ff0000;">&quot;&quot;</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></span></pre>
<p style="text-align: center;"><img title="hello world" src="http://chart.apis.google.com/chart?cht=p3&amp;bg=a&amp;chd=t:60,40&amp;chs=250x100&amp;chl=Hello|World&amp;chf=a,s,efefeff0" alt="" width="250" height="100" /></p>
<pre class="html4strict"><span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #fff; font-weight: bold;">&lt;img</span></a> <span style="color: #c0c0c0;">src</span>=<span style="color: #ff0000;">&quot;http://chart.apis.google.com/chart?cht=bhs
&amp;amp;chco=ff0000|00ff00|0000ff
&amp;amp;chs=200x125
&amp;amp;chd=s:elo
&amp;amp;chxt=x,y
&amp;amp;chxl=1:|Dec|Nov|Oct|0:||20K||60K||100K|&quot;</span> <span style="color: #c0c0c0;">alt</span>=<span style="color: #ff0000;">&quot;&quot;</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></span></pre>
<p style="text-align: center;"><img src="http://chart.apis.google.com/chart?cht=bhs&amp;chco=ff0000|00ff00|0000ff&amp;chs=200x125&amp;chd=s:elo&amp;chxt=x,y&amp;chxl=1:|Dec|Nov|Oct|0:||20K||60K||100K|" alt="" width="200" height="125" /></p>
<p style="text-align: center;">
<p style="text-align: center;"><img src="http://chart.apis.google.com/chart?cht=s&amp;chd=s:pqokeYONOMEPOQVTXZdeca,Zcglprqxuuxztpoonkeggjp&amp;chls=4.0,3.0,0.0&amp;chs=200x125&amp;chxt=x,y&amp;chxl=0:|Jun|July|Aug|1:||20|30|40|50&amp;chf=a,s,efefeff0" alt="" width="200" height="125" /></p>
<p>abaixo segue outros exemplos personalizados:</p>
<p>Gráfico de Barras com Labels foi alterado as cores com a propriedade CHCO, e os Labels em CHM.</p>
<pre class="html4strict"><span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #fff; font-weight: bold;">&lt;img</span></a> <span style="color: #c0c0c0;">src</span>=<span style="color: #ff0000;">&quot;http://chart.apis.google.com/chart?cht=bhs
&amp;amp;chd=t:4,5,9,33,8,2,21,19,0
&amp;amp;chs=430x270&amp;amp;chm=t%20%201%C2%BA%20Grau%20Incompleto%20(4%),000000,0,0,13|t%20%201%C2%BA%20Grau%20Completo%20(5%),000000,0,1,13|t%20%202%C2%BA%20Grau%20Incompleto%20(9%),000000,0,2,13|t%20%202%C2%BA%20Grau%20Completo%20(33%),000000,0,3,13|t%20%20P%C3%B3s-Gradua%C3%A7%C3%A3o%20(8%),000000,0,4,13|t%20%20Mestrado%20(2%),000000,0,5,13|t%20%20Superior%20Incompleto%20(21%),000000,0,6,13|t%20%20Superior%20Completo%20(19%),000000,0,7,13|t%20%20Doutorado%20(0%),000000,0,8,13
&amp;amp;chco=008B8B|00ff00|1E90FF|3CB371|7FFF00|B0E0E6|6495ED|1E90FF|4682B4&quot;</span> <span style="color: #c0c0c0;">alt</span>=<span style="color: #ff0000;">&quot;&quot;</span> /<span style="color: #fff; font-weight: bold;">&gt;</span></span></pre>
<p style="text-align: center;"><img class="aligncenter" src="http://chart.apis.google.com/chart?cht=bhs&amp;chd=t:4,5,9,33,8,2,21,19,0&amp;chs=430x270&amp;chm=t%20%201%C2%BA%20Grau%20Incompleto%20(4%),000000,0,0,13|t%20%201%C2%BA%20Grau%20Completo%20(5%),000000,0,1,13|t%20%202%C2%BA%20Grau%20Incompleto%20(9%),000000,0,2,13|t%20%202%C2%BA%20Grau%20Completo%20(33%),000000,0,3,13|t%20%20P%C3%B3s-Gradua%C3%A7%C3%A3o%20(8%),000000,0,4,13|t%20%20Mestrado%20(2%),000000,0,5,13|t%20%20Superior%20Incompleto%20(21%),000000,0,6,13|t%20%20Superior%20Completo%20(19%),000000,0,7,13|t%20%20Doutorado%20(0%),000000,0,8,13&amp;chco=008B8B|00ff00|1E90FF|3CB371|7FFF00|B0E0E6|6495ED|1E90FF|4682B4" alt="Gráfico de Barras" width="430" height="270" /></p>
<p>Uma das grandes vantagens é que você não precisa instalar nenhum framework ou javascript em seu site.</p>
<p>Mas com isso tem a desvantagem para utilização em intranet's e computadores que não tenham acesso a internet.</p>
<p style="text-align: left;">Existe uma documentação bem detalhada e com mais exemplos na documentação da api: <a href="http://code.google.com/intl/pt-BR/apis/chart/">http://code.google.com/intl/pt-BR/apis/chart/</a>.</p>
<p style="text-align: center;"><cite>Há para quem vive reclamendo que tudo e em inglês está tem tradução para português.</cite></p>
<div style='display:none' id="post-refEl-72"></div>]]></content:encoded>
			<wfw:commentRss>http://www.cucadigital.com.br/2009/01/19/gerando-graficos-com-o-google-chart-api/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
