Column Chart dynamique

Version imprimable

Aloa...

Wouhou..I'm back...comme quasiment chaque jours...
Je suis désolé d'avance de vous infliger ça...(encore et encore)...:calim2:

Donc..."quoi qui m'arrive" aujourd'hui..?
Je suis bloqué avec un joli ColumnChart..
Ce que j'aimerai c'est créer un chart dynamique, c'est à dire que selon les checkbox cliquées par l'utilisateur, différentes séries vont s'afficher sur le Chart..

Problèmes :
- Premierement, j'aimerais que lorsque aucune checkbox n'est cliquée, aucun graph n'apparaisse...(j'ai essayé de créer un array avec 0 partout...ou de mettre deactivate à la checkbox...mais aucun ne marchait)..
- Deuxiemement, lorsque l'utilisateur clique sur deux checkbox (donc normalement deux séries doivent apparaitre) seule la premiere est affichée...

Je vous laisse ci joint mon code...avec des screens pour ce que j'aimerais obtenir...!!
Je vous remercie...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
 
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
 
		[Bindable]
		public var algo1:Array = [
			{Prop:"precision", pourcents:80},
			{Prop:"rcall", pourcents:50},
			{Prop:"fmeas", pourcents:75}
		];
		[Bindable]
		public var algo2:Array = [
			{Prop:"precision", pourcents:90},
			{Prop:"rcall", pourcents:80},
			{Prop:"fmeas", pourcents:85}
		];
 
		public var aucun : Array =[ 
		    {Prop:"precision", pourcents:0},
			{Prop:"rcall", pourcents:0},
			{Prop:"fmeas", pourcents:0}
		];
 
 
 
	]]></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:SeriesSlide 
        id="slideIn" 
        duration="1500" 
        direction="up"
        />
        <mx:SeriesSlide 
        id="slideOut" 
        duration="1500" 
        direction="down"
        />
 
 
 
	<mx:Panel title="Test Column Chart">
		<mx:ColumnChart id="myChart"   showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="Prop"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries
 
					yField="pourcents"
					xField="Prop"
					displayName="algo"
					fill="{sc1}"
                    stroke="{s1}" 
                    showDataEffect="slideIn"
                    hideDataEffect="slideOut"
                    />
 
				<!--<mx:ColumnSeries
					dataProvider="{algo2}"
					yField="pourcents"
					xField="Prop"
					displayName="algo2"
					fill="{sc2}"
                    stroke="{s2}"
                      showDataEffect="slideIn"
                    hideDataEffect="slideOut"
                    />-->
 
 
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
 
<mx:VBox>
	<mx:CheckBox label="algo 1"  activate="myChart.dataProvider=algo1;" deactivate="myChart.dataProvider=aucun;"/>
	<mx:CheckBox label="algo 2"  activate="myChart.dataProvider=algo2;" deactivate="myChart.dataProvider=aucun;"/>
</mx:VBox>
 
</mx:Application>

obtenu :
http://i64.servimg.com/u/f64/14/84/95/21/charts10.jpg

Souhaité :
http://i64.servimg.com/u/f64/14/84/95/21/charts11.jpg

Petit ajout..

J'ai réussi à afficher le charts selon les différents critères...(ici, algo1/algo2/aucun) grâce à un :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 private function algo1(event:Event):void { myChart.dataProvider = algo1; myChart.series = [ a ]; } private function algo2(event:Event):void { myChart.dataProvider = algo2; myChart.series = [ b ]; } private function aucun(event:Event):void{ myChart.dataProvider = aucun; myChart.series = [ c ]; } private function All(event:Event):void{ myChart.series = [ a,b,c ]; myChart.dataProvider = algo1; }
Sachant que "a,b et c" représente les ids des columseries du chart..

Est il possible d'utiliser le même systeme..pour afficher certaines columnseries...?
C'est à dire que dans mes arrays j'affiche que les propriétés voulues!

Merci

Je pense que je me suis un peu perdu dans mon code...

J'ai donc un chart "dynamique" c'est à dire, à chaque fois que je clique sur une checkbox, il prends les deux fichiers dans les combobox, les teste, et crée le charts...
Le probleme, c'est que par moment, il me dit que :

Code:

1
2
3
TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
	at testcharts/charts()[E:\Documents and Settings\Administrateur\My Documents\Flex Builder 3\testcharts\src\testcharts.mxml:145]
	at testcharts/__check2_click()[E:\Documents and Settings\Administrateur\My Documents\Flex Builder 3\testcharts\src\testcharts.mxml:199]

Cette erreur s'affiche lorsque je teste avec le fichier test1, or le test2 (le même quasiment) marche impeccable...

De plus, lorsque la checkbox est décliqué, le charts ne s'actualise pas (meme si j'ai mis une fonction à deactivate...)

Si quelqu'un à une solution...!
Je vous joins le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="resultHandler()" initialize="map()">
 
 
	   <mx:ComboBox dataProvider="{maps}" width="150" id="CB" change="resultHandler()"/>
	   <mx:HTTPService id="srv3" url="{CB.selectedItem}"  resultFormat="e4x"/>
 
	   <mx:HTTPService id="srv4" url="{CB2.selectedItem}"  resultFormat="e4x"/>
	   <mx:ComboBox dataProvider="{maps2}" width="150" id="CB2" change="resultHandler()"  x="373" y="10"/>
 
		<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.utils.StringUtil;
		import mx.controls.Alert;  
 
 
		 private function resultHandler():void
            {
	         srv3.send();
	         srv4.send();
	         myChart.clearSelection();
	         myChart.initialize();
  	        } 
 
 
		//Pour les radiobutton...permet d'afficher certaines propriétés seules
	    private function Precision(event:Event):void {
            myChart.dataProvider = precision;
            myChart.series = [ a ];
        }
        private function Recall(event:Event):void {
            myChart.dataProvider = recall;
            myChart.series = [ b ];
        }
        private function Fmeas(event:Event):void{
        	myChart.dataProvider = fmeas;
        	myChart.series = [ c ];
        }
         private function All(event:Event):void{
        	myChart.series = [ a,b,c ];
        	myChart.dataProvider = precision;
        }
 
        private var precision:ArrayCollection = new ArrayCollection();
        private var recall:ArrayCollection = new ArrayCollection();
        private var fmeas:ArrayCollection = new ArrayCollection();
 
 
 
 
/* 	 	[Bindable]
		public var precision: ArrayCollection = new ArrayCollection([
			{algo:"algo1", pourcents:80},
			{algo:"algo2", pourcents:50},
			{algo:"algo3", pourcents:75}
		]);
 
		[Bindable]
		public var recall: ArrayCollection = new ArrayCollection([
			{algo:"algo1", pourcents:90},
			{algo:"algo2", pourcents:80},
			{algo:"algo3", pourcents:85}
		]);
 
		[Bindable]
		public var fmeas:ArrayCollection = new ArrayCollection ([
			{algo:"algo1", pourcents:75},
			{algo:"algo2", pourcents:60},
			{algo:"algo3", pourcents:95}
		]);  */
 
		//rajoute des colonnes dynamiquement
 
 
			[Bindable]
			public var maps: ArrayCollection = new ArrayCollection;
			public var maps2: ArrayCollection = new ArrayCollection(['expert/person.map','expert/biology.map','expert/currency.map']);
 
			  public function map():void
             {
                maps = new ArrayCollection(['test1.map','test2.map','test3.map']);
             // maps2 = new ArrayCollection(['expert/currency.map', 'expert/person.map', 'expert/webForm8.map','expert/book.map','expert/book-ann.map','expert/book-similar.map']);
             }    
 
 
 
			private var value:String;
			private var myArr:ArrayCollection = new ArrayCollection(); 	
			private var testdg:Boolean = true;
 
		//rajoute des colonnes dynamiquement
		public function charts(label:String):void
		{        
 
			var test1:String = String(srv3.lastResult);
			var test2:String = String(srv4.lastResult) ; 
 
			var re:RegExp = /\n|;|=/;
 
            var result1:Array = test1.split(re);
            var result2:Array = test2.split(re);
 
 
		    var totalalgo:int = 0;
		    var resultatbon:int =0;       
            for (var i:int=0; i<result1.length-1; i++)
            {  
                  value="False";
 
		           var total:int = 0;
            	for (var j:int=0; j<result2.length; j++)
            	{
                  if(result1[i] == result2[j])
                 {
	              if(result1[i+1] == result2[j+1] || result1[i-1] == result2[j-1])
	              {
	              	value="True";
	              	resultatbon = resultatbon + 1;
	              }
               }
 
               }//end for 2 
 
               	 for(var j:int=0; j<result2.length; j++)
			        {
			        	if(result2[j] != null && StringUtil.trim(result2[j].toString())!='')
			        	{
			        		total = total +1;
			        	}
			        }
 
              if(result1[i] != null && StringUtil.trim(result1[i].toString())!='')
               {
 
                if (testdg == true)
                {    
                   var newObj:Object = {} ;
                   newObj["test"] = result1[i]; 
                   newObj["color"] = value;
                   testdg =false;
                }
                else
                {  
                   newObj["test2"] = result1[i]; 
                   newObj["color"] = value;
                   testdg =true;
                }
                myArr.addItem(newObj);
                totalalgo = totalalgo +1;
               }
 
 
	  }//end for 1
 
                   trace("total " + total);
                   trace("resultatbon " + resultatbon); 
                   trace("totalalgo " + totalalgo); 
 
                   var newObj:Object = {} ;
		           var newObj2:Object = {} ;
		           var newObj3:Object = {} ;
                   newObj["algo"] = label ; 
                   newObj2["algo"] = label ; 
                   newObj3["algo"] = label ;
 
                   var tauxprecision:int = (resultatbon / total) * 100 ;
                   var tauxrecall:int = (resultatbon / totalalgo) * 100 ;
                   var tauxfmeas:int = ((2 * tauxprecision * tauxrecall) /(tauxprecision + tauxrecall));
 
                   trace("precision " + tauxprecision);
                   trace("recall " + tauxrecall); 
                   trace("fmeas " + tauxfmeas);                    
 
                   newObj["pourcents"] =   tauxprecision;
                   newObj2["pourcents"] =  tauxrecall;
                   newObj3["pourcents"] =  tauxfmeas;  
                   precision.addItem(newObj);
                   recall.addItem(newObj2);
                   fmeas.addItem(newObj3);
 
		}// end charts
 
	]]></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"/>
    <mx:SolidColor id="sc3" color="green" 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:Stroke id="s3" color="green" weight="2"/>
 
   <mx:HBox>
    	<mx:CheckBox  id="check1" label="algo1" click="charts('algo1')" />
  	    <mx:CheckBox id="check2" label="algo2"  click="charts('algo2')" />
    	<mx:CheckBox  id="check3" label="algo3" click="charts('algo3')" />
   </mx:HBox>
 
	<mx:Panel title="Test Column Chart">
		<mx:ColumnChart id="myChart" dataProvider="{precision}" showDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="algo"/>
			</mx:horizontalAxis>
			<mx:verticalAxis>
			<mx:LinearAxis maximum="100"/>
			</mx:verticalAxis>
			<mx:series>
				<mx:ColumnSeries
					id="a"
					dataProvider="{precision}"
					yField="pourcents"
					xField="algo"
					displayName="precision"
					fill="{sc1}"
                    stroke="{s1}" 
                 />
 
				<mx:ColumnSeries
					 id="b"
					dataProvider="{recall}"
					yField="pourcents"
					xField="algo"
					displayName="recall"
					fill="{sc2}"
                    stroke="{s2}"
                 />
 
               	<mx:ColumnSeries
               		id="c"
					dataProvider="{fmeas}"
					yField="pourcents"
					xField="algo"
					displayName="fmeas"
					fill="{sc3}"
                    stroke="{s3}" 
                />
 
			</mx:series>
		</mx:ColumnChart>
		<mx:Legend  direction="horizontal" dataProvider="{myChart}"/>
	</mx:Panel>
	<mx:HBox>
		<mx:RadioButton label="Precision"   click="Precision(event)"/>
		<mx:RadioButton label="Recall"  click="Recall(event)"/>
		<mx:RadioButton label="Fmeas"  click="Fmeas(event)"/>
		<mx:RadioButton label="All"   click="All(event)"/>
 
	</mx:HBox>
 
</mx:Application>

Petite mise à jour...pour signifier mes avancés et être confronté à d'autres problemes...
J'ai réglé les différentes erreurs...mais maintenant, mon chart s'affiche "à retardement"...C'est à dire, lors d'un premier click...le chart affiche les données initiales, lors d'un deuxieme click, les premieres données, lors du troisieme, les deuxiemes données...
ça décale tout d'un click...
Donc en gros, il faut que je click deux fois sur chaque checkbox, pour qu'elles affichent le résultat escompté...
Comme d'hab je vous joins le code!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
   public function testalgo(label:String):void
        {
        	if( label == 'algo1')
			{
				srv3.url = 'test1.map';
			}
			else 
			{
			   if(label== 'algo2')
			   {
			   	srv3.url = 'test2.map';
			   }	
			   else
			   {
			   	if(label == 'algo3')
			   	{
			   	 srv3.url = 'test3.map';
			   	}
			   }
			}
			srv3.send();
        } 
 
			private var value:String;
			private var myArr:ArrayCollection = new ArrayCollection(); 	
			private var testdg:Boolean = true;
 
		//rajoute des colonnes dynamiquement
		public function charts(label:String):void
		{        
 
 
				testalgo(label);					
			var test1:String = String(srv3.lastResult);
 
			trace(test1);
			var test2:String = String(srv4.lastResult); 
 
			var re:RegExp = /\n|;|=/;
 
            var result1:Array = test1.split(re);
            var result2:Array = test2.split(re);
 
 
 
		    var resultatbon:int =0; 
            var totalalgo:int = 0;
            for (var i:int=0; i<result1.length; i++)
            {  
                  value="False";
 
 
            	for (var j:int=0; j<result2.length; j++)
            	{
            	 if(result1[i] != null && StringUtil.trim(result1[i].toString())!='')
            	 {	
                  if(result1[i] == result2[j])
                 {
	              if(result1[i+1] == result2[j+1] || result1[i-1] == result2[j-1])
	              {
	              	value="True";
	              	resultatbon = resultatbon + 1;
	              }
                 }
               }
 
               }//end for 2 
               		    var total:int = 0;
               	 for(var j:int=0; j<result2.length; j++)
			        {
			        	if(result2[j] != null && StringUtil.trim(result2[j].toString())!='')
			        	{
			        		total = total +1;
			        	}
			        }
 
              if(result1[i] != null && StringUtil.trim(result1[i].toString())!='')
               {
	             totalalgo = totalalgo +1;
 
               }
 
 
	  }//end for 1
 
 
                   var newObj:Object = {} ;
		           var newObj2:Object = {} ;
		           var newObj3:Object = {} ;
                   newObj["algo"] = label ; 
                   newObj2["algo"] = label ; 
                   newObj3["algo"] = label ;
 
                   var tauxprecision:int = (resultatbon / total) * 100 ;
                   var tauxrecall:int = (resultatbon / totalalgo) * 100 ;
                   var tauxfmeas:int = ((2 * tauxprecision * tauxrecall) /(tauxprecision + tauxrecall));
 
 
 
                   newObj["pourcents"] =   tauxprecision;
                   newObj2["pourcents"] =  tauxrecall;
                   newObj3["pourcents"] =  tauxfmeas;  
                   precision.addItem(newObj);
                   recall.addItem(newObj2);
                   fmeas.addItem(newObj3);
 
		}// end charts

La function charts est appelé à chaque click de checkbox!

30/03/2010, 16h08
jylaxx

Apres ton send() il faut attendre le déclenchement de l'événement qui indique la disponibilité du résultat.
30/03/2010, 16h16
MrVentouse

Comment différer le "départ" de :

Code:

var test1:String = String(srv3.lastResult);

alors..?
30/03/2010, 18h31
jylaxx

il faut ajouter un listener sur l'événement result du HTTPService.

Donc faire un truc du style :

Code:

1
2
3
4
5
6
			public var loader:URLLoader = new URLLoader();
			public function loadXML():void
			{
				srv3.send();
 
				loader.addEventListener(Event.COMPLETE, charts());

30/03/2010, 23h15
jylaxx

Plutôt ceci :

Code:

<mx:HTTPService id="srv3" url="{CB.selectedItem}" resultFormat="e4x" result="onSrv3Result(event);"/>

Dans le click tu appelles testAlgo et dans onSrv3Result tu exécutes le code de charts() (en supprimant l'appel à testAlgo)
31/03/2010, 09h55
MrVentouse

J'avais déjà testé une solution identique...avec un result sur le Httpservice, mais du coup, celà posait un autre probleme au niveau du chart...

Chaque serie se rajoute sur le même graph... comme ici :

http://i64.servimg.com/u/f64/14/84/95/21/graph10.jpg

Alors qu'il faudrai un graph du style :

http://i64.servimg.com/u/f64/14/84/95/21/graph210.jpg

PS: l'url de mon httpservice n'est plus soumis à une combobox...donc plus de "url="{CB.selectedItem}""... l'url est défini seulement lorsque je click sur une checkbox!

[edit]Peut être celà vient il du fait...que du coup, je ne récupere pas le label...:?
31/03/2010, 10h21
jylaxx

Essaie de régler les problèmes les uns après les autres et d'associer les bonnes causes aux bons effets !

Le fait que le graphique ne soit pas conforme n'est pas lié au fait d'utiliser l'événement result.

IL FAUT utiliser l'événement result car tu ne peux pas utiliser des données tant qu'elles ne sont pas disponibles.

Pourquoi les graphs se construisent les uns sur les autres alors..?
D'où pourrait venir le probleme?:?

[Edit] Bon en effet, le problème venait bien du label...donc pour contourner le probleme...j'ai utilisé "String(srv3.url) ;" plutot que de recevoir un label!!

Pour finir il me manque toujours le probleme du déclick de la checkbox qui doit enlever...le charts correspondant:?

[edit2 : résolution]
Pour ceux que ça interesseraient...
Pour gérer le déclick de la checkbox, je teste tout simplement si elle est selectionné...et ainsi si oui, j'envoi le fichier, si non...je demande à supprimer le graphe correspondant

Je vous laisse la function appelé par la checkbox :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 public function testalgo(label:String):void { if( label == "algo1") { if (check1.selected ==true) { srv3.url = 'test1.map'; srv3.send(); } else { var selectedItem:String = 'test1.map'; for (var i:uint = 0 ; i<precision.length ; i++) { if (precision.getItemAt(i)["algo"] == selectedItem) { precision.removeItemAt(i);//propriété 1 recall.removeItemAt(i); //propriété 2 fmeas.removeItemAt(i); //propriété 3 } } } }//end if algo1 }