Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

28avr/0910

Flex Chart – Ajouter des Series depuis une lecture XML e4x

Dans les exemples précédents, on a vu comment créer un Chart Flex en ActionScript et comment ajouter des Series à la volée en AS3. On va maintenant prendre un XML de data en entrée pour créer nos séries de manières dynamique, en fonction de la data.

On va utiliser la syntaxe e4x pour extraire les données uniques de notre data (ici, des noms). A l'issue de cette extraction, on aura un tableau de nom (Array). On va ensuite itérer sur ce tableau de nom pour construire une LineSeries pour chaque nom.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp();" viewSourceURL="srcview/index.html">
	<mx:Script><![CDATA[

		import mx.charts.series.LineSeries;
		import mx.charts.DateTimeAxis;

		[Bindable]
		private var myXML:XML =
	<dataset>
		<item>
			<who>Tom</who>
			<when>08/22/2006</when>
			<hours>5.5</hours>
		</item>
		<item>
			<who>Tom</who>
			<when>08/23/2006</when>
			<hours>6</hours>
		</item>
		<item>
			<who>Tom</who>
			<when>08/24/2006</when>
			<hours>4.75</hours>
		</item>
		<item>
			<who>Dick</who>
			<when>08/22/2006</when>
			<hours>6</hours>
		</item>
		<item>
			<who>Dick</who>
			<when>08/23/2006</when>
			<hours>8</hours>
		</item>
		<item>
			<who>Dick</who>
			<when>08/24/2006</when>
			<hours>7.25</hours>
		</item>
		<item>
			<who>Jane</who>
			<when>08/22/2006</when>
			<hours>6.5</hours>
		</item>
		<item>
			<who>Jane</who>
			<when>08/23/2006</when>
			<hours>9</hours>
		</item>
		<item>
			<who>Jane</who>
			<when>08/24/2006</when>
			<hours>3.75</hours>
		</item>
	</dataset>;

		public function initApp():void {
			var wholist:Array = new Array();
			for each(var property:XML in myXML.item.who) {
				// Créer un array qui va lister les noms (uniques)
				if (wholist[property] != property){
					wholist[property] = property;
				}
			}
			// Itérer sur chaque nom et créer une nouvelle series pour chacun
			for (var s:String in wholist) {
				// Utiliser tous les items qui correspondent à s (le nom)
				var localXML:XMLList = myXML.item.(who==s);
				// Créer une nouvelle series et fixer ses propriétés
				var localSeries:LineSeries = new LineSeries();
				localSeries.dataProvider = localXML;
				localSeries.yField = "hours";
				localSeries.xField = "when";
				// Fixe les valeurs affichées dans les dataTips et la Legend
				localSeries.displayName = s;
				// Récupère les séries courantes du Chart
				var currentSeries:Array = myChart.series;
				// Ajoute la série courante aux series existantes
				currentSeries.push(localSeries);
				// Assigne le nouveau tableau de series au chart
				myChart.series = currentSeries;
			}
			// Créer un DateTimeAxis horizontal
			var hAxis:DateTimeAxis = new DateTimeAxis();
			hAxis.dataUnits = "days";
			// A False pour afficher le label le plus à gauche
			hAxis.alignLabelsToUnits = false;
			// Prendre la date dans son format courant et en faire un vrai objet Date
			hAxis.parseFunction = createDate;
			myChart.horizontalAxis = hAxis;
		}
		public function createDate(s:String):Date {
		// Reformater la data pour créer des objets Date
		var a:Array = s.split("/");
		// Les chaines existantes sont au format"MM/DD/YYYY".
		// Pour créer des objets Date, on doit passer sous la forme "YYYY,MM,DD",
		// où MM est indexé-0
		var newDate:Date = new Date(a[2],a[0]-1,a[1]);
		return newDate;
		}
	]]></mx:Script>
	<mx:Panel title="Line Chart avec nombre de Series variable">
		<mx:LineChart id="myChart" showDataTips="true"/>
		<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

Remplis sous: ActionScript, Charting, Exemple, Formatter, XML || Taggé comme: , , , , , , Laisser un commentaire

Articles similaires

Commentaires (10) Trackbacks (0)
  1. Xavier
    4 décembre 2009

    Bonjour, merci pour ce site qui est la référence en la matière, il m'a déjà beaucoup aidé...
    J'ai une petite question sur ce tuto.

    si on rajoute par exemple un male ou female sous ;
    comment faire pour filtrer et n'afficher que les "male", les "female"?

    Merci d'avance!

  2. fnicollet
    4 décembre 2009

    Salut,
    le plus simple est que tu conserves ton dataProvider (ArrayCollection) comme variable de la classe . Ensuite, tu pourras lui mettre une filterFunction pour filtrer les éléments que tu souhaites.
    Genre:
    monDataProvider.filterFunction = myFilterFunction;
    public function myFilterFunction(item:Object):Boolean{
    var itemXML:XML = item as XML;
    if (itemXML.male =="true"){
    // on ne filtre que les noeuds ayant la propriété "male" à true
    return true;
    }

    }

  3. fnicollet
    4 décembre 2009

    Salut,
    le plus simple est que tu conserves ton dataProvider (ArrayCollection) comme variable de la classe . Ensuite, tu pourras lui mettre une filterFunction pour filtrer les éléments que tu souhaites.
    Genre:
    monDataProvider.filterFunction = myFilterFunction;
    public function myFilterFunction(item:Object):Boolean{
    var itemXML:XML = item as XML;
    if (itemXML.male =="true"){
    // on ne filtre que les noeuds ayant la propriété "male" à true
    return true;
    }
    return false;
    }

    Voilà, c'est pas testé mais sinon, c'est l'esprit ;)
    Fabien

  4. Xavier
    4 décembre 2009

    Super quelle rapidité!
    Merci Fabien.
    Je suis débutant mais je vais essayer de commencer avec cela... j'ai déjà eu du mal à l'adapter à mes besoins!

    Merci beaucoup et longue vie à flex-tutorial.fr!

  5. Xavier
    4 décembre 2009

    Une autre question par rapport à la date.
    Actuellement on a MM/DD/YYYY.
    Comment faire pour également utiliser l'heure si on a MM/DD/YYYY HH:MM:SS?
    Merci.

  6. Xavier
    4 décembre 2009

    J'ai trouvé pour avoir la date et l'heure, voici la fonction modifiée:

    COPIER-COLLER
    Actionscript:
    1. public function createDate(s:String):Date {
    2.             var items:Array = s.split(" ");
    3.             // Reformater la data pour créer des objets Date
    4.             var dateItems:Array = items[0].split("/");
    5.             // Reformater la data pour créer des objets Time
    6.             var timeItems:Array = items[1].split(":");
    7.             // Les chaines existantes sont au format"MM/DD/YYYY HH:MM:SS".
    8.             // Pour créer des objets Date, on doit passer sous la forme "YYYY,MM,DD HH,MM,SS",
    9.             // où MM est indexé-0
    10.             var newDate:Date = new Date(
    11.                 dateItems[2],dateItems[0]-1,dateItems[1],
    12.                 timeItems[0],timeItems[1],timeItems[2]);
    13.             return newDate;
    14.         }

    En espérant que cela pourra vous servir.

  7. NoNoDup
    19 mai 2010

    Bonjour

    comment faire une recherche sur un noeud qui peut contenir plusieurs valeurs.
    J'ai ce XML :

    Catel
    Machine

    Bocquet
    José-Louis

    Kiki de Montparnasse

    Catel
    Machine

    L'autoroute du soleil

    Bocquet
    José-Louis

    Son livre à lui

    Si je fais cette recherche :
    for each (var item:XML in Book.(Authors.Author.LastName=="Catel"))

    Je n'ai que le livre ou cet auteur est tout seul, jamais celui où ils sont deux.
    Est-ce que quelqu'un sait la manière de faire pour récupérer les deux livres ?

    D'avance merci.

    NoNoDup

  8. NoNoDup
    19 mai 2010

    Bonjour

    comment faire une recherche sur un noeud qui peut contenir plusieurs valeurs.
    J'ai ce XML :

    COPIER-COLLER
    MXML:
    1. Catel
    2.         Machine
    3.      
    4.      
    5.         Bocquet
    6.         José-Louis
    7.      
    8.    
    9.     Kiki de Montparnasse
    10.  
    11.  
    12.    
    13.      
    14.         Catel
    15.         Machine
    16.      
    17.    
    18.     L'autoroute du soleil
    19.  
    20.  
    21.    
    22.      
    23.         Bocquet
    24.         José-Louis
    25.      
    26.    
    27.     Son livre à lui

    Si je fais cette recherche :

    COPIER-COLLER
    MXML:
    1. for each (var item:XML in Book.(Authors.Author.LastName=="Catel"))

    Je n'ai que le livre ou cet auteur est tout seul, jamais celui où ils sont deux.
    Est-ce que quelqu'un sait la manière de faire pour récupérer les deux livres ?

    D'avance merci.

    NoNoDup

  9. naou18
    8 avril 2011

    Merci pour se tutoriel , qui montre l'utilité de la classe DateTimeAxis ;
    cependant , est ce que c'est faisable uniquement avec la MXML ,
    sans utilisé ActionScript 3.
    Merci ...

  10. fnicollet
    8 avril 2011

    Oui, en MXML, les propriétés sont des attributs. On a un truc du genre:

    COPIER-COLLER
    MXML:
    1. <mx:BarChart>
    2.   <mx:horizontalAxis>
    3.     <mx:DateTimeAxis dataUnits="days" alignLabelsToUnits="false" parseFunction="createDate" />
    4.   </mx:horizontalAxis>
    5. </mx:BarChart>

    Pas testé mais c'est l'esprit

    Fabien


Leave a comment

(required)

Aucun trackbacks pour l'instant

» «

Mes projets (Open Source)

Data Filter Lib ToasterLib

Autres

tutorial flex tutorial flex AFCS livres AS3 Flex

Blogoliste