Solved

Reading XML Attributes in Flex to generate Graphs

Posted on 2009-04-06
15
1,277 Views
Last Modified: 2013-11-18
Hi

I am developing an app on Flex to generate bar chart. I have the following XML file. At the moment i can read the XML attribute but having problem in binding the data with the graph. I want to create a multiple bar chart.

On X axis we have WeekNo-1 and so on...

On Yaxis we want to have the value from 'complete' attribute in the <week> tag.

Any help would be much appreciated.
<?xml version="1.0" encoding="UTF-8"?>
<Data>
<Overall GoogleUniqVisitorOverall="0"  GoogleUniqVisitorOverallPerc="100"  CompleteOverall="14958" CompleteOverallPercentage="0" TelOptOutFalseOverall="6078" TelOptOutFalseOverallPerc="0" />
<Cycle CycleID="2" RMCycleID="08/09 - Cycle 2">
	<Week WeekStart="29/09/2008" WeekNo="1" CompletePredicted="0" Complete="679" Uncomplete="691" TelSupplied="0" TelOptOutFalse="646" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="06/10/2008" WeekNo="2" CompletePredicted="0" Complete="1283" Uncomplete="1112" TelSupplied="0" TelOptOutFalse="1229" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="13/10/2008" WeekNo="3" CompletePredicted="0" Complete="913" Uncomplete="1046" TelSupplied="0" TelOptOutFalse="863" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="20/10/2008" WeekNo="4" CompletePredicted="0" Complete="946" Uncomplete="880" TelSupplied="0" TelOptOutFalse="742" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="27/10/2008" WeekNo="5" CompletePredicted="0" Complete="757" Uncomplete="796" TelSupplied="0" TelOptOutFalse="37" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="03/11/2008" WeekNo="6" CompletePredicted="0" Complete="823" Uncomplete="912" TelSupplied="0" TelOptOutFalse="40" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
 
	<Week WeekStart="10/11/2008" WeekNo="7" CompletePredicted="0" Complete="890" Uncomplete="948" TelSupplied="0" TelOptOutFalse="52" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="17/11/2008" WeekNo="8" CompletePredicted="0" Complete="704" Uncomplete="771" TelSupplied="0" TelOptOutFalse="39" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="24/11/2008" WeekNo="9" CompletePredicted="0" Complete="552" Uncomplete="706" TelSupplied="0" TelOptOutFalse="36" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="01/12/2008" WeekNo="10" CompletePredicted="0" Complete="1012" Uncomplete="597" TelSupplied="0" TelOptOutFalse="334" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="08/12/2008" WeekNo="11" CompletePredicted="0" Complete="523" Uncomplete="661" TelSupplied="0" TelOptOutFalse="166" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="15/12/2008" WeekNo="12" CompletePredicted="0" Complete="354" Uncomplete="452" TelSupplied="0" TelOptOutFalse="97" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="22/12/2008" WeekNo="13" CompletePredicted="0" Complete="146" Uncomplete="258" TelSupplied="0" TelOptOutFalse="49" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<Week WeekStart="29/12/2008" WeekNo="14" CompletePredicted="0" Complete="331" Uncomplete="379" TelSupplied="0" TelOptOutFalse="100" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
	<CyclePeriod Start="29/09/2008" End="04/01/2009" />
</Cycle>
 
</Data>

Open in new window

0
Comment
Question by:rifaquat
  • 8
  • 7
15 Comments
 
LVL 37

Expert Comment

by:zzynx
ID: 24077171
Maybe you should show us what you already have
0
 

Author Comment

by:rifaquat
ID: 24077227
here you are
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="testData.send()" width="1044"  horizontalAlign="center" verticalAlign="middle" height="630">
  
	<mx:SeriesInterpolate id="changeEffect" duration="2000"/>
	<mx:XML id="myXML" source="myXML"/>
   		
 	
 	<mx:Panel horizontalAlign="center" title="Revenue" x="120.5" y="103" height="339" width="803">
	  <mx:ColumnChart dataProvider="{myXML.Cycle.Week}" id="testChart" showDataTips="true" height="211" width="532">
		  <mx:horizontalAxis>
		  	<mx:CategoryAxis dataProvider="{myXML.Cycle.Week}" categoryField="WeekNo"/>
     	  </mx:horizontalAxis>
	 	  <mx:series>
		  	<mx:ColumnSeries showDataEffect="changeEffect" xField="{myXML.Cycle.Week.@WeekNo}" yField="myXML.Cycle.Week.@complete" displayName="Revenue"/>
		  </mx:series>
	  </mx:ColumnChart>
 
 
	</mx:Panel>
		<mx:TextArea id="something" text="Test" x="386" y="494" width="306"/> 
 
	<mx:Script>
		<![CDATA[
		import mx.controls.Text;
		import mx.rpc.events.ResultEvent;
		//import mx.collections.ArrayCollection;
		 
		[Bindable]
		private var testInfo:XMLList;
		
	 
		 
		private function xmlHandler(evt:ResultEvent):void{
 
		  
			 
			testInfo = evt.result.Cycle;
		
	 
			 
			trace("printing Complete\n"+ myXML.Cycle.Week.@WeekNo);
			
		}
	    
	   
	    
	    
		]]>
	</mx:Script>
 
</mx:Application>

Open in new window

0
 
LVL 37

Expert Comment

by:zzynx
ID: 24077268
>> creationComplete="testData.send()"

What is testData?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:rifaquat
ID: 24077284
sorry it was HTTPService i have removed it..so its no longer used.
0
 

Author Comment

by:rifaquat
ID: 24077295
I was using this before:
<mx:HTTPService url="myxml.xml" id="testData" result="xmlHandler(event)" resultFormat="e4x"/>

Open in new window

0
 
LVL 37

Expert Comment

by:zzynx
ID: 24077609
Consider this code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
		width="1044"  horizontalAlign="center" verticalAlign="middle" height="630">
  
        <mx:SeriesInterpolate id="changeEffect" duration="2000"/>
 
		<mx:XMLListCollection id="data">
			<mx:source>
    			<mx:XMLList>
						<Week WeekStart="29/09/2008" WeekNo="1" CompletePredicted="0" Complete="679" Uncomplete="691" TelSupplied="0" TelOptOutFalse="646" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="06/10/2008" WeekNo="2" CompletePredicted="0" Complete="1283" Uncomplete="1112" TelSupplied="0" TelOptOutFalse="1229" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="13/10/2008" WeekNo="3" CompletePredicted="0" Complete="913" Uncomplete="1046" TelSupplied="0" TelOptOutFalse="863" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="20/10/2008" WeekNo="4" CompletePredicted="0" Complete="946" Uncomplete="880" TelSupplied="0" TelOptOutFalse="742" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="27/10/2008" WeekNo="5" CompletePredicted="0" Complete="757" Uncomplete="796" TelSupplied="0" TelOptOutFalse="37" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="03/11/2008" WeekNo="6" CompletePredicted="0" Complete="823" Uncomplete="912" TelSupplied="0" TelOptOutFalse="40" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
 
				        <Week WeekStart="10/11/2008" WeekNo="7" CompletePredicted="0" Complete="890" Uncomplete="948" TelSupplied="0" TelOptOutFalse="52" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="17/11/2008" WeekNo="8" CompletePredicted="0" Complete="704" Uncomplete="771" TelSupplied="0" TelOptOutFalse="39" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="24/11/2008" WeekNo="9" CompletePredicted="0" Complete="552" Uncomplete="706" TelSupplied="0" TelOptOutFalse="36" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="01/12/2008" WeekNo="10" CompletePredicted="0" Complete="1012" Uncomplete="597" TelSupplied="0" TelOptOutFalse="334" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="08/12/2008" WeekNo="11" CompletePredicted="0" Complete="523" Uncomplete="661" TelSupplied="0" TelOptOutFalse="166" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="15/12/2008" WeekNo="12" CompletePredicted="0" Complete="354" Uncomplete="452" TelSupplied="0" TelOptOutFalse="97" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="22/12/2008" WeekNo="13" CompletePredicted="0" Complete="146" Uncomplete="258" TelSupplied="0" TelOptOutFalse="49" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
				        <Week WeekStart="29/12/2008" WeekNo="14" CompletePredicted="0" Complete="331" Uncomplete="379" TelSupplied="0" TelOptOutFalse="100" GoogleUniqVisitorPredicted="0" GoogleUniqVisitor="0" />
    			</mx:XMLList>
			</mx:source>
		</mx:XMLListCollection>
        
        
        <mx:Panel horizontalAlign="center" title="Revenue" x="120.5" y="103" height="339" width="803">
          <mx:ColumnChart dataProvider="{data}" id="testChart" showDataTips="true" height="211" width="532">
                  <mx:horizontalAxis>
                        <mx:CategoryAxis categoryField="@WeekNo"/>
          </mx:horizontalAxis>
                  <mx:series>
                        <mx:ColumnSeries showDataEffect="changeEffect" 
                        	xField="@WeekNo" 
                        	yField="@Complete" 
                        	displayName="Revenue"/>
                  </mx:series>
          </mx:ColumnChart>
 
 
        </mx:Panel>
                <mx:TextArea id="something" text="Test" x="386" y="494" width="306"/> 
 
        <mx:Script>
                <![CDATA[
                ]]>
        </mx:Script>
 
</mx:Application>

Open in new window

0
 

Author Comment

by:rifaquat
ID: 24077800
Thanks mate..Can i ask u one more question i will add more points then?
0
 
LVL 37

Expert Comment

by:zzynx
ID: 24077862
You're welcome.

>> Can i ask u one more question
If it's somewhat related, yes.
If not, close this one and ask open one.
0
 

Author Comment

by:rifaquat
ID: 24077927
In my xml i have a 'CycleID' attribute and then in the 'Cycle period' tag i have start and End date. How would i populate it in a combo box something like:

1) Cycle 2 - 20/01/2009 to 25/01/2009 and so on... and then i want to get the cycle ID from the combo box when its clicked.

Thanks.
0
 
LVL 37

Accepted Solution

by:
zzynx earned 250 total points
ID: 24078186
I don't think that is related with this question.
It's about the use of a combo box.
Better close this Q and ask that in another Q.

As a first help I would already give you this link:
http://blog.3alves.com/blog/post/2007/08/23/Flex-ComboBox-using-XML.aspx
0
 
LVL 37

Expert Comment

by:zzynx
ID: 24078352
Thanx 4 axxepting
0
 

Author Comment

by:rifaquat
ID: 24078471
Now can you please answere the question i asked about combo box?
0
 
LVL 37

Expert Comment

by:zzynx
ID: 24081271
>> Now can you please answere the question i asked about combo box?
Can you provide me the link of that new question?
0
 

Author Comment

by:rifaquat
ID: 24085524
0
 
LVL 37

Expert Comment

by:zzynx
ID: 24086073
I see that the first link in the first comment that Q already got, is the one I already provided you.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question