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.
Nesse 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ária para que 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.
<mx:Script><br /> <![CDATA[<br /> import mx.utils.ObjectProxy;<br /> import mx.core.Application;<br /> import mx.utils.ObjectUtil;<br /> import mx.rpc.events.FaultEvent;<br /> import mx.rpc.events.ResultEvent;<br /> import mx.collections.ArrayCollection;<br /> <br /> //ArrayCollection que será o DataProvider do Repeater<br /> [Bindable]<br /> private var arDadosGraficoTotal:ArrayCollection = new ArrayCollection();<br /> <br /> private function load():void<br /> {<br /> var arDadosGrafico:ArrayCollection;<br /> var obDadosGrafico:ObjectProxy;<br /> <br /> //Gráfico 1<br /> //arDadosGrafico recebe um novo ArrayCollection<br /> arDadosGrafico = new ArrayCollection(); <br /> //obDadosGrafico recebe um novo ObjectProxy<br /> obDadosGrafico = new ObjectProxy();<br /> //Cria a propriedade data1 e atribiu o 10, data1 será uma série no gráfico<br /> obDadosGrafico.data1 = 10;<br /> //Cria a propriedade data2 e atribiu o 5, data2 será outra série no gráfico<br /> obDadosGrafico.data2 = 05;<br /> //Cria a propriedade label e atribiu 'Jan', label será o eixo X do gráfico<br /> obDadosGrafico.label = 'Jan'; <br /><br />//Cria a propriedade titulo e atribiu 'Vendas', titulo será o titulo do<br />gráfico, só existirá essa propriedade no primeiro ObjectProxy<br /> obDadosGrafico.titulo = 'Vendas'; <br /> //Adiciona o ObjectProxy obDadosGrafico ao ArrayCollection arDadosGrafico <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /><br />//obDadosGrafico recebe um novo ObjectProxy e receberá os mesmas<br />propriedades porém com valores distintos e também é inserido ao<br />ArrayCollection arDadosGrafico<br /> obDadosGrafico = new ObjectProxy();<br /> obDadosGrafico.data1 = 05;<br /> obDadosGrafico.data2 = 05;<br /> obDadosGrafico.label = 'Fev'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /> obDadosGrafico = new ObjectProxy();<br /> obDadosGrafico.data1 = 03;<br /> obDadosGrafico.data2 = 05;<br /> obDadosGrafico.label = 'Mar'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /> obDadosGrafico = new ObjectProxy();<br /> obDadosGrafico.data1 = 06;<br /> obDadosGrafico.data2 = 05;<br /> obDadosGrafico.label = 'Abr'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /><br />//Quando terminam os pontos do gráfico é necessário inserir o<br />ArrayCollection arDadosGrafico ao ArrayCollection arDadosGraficoTotal <br /> arDadosGraficoTotal.addItem(arDadosGrafico); <br /> <br /><br />//Os passos anteriores devem ser feitos para cada gráfico que se deseja<br />exibir no Dashboard, abaixo estão identificos como Gráfico 2 e Gráfico 3<br /> //Gráfico 2<br /> arDadosGrafico = new ArrayCollection(); <br /> obDadosGrafico = new ObjectProxy();<br /> obDadosGrafico.data1 = 07;<br /> obDadosGrafico.data2 = 02;<br /> obDadosGrafico.label = 'Jan'; <br /> obDadosGrafico.titulo = 'Custos'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /> obDadosGrafico = new ObjectProxy();<br /> obDadosGrafico.data1 = 08;<br /> obDadosGrafico.data2 = 02;<br /> obDadosGrafico.label = 'Fev'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /> obDadosGrafico = new ObjectProxy();<br /> <br /> <br /> <br /> <br /> obDadosGrafico.data1 = 05;<br /> obDadosGrafico.data2 = 02;<br /> obDadosGrafico.label = 'Mar'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /> obDadosGrafico = new ObjectProxy();<br /> obDadosGrafico.data1 = 04;<br /> obDadosGrafico.data2 = 02;<br /> obDadosGrafico.label = 'Abr'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /> arDadosGraficoTotal.addItem(arDadosGrafico); <br /> <br /> //Gráfico 3<br /> arDadosGrafico = new ArrayCollection(); <br /> obDadosGrafico = new ObjectProxy();<br /> obDadosGrafico.data1 = 10;<br /> obDadosGrafico.data2 = 08;<br /> obDadosGrafico.label = 'Jan'; <br /> obDadosGrafico.titulo = 'Produção'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /> obDadosGrafico = new ObjectProxy();<br /> obDadosGrafico.data1 = 12;<br /> obDadosGrafico.data2 = 08;<br /> obDadosGrafico.label = 'Fev'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /> obDadosGrafico = new ObjectProxy();<br /> obDadosGrafico.data1 = 06;<br /> obDadosGrafico.data2 = 08;<br /> obDadosGrafico.label = 'Mar'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /> obDadosGrafico = new ObjectProxy();<br /> obDadosGrafico.data1 = 08;<br /> obDadosGrafico.data2 = 08;<br /> obDadosGrafico.label = 'Abr'; <br /> arDadosGrafico.addItem(obDadosGrafico);<br /> <br /> arDadosGraficoTotal.addItem(arDadosGrafico); <br /> <br /><br />//Ao terminado de incluir todos os arDadosGrafico ao<br />arDadosGraficoTotal, é necessário declarar arDadosGraficoTotal como<br />dataProvider do repeater<br /> rpGrafico.dataProvider = arDadosGraficoTotal; <br /> } <br /> <br /> ]]><br /></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 título 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 título 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).
<mx:Tile left="10" right="10" top="10" bottom="10" direction="horizontal"><br /> <mx:Repeater id="rpGrafico" width="100%"><br /> <mx:Panel width="250" height="200" layout="absolute" id="pnGrafico" title="{rpGrafico.currentItem.getItemAt(0).titulo}"><br /><br /><mx:LineChart id="grIndicador" dataTipMode="single"<br />showDataTips="true" dataProvider="{rpGrafico.currentItem}" width="95%"<br />height="95%" horizontalCenter="0" verticalCenter="0"><br /> <mx:horizontalAxis><br /> <mx:CategoryAxis categoryField="label" /> <br /> </mx:horizontalAxis> <br /> <mx:verticalAxis><br /> <mx:LinearAxis baseAtZero="false"/><br /> </mx:verticalAxis> <br /> <mx:series> <br /> <mx:LineSeries form="segment" yField="data2" displayName="Meta"/><br /> <br /> <mx:LineSeries form="segment" yField="data1" displayName="Indicador Técnico"/><br /> </mx:series><br /> </mx:LineChart><br /> </mx:Panel><br /> </mx:Repeater><br /></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:
<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.
Complementando?
Para incluir as legendas basta adicionar logo após o gráfico o código abaixo:
<mx:Legend dataProvider="{grIndicador[0]}" bottom="10" left="10" right="10" height="25"/>
Divirta-se!
é Consultor de Inteligência para e-Commerce e já deixou sua marca em grandes empresas como Sadia SA (BRF Foods), CINQ Technologies e Buscapé Company.
