4 Replies Latest reply on Jun 29, 2007 11:26 AM by ntsiii

    Datagrid Selection to Chart

    rcwhitejr
      Hi everyone,
      I am a little stuck on some flex code. This is my first time coding flex so bear with me. I am importing an xml file from ruby on rails and i want the following to happen. A data grid is available and when you choose a selection on the datagrid, the line chart displays data for only that selection. This is my code. I am getting a null pointer when i try to create the new xmlList

      CODE
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="getCampaigns.send(),listCampData.send()">

      <mx:Script>
      <![CDATA[
      import mx.rpc.events.ResultEvent;

      public function listCampaigns():void {

      getCampaigns.send();
      listCampData.send();
      }
      var xmlList:XMLList = new XMLList(listCampData.send());
      var tempXml:XML;
      public function listCampaignsXML(campaign:String):void {
      for each ( var cam:XML in xmlList.campdates)
      {
      if(cam.(campaign-name == campaign)) {
      tempXml.appendChild(cam)
      }

      }
      }

      ]]>
      </mx:Script>

      <mx:HTTPService id="listCampData" url=" http://localhost:3000/campdates/xmlList" useProxy="false" method="POST"/>
      <mx:HTTPService id="getCampaigns" url=" http://localhost:3000/campaigns/xmlList" useProxy="false" method="POST"/>
      <mx:XMLListCollection id="campData"
      source="{XMLList(listCampData.lastResult.children())}"/>


      <mx:ApplicationControlBar x="0" y="0" width="679" height="409">
      <mx:LineChart id="CTR" width="558" dataProvider="tempXml">
      <mx:series>
      <mx:LineSeries displayName="CTR" yField="ctr"/>
      </mx:series>
      </mx:LineChart>
      <mx:Legend dataProvider="{CTR}"/>
      </mx:ApplicationControlBar>
      <mx:Accordion x="678" y="0" width="337" height="219">
      <mx:Canvas label="Campaign" width="100%" height="100%">
      <mx:DataGrid id="campaigns" x="0" y="0" width="335" height="176" dataProvider="{getCampaigns.lastResult.campaigns.campaign}" click="listCampaignsXML(campaigns.selectedItem.toString())">
      <mx:columns>
      <mx:DataGridColumn headerText="Choose your Campaign" dataField="campaign-name" />
      </mx:columns>
      </mx:DataGrid>
      </mx:Canvas>
      </mx:Application>


      I really have no idea how close/wrong this is. Secondly, I think it would be better to load only the data that is selected in the data grid. For this i would need a event that sends the campaign that was selected in the datagrid to my backend, where my backend could handle it and send the required data. could anyone help me with that? Thanks again.
      Charlie
        • 1. Datagrid Selection to Chart
          rcwhitejr Level 1
          Bump Please
          • 2. Re: Datagrid Selection to Chart
            ntsiii Level 3
            You cannot do complex assignments outside of a function.

            Also, this:
            var xmlList:XMLList = new XMLList(listCampData.send());
            will not work. All data service calls are asynchronous, so you are always passing a null to the XMLList constructor.

            You must use a result handler called by the result event of the data service call.

            Below is some sample code

            Tracy

            Sample code using HTTPService, e4x, handler function to populate a list item

            The DataGrid tag:
            <mx:DataGrid id="dg" dataProvider="{_xlcMyListData}" .../>


            The HTTPService tag:
            <mx:HTTPService id="service" resultFormat="e4x" result="onResult(event)" fault="..../>

            Script block declaration:
            import mx.rpc.Events.ResultEvent;
            [Bindable]private var _xlcMyListData:XMLListCollection;

            Invoke send:
            var oRequest:Object = new Object();
            oRequest.Arg1 = "value1";
            var token:AsyncToken = service.send(oRequest); //the AsyncToken stuff is optional
            token.myProperty1 = "myString or whatever";

            Result Handler function:
            private function onResult(oEvent:ResultEvent):void {
            var xmlResult:XML = XML(event.result); //converts result Object to XML. can also use "as" operator
            var xlMyListData:XMLList = xmlResult.myListData; //depends on xml format, is row data
            _xlcMyListData = new XMLListCollection(xlMyListData); //wrap the XMLList in a collection
            trace(_xlcMyListData.toXMLString()); //so you can see exactly how to specify dataField or build labelFunction

            }//onResult



            Tracy
            • 3. Re: Datagrid Selection to Chart
              rcwhitejr Level 1
              Thanks a lot for the reply, it is helping my understanding a lot. A few more quick questions:

              1) for the invoke send:
              var oRequest:Object = new Object();
              oRequest.Arg1 = "value1";
              var token:AsyncToken = service.send(oRequest); //the AsyncToken stuff is optional
              token.myProperty1 = "myString or whatever";

              what am i sending? im sending an object to my data service? I don't really understand this. when the token is returned what is its type/structure (assume my httpservice returns xml) Also this service only gets called once right?

              2) in the Result Handler function:
              private function onResult(oEvent:ResultEvent):void {
              I am getting an error that ResultEvent can not be typed, but in my http service i specify that the result format is e4x?

              thanks a lot
              Charlie

              • 4. Re: Datagrid Selection to Chart
                ntsiii Level 3
                1) You are POSTing a set of name=value pairs, where name is "myProperty1", and value is "value1". If you use GET, then your are sending a querystring like so: [nyUrl]?myProperty1=value1. To the server, this looks exactly like an ordinary url = querystring(get) or form.submit(post).

                "token:AsyncToken" is a dynamic object. You can add any property=value you want. (Yes, you can asign the properties AFTER the send() call, trust me). In the event handler function, you can access the token object and read your property values.

                2) Did you do: import mx.rpc.Events.ResultEvent;

                Tracy