Chris B. – idéias e pensamentos

Não tem jeito mais simples de inserir um gráfico na sua página do que usando a API do Google Charts.

E se você usa Prototype, para facilitar ainda mais tem esse plugin que transforma a inserção muito mais clara!

Só é necessário incluir os .js da Prototype e do próprio plugin:

<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”GoogleChartAPI.prototype.js”></script>

instanciar o objeto da classe GoogleChart e usar os métodos adequados (escolhendo o tipo de gráfico, dados, label, etc…):

var g=new GoogleChart();
g.init(‘chart-01′); //Target Div ID
g.setChartType(‘p3′);
g.setChartTitle(‘Pie Chart Example’);
g.setChartSize(‘450×140′);
g.setChartColors(‘FFFF00,000066,0000cc,0000ff’);
g.setChartData([[10,15,25,50]]);
g.setLabels(‘Data 1 (10%) | Data 2 (15%) | Data 3 (25%) | Data 4 (50%)’);
g.drawChart();

sem se esquecer de incluir uma div com o mesmo id definido no parâmetro enviado para o método init():

<div id=”chart-01″></div>

Simples!

Obs.: escrevi esse post algum tempo atrás sobre a API do Google Chart

Posts relacionados

• Novo release da Prototype e atualização da Scriptaculous – agora scripty2 (2)
• Como pegar dimensões da janela e da barra de rolagem por javascript (1)
• Prototype Cheat Sheet (1)
• Javascript Cheat Sheet (4)
• Prototype Plugins (4)

This entry was posted on quarta-feira, abril 29th, 2009 at 22:55 and is filed under javascript, web 2.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.