Archives du mot-clef horizontalAxis

Flex Chart – Utiliser plusieurs Axes différents dans un même Chart Flex

Lorsque vous utilisez plusieurs Series de données dans le même graphique, comme expliqué dans ce tutorial Flex, vous aurez sûrement quelques problèmes si les intervalles de données sont très différents. Dans ce cas là, les points de donnée pourraient être situés dans des régions très différentes du Chart. Par exemple, une valeur contenue entre 100€ et 150€, alors qu’un autre prix fluctue entre 2€ et 2.5€. Si vous affichez les deux series de données dans un même graphique, il vous sera difficile de voir un quelconque lien entre les prix, même sur un axe logarithmique. Pour contourner ce problème, vous pouvez utiliser de multiples axes sur votre Chart pour que chaque serie de data soit positionnée de manière relative par rapport à son axe. Tous les Chart qui héritent de CartesianChart (c’est-à-dire tous sauf le Pie Chart) supportent le fait d’avoir plusieurs series sur l’axe horizontal, vertical ou les deux. Pour utiliser plusieurs axes dans un Chart, vous devez tout d’abord définir les Series du Chart et leurs axes. Par exemple, pour un graphique qui mélange des colonnes et des lignes, vous aurez un ColumnSeries et un LineSeries. Pour chacun, Vous allez aussi définir un axe vertical comme dans cet exemple de code:

<mx:series>
	<mx:ColumnSeries id="cs1" dataProvider="{SMITH}" yField="close">
		<mx:verticalAxis>
			<mx:LinearAxis id="v1" minimum="40" maximum="50"/>
		</mx:verticalAxis>
	</mx:ColumnSeries>
	<mx:LineSeries id="cs2" dataProvider="{DECKER}" yField="close">
		<mx:verticalAxis>
			<mx:LinearAxis id="v2" minimum="150" maximum="170"/>
		</mx:verticalAxis>
	</mx:LineSeries>
</mx:series>

Vous devrez ensuite définir les « Axis Renderer », et lier leurs propriétés « axis » aux axes des Series. Dans ce cas, on va définir deux vertical axis renderers, et les lier aux objets LinearAxis:

<mx:verticalAxisRenderers>
	<mx:AxisRenderer placement="left" axis="{v1}"/>
	<mx:AxisRenderer placement="left" axis="{v2}"/>
</mx:verticalAxisRenderers>

Notez que vous pouvez contrôler la position des axes en utilisant la propriété « placement » de l’AxisRenderer. Pour un axe vertical, les valeurs valides sont « left » et « right ». Pour un axe horizontal, les valeurs valides sont « top » et « bottom ». Les axes peuvent aussi être indépendants des définitions de Series. Par exemple, vous pouvez plus d’une série à un même axe. Dans ce cas, vous pouvez définir l’axe vertical comme ceci:

<mx:horizontalAxis>
	<mx:CategoryAxis id="h1" categoryField="date"/>
<mx:horizontalAxis>

Et les lier (bind) ensuite aux Series, comme ceci:

<mx:ColumnSeries id="cs1" horizontalAxis="{h1}" dataProvider="{SMITH}" yField="close">
...
<mx:LineSeries id="cs2" horizontalAxis="{h1}" dataProvider="{DECKER}" yField="close">

Et vous pouvez lier un AxisRenderer sur ce même axe:

<mx:horizontalAxisRenderers>
	<mx:AxisRenderer placement="bottom" axis="{h1}"/>
</mx:horizontalAxisRenderers>

Lire la suite →

Flex Chart – Utiliser un ArrayCollection comme dataProvider (ActionScript)

Dans les 2 articles précédents, je montre comment assigner un Array d’Object en ActionScript et en MXML comme data provider d’un Chart. Un des inconvénients d’utiliser un simple Array comme dataProvider d’un Chart et que vous ne pouvez utiliser que les méthodes de Array pour manipuler votre donnée. De plus, en utilisant un Array comme data provider, la donnée de ce tableau doit être statique. Même si vous rendez votre Array Bindable, quand la donnée de l’Array change, le chart ne va pas refléter ce changement.

Les Collections sont un mécanisme plus robuste pour un data provider qu’un Array. Elles offrent des opérations comme l’insertion, la suppression d’objets mais aussi le filtrage et le tri. Les Collections supportent aussi les notifications de changement. Un ArrayCollection est un bon moyen d’exposer un Array comme une interface ICollectionView ou IList.

Comme pour un Array, vous pouvez utiliser du MXML pour définir le contenu de votre collection mais cela se révèle assez laborieux et verbeux.

N’oubliez pas d’importer la classe mx.collections.ArrayCollection.

La solution ActionScript est plus élégante à mon goût:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var expenses:ArrayCollection = new ArrayCollection([
		{Month:"January", Profit:2000, Expenses:1500, Amount:450},
		{Month:"February", Profit:1000, Expenses:200, Amount:600},
		{Month:"March", Profit:1500, Expenses:500, Amount:300},
		{Month:"April", Profit:500, Expenses:300, Amount:500},
		{Month:"May", Profit:1000, Expenses:450, Amount:250},
		{Month:"June", Profit:2000, Expenses:500, Amount:700}
		]);
		]]>
	</mx:Script>
	<mx:Panel title="Column Chart">
		<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				xField="Month"
				yField="Profit"
				displayName="Profit"
				/>
				<mx:ColumnSeries
				xField="Month"
				yField="Expenses"
				displayName="Expenses"
				/>
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l’application

Lire la suite →

Flex Chart – Utiliser un Array d’Object comme dataProvider (MXML)

On a vu dans l’article précédent qu’on pouvait déclarer un Array d’Object comme dataProvider d’un Chart en ActionScript. Vous vous en doutez, on peut aussi le faire en MXML de manière un peu plus lourde:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Array id="expenses">
		<mx:Object
			Month="January"
			Profit="2000"
			Expenses="1500"
			Amount="450"
		/>
		<mx:Object
			Month="February"
			Profit="1000"
			Expenses="200"
			Amount="600"
		/>
		<mx:Object
			Month="March"
			Profit="1500"
			Expenses="500"
			Amount="300"
		/>
		<mx:Object
			Month="April"
			Profit="500"
			Expenses="300"
			Amount="500"
		/>
		<mx:Object
			Month="May"
			Profit="1000"
			Expenses="450"
			Amount="250"
		/>
		<mx:Object
			Month="June"
			Profit="2000"
			Expenses="500"
			Amount="700"
		/>
	</mx:Array>
	<mx:Panel title="Column Chart">
		<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				xField="Month"
				yField="Profit"
				displayName="Profit"
				/>
				<mx:ColumnSeries
				xField="Month"
				yField="Expenses"
				displayName="Expenses"
				/>
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l’application

This movie requires Flash Player 11

Flex Chart – Utiliser un Array d’Object comme dataProvider (ActionScript)

Utiliser un tableau (Array) d’objets (Object) comme data provider pour un chart est l’approche la plus simple. Vous pouvez typiquement créer un Array d’Object comme dans cet exemple:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		private var expenses:Array = [
			{Month:"January",Profit:2000,Expenses:1500,Amount:450},
			{Month:"February",Profit:1000,Expenses:200,Amount:600},
			{Month:"March",Profit:1500,Expenses:500,Amount:300},
			{Month:"April",Profit:500,Expenses:300,Amount:500},
			{Month:"May",Profit:1000,Expenses:450,Amount:250},
			{Month:"June",Profit:2000,Expenses:500,Amount:700}
		];
		]]>
	</mx:Script>
	<mx:Panel title="Column Chart">
		<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				xField="Month"
				yField="Profit"
				displayName="Profit"
				/>
				<mx:ColumnSeries
				xField="Month"
				yField="Expenses"
				displayName="Expenses"
				/>
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l’application

This movie requires Flash Player 11

Flex Chart – Ajouter des Series à la volée en ActionScript

Dans l’exemple précédent sur les Charts Flex, on a crée un Chart en remplaçant les series existantes.
Dans cet exemple, on va créer 2 ColumnSeries et leur assigner un data provider. On va ensuite créer un Array qui va contenir les Series existantes, et rajouter (push) de nouvelles séries à cet Array.
Enfin, on va assigner la propriété « series » du Chart à ce nouvel Array de Series:
Lire la suite →