Column Chart dynamique

**MrVentouse** · 05/03/2010, 11h11

Aloa...

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Souhaité :

**MrVentouse** · 29/03/2010, 10h48

Petit ajout..

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**MrVentouse** · 29/03/2010, 17h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**MrVentouse** · 30/03/2010, 15h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**jylaxx** · 30/03/2010, 16h08

Apres ton send() il faut attendre le déclenchement de l'événement qui indique la disponibilité du résultat.

**MrVentouse** · 30/03/2010, 16h16

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

alors..?

Column Chart dynamique

Flex

Vue hybride

Discussions similaires

Partager

Partager