Estou desenvolvendo um modelo de Dashboard de Indicadores de Performace (KPI) utilizando o Adobe Flex, Asp.NET e SQL Server 2000.

Neste Dashboard eu precisava exibir vários gráficos de acordo com o perfil de cada usuário, por isso, construir um modelo fixo não seria possível. Então busquei maneiras de fazer isso utilizando o mx:Tile e o mx:Repeater.

Na busca encontrei apenas um exemplo de Datagrid em um Repeater, com isso foi possível construir o modelo para utilizar com Gráficos.

Primeiro é preciso entender a estrutura de DataProvider necessário para que a tudo funcione como o esperado.

Como na figura acima, o DataProvider é um ArrayCollection composto de um ArrayCollection para cada gráfico que será exibido no repeater, cada um desse segundo ArrayCollection é composto por objetos que serão os pontos dos gráficos.

Abaixo está o código responsável pela configuração do ArrayCollection, que será o DataProvider do mx:Repeater.


	

Abaixo está o código necessário para exibir os gráficos, inicialmente foi utilizado um Tile e dentro um Repeater. Dentro do Repeater há um Panel e dentro do Panel está o gráfico que deve ser exibido de acordo com o dataProvider.

Como demonstrado acima, o dataProvider é associado ao término da função load(), após a associação, o Repeater começará a renderizar o primeiro gráfico, e já no título do Panel o valor atribuído será a propriedade titulo definida no primeiro objeto do arDadosGrafico.

Para isso é utilizada a instrução: {rpGrafico.currentItem.getItemAt(0).titulo}, ou seja, rpGrafico é o Repeater, a propriedade currentItem contém o arDadosGrafico do laço em questão e getItemAt(0) assegura que só buscará a propriedade titulo no primeiro objeto dentro do arDadosGrafico.

Para o gráfico, só resta associar um dataProvider a ele para que sejam exibidos os seus pontos. O dataProvider em questão será o currentItem do Repeater rpGrafico, pois como dito acima, a propriedade currentItem contém o arDadosGrafico do laço em questão.

[like-gate]No eixo X, horizontalAxis, é definido label como o campo fonte dos dados. No eixo Y, verticalAxis, está configurado para não começar em zero. Logo abaixo estão as duas séries, uma para o data1 (Indicador Técnico) e outra para data2 (Meta).


	
	
		
			
       			
    		
			
				
			
			
           		

           		
			
		
	
	

Antes de executar o projeto e ver tudo funcionando legal, é necessário adicionar o código abaixo na segunda linha do código dentro da tag mx:Application

creationComplete=”load()”

Deixando-a assim:


Execute o projeto, você deve obter um resultado igual a imagem abaixo.



Clique na figura para ampliar.

Complementando…

O José Augusto comentou que estava com dificuldades em incluir a legenda aos gráficos internos do repeater.

Para incluir as legendas basta adicionar logo após o gráfico o código abaixo:



[/like-gate] Divirta-se!

About Author

You may also like

5 Response Comments

  • José Augusto  20/10/2008 at 10:33

    Parabéns!!!

    Ficou muito 10 seu exemplo. Se puder me ajudar, estou me batendo em colocar as legendas…

    Obrigado.

    Responder
  • Igor Musardo  20/10/2008 at 11:03

    Obrigado pelo Feedback José Augusto,

    Qual está sendo sua dificuldade em incluir as legendas no repeater?

    Abraços,
    Igor Musardo

    Responder
  • José Augusto  20/10/2008 at 17:43

    Opa, valew pela atenção, sou novato ainda e estou começando a aprender a mexer com gráficos no Flex…
    Estou tentando montar uma rotina para utilizar gráficos com vários retornos de HttpService, e até que estou me saindo bem, meio engessado devido a falta de conhecimento, porém caminhando bem. Minha dificuldade esta em relacionar o DataProvider corretamente, já tentei de diversas formas e não acertei em nenhuma, vou postar o trecho:

    Mais uma vez agradeço pela atenção.

    Obrigado.

    Responder
  • Eduardo Armstrong Correnti  09/11/2009 at 12:38

    Muito bom Igor!! parabéns pelos exemplos

    Responder
    • Igor Musardo  09/11/2009 at 13:26

      Obrigado meu irmão, precisando é só entrar em contato.

      Responder

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter a message.

Time limit is exhausted. Please reload CAPTCHA.