[Charting] Piechart avec des donnees provenants de Mysql

Version imprimable

Bonjour =)

J'ai un petit souci de charting:
J'aimerai créer un Piechart qui prendra en paramètre plusieurs actions et le temps passe à les faire :

Code:

1
2
3
4
5
6
<mx:PieChart id="testChart" dataProvider="{testInfo}" showDataTips="true"  x="254" y="141">
	<mx:series>
		<mx:PieSeries field="time" nameField="title"/>
	</mx:series>
</mx:PieChart> 
<mx:Legend dataProvider="{testData}" x="69" y="388"/>

La fonction appelée :

Code:

1
2
3
4
5
6
7
8
9
10
 
[Bindable]
public var testInfo:ArrayCollection; 
 
private function xmlHandler(evt:ResultEvent):void{    
				testInfo.addItem({Action:"Project",Time:evt.result.project});
				testInfo.addItem({Action:"Managment",Time:evt.result.managment});
				testInfo.addItem({Action:"Distraction",Time:evt.result.distraction});
 
        }

le code php correspondant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$query= "SELECT * FROM employee WHERE id_employe= '1'";
 
$result = mysql_fetch_array(mysql_query($query)); 
 
$output1 = "<project>";
$output1.= $result['project_counter'];
$output1 .= "</project>";
 
$output2 = "<managment>";
$output2.= $result['managment_counter'];
$output2 .= "</managment>";
 
$output3 = "<distraction>";
$output3.= $result['break_counter'];
$output3 .= "</distraction>";
 
print($output1);
print($output2);
print($output3);

De toute evidence ce n'est pas la bonne methode car le piechart n'apparait pas, je pense qu il doit etre vide.

04/05/2009, 11h02
ellene

Bonjour,

Tu appelles quoi comme objet ? et Quand ?

Bonjour,

Mon code a un petit peu change :

Le code mxml:

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
 	<mx:Script>  
         <![CDATA[ 
      	 import mx.rpc.events.ResultEvent;  
 
 		[Bindable]
 		public var testInfo:XMLList; 
 
         private function xmlHandler(evt:ResultEvent):void{    
 
   				 testInfo = evt.result.action ;
        }   
        ]]>  
 	</mx:Script> 	
 
<mx:HTTPService url="http://localhost/chartingTest-debug/test.php" id="testData" result="xmlHandler(event)" resultFormat="e4x" useProxy="false"/>
 
<mx:VBox horizontalAlign="center">  
 
	<mx:Panel horizontalAlign="center" title="Employee time gestion">  
 
   		<mx:ColumnChart dataProvider="{testInfo}" id="testChart" showDataTips="true" x="238.5" y="75">  
        	     	   <mx:horizontalAxis>  
        	        	    <mx:CategoryAxis dataProvider="{testInfo}" categoryField="name"/>  
        	         	</mx:horizontalAxis>  
        	        	<mx:series>  
        	           		 <mx:ColumnSeries xField="name" yField="time" displayName="time spended"/>  
        	        	</mx:series>  
    	</mx:ColumnChart>  
 
    </mx:Panel>  
 
 	<mx:Legend dataProvider="{testChart}" x="90" y="242"/>  
 
</mx:VBox>

le code php :

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
<?php
 
define( "DATABASE_SERVER", "localhost" );
 
define( "DATABASE_USERNAME", "root" );
 
define( "DATABASE_PASSWORD", "" );
 
define( "DATABASE_NAME", "project" );
 
//connect to the database
 
$mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD) or die(mysql_error());
 
//select the database
 
mysql_select_db( DATABASE_NAME );
 
//asign the data passed from Flex to variables
 
$idemp = mysql_real_escape_string($_POST["id_emp"]);
 
 
$query= "SELECT * FROM employee WHERE id_employe= '1'";
 
$result = mysql_fetch_array(mysql_query($query)); 
 
$output = "<chart>";
 
$output .= "<action>";
	$output .= "<name>";
		$output .= "project";
	$output .= "</name>";
	$output .= "<time>";
		$output .= $result['project_counter'];
	$output .= "</time>";
$output .= "</action>";
 
$output .= "<action>";
	$output .= "<name>";
		$output .= "managment";
	$output .= "</name>";
	$output .= "<time>";
		$output .= $result['managment_counter'];
	$output .= "</time>";
$output .= "</action>";
 
$output .= "<action>";
	$output .= "<name>";
		$output .= "distraction";
	$output .= "</name>";
	$output .= "<time>";
		$output .= $result['break_counter'];
	$output .= "</time>";
$output .= "</action>";
 
$output .= "</chart>";
 
 
print($output);
 
 
?>

Le but est de recuperer le temps passe en projet, management, et pause...

Je serais toi, j'utiliserai peut etre un RemoteObject et je récupererai un arrayCollection, que je transmet au chart.

Un exemple type d'un PieChart, manque juste le remoteObject :

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
<?xml version="1.0"?>
<!-- Simple example to demonstrate the PieChart control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[          
        import mx.collections.ArrayCollection;
 
        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
 
        private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
            var temp:String= (" " + percentValue).substr(0,6);
            return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
        }
        ]]>
    </mx:Script>
 
    <!-- Define custom colors for use as pie wedge fills. -->
    <mx:SolidColor id="sc1" color="blue" alpha=".6"/>
    <mx:SolidColor id="sc2" color="red" alpha=".6"/>
    <mx:SolidColor id="sc3" color="0x663300" alpha=".6"/>
 
    <!-- This Stroke is used for the callout lines. -->
    <mx:Stroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>
 
    <!-- This Stroke is used to separate the wedges in the pie. -->
    <mx:Stroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>
 
    <!-- This Stroke is used for the outer border of the pie. -->
    <mx:Stroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>
 
 
    <mx:Panel title="Olympics 2004 Medals Tally Panel" height="100%" width="100%">
        <mx:PieChart id="chart" 
            height="100%" 
            width="100%"
            paddingRight="5" 
            paddingLeft="5" 
            showDataTips="true" 
            dataProvider="{medalsAC}"
        >          
            <!--
            -->
            <mx:series>
                <mx:PieSeries 
                    nameField="Country"
                    labelPosition="callout" 
                    field="Gold" 
                    labelFunction="displayGold" 
                    calloutStroke="{callouts}" 
                    radialStroke="{radial}" 
                    stroke="{pieborder}"
                    fills="{[sc1, sc2, sc3]}"
                >
                    <!-- Clear the drop shadow filters from the chart. -->
                    <mx:filters>
                        <mx:Array/>
                    </mx:filters>
                </mx:PieSeries>
            </mx:series>
        </mx:PieChart>  
        <mx:Legend dataProvider="{chart}"/>
    </mx:Panel>
</mx:Application>

12/05/2009, 13h57
Jim_Nastiq

pour résoudre ton problème cloisonne au maximum et valide chaqué étape:

etape 1: ton piechart fonctionne avec ton jeu de donnée en statique
étape 2: ton httpService te renvoi bien ton jeu de donnée sous une forme correct(xml ou arraycollection a toi de voir).

si c'est 2 étapes sont validées indépendamment l'une de l'autre(et bien validées!) tu peux passer à l'étape qui consiste a assembler les 2 pour alimenter le dataprovider de ton piechart.

la clé c'est le debug ;)