Actionscript/ Actionscript Frameworks/ Flex/ Flex 2 Charts/ Flex 2 Open-source/ Flex Componentes/ frameworks/ Open-source

Flex 2 : Brincando e aprendendo com Flex Charts Framework

Exatamente, o titulo já diz tudo, se você quer dá aquile toque especial sem seus gráficos na internet, você precisa usar o Flex Charts Framework que é parte integrante do Flex Builder 2 ou que pode ser comprado separadamente. Quando se usa os gráficos do Flex, os resultados são surpreendentes.
Nas próximas linhas eu espero que você já consiga criar aplicações com gráficos de forma inteligente. Vamos Brincar.

Quais são os gráficos disponíveis no Flex Charts?

São ao total de 11 controles de charts dentre eles (Área,Barra,Bubble,Candlestick,Coluna,HighLowOpenClose,Linha,Pizza, Plot, Multiplas séries, Múltiplos eixos.
Todos são extremamente fáceis de serem implementados em uma aplicação. Para facilitar sua vida, vamos tomar por base o aprendizado por exemplo. O primeiro exemplo é o preenchimento de um datagrid por um XML interno, onde este datagrid vai provê os dados para a construção do gráfico de Coluna.


Exemplo1: Gráfico Básico populado de um datagrid.

Requer o Flash Player

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application creationComplete="montarAplicacao()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="460" height="256">
 
</mx><mx :XML id="ficticios" xmlns="">
	<root>
		<banco>
			<cliente nome="José" saldoMais="300" saldoMenos="100"/>
			<cliente nome="João" saldoMais="400" saldoMenos="150"/>
			<cliente nome="Maria" saldoMais="600" saldoMenos="60"/>
			<cliente nome="Antonio" saldoMais="900" saldoMenos="40"/>
		</banco>
	</root>
</mx>
 
<mx :Script>
	< ![CDATA[
 
		// chamo pela propriedade creationComplete no tag mx:Application
		public function montarAplicacao():void
		{
			// leitura de atributos no XMl é feita pelo prefixo @
			ExemploDG.dataProvider = ficticios.banco.cliente;
			// copio os valores do DataProvider do DataGrid  assim monto meu Gráfico
			// nao esqueca de coloca o yField para desenhar.
			ExemploColuna.dataProvider = ExemploDG.dataProvider;
		}
	]]>
</mx>
 
 
	<mx :HDividedBox x="0" y="0" width="100%" height="100%">
		</mx><mx :ColumnChart id="ExemploColuna" width="50%" height="100%">
			</mx><mx :series>
				<mx :ColumnSeries displayName="Ficticios" yField="@saldoMais"/>
			</mx>
 
		<mx :DataGrid width="50%" height="100%" id="ExemploDG">
			</mx><mx :columns>
				<mx :DataGridColumn headerText="Cliente" dataField="@nome"/>
				<mx :DataGridColumn headerText="Saldo +" dataField="@saldoMais"/>
				<mx :DataGridColumn headerText="Saldo -" dataField="@saldoMenos"/>
			</mx>

Explicando o exemplo.

No exemplo acima foi usado o gráfico de Coluna, quando se trata de gráficos em colunas você deve se prender o detalhe que os gráficos crescem ignorando o valor X no eixo cartesiano, já que é através das posições em Y que o gráfico será desenhado.
Uma das principais propriedades do gráfico de coluna é o yField=”” que vai desenhar todo o gráfico baseado nos dados que foram inseridos.
O valor que o yField está associando ao gráfico é o valor dos atributos @saldoMais.
Foi usado uma função para setar configurações básicas de setamenteo de dataProviders entre bind de componentes e bind de fonte de dados. No caso da comparação de igualdade entre o ExemploDG e o ExemploGrafico, feito pelo dataProvider, significa dizer que tudo que tiver como base de informações existentes no datagrid serão repassados para o gráfico de coluna.

Exemplo 2: Usando gráfico de linhas e múltiplas linhas com DataGrid

Requer o Flash Player

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application creationComplete="montarAplicacao()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="510" height="344">
 
</mx><mx :XML id="ficticios" xmlns="">
	<root>
		<banco>
			<cliente nome="José" saldoMais="300" saldoMenos="100"/>
			<cliente nome="João" saldoMais="400" saldoMenos="150"/>
			<cliente nome="Maria" saldoMais="600" saldoMenos="60"/>
			<cliente nome="Antonio" saldoMais="900" saldoMenos="40"/>
		</banco>
	</root>
</mx>
 
<mx :Script>
	< ![CDATA[
 
		// chamo pela propriedade creationComplete no tag mx:Application
		public function montarAplicacao():void
		{
			// leitura de atributos no XMl é feita pelo prefixo @
			ExemploDG.dataProvider = ficticios.banco.cliente;
			// copio os valores do DataProvider do DataGrid  assim monto meu Gráfico
			// nao esqueca de coloca o yField para desenhar.
			ExemploLinha.dataProvider = ExemploDG.dataProvider;
		}
	]]>
</mx>
 
	<mx :VDividedBox x="0" y="0" width="100%" height="100%">
		</mx><mx :LineChart id="ExemploLinha" width="100%" height="50%">
			</mx><mx :series>
				<mx :LineSeries displayName="Ficticios" yField="@saldoMais"/>
				<mx :LineSeries displayName="Ficticios" yField="@saldoMenos"/>
			</mx>
 
		<mx :DataGrid id="ExemploDG" width="100%" height="50%">
			</mx><mx :columns>
				<mx :DataGridColumn headerText="Column 1" dataField="col1"/>
				<mx :DataGridColumn headerText="Column 2" dataField="col2"/>
				<mx :DataGridColumn headerText="Column 3" dataField="col3"/>
			</mx>

Explicando o exemplo.

Não tem muita diferença entre o primeiro exemplo, neste segundo exemplo foi usado apenas mais uma série que no outro não havia sido usada. O que não impede de você alterar o código fonte do anterior e adicionar mais uma coluna a cada série nova. A série é o que me refiro ao eixo X, já que o Y é o que define os desenhos do gráficos.

Exemplo 3: Exibindo Legendas para os gráficos

Requer o Flash Player

O exemplo acima é o mesmo deste, a única diferença é que neste eu instanciei o tag mx:Legend, assim, agora posso ter uma legenda baseada no que está exibido nos gráficos.

1
2
3
4
5
6
7
8
		<mx :Canvas width="100%" height="50%">
		</mx><mx :LineChart id="ExemploLinha" width="100%" height="100%">
			</mx><mx :series>
				<mx :LineSeries displayName="Ficticios" yField="@saldoMais"/>
				<mx :LineSeries displayName="Ficticios" yField="@saldoMenos"/>
			</mx>
 
			<mx :Legend dataProvider="{ExemploLinha}" x="384" y="19"/>

Parte 2 por vim. bateu ligeiramente o sono da manhã.