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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

<mx:Script>
	<![CDATA[
		import mx.utils.ObjectProxy;
		import mx.core.Application;
		import mx.utils.ObjectUtil;
		import mx.rpc.events.FaultEvent;
		import mx.rpc.events.ResultEvent;
		import mx.collections.ArrayCollection;
 
		//ArrayCollection que será o DataProvider do Repeater
		[Bindable]
		private var arDadosGraficoTotal:ArrayCollection = new ArrayCollection();
 
		private function load():void
		{
			var arDadosGrafico:ArrayCollection;
			var obDadosGrafico:ObjectProxy;
 
			//Gráfico 1
			//arDadosGrafico recebe um novo ArrayCollection
			arDadosGrafico = new ArrayCollection(); 
			//obDadosGrafico recebe um novo ObjectProxy
			obDadosGrafico = new ObjectProxy();
			//Cria a propriedade data1 e atribiu o 10, data1 será uma série no gráfico
			obDadosGrafico.data1 = 10;
			//Cria a propriedade data2 e atribiu o 5, data2 será outra série no gráfico
			obDadosGrafico.data2 = 05;
			//Cria a propriedade label e atribiu 'Jan', label será o eixo X do gráfico
			obDadosGrafico.label = 'Jan';			
			//Cria a propriedade titulo e atribiu 'Vendas', titulo será o titulo do gráfico, só existirá essa propriedade no primeiro ObjectProxy
			obDadosGrafico.titulo = 'Vendas';	
			//Adiciona o ObjectProxy obDadosGrafico ao ArrayCollection arDadosGrafico	
			arDadosGrafico.addItem(obDadosGrafico);
 
			//obDadosGrafico recebe um novo ObjectProxy e receberá os mesmas propriedades porém com valores distintos e também é inserido ao ArrayCollection arDadosGrafico
			obDadosGrafico = new ObjectProxy();
			obDadosGrafico.data1 = 05;
			obDadosGrafico.data2 = 05;
			obDadosGrafico.label = 'Fev';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			obDadosGrafico = new ObjectProxy();
			obDadosGrafico.data1 = 03;
			obDadosGrafico.data2 = 05;
			obDadosGrafico.label = 'Mar';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			obDadosGrafico = new ObjectProxy();
			obDadosGrafico.data1 = 06;
			obDadosGrafico.data2 = 05;
			obDadosGrafico.label = 'Abr';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			//Quando terminam os pontos do gráfico é necessário inserir o ArrayCollection arDadosGrafico ao ArrayCollection arDadosGraficoTotal			
			arDadosGraficoTotal.addItem(arDadosGrafico);	
 
			//Os passos anteriores devem ser feitos para cada gráfico que se deseja exibir no Dashboard, abaixo estão identificos como Gráfico 2 e Gráfico 3
			//Gráfico 2
			arDadosGrafico = new ArrayCollection(); 
			obDadosGrafico = new ObjectProxy();
			obDadosGrafico.data1 = 07;
			obDadosGrafico.data2 = 02;
			obDadosGrafico.label = 'Jan';			
			obDadosGrafico.titulo = 'Custos';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			obDadosGrafico = new ObjectProxy();
			obDadosGrafico.data1 = 08;
			obDadosGrafico.data2 = 02;
			obDadosGrafico.label = 'Fev';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			obDadosGrafico = new ObjectProxy();
 
 
 
 
			obDadosGrafico.data1 = 05;
			obDadosGrafico.data2 = 02;
			obDadosGrafico.label = 'Mar';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			obDadosGrafico = new ObjectProxy();
			obDadosGrafico.data1 = 04;
			obDadosGrafico.data2 = 02;
			obDadosGrafico.label = 'Abr';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			arDadosGraficoTotal.addItem(arDadosGrafico);	
 
			//Gráfico 3
			arDadosGrafico = new ArrayCollection(); 
			obDadosGrafico = new ObjectProxy();
			obDadosGrafico.data1 = 10;
			obDadosGrafico.data2 = 08;
			obDadosGrafico.label = 'Jan';			
			obDadosGrafico.titulo = 'Produção';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			obDadosGrafico = new ObjectProxy();
			obDadosGrafico.data1 = 12;
			obDadosGrafico.data2 = 08;
			obDadosGrafico.label = 'Fev';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			obDadosGrafico = new ObjectProxy();
			obDadosGrafico.data1 = 06;
			obDadosGrafico.data2 = 08;
			obDadosGrafico.label = 'Mar';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			obDadosGrafico = new ObjectProxy();
			obDadosGrafico.data1 = 08;
			obDadosGrafico.data2 = 08;
			obDadosGrafico.label = 'Abr';			
			arDadosGrafico.addItem(obDadosGrafico);
 
			arDadosGraficoTotal.addItem(arDadosGrafico);	
 
			//Ao terminado de incluir todos os arDadosGrafico ao arDadosGraficoTotal, é necessário declarar arDadosGraficoTotal como dataProvider do repeater
			rpGrafico.dataProvider = arDadosGraficoTotal;	
		}		
 
	]]>
</mx:Script>

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.

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).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<mx:Tile left="10" right="10" top="10" bottom="10" direction="horizontal">
	<mx:Repeater id="rpGrafico" width="100%">
	<mx:Panel width="250" height="200" layout="absolute" id="pnGrafico" title="{rpGrafico.currentItem.getItemAt(0).titulo}">
		<mx:LineChart id="grIndicador" dataTipMode="single" showDataTips="true" dataProvider="{rpGrafico.currentItem}" width="95%" height="95%" horizontalCenter="0" verticalCenter="0">
			<mx:horizontalAxis>
       			<mx:CategoryAxis categoryField="label" />           			
    		</mx:horizontalAxis>  	           								
			<mx:verticalAxis>
				<mx:LinearAxis baseAtZero="false"/>
			</mx:verticalAxis>  	           								
			<mx:series>			
           		<mx:LineSeries form="segment" yField="data2" displayName="Meta"/>
 
           		<mx:LineSeries form="segment" yField="data1" displayName="Indicador Técnico"/>
			</mx:series>
		</mx:LineChart>
	</mx:Panel>
	</mx:Repeater>
</mx:Tile>

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:

1

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="load();">

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:

1

<mx:Legend dataProvider="{grIndicador[0]}" bottom="10" left="10" right="10" height="25"/>

Divirta-se!


Quem leu esse post, também leu...
  1. Decisões corretas através de dashboards dinâmicos em Flex e ASP.NET MVC
  2. Adobe Flex: Trocar de figura no DataGrid de acordo com o DataProvider
  3. Gráfico Cascata (Waterfall Chart aka Flying Bricks Chart) no Flex
  4. Adobe Flex: Gráfico de Velocímetro (Gauge)
  5. Modelo de consultas e relatórios ad-hoc no Adobe Flex
  6. Vários exemplos de gráficos em Flex
  7. Os 45 tutoriais de Adobe Flex mais procurados
  8. Mudar ícone do botão no Flex em tempo de execução
  9. Travar a seleção de datas anteriores a hoje no Flex
  10. Configurar o layout com CSS das aplicações Adobe Flex