Archives du mot-clé ColumnSeries

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 plusieurs Series de type différent dans un même Chart

Tous les graphiques Flex qui héritent de la classe CartesianChart (tous les Charts par défaut sauf PieChart), permettent de mélanger plusieurs Series de data dans le même composant Charting. Vous pouvez ainsi créer un histogramme (ColumnSeries) avec une ligne qui le traverse (LineSeries) ou bien mélanger tous les types de Series. Vous pouvez utiliser une combinaison des objets Series suivant dans un composant CartesianChart:

Voici un exemple qui mélange des LineSeries et des ColumnSeries:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
	[Bindable]
	public var SMITH:Array = [
		{date:"22-Aug-05", close:45.87},
		{date:"23-Aug-05", close:45.74},
		{date:"24-Aug-05", close:45.77},
		{date:"25-Aug-05", close:46.06},
	];
	[Bindable]
	public var DECKER:Array = [
		{date:"22-Aug-05", close:45.59},
		{date:"23-Aug-05", close:45.3},
		{date:"24-Aug-05", close:46.71},
		{date:"25-Aug-05", close:46.88},
	];
	]]>
	</mx:Script>

	<mx:Panel title="Multiple Data Series" width="400" height="400">
		<mx:ColumnChart id="myChart"
		dataProvider="{SMITH}"
		showDataTips="true"
		height="250"
		width="350"
		>
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="date"/>
			</mx:horizontalAxis>
			<mx:verticalAxis>
				<mx:LinearAxis minimum="40" maximum="50"/>
			</mx:verticalAxis>
			<mx:series>
				<mx:ColumnSeries
				dataProvider="{SMITH}"
				xField="date"
				yField="close"
				displayName="SMITH"
				>
				</mx:ColumnSeries>
				<mx:LineSeries
				dataProvider="{DECKER}"
				xField="date"
				yField="close"
				displayName="DECKER"
				>
				</mx:LineSeries>
			</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
L’utilisation de plusieurs Series dans un même composant Chart fonctionne mieux quand les points de donnée sont tous dans le même intervalle (comme un prix courant et un prix moyen). Quand les points sont numériquement dans des intervalles très différents, le graphique peut devenir difficile à comprendre car la donnée est affichée sur un seul axe. La solution est d’utiliser plusieurs axes, chacun avec son propre intervalle, comme on va le voir dans un prochain tutorial Flex.

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