Uma coisa que impressiona a qualquer gerente ou diretor de empresas são os gráficos do Flex. Com apenas dois ou três gráficos bem feitos e alguns efeitos de transição é muito fácil aprovar qualquer novo projeto. Porém as coisas complicam um pouco quando os usuários começam a pedir “… ah, mas aqui não poderia ter um detalhe assim… ou então uma coluna que mostra-se um valor assado…”.
Realmente construir gráficos com o Adobe Flex é uma tarefa relativamente fácil, porém alguns tipos mais específicos de gráficos requer um pouco mais de atenção.
Neste post vou tratar sobre os grupos de séries de gráficos, utilizados para criar gráficos empilhados e principalmente combinar diferentes grupos de tipos de gráficos diferentes.
O que as vezes causa um pouco de confusão no aprendizado dos iniciantes em Flex são justamente as funcionalidades que existem para facilitar nossa vida. Vejamos como exemplo o código necessário para criar o seguinte gráfico empilhado:
<mx:ColumnChart type="stacked">
<mx:series>
<mx:ColumnSeries />
...
</mx:series>
</mx:ColumnChart>
Para realizar o empilhamento do gráfico, basta configurar o parâmetro “type” como “stacked”. Acontece que esse não é um parâmetro da classe ColumnChart. A classe responsável pelo empilhamento é a classe ColumnSet, porém a classe ColumnChart faz esse trabalho sozinha, quebrando a serie em grupos e definindo o empilhamento.
Portanto a forma correta de criar o código acima seria:
<mx:ColumnChart>
<mx:series>
<mx:ColumnSet type="stacked">
<mx:ColumnSeries />
...
</mx:ColumnSet>
</mx:series>
</mx:ColumnChart>
O nível de complexidade aumenta quando surge a necessidade de combinar tipos de gráficos diferentes ou mesmo diferentes formas de combinação de um mesmo tipo de gráfico. Nessa hora não tem para onde fugir: temos que utilizar os grupos de Set.
Os agrupamentos existem apenas para três tipos de gráficos: AreaSet, ColumnSet e BarSet.
Para exemplificar a utilização, imaginemos o seguinte gráfico, onde a necessidade é mostrar a quantidade estimada de vendas por mês e a quantidade atingida de vendas segmentado por tipo de venda.
Se não fosse utilizado o ColumnSet para separar os tipos de vendas da estimativa de vendas, o que veríamos seria uma única coluna com três divisões.
Os agrupamentos de séries também podem ser utilizados para combinar tipos diferentes de gráficos como por exemplo LineChart.
Veja a seguir o código utilizado no exemplo acima:
<?xml version="1.0"?>
<mx:Application xmlns:mx="<a href="http://www.adobe.com/2006/mxml">http://www.adobe.com/2006/mxml</a>"
>
<mx:Script><![CDATA[
import mx.charts.Legend;
import mx.charts.ColumnChart;
import mx.charts.series.ColumnSet;
import mx.charts.series.ColumnSeries;
import mx.collections.ArrayCollection;
[Bindable]
private var vendasData:ArrayCollection = new ArrayCollection([
{mes:"Janeiro", vendas:120, diretas:45, indiretas:102},
{mes:"Fevereiro", vendas:108, diretas:42, indiretas:87},
{mes:"Março", vendas:150, diretas:82, indiretas:32},
{mes:"Abril", vendas:170, diretas:44, indiretas:68},
{mes:"Maio", vendas:250, diretas:57, indiretas:77},
{mes:"Junho", vendas:200, diretas:33, indiretas:51},
{mes:"Julho", vendas:145, diretas:80, indiretas:62},
{mes:"Agosto", vendas:166, diretas:87, indiretas:48},
{mes:"Setembro", vendas:103, diretas:56, indiretas:42},
{mes:"Outubro", vendas:140, diretas:91, indiretas:45},
{mes:"Novembro", vendas:100, diretas:42, indiretas:33},
{mes:"Dezembro", vendas:182, diretas:56, indiretas:25}
]);
]]>
</mx:Script>
<mx:Panel title="Análise de Vendas" id="panel1" width="616" horizontalAlign="center">
<mx:ColumnChart id="myChart" dataProvider="{vendasData}" showDataTips="true" width="100%" height="322">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="mes"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries yField="vendas"
displayName="Estimativa de Vendas"/>
<mx:ColumnSet type="stacked">
<mx:ColumnSeries
yField="diretas"
displayName="Vendas Diretas"/>
<mx:ColumnSeries
yField="indiretas"
displayName="Vendas Indiretas"/>
</mx:ColumnSet>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}" direction="horizontal"/>
</mx:Panel>
</mx:Application>
Espero que tenham gostado!
(emilioParme){} 