Ir para conteúdo


Foto

Grafico - utilizando API do Google Chart com ExtJs


  • Por favor, faça o login para responder
5 respostas neste tópico

#1 Juliano.coelho

Juliano.coelho

    Member Avançado

  • Membros
  • PipPipPip
  • 532 posts
  • LocationPetropolis - RJ

Postado 17 October 2008 - 12:20

Sei que muitas vezes precisamos de Gráficos e já vi gente perguntando se o Ext possui determinada função, Como o Ext não possui este componente utilizei uma solução super simples que foi utilizar a "API do Google Chart". Para quem não conhece ou quem pretende utilizar a mesma aconselho ler o Guia do Desenvolvedor do Google charts (Em Portugues).

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.



Juliano Coelho

#2 Bruno Tavares

Bruno Tavares

    Member Avançado

  • Membros
  • PipPipPip
  • 1166 posts
  • LocationRedwood City, CA, USA

Postado 17 October 2008 - 17:13

Criando gráficos com EXT e Google Visualization
Bruno Tavares, Sr. UI Engineer
Netflix

#3 Fernando Jorge Mota

Fernando Jorge Mota

    Member Avançado

  • Membros
  • PipPipPip
  • 70 posts

Postado 07 December 2008 - 19:56

Cara , recomendo o FusionCharts , tem versão gratuita e cria gráficos mais bonitos.
Acessem meu Blog: http://www.blogueirosnaweb.com
Adicionem [RESOLVIDO] no titulo to Tópico se este for respondido.
Coloquem Códigos entre as tags code(ou clique no botão #) e e dê preferência a mostrar ele todo,Para ajudar-nos a resolver seu problema

#4 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 08 December 2008 - 22:30

Tbm recomendo o FusionCharts ou Open Flash

e tem plugin pronto pra isso sim

http://extjs.com/for...ead.php?t=32434

#5 Bruno Tavares

Bruno Tavares

    Member Avançado

  • Membros
  • PipPipPip
  • 1166 posts
  • LocationRedwood City, CA, USA

Postado 09 December 2008 - 07:03

Cara, apoio o desenvolvimento. Apesar de já termos opções como apresentadas anteriormente penso que quanto mais funcionalidades dispormos melhor. A possibilidade de querer criar gráficos com Ext e optar por Fusion Charts, Open Flash ou Google Chart API é fantástica. Infelizmente não posso contribuir por falta de tempo mas disponho de um tempinho sempre que precisar  ;)

O que difere simples frameworks de frameworks completos é as inúmeras implementações que ele possui. No nosso caso, para criar gráficos com Ext poderemos contar com 3 opções (e tem mais...).
Bruno Tavares, Sr. UI Engineer
Netflix

#6 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 09 December 2008 - 15:32

Eu acho que a parte do ext que manipula e mostra os graficos ja esta bom
porque na verdade a maioria dos graficos sao feitos em flash

e fora os 3 populares tem muitos outros




0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos