[RESOLVIDO] Dúvida ao gerar gráfico no Flex ColumnChart!

23 de dezembro de 2010 10 respostas

rfogo 23 de dezembro de 2010

Estou tentando gerar um gráfico com os seguintes dados:

Exemplo:

| uma | | duas || tres | …

| Valor 1 | | Valor 2 || Valor 3 |…

Sendo que no eixo X o nome de cada coluna deveria ser (uma|duas|tres) com seus respectivos valores, no Eixo Y (Valor Total) de veria ser a soma (Valor 1 + Valor 2 + Valor 3) como é feito no Excel.
Recebo esses dados em um array. No DataGrid os valores são carregados normalmente! Já no ColumnChart só carrega uma linha da primeira coluna sem o nome.

Segue como estou tentando gerar o grafico:

Array:

[Bindable]
public var consumo:ArrayCollection;

Column Chart:

<mx:ColumnChart x="242" y="1" id="grafico" dataProvider="{consumo}" showDataTips="true">
			<mx:series>
				<mx:ColumnSeries displayName="Uma" yField="uma" />
				<mx:ColumnSeries displayName="Duas" yField="duas" />
				<mx:ColumnSeries displayName="Tres" yField="tres" />
			</mx:series>
		</mx:ColumnChart>

10 Respostas

rfogo 27 de dez. de 2010

Tetei fazer algumas modificações acessando outros fóruns porém até omomento ainda não consegui gerar o gráfico!

rfogo 27 de dez. de 2010

Adicionei no </mx:ColumnChart> a propriedade:

<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Hora"/>
</mx:horizontalAxis>

No ArrayCollaction adcionei as Colunas que deveriam ser usadas no eixo X:

[Bindable]   
private var consumo:ArrayCollection = new ArrayCollection([           
{ Hora: "01:00"},   
{ Hora: "02:00"},  .....

Agora quando Executo o </mx:ColumnChart> sem a propriedade XField=“Hora”, ele traz os dados do ArrayCollection para o Gráfico porém sem o nome da Categoria no Eixo “X”. Se adiciono a propriedade xField"Hora" ele adiciona o nome da categoria e dá uma erro não carregando o gráfico com os dados do ArrayCollection

renzonuccitelli 27 de dez. de 2010

vc por acaso possui o Tour de Flex instalado? Se não, recomendo. Ele contém vários exemplos explicados de código fonte, é muito boa referência. Entre esses exemplos, ele contém a parte de gráficos.

[]s

rfogo 27 de dez. de 2010

Renzo,

Possuo sim!

O problema que nos exemplos de graficos o arraycollection tem os valores setados diretamente no mxml dessa forma fica mais simples resgatar os valores do xFilde que nesse caso será xField=“Country” e yField que poderá ser uma das tres cores:

[Bindable]private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
        ]]>

No meu caso o arraycollaction consumo já está alimentado com o objeto consumo e apartir daí não consigo definir o eixo xField.

renzonuccitelli 27 de dez. de 2010

Poste o código dos objetos que vc está inserindo na coleção consumo. Uma solução seria criar um objeto contendo o seu xField. Poste o código da classe dos objetos do ArrayCollection pra ficar melhor de entender seu problema e poder te ajduar.

rfogo 27 de dez. de 2010

Segue o modelo da Classe Consumo Total:

public class ConsumoTotal implements Serializable {
    private static final long serialVersionUID = 1L;
    @Id
    @Basic(optional = false)
    @Column(name = "cd_consumo")
    private Integer cdConsumo;
    @Basic(optional = false)
    @Column(name = "dispositivo")
    private String dispositivo;
    @Basic(optional = false)
    @Column(name = "data")
    @Temporal(TemporalType.TIMESTAMP)
    private Date data;
    @Basic(optional = false)
    @Column(name = "uma")
    private long uma;
    @Basic(optional = false)
    @Column(name = "duas")
    private long duas;
    @Basic(optional = false)
    @Column(name = "tres")
    private long tres;
    @Basic(optional = false)
    @Column(name = "quatro")
    private long quatro;
    @Basic(optional = false)
    @Column(name = "cinco")
    private long cinco;
    @Basic(optional = false)
    @Column(name = "seis")
    private long seis;
    @Basic(optional = false)
    @Column(name = "sete")
    private long sete;
    @Basic(optional = false)
    @Column(name = "oito")
    private long oito;
    @Basic(optional = false)
    @Column(name = "nove")
    private long nove;
    @Basic(optional = false)
    @Column(name = "dez")
    private long dez;
    @Basic(optional = false)
    @Column(name = "onze")
    private long onze;
    @Basic(optional = false)
    @Column(name = "dolze")
    private long dolze;
    @Basic(optional = false)
    @Column(name = "treze")
    private long treze;
    @Basic(optional = false)
    @Column(name = "quatorze")
    private long quatorze;
    @Basic(optional = false)
    @Column(name = "quinze")
    private long quinze;
    @Basic(optional = false)
    @Column(name = "dezesseis")
    private long dezesseis;
    @Basic(optional = false)
    @Column(name = "dezessete")
    private long dezessete;
    @Basic(optional = false)
    @Column(name = "dezoito")
    private long dezoito;
    @Basic(optional = false)
    @Column(name = "dezenove")
    private long dezenove;
    @Basic(optional = false)
    @Column(name = "vinte")
    private long vinte;
    @Basic(optional = false)
    @Column(name = "vinteum")
    private long vinteum;
    @Basic(optional = false)
    @Column(name = "vintedois")
    private long vintedois;
    @Basic(optional = false)
    @Column(name = "vinteetres")
    private long vinteetres;
    @Basic(optional = false)
    @Column(name = "vintequatro")
    private long vintequatro;
    @Basic(optional = false)
    @Column(name = "consumo")
    private long consumo;

    public ConsumoTotal() {
    }

[i]gets and sets.......[/i]

ConsumoTotal.as

package com.fdc.remota.vo 
{
	[RemoteClass(alias="com.fdc.remota.ConsumoTotal")] 
	[Bindable]
	public class ConsumoTotal
	{
		public function ConsumoTotal()
		{
		}
		public var cdConsumo:Number
		public var dispositivo:String
		public var consumo:Number
		public var data:Date
		public var uma:Number
		public var duas:Number
		public var tres:Number
		public var quatro:Number
		public var cinco:Number
		public var seis:Number
		public var sete:Number
		public var oito:Number
		public var nove:Number
		public var dez:Number
		public var onze:Number
		public var dolze:Number
		public var treze:Number
		public var quatorze:Number
		public var quinze:Number
		public var dezesseis:Number
		public var dezessete:Number
		public var dezoito:Number
		public var dezenove:Number
		public var vinte:Number
		public var vinteum:Number
		public var vintedois:Number
		public var vinteetres:Number
		public var vintequatro:Number
		
	}
}

renzonuccitelli 27 de dez. de 2010

faça o seguinte então: crie um método get na sua classe que retorne a soma e indique o mesmo como xField.

Ex:

public function get soma():Number{

//retorne aqui a soma que deseja
}

Ou então vc pode usar o labelFunction para retornar o que deseja. Se já usou o label funciont em DataGrid, funciona da mesma forma. Se não, pesquise na documentação que é bem fácil...rs.

Agora o detalhe é que cada columnSerie tem seu label, então vai ficar um pouco esquisito esse gráfico.

Além disso eu te recomendaria rever esse modelo. Seria uma bola ter uma lista para seu consumo total, ficaria melhor modelado. E se vc kiser ver o seu consumo total com 25? :D

[]s

rfogo 27 de dez. de 2010

Ok, Vou dar uma olhada nisso.
Eu achei que da mesma forma que pego o yField do próprio objeto conseguiria pegar somente o nome da coluna no xField.

Aproveitando da sua boa vontade,

como faço para habilitar a navegação na aplicação com o Tab? E quando pressionar o Enter chamar um método?

renzonuccitelli 27 de dez. de 2010

rfogo:
Ok, Vou dar uma olhada nisso.
Eu achei que da mesma forma que pego o yField do próprio objeto conseguiria pegar somente o nome da coluna no xField.

Aproveitando da sua boa vontade,

como faço para habilitar a navegação na aplicação com o Tab? E quando pressionar o Enter chamar um método?

O que vc quer dizer com “habilitar navegação com Tab”? Para formulário, isso funciona por default.

Para executar um método ao clicar em enter, basta adicionar KeyUpListener e conferiar o código da tecla pra ver se foi a desejada.

Mas a melhor dica que dou é fazer um curso de Adobe Flex na Nuccitec :lol: . Assim o aprendizado é bem mais rápido.

[]s

rfogo 28 de dez. de 2010

Vo sim, só estou tentando conhecer um pouco mais a ferramenta!

A parte do KeyboardEvent consegui fazer!

Já o tab mesmo alterando os campos para um form não funciona.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
		 width.State1="800" height.State1="600"
		 creationComplete="init()"
		 >
	
	<s:states>
		<s:State name="State1"/>
		<s:State name="aplicacao"/>
	</s:states>
	
	<fx:Declarations>
		<s:RemoteObject id="usuarioService"
						destination="usuarioService"
						fault="onFault(event)">
			<s:method name="autenticar" result="onResultAutenticar(event)" />
		</s:RemoteObject>
	</fx:Declarations>
	
	<s:Panel includeIn="State1" x="251" y="189" width="298" height="183" title="Login">
		<mx:Form id="loginForm" includeIn="State1" x="22" y="14" width="253" height="88">
			<mx:FormItem label="Usuário" required="true">
				<mx:TextInput id="login" />
			</mx:FormItem>
			<mx:FormItem label="Senha" required="true">
				<mx:TextInput id="senha" displayAsPassword="true"/>
			</mx:FormItem>
		</mx:Form>
		<mx:Form x="174" y="80" width="112" height="55">
			<s:Button id="btEntrar"
					  label="Entrar"
					  click="autenticar()"
			/>
		</mx:Form>
	</s:Panel>
	
	<fx:Script>
		<![CDATA[
			import com.fdc.remota.vo.Usuario;
			
			import mx.controls.Alert;
			import mx.events.DragEvent;
			import mx.managers.FocusManager;
			import mx.managers.PopUpManager;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;

			
			[Bindable]
			public var usuario:Usuario;
													
											
			private function autenticar():void
			{
				usuarioService.autenticar(login.text, senha.text);
			}
			
			private function onFault(event:FaultEvent):void
			{
				Alert.show(event.fault.rootCause.mensagem);
			}
			
			private function onResultAutenticar(event:ResultEvent):void
			{
				var telaconsumo: Consumo = Consumo(PopUpManager.createPopUp(this, Consumo, true));
				PopUpManager.centerPopUp(telaconsumo);
				telaconsumo.usuario = event.result as Usuario;
			}
			
			public function init():void{
				login.setFocus();
				loginForm.addEventListener(KeyboardEvent.KEY_DOWN,checkKey);
			}
			
			public function checkKey(event:KeyboardEvent):void
			{
				if(event.charCode == 13)
					autenticar();
			}



		]]>
	</fx:Script>
	
</s:Group>

Criado 23 de dezembro de 2010

Ultima resposta 28 de dez. de 2010

Respostas 10

Participantes 2

10 Respostas

Topicos relacionados