Bonjour,

ce tutoriel est une introduction à l’utilisation des charts de Flex. Les composants de Charting sont situés dans le package mx.charts qui est disponible avec la version professionnel de Flex builder. Il est également possible de créer des charts avec la version standard de Flex, mais ils auront un filigramme par-dessus. Ces classes permettent très simplement de créer des graphiques de types suivant :

• Area: AreaChart / AreaSeries
• Bar: BarChart / BarSeries
• Bubbles: BubbleChart / BubbleSeries
• Candlestick: CandlestickChart / CandlestickSeries
• Column: ColumnChart / ColumnSeries
• HighLowOpenClose: HLOCChart / HLOCSeries
• Line: LineChart / LineSeries
• Pie: PieChart / PieSeries
• Plot: PlotChart / PlotSeries

Tous ces types de graphiques, sauf le PieChart sont des sous-classes de la classe CartesianChart. Les CartesianChart sont des graphiques qui représentent des données dans un espace cartésien, c'est-à-dire, une espace rectangulaire à deux dimensions. La classe PieChart est une sous-classe de PolarChart, qui représente la donnée dans une espace polaire.

Avant de débuter, nous allons définir les différents termes qui composent un graphique :

• Chart: Définit le type de graphique, ainsi que le data provider. Cette balise permet également de définir de nombreuses propriétés comme par exemple les toolTips. Cette balise est obligatoire.
• Series: Définit une ou plusieurs séries de données qui seront affichées dans le graphique. Cette balise permet aussi de définir le type de ligne (Stroke), le remplissage (Fill) et les renderers (skins) des séries, ainsi que les stroke et fills utilisées par les légendes. Vous pouvez aussi définir un second ensemble de séries pour chaque graphique, pour afficher de multiples séries sur un seul graphique. Chaque série à son propre dataProvider. Cette balise est obligatoire pour rendre un graphique.
• Axis: Définit le type d'axe (numérique ou catégorie). Permet également de définir les labels des axes, les titres, et les propriétés de style comme le padding. Cette balise permet aussi de définir des axes pour un second ensemble de séries.
• Axis Renderer: Définit le style et le placement des ticks (petites barres indiquant les limites de chaque catégorie), permet d'activer ou de désactiver les labels, la rotation des labels et les espaces entre les labels. Cette balise définit aussi un axis renderer pour un second ensemble de séries. Cette balise est optionnelle.
• Elements: Définit les lignes de la grille et les éléments supplémentaires qui vont apparaître sur le graphique. Cette balise est optionnelle.

Maintenant que nous avons définit les différentes parties qui constituent un graphique, passons à la pratique :

Dans nos exemples nous allons utiliser comme dataprovider les données suivantes :

 
[Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:3150, Expenses:1700, Amount:650},
        {Month:"Feb", Profit:2550, Expenses:350, Amount:900},
        {Month:"Mar", Profit:1500, Expenses:700, Amount:300},
        {Month:"Apr", Profit:3550, Expenses:550, Amount:840},
        {Month:"Mai", Profit:2100, Expenses:620, Amount:330},
        {Month:"Jun", Profit:1850, Expenses:430, Amount:740}
     ]);

Et pour les graphiques financiers:

[Bindable]
     public var TICKER:Array = [
        {date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
        {date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
        {date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
        {date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
        {date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
        {date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
        {date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
        {date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
        {date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
        {date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1}
     ];

<mx:AreaChart
	id="myChart" dataProvider="{expenses}"
	showDataTips="true"
>
	<mx:horizontalAxis>
		<mx:CategoryAxis
			dataProvider="{expenses}"
			categoryField="Month"
		/>
	</mx:horizontalAxis>
	<mx:series>
		<mx:AreaSeries
			yField="Profit"
			displayName="Profit" form="curve"
		/>
		<mx:AreaSeries
			yField="Expenses"
			displayName="Expenses"
		/>
	</mx:series>
</mx:AreaChart>

yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.

xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.

form spécifie la forme sous laquelle les séries seront rendues sur le graphique. Les valeurs suivantes sont applicables :

• Segment.
• step.
• reverseStep.
• vertical.
• horizontal.
• curve.

 
<mx:BarChart
	id="myBarChart"
	dataProvider="{expenses}"
	showDataTips="true"
>
	<mx:horizontalAxis>
		<mx:CategoryAxis
			dataProvider="{expenses}"
			categoryField="Month"
		/>
	</mx:horizontalAxis>
	<mx:series>
		<mx:BarSeries
			yField="Profit"
			displayName="Profit"
			form="curve"
		/>
		<mx:BarSeries
			yField="Expenses"
			displayName="Expenses"
		/>
	</mx:series>
</mx:BarChart>

yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.

xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.

 
<mx:BubbleChart
	id="myBubbleChart" 
	minRadius="1" 
	maxRadius="50" 
	dataProvider="{expenses}" 
	showDataTips="true"
>
	<mx:series>
		<mx:BubbleSeries 
			xField="Profit" 
			yField="Expenses" 
			radiusField="Amount" 
			displayName="Profit"
		/>
	</mx:series>
</mx:BubbleChart>
 
<mx:Legend dataProvider="{myChart}"/>

yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.

xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.

radiusField spécifie le champ du dataprovider qui détermine le rayon de chaque symbole relative au autres point du graphique.

 
<mx:CandlestickChart
	id="myCSchart" 
	dataProvider="{TICKER}" 
	showDataTips="true" 
	height="400" 
	width="400"
>
	<mx:series>
		<mx:CandlestickSeries 
			dataProvider="{TICKER}" 
			openField="open" 
			highField="high" 
			lowField="low" 
			closeField="close" 
			displayName="TICKER"
		/>
	</mx:series>
</mx:CandlestickChart>

closeField spécifie le champ du dataprovider qui determine la position sur l’axe Y de la valeur de fermeture de l’élément.

highField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la plus grande valeur de l’élément.

lowField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la plus petite valeur de l’élément.

openField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la valeur d’ouverture de l’élément.

xField spécifie le champ du dataprovider qui détermine la position sur l’axe X de l’élément.

 
<mx:ColumnChart
	id="myColumnChart"
	dataProvider="{expenses}"
	showDataTips="true"
>
	<mx:horizontalAxis>
		<mx:CategoryAxis
			dataProvider="{expenses}"
			categoryField="Month"
		/>
	</mx:horizontalAxis>
	<mx:series>
		<mx:ColumnSeries
			yField="Profit"
			displayName="Profit"
		/>
		<mx:ColumnSeries
			yField="Expenses"
			displayName="Expenses"
		/>
	</mx:series>
</mx:ColumnChart>

yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.

xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.

 
<mx:HLOCChart
	id="myHLOCChart"
	dataProvider="{TICKER}" 
	showDataTips="true"
>
	<mx:verticalAxis>
		<mx:LinearAxis	minimum="30" maximum="50"/>
	</mx:verticalAxis>
	<mx:series>
		<mx:HLOCSeries
			dataProvider="{TICKER}"
			openField="open"
			highField="high"
			lowField="low"
			closeField="close"
			displayName="TICKER"
		>
		</mx:HLOCSeries>
	</mx:series>
</mx:HLOCChart>

closeField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la valeur de fermeture de l’élément.

highField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la plus grande valeur de l’élément.

lowField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la plus petite valeur de l’élément.

openField spécifie le champ du dataprovider qui détermine la position sur l’axe Y de la valeur d’ouverture de l’élément.

xField spécifie le champ du dataprovider qui détermine la position sur l’axe X de l’élément.

 
<mx:LineChart
	id="myLineChart" 
	dataProvider="{expenses}" 
	showDataTips="true"
>
	<mx:horizontalAxis>
		<mx:CategoryAxis 
			dataProvider="{expenses}" 
			categoryField="Month"
		/>
	</mx:horizontalAxis>
	<mx:series>
		<mx:LineSeries 
			yField="Profit" 
			displayName="Profit"
		/>
		<mx:LineSeries 
			yField="Expenses" 
			displayName="Expenses"
		/>
	</mx:series>
</mx:LineChart>

yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.

xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.

form spécifie la forme sous laquelle les séries seront rendues sur le graphique. Les valeurs suivantes

• Segment.
• step.
• reverseStep.
• vertical.
• horizontal.
• curve.

 
<mx:PieChart
	id="myPieChart" 
	dataProvider="{expenses}" 
	showDataTips="true"
>
	<mx:series>
		<mx:PieSeries 
			field="Amount" 
			nameField="Expense" 
			labelPosition="callout"
		/>
	</mx:series>
</mx:PieChart>

field spécifie le champ du dataprovider qui détermine les données pour chaque aréa du pie chart.

labelPosition spécifie comment render les labels.

nameField spécifie le champ du dataprovider à utiliser comme nom pour les tooltips et les légendes

 
<mx:PlotChart
	id="myPlotChart"
	dataProvider="{expenses}"
	showDataTips="true"
>
	<mx:series>
		<mx:PlotSeries
			xField="Expenses"
			yField="Profit"
			displayName="Plot 1"
		/>
		<mx:PlotSeries
			xField="Amount"
			yField="Expenses"
			displayName="Plot 2"
		/>
		<mx:PlotSeries
			xField="Profit"
			yField="Amount"
			displayName="Plot 3"
		/>
	</mx:series>
</mx:PlotChart>

yField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe Y.

xField spécifie le champ du dataprovider qui détermine l’emplacement de la valeur sur l’axe X.

radiusField spécifie le champ du dataprovider qui détermine le rayon de chaque symbole relative au autres point du graphique.

vous trouverez ici le projet pour ce tutoriel.