Flex chart from XML data using HttpService with Java Servlets

May 10th, 2009 in Flex, Java/J2EE. 2 comments
1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 4.29 out of 5)
Loading ... Loading ...

A previous article showed how to populate a datagrid from XML returned from a HttpService call from Flex. This one will demonstrate creation of a Line Chart using XML data passed from a servlet.
Although there are quite a few articles on the internet that describe how to create a chart using XML data, most of them use only a simple xml and hence are able to use the XML datatype directly as a datasource. However these solutions do not work for nodes that are deeper than a couple of levels in the xml tree. The solution described here converts an XML data type to an ArrayCollection and so can be adapted for xmls of varying complexity.

Steps

  • As before, we return an xml from the doPost() method of the servlet. The servlet is mapped to /getData in a web application named FlexExample and deployed.

    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws   ServletException, IOException {
            PrintWriter writer=response.getWriter();
            writer.println("<?xml version=\"1.0\"?>\n"+
                            "<salesdata>"+
                              "<item date=\"12/12/2008\">"+
                                 "<profit>"+
                                  "<beforetax>750</beforetax>"+
                                  "<aftertax amt=\"600\"/>"+
                                 "</profit>"+
                                 "<sales>1000.23</sales>"+
                              "</item>"+
                              "<item date=\"12/13/2008\">"+
                                 "<profit>"+
                                  "<beforetax>550.34</beforetax>"+
                                  "<aftertax amt=\"350.10\" />"+
                                 "</profit>"+
                                 "<sales>753.98</sales>"+
                              "</item>"+
                              "<item date=\"12/14/2008\">"+
                                 "<profit>"+
                                  "<beforetax>547.32</beforetax>"+
                                  "<aftertax amt=\"324\" />"+
                                 "</profit>"+
                                 "<sales>700.23</sales>"+
                               "</item>"+
                               "<item date=\"12/15/2008\">"+
                                  "<profit>"+
                                    "<beforetax>858.38</beforetax>"+
                                    "<aftertax amt=\"734\" />"+
                                  "</profit>"+
                                  "<sales>1350.23</sales>"+
                               "</item>"+
                             "</salesdata>");
      }
       

    Why did I put the aftertax in an attribute but not the beforetax amount? Just to demonstrate how the attribute of an inner node can be retrieved.

  • Here is the mxml for our line chart. The highlighted lines are explained below:

       <?xml version="1.0"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="srv.send()">
      <mx:Script><![CDATA[
      import mx.collections.ArrayCollection;
      import mx.rpc.events.ResultEvent; 
    
      private var xmldata:XML;
      [Bindable] private var myArr:ArrayCollection=new ArrayCollection;
    
      private function resultHandler(event:ResultEvent):void{
          xmldata=event.result as XML;
    
          for each (var thexml:XML in xmldata.item){
    
          	 var obj:Object= {"date":thexml.@date,
                            "sales":thexml.sales,
                            "profitbeforetax":thexml.profit.beforetax,
                            "profitaftertax":thexml.profit.aftertax.@amt};
    
             myArr.addItem(obj);
          }
      }
    
      ]]></mx:Script>
    
      <mx:HTTPService id="srv" url="http://serverhost:serverport/FlexExample/getData" resultFormat="e4x"  result="resultHandler(event)" />
        <mx:Panel title="Line Chart">
         <mx:LineChart id="chart" dataProvider="{myArr}" showDataTips="true">
            <mx:horizontalAxis>
               <mx:CategoryAxis dataProvider="{myArr}" categoryField="date" />
            </mx:horizontalAxis>
            <mx:series>
               <mx:LineSeries yField="sales" displayName="Sales"/>
               <mx:LineSeries yField="profitbeforetax" displayName="Profit before tax"/>
               <mx:LineSeries yField="profitaftertax" displayName="Profit after tax"/>
             </mx:series>
         </mx:LineChart>
          <mx:Legend dataProvider="{chart}" direction="horizontal"/>
        </mx:Panel>
    </mx:Application>
      
    1. line 27: The HttpService call is defined here with the servlet url and the function to be called when the service call returns successfully (resultHandler). Note that we choose the resultFormat as e4x to make xml processing easier. The creationComplete attribute in line 3 makes sure that the service call is made when the file is loaded.
    2. line 9: Define an ArrayCollection variable myArr. Since we will be using this variable as the data provider for the charts, we make it bindable.
    3. line 12: When the httpservice call returns successfully, the variable xmldata is assigned to the xml being returned from the service.
    4. lines 14-21: This is where the XML to ArrayCollection transformation is done. We loop through the item nodes in the XML extracting the relevant values and putting them in an Object. This Object is then added to the ArrayCollection. Note how the values and attributes are obtained using the ‘.’ and ‘@’.
      If the XML is used directly as the dataprovider (as xmldata.item) for the chart, then the values for beforetax and aftertax cannot be obtained in a straightforward manner by using profit.beforetax and profit.aftertax.(@amt). That is why we have extracted the values from the XML to an ArrayCollection.
    5. line 29: The LineChart is defined here with the dataProvider being set to the ArrayCollection.
    6. line 31: Defines the CategoryAxis with categoryField set to the value ‘date’ of our ArrayCollection.
    7. lines 34,35,36: Define the LineSeries with the yfield values set to the other three values in the ArrayCollection (’sales’, ‘profitbeforetax’, ‘profitaftertax’).
  • Upon running the mxml, you should see the following graph that plots sales, profit before tax and profit after tax versus date.
    xml to arraycollection flex chart Flex chart from XML data using HttpService with Java Servlets

Related Articles

Flex with Java Servlets: How to use XML from an HttpService to populate a datagrid.

Tags: , , ,

2 Responses to “Flex chart from XML data using HttpService with Java Servlets”

  1. vivek at
    says:

    Good example

  2. Stavros at
    says:

    Very nice !!!!!!!

Leave a Reply

Sponsors