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.