10 Replies Latest reply on Nov 23, 2011 4:29 AM by PDFn00b

    Binding table objects to charts

    PDFn00b

      Hi, I'm consuming .Net web services, dataset objects. I'm able to do this and bind to a grid, but I can't figure out how to bind to charts becasue all the examples I see on Adobe use bidning to an Array. Help appreciated. Here is part of my code to grab the service and dataset:

       

      <mx:Script>

        <![CDATA[

         import mx.controls.Alert;

         import mx.controls.DataGrid;

         import mx.rpc.events.FaultEvent;

         import mx.rpc.events.ResultEvent;

        

        

         private function onResult(event:ResultEvent):void {

          // A DataTable or DataSet returned from a .NET webservice is

          // automatically converted to an object with a "Tables" property,

          // which contains a map of one or more dataTables.

          if (event.result.Tables != null)

          {

           // clean up panel from previous calls.

           dataPanel.removeAllChildren();

          

           for each (var table:Object in event.result.Tables)

           {

            displayTable(table);

           }

          

           // Alternatively, if a table's name is known beforehand,

           // it can be accessed using this syntax:

           //var namedTable:Object = event.result.Tables.Customers;

           //displayTable(namedTable);

          }

         }

        

         private function displayTable(tbl:Object):void {

          var dg:DataGrid = new DataGrid();

          dataPanel.addChild(dg);

          // Each table object from the "Tables" map contains two properties:

          // "Columns" and "Rows". "Rows" is where the data is, so we can set

          // that as the dataProvider for a DataGrid.

          dg.dataProvider = tbl.Rows;

         }

        

         private function onFault(event:FaultEvent):void {

          Alert.show(event.fault.toString());

         }

        ]]>

      </mx:Script>

        • 1. Re: Binding table objects to charts
          PDFn00b Level 1

          To simpify what I'm after, my web service returns an object with the Tables property. I would like to use result.Tables or similar to bind that data to my charting.

           

          Examples and help appreciated!

           

          Thanks

          • 2. Re: Binding table objects to charts
            drkstr_1 Level 4

            Instead of assigning Tables directly to the dataProvider of the DataGrid, set it to a Bindable variable, and bind that variable to both the dataProvider of both the DataGrid and your chart control.

            • 3. Re: Binding table objects to charts
              PDFn00b Level 1

              That sounds like an efficient methodology, but I need to see an example using my scenario. I’m new to flex, but know a bit about .Net. Any examples appreciated.

               

              Thanks!

              • 4. Re: Binding table objects to charts
                drkstr_1 Level 4

                I don't have enough information to give you a meaningful example.

                 

                 

                In which way would your multiple data grids be bound to the chart(s)? Can you be more specific about the use case you are trying to solve?

                 

                 

                *edit*

                 

                 

                Assuming you just have one chart that needs Tables as a dataprovider...

                 

                 

                [Bindable]
                private var _chartData:Object;
                
                
                   private function onResult(event:ResultEvent):void {
                
                   _chartData = event.result.Tables;
                
                   //...the rest of your code
                }
                
                
                <mx:LineChart dataProvider="{_chartData}" />
                

                 

                 

                 

                This is actually a bit different than my original statement, which wasn't based on the assumption that you want to chart the whole data set and not the data set of each individual grid.

                • 5. Re: Binding table objects to charts
                  PDFn00b Level 1

                  I like your example and I will be able to give it a try soon. I just have the data going to a single grid right now, but I'm going to replace the grid with a chart.

                   

                  Thanks for your help!

                  • 6. Re: Binding table objects to charts
                    PDFn00b Level 1

                    Hi I am having trouble declaring the _chartData:Object;

                     

                    I get an error that states access to undefined property private. Help appreciated.

                     

                    Here is my code:

                     

                    <mx:Script>

                      <![CDATA[

                       import mx.controls.Alert;

                       import mx.controls.DataGrid;

                       import mx.rpc.events.FaultEvent;

                       import mx.rpc.events.ResultEvent;

                      

                      

                       [Bindable]

                       Private var _chartData:Object;

                      

                      

                       private function onResult(event:ResultEvent):void {

                        // A DataTable or DataSet returned from a .NET webservice is

                        // automatically converted to an object with a "Tables" property,

                        // which contains a map of one or more dataTables.

                        if (event.result.Tables != null)

                        {

                         // clean up panel from previous calls.

                         dataPanel.removeAllChildren();

                        

                         for each (var table:Object in event.result.Tables)

                         {

                          displayTable(table);

                         

                          _chartData = event.result.Tables;

                         

                         }

                        

                         // Alternatively, if a table's name is known beforehand,

                         // it can be accessed using this syntax:

                         //var namedTable:Object = event.result.Tables.Customers;

                         //displayTable(namedTable);

                        }

                       }

                      

                       private function displayTable(tbl:Object):void {

                        var dg:DataGrid = new DataGrid();

                        dataPanel.addChild(dg);

                        // Each table object from the "Tables" map contains two properties:

                        // "Columns" and "Rows". "Rows" is where the data is, so we can set

                        // that as the dataProvider for a DataGrid.

                        dg.dataProvider = tbl.Rows;

                       }

                      

                        

                       private function onFault(event:FaultEvent):void {

                        Alert.show(event.fault.toString());

                       }

                      ]]>

                    </mx:Script>

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                     

                    • 7. Re: Binding table objects to charts
                      drkstr_1 Level 4

                      It's "private" not "Private".

                      • 8. Re: Binding table objects to charts
                        PDFn00b Level 1

                        Thanks! I got past that error and I'm getting no errors now, however, I can't seem to get the chart to display the data. This is what I have for the chart currently:

                         

                        <mx:ColumnChart id="columnchart1" dataProvider="{_chartData}" >

                          <mx:series>

                           <mx:ColumnSeries displayName="Series 1" yField="year" xField="sales"/>

                          </mx:series>

                        </mx:ColumnChart>

                         

                        year and sales are columns in my dataset that is returned. Help appreciated.

                        • 9. Re: Binding table objects to charts
                          PDFn00b Level 1

                          What I am trying to do is learn how to use .Net web services and consume them with flex for use in dashboards. I'm trying to use this example:

                           

                          http://www.adobe.com/devnet/flex/articles/build_first_dashboard.html

                           

                          But I'm using .Net, not PHP. The problem I'm running into is understanding the differences on how to pass the web service table as on object vs. an Array Collection like in the PHP example example above. Help appreciated.

                           

                          I was able to get my service to pass to Flex and display a datagrid, but I can't get a chart to work to save my life.

                           

                          Thanks!

                          • 10. Re: Binding table objects to charts
                            PDFn00b Level 1

                            Im still having issues with my basic example. I can populate the grid, but I cant populate the chart. Any help appreciated. My complete code is below:

                             

                            <?xml version="1.0" encoding="utf-8"?>

                            <mx:Application xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

                            <mx:WebService

                              id="nwCL"

                              wsdl="http://localhost:51364/WebService2.asmx?wsdl"

                              result="onResult(event)"

                              fault="onFault(event)" />

                            <mx:Button label="Get Single DataTable" click="nwCL.GetRecordsByRegion('Denver')"/>

                            <mx:Button label="Get MultiTable DataSet" click="nwCL.GetRecordsByRegion('Denver')"/>

                            <mx:ColumnChart id="columnchart1" dataProvider="{mySales}">

                              <mx:series>

                               <mx:ColumnSeries displayName="Series 1" yField="sales"  xField="year" />

                              </mx:series>

                            </mx:ColumnChart>

                             

                            <mx:Panel id="dataPanel" width="50%" height="50%" title="Data Tables"/>

                             

                            <mx:Script>

                              <![CDATA[

                               import mx.collections.ArrayCollection;

                               import mx.controls.Alert;

                               import mx.controls.DataGrid;

                               import mx.rpc.events.FaultEvent;

                               import mx.rpc.events.ResultEvent;

                              

                               [Bindable]

                               private var mySales:ArrayCollection = new ArrayCollection;

                                

                              

                               private function onResult(event:ResultEvent):void {

                                // A DataTable or DataSet returned from a .NET webservice is

                                // automatically converted to an object with a "Tables" property,

                                // which contains a map of one or more dataTables.

                                if (event.result.Tables != null)

                                {

                                 // clean up panel from previous calls.

                                 dataPanel.removeAllChildren();

                                

                                 for each (var table:Object in event.result.Tables)

                                 {

                                  displayTable(table);

                                      

                                 }

                                

                                 // Alternatively, if a table's name is known beforehand,

                                 // it can be accessed using this syntax:

                                 //var namedTable:Object = event.result.Tables.Customers;

                                 //displayTable(namedTable);

                                 mySales = event.result.Tables as ArrayCollection;

                                    

                                }

                               }

                              

                               private function displayTable(tbl:Object):void {

                                var dg:DataGrid = new DataGrid();

                                dataPanel.addChild(dg);

                                // Each table object from the "Tables" map contains two properties:

                                // "Columns" and "Rows". "Rows" is where the data is, so we can set

                                // that as the dataProvider for a DataGrid.

                                dg.dataProvider = tbl.Rows;

                             

                               }

                              

                               private function onFault(event:FaultEvent):void {

                                Alert.show(event.fault.toString());

                               }

                              ]]>

                            </mx:Script>

                             

                             

                            </mx:Application>