Synching Charts and Data Grids in Flex Templates

This posts assumes that you've looked at the new flex templates and have worked through the tutorial in the New Features Guide.  If you built the report in this tutorial, you may have noticed that your results were interactive.  You can click on a column heading to sort the rows by a column.  Or, you can drag and drop a column to a new location.  You may have also noticed that the data grid and the chart are not synchronized.  Meaning that if you sort the data grid, the data in the chart does not also sort.  Synchronizing them is pretty easy though.

  1. Turn your XML into an XMLListCollection.  BIP sends data to the flex template as an XML Object.  Unfortunately, Flex doesn't have the best XML support.  If you need to sort, filter or refresh data, it is much easier to use an Array or a Collection.  The good news:  It's very easy to convert the XML into an XMLListCollection and the XMLListCollection is much easier to work with.  First, import the proper classes into your project by adding this line:

    import mx.collections.XMLListCollection;

    Tip: just type XMLListColl and type "CTRL - Space" and Flex Builder will complete the word and add the appropriate import statement.

    Second, create the XMLListCollection as a Bindable variable:

    [Bindable]
    public var filteredXML:XMLListCollection = new XMLListCollection(dataXML.ROW);

    Notice the the new variable called filteredXML is constructed from the dataXML variable that we used in the tutorial.

  2. Modify your data grid and chart so that their data providers are the new variable called filteredXML:

    <mx:DataGrid x="10" y="160" width="476" height="152" dataProvider="{filteredXML}">

    <mx:ColumnChart x="10" y="10" id="columnchart1" width="476" height="142" dataProvider="{filteredXML}">

  3. Create an init() function.  Our end goal here is to refresh the data behind the data grid and the chart.  The refresh method of a collection must be called from inside an init() function:

    public function init():void{
            filteredXML.refresh();
    }
This is all the code necessary to get the chart and the data grid in sync.  Now, if you sort the data grid, the x-axis of the chat will also sort.  Here is the MXML file and here is the full BIP Report (assumes you have a JDBC connection called demo that has access to the HR sample schema).  The full report has three templates: the template described in the new features document, the template I described building in this blog entry, and a template that sorts numbers properly (I'll be blogging about that next).

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

Follow bipublisher on Twitter Find Us on Facebook BI Publisher Youtube ChannelDiscussion Forum

Join our BI Publisher community to get the most and keep updated with the latest news, How-to, Solutions! Share your feedback and let us hear your voice @bipublisher on Twitter, on our official Facebook page, and Youtube!

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
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
   
       
Today