<?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>Zamana.eti.br &#187; dados tabulados</title>
	<atom:link href="http://www.zamana.eti.br/blog/tag/dados-tabulados/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.zamana.eti.br/blog</link>
	<description>Just my Blog</description>
	<lastBuildDate>Thu, 24 Jun 2010 16:21:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=abc</generator>
		<item>
		<title>Gráficos com uma ajuda</title>
		<link>http://www.zamana.eti.br/blog/2008/03/01/graficos-com-uma-ajuda/</link>
		<comments>http://www.zamana.eti.br/blog/2008/03/01/graficos-com-uma-ajuda/#comments</comments>
		<pubDate>Sun, 02 Mar 2008 01:34:40 +0000</pubDate>
		<dc:creator>Rafael Zamana</dc:creator>
				<category><![CDATA[Desenvolvimento]]></category>
		<category><![CDATA[Dicas]]></category>
		<category><![CDATA[Ferramentas]]></category>
		<category><![CDATA[classes]]></category>
		<category><![CDATA[api]]></category>
		<category><![CDATA[chart]]></category>
		<category><![CDATA[colunas]]></category>
		<category><![CDATA[dados tabulados]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[gráfico]]></category>
		<category><![CDATA[gráfico de colunas]]></category>

		<guid isPermaLink="false">http://www.zamana.eti.br/wp/2008/03/01/graficos-com-uma-ajuda/</guid>
		<description><![CDATA[Desenvolvendo um site, me deparei com o seguinte problema: &#8220;Isto daqui exige um gráfico de barras para uma melhor visualização&#8221; Mas&#8230; Como? Não sou conhecedor da biblioteca GD e não poderia fazer cada gráfico na mão (:S) Então me lembrei que o meu grande amigo DGMike tinha me falado que o Google tinha uma API [...]]]></description>
			<content:encoded><![CDATA[<link rel="stylesheet" href="http://www.zamana.eti.br/blog/wp-content/plugins/flickrimageman/flickrimageman.css" type="text/css" media="screen" /><p>Desenvolvendo um site, me deparei com o seguinte problema:</p>
<p>&#8220;<em><strong>Isto daqui exige um gráfico de barras para uma melhor visualização</strong></em>&#8221;</p>
<p>Mas&#8230; Como?</p>
<p>Não sou conhecedor da biblioteca GD e não poderia fazer cada gráfico na mão (:S)</p>
<p>Então me lembrei que o meu grande amigo <a href="http://dgmike.wordpress.com" title="Meu grande amigo" target="_blank">DGMike</a> tinha me falado que o <a href="http://code.google.com/apis/chart/" title="Google Chart" target="_blank">Google</a> tinha uma API pronta para fazer gráficos (uma enorme variedade de tipos, diga-se de passagem), me lembro também que tinha me deparado com alguns erros (de minha parte) para conseguir implementá-la.</p>
<p><span id="more-12"></span></p>
<p>Mas como dinheiro não se ganha fácil (:P)</p>
<p>Decidi que era hora de aprender. O meu simples relato aqui é simplesmente para mostrar as outras pessoas a dificuldade que eu encontrei e como eu solucionei cada uma delas.</p>
<p>Em primeiro lugar, vamos a tabela (calma gente&#8230; São dados tabulados&#8230; Logo, não precisa ter medo):</p>
<table height="175" width="412">
<thead>
<td>Cor</td>
<td>Dados</td>
<td>Valores</td>
</thead>
<tbody>
<tr>
<td><font color="#d33153">#d33153</font></td>
<td>Dado 1</td>
<td>108</td>
</tr>
<tr>
<td><font color="#3f7ef3">#3f7ef3</font></td>
<td>Dado 2</td>
<td>61</td>
</tr>
<tr>
<td><font color="#cc2a94">#cc2a94</font></td>
<td>Dado 3</td>
<td>2714</td>
</tr>
<tr>
<td><font color="#13a737">#13a737</font></td>
<td>Dado 4</td>
<td>119</td>
</tr>
<tr>
<td><font color="#a4cd33">#a4cd33</font></td>
<td>Dado 5</td>
<td>200</td>
</tr>
<tr>
<td><font color="#4f5610">#4f5610</font></td>
<td>Dado 6</td>
<td>65</td>
</tr>
<tr>
<td><font color="#840d29">#840d29</font></td>
<td>Dado 7</td>
<td>1526</td>
</tr>
<tr>
<td><font color="#1d529d">#1d529d</font></td>
<td>Dado 8</td>
<td>124</td>
</tr>
</table>
<p>Essa primeira coluna, é somente para poder demonstrar no gráfico a qual coluna ela corresponde.</p>
<p>O primeiro problema que eu encontrei foi a transformação de valores, issu mesmo, você não passa esses valores para o Google desse jeito.</p>
<p>Os valores: (A = 0 &gt; Z = 25, a= 26 &gt; z = 51, 0 = 52 &gt; 9 = 61), pode parecer estranho (mas é), mas graças ao <a href="http://james.cridland.net/code/google-chart.html" title="Chart Value for PHP" target="_blank">James Cridland</a>, acabei encontrando um conversor para PHP.</p>
<p>O problema seguinte foi alterar a função chart_data() dele. Pois o mesmo concatenava os valores e não separando eles por &#8216;,&#8217; (le-se virgula). Com esse problema, o Google achava que todos os dados vinham de apenas um local, ou seja, era o mesmo correspondente mas em periodos diferentes.</p>
<p>Com issu arrumado, o problema das cores para cada coluna ficou fácil&#8230;</p>
<p>De passagem o gráfico ficou assim (Ainda usando o Google Chart):</p>
<p><img src="http://chart.apis.google.com/chart?&amp;cht=bvg&amp;chs=400x300&amp;chbh=30&amp;chd=s:C,B,9,C,E,B,i,C&amp;chco=d33153,3f7ef3,cc2a94,13a737,a4cd33,4f5610,840d29,1d529d&amp;chxt=y&amp;chxl=0:|0|2714" alt="Google Chart" height="300" width="400" /></p>
<p>Vendo o codigo:</p>
<pre>

http://chart.apis.google.com/chart?</pre>
<pre>&amp;cht=bvg</pre>
<pre>&amp;chs=500x300</pre>
<pre>&amp;chbh=30</pre>
<pre>&amp;chd=s:C,B,9,C,E,B,i,C</pre>
<pre>&amp;chco=d33153,3f7ef3,cc2a94,13a737,a4cd33,4f5610,840d29,1d529d</pre>
<pre>&amp;chxt=y</pre>
<pre>&amp;chxl=0:|0|2714</pre>
<p>Explicando cada parte desse código:</p>
<p>cht &#8211; é o tipo de gráfico que vc deseja, no caso acima colunas;</p>
<p>chs &#8211; é o tamanho da imagem, &lt;width&gt;x&lt;height&gt; (no meu caso as colunas não ocuparam tudo);</p>
<p>chbh &#8211; é o tamanho de cada coluna;</p>
<p>chd &#8211; (essa é a parte complicada) São os valores, sendo que o &#8216;s:&#8217; significa que são dados simplificados (issu mesmo&#8230; existe o extendido&#8230; sem comentários), aqui eles estão separados por virgula&#8230; Facilitando colocar as cores depois;</p>
<p>chco &#8211; São as cores de cada coluna, separada por virgula</p>
<p>chxt &#8211; Indica quais <em>axis</em> eu preciso, no caso somente o y</p>
<p>chxtl &#8211;  Coloca o label para o axis especificado.</p>
<p>Por enquanto é isso.</p>
<p>Ainda estou desenvolvendo o componente, mas espero que futuramente eu coloque mais sobre isso.</p>
<p><strong>update:</strong> Decidi tomar vergonha na cara (:D) e estou implementando uma classe para fazer todo esse serviço sujo&#8230; Óbvio que eu vou postar aqui&#8230; xD</p>
<p><strong>update-1</strong>: Passeando pela internet e pensando como resolver isso, encontrei a seguinte Classe para PHP. Autoria do Malaiac. <a href="http://www.malaiac.com/GphpChart/" title="Google Chart API Class for PHP" target="_blank">link</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.zamana.eti.br/blog/2008/03/01/graficos-com-uma-ajuda/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 0.312 seconds -->
