Adobe Flex – Como colocar gráficos em repeater

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!