Archives du mot-clé ColumnChart

Flex Chart – Créer un histogramme à barres flottantes (floating ColumnChart)

On a vu dans les articles précédent comme créer un ColumnChart Flex et comment modifier les styles (fill et stroke) d’un ColumnChart. On va voir cette fois comment créer un ColumnChart flottant (floating).

Pour cela, il faut utiliser la propriété minField des ColumnSeries. Cette propriété fixe le niveau bas de la colonne. L’exemple suivant crée un composant ColumnChart utilisant cette propriété:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script><![CDATA[
		import mx.collections.ArrayCollection;

		[Bindable]
		public var expenses:ArrayCollection = new ArrayCollection([
			{Month:"Jan", Revenue:1200, Expenses:500},
			{Month:"Feb", Revenue:1200, Expenses:550},
			{Month:"Mar", Revenue:1240, Expenses:475},
			{Month:"Apr", Revenue:1300, Expenses:600},
			{Month:"May", Revenue:1420, Expenses:575},
			{Month:"Jun", Revenue:1400, Expenses:600},
			{Month:"Jul", Revenue:1500, Expenses:600},
			{Month:"Aug", Revenue:1600, Expenses:750},
			{Month:"Sep", Revenue:1600, Expenses:735},
			{Month:"Oct", Revenue:1750, Expenses:750},
			{Month:"Nov", Revenue:1800, Expenses:800},
			{Month:"Dec", Revenue:2000, Expenses:850}
		]);
	]]></mx:Script>

	<mx:Panel title="Floating Column Chart">
		<mx:ColumnChart
		dataProvider="{expenses}"
		showDataTips="true"
		>
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
				yField="Revenue"
				minField="Expenses"
				displayName="Revenue"
				/>
			</mx:series>
		</mx:ColumnChart>
	</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 – Modifier les styles d’un ColumnChart (fill, stroke)

Pour personnaliser le styles de colonnes d’un composant ColumnChart, vous devez spécifier des objets SolidColor et Stroke pour les propriétés fill et stroke, respectivement.

L’exemple suivant définit un objet SolidColor personnalisé et un objet Stroke custom lui aussi, et les applique à l’objet ColumnSeries dans le composant ColumnChart:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script><![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		public var expenses:ArrayCollection = new ArrayCollection([
			{Month:"Jan", Profit:2000, Expenses:1500},
			{Month:"Feb", Profit:1000, Expenses:200},
			{Month:"Mar", Profit:1500, Expenses:500}
		]);
	]]></mx:Script>

	<!-- Define custom colors for use as column fills. -->
	<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
	<mx:SolidColor id="sc2" color="red" alpha=".3"/>
	<!-- Define custom Strokes for the columns. -->
	<mx:Stroke id="s1" color="blue" weight="2"/>
	<mx:Stroke id="s2" color="red" weight="2"/>

	<mx:Panel title="ColumnChart Control with Custom Column Styles">
		<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"
				fill="{sc1}"
				stroke="{s1}"
				/>
				<mx:ColumnSeries
				xField="Month"
				yField="Expenses"
				displayName="Expenses"
				fill="{sc2}"
				stroke="{s2}"
				/>
			</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 – Le composant ColumnChart (exemples)

Le composant ColumnChart représente de la donnée en histogramme (barres). La hauteur de chaque barre est  déterminée par les valeurs de la donnée (dataProvider). Vous avez à votre disposition plusieurs type d’affichage différents pour le ColumnChart, dont les colonnes simples, superposées (overlaid), empilées(stacked), 100% stacked ou high-low.

Vous pouvez utiliser les ColumnSeries avec le composant ColumnChart pour définir la donnée à affichée dans votre graphique. Voici les propriétés les plus importantes:

  • yField: Spécifie le champ du dataProvider qui va déterminer la position Y du haut de la colonne. Ce champ définit la hauteur de la colonne.
  • xField: Spécifie le champ du dataProvider qui va déterminer la position X de la colonne. Si cette propriété n’est pas renseignée, Flex va arranger les colonnes dans l’ordre dans lequel elles arrivent.
  • minField: Spécifie le champ du dataProvider qui va déterminer la position Y du bas de la colonne. Cette propriété n’a aucun effet sur les ColumnChart overlaid, stacked ou 100% stacked.

L’exemple suivant montre un composant ColumnChart avec deux Series (ColumnSeries):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script><![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		public var expenses:ArrayCollection = new ArrayCollection([
			{Month:"Jan", Profit:2000, Expenses:1500},
			{Month:"Feb", Profit:1000, Expenses:200},
			{Month:"Mar", Profit:1500, Expenses:500}
		]);
	]]></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 – 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