http://code.google.c...pis/chart/#chdl
Minha intenção seria fazer uma Extensão , como sou iniciante e ainda tenho um longo caminho pela frente fica aqui a sugestão para quem tiver condição e achar interessante tal extensão.
A seguir Código Que utilizei , esta é uma das soluções mais simples mas existem outras formas inclusive utilizando o store que é o ideal .
O código a seguir foi feito a partir do exemplo Template do Ext
Ext.onReady(function(){
// Código Retirado do Site do Api do Google para codificação dos valores
var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
function simpleEncode(valueArray) {
var maxValue="400";
var chartData = ['s:'];
for (var i = 0; i < valueArray.length; i++) {
var currentValue = valueArray[i];
if (!isNaN(currentValue) && currentValue >= 0) {
chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
}
else {
chartData.push('_');
}
}
return chartData.join('');
}
// Dados Para Geração do Grafico Pode ser obtido através de um Store
var dados= {
result: [{
valor: simpleEncode([81,10,27]), // Array com Valores do Grafico para geração do Gráfico
legenda: '81|10|27', // Legenda Correspondendo aos valores a serem exibido na tela
rotulo: 'RJ|CE|BA', // Rótulo Correspondendo aos valores
Titulo:'Mes de Abril/2008' // Ttulo para o Gráfico
},{
valor: simpleEncode([62,23,47]),
legenda: '62|23|47',
rotulo: 'RJ|CE|BA',
Titulo:'Mes de Maio/2008'
},{
valor: simpleEncode([33,33,33]),
legenda: '33|33|33',
rotulo: 'RJ|CE|BA',
Titulo:'Mes de Junho/2008'
}]
};
////////////////////////////////////////////////////////////////////////////////////////////
// Template Com Função simpleEncode do Google ver API do Google Chart
var resultTpl = new Ext.XTemplate(
'<tpl for="result">',
'<div class="search-item">',
'<h3>Periodo:{Titulo}<br />',
'<br />',
'<img src="http://chart.apis.google.com/chart?cht=p3&chd={valor}&chs=320x150&chl={rotulo}&chdl={legenda}">',
'</div>',
'</tpl>'
);
//////////////////////////////////////////////////////////////////
// Painel
var panel = new Ext.Panel({
applyTo: 'search-panel',
title:'Gráfico de Compras por Estado',
height:300,
autoScroll:true,
border: true,
items: new Ext.DataView({
tpl: resultTpl,
itemSelector: 'div.search-item'
}),
});
resultTpl.overwrite(panel.body, dados);
});
Existem uma infinidade de Tipos de Gráficos, este exemplo como citei é um dos mais simples e serve como inicio para elaboração de algo mais complexo, por isso digo que acho interessante elaborar uma extensão, pois existem diversos opções que poderiam ser utilizadas alem da facilidade de utilização da API.
Abs.
