Skip to Content
Author's profile photo Former Member

Creating a Pie Chart using Flash Islands

     import mx.collections.ArrayCollection;

     import mx.effects.easing.*;

     import mx.rpc.soap.SOAPFault;

       import sap.FlashIsland;



       import mx.charts.series.items.PieSeriesItem;



      (Bindable) public var dataSource: ArrayCollection;/* = new ArrayCollection([

+     ,</p><p align=”left”>     ,</p><p align=”left”>     </p><p align=”left”>     ]); /+</p><p align=”left”>     </p><p align=”left”>      (Bindable*) public var label_status: String;</p><p align=”left”>      (Bindable) public var count_status: String;</p><p align=”left”>                  public var label_status_fill:IFill = new SolidColor(0xbcd0df, 1.0);</p><p align=”left”>                public var count_status_fill:IFill = new SolidColor(0xFFD965, 1.0);              </p><p align=”left”> </p><p align=”left”>     private function pieChart_itemClick(evt:ChartItemEvent):void {</p><p align=”left”>                var item:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;</p><p align=”left”>                var degrees:Number = radiansToDegrees(item.startAngle);</p><p align=”left”>                var arr:Array = [];</p><p align=”left”>                if (checkBox.selected) {</p><p align=”left”>                    arr[item.index] = 0.2;</p><p align=”left”>                }</p><p align=”left”>                pieSeries.perWedgeExplodeRadius = arr;</p><p align=”left”>                pieSeries.startAngle = degrees;</p><p align=”left”> </p><p align=”left”>                dataSource.refresh();</p><p align=”left”>            }</p><p align=”left”>            private function radiansToDegrees(radians:Number):Number {</p><p align=”left”>                return radians * (180 / Math.PI);</p><p align=”left”>            }</p><p align=”left”>         </p><p align=”left”>     public function initApp():void</p><p align=”left”>     {</p><p align=”left”>     FlashIsland.register(this);</p><p align=”left”>     }       </p><p align=”left”>  ]]></p><p align=”left”>  </mx:Script></p><p align=”left”>  <mx:Panel title=”Pie Chart Example”></p><p align=”left”>  <mx:CheckBox id=”checkBox” label=”Explode per Wedge” labelPlacement=”right” selected=”true”/></p><p align=”left”>     <mx:PieChart id=”pie” </p><p align=”left”>        dataProvider=”” </p><p align=”left”>        showDataTips=”true”</p><p align=”left”>        itemClick=”pieChart_itemClick(event);”</p><p align=”left”>        height=”100%”</p><p align=”left”>        width=”100%” color=”#8F2121″ themeColor=”#7B9ACD”></p><p align=”left”>        <mx:series></p><p align=”left”>           <mx:PieSeries id=”pieSeries”</p><p align=”left”>                field= ““</p><p align=”left”>                nameField= ““>     <mx:Legend dataProvider=”” direction=”horizontal” width=”309″ height=”36″/>




4. Save and Export the Release Build.!|height=275|alt=image|width=544|src=|border=0!

This will create a SWF File in the bin-debug folder.


Creating Webdynpro ABAP Application:

  • Create a Webdynpro Component/ Interface ZISL_RM_FLX.

Go to the Component Controller of ZISL_RM_FLX and create a node PIE_DATA, add the following attributes label_status and count_status.!|height=234|alt=image|width=597|src=|border=0!


1. Create Views Main and V_ISLAND



View V_ISLAND acts as the place holder for the Flash Island.


0.1. 5. In the Main View, Create a Table Element which will act as an Input for the Data Changes to be seen in the flash islands.


6. Create a mapping from the context of the component controller to the view controller of the View Main


7. The data Source Property of the Table Element needs to be bound to PIE_DATA.0.1. 8. Create a View Container UI Element.

0.2. 9. Go to View V_ISLAND, Right Click on ROOTUIELEMENTCONTAINER and select Swap Root Element. This will allow you to create a Flash Island in the ROOTUIELEMENTCONTAINER. When you swap the root element a pop up will show up and you can choose the Flash Island Element.

0.3. 10. Click on the ROOTUIELEMENTCONTAINER and create a GACDATASOURCE this is the data source of the Flash Island.

0.4. 11. Map the context of the View V_ISLAND with that of the component controller.

0.5. 12. Bind the data source property of GACDATASOURCE to PIE_DATA.


13. Create two GACPROPERTIES one to hold the label name which is label_status and the count values count_status.</li></ul><p align=”left”>!|height=313|alt=image|width=369|src=|border=0!</p><ul><li>14. Bind the value property of GACPROPERTY to label_status and count_status.</li><li>15. Import the SWF File created using the Flex Builder into the MIME Repository. The MIME Object can be Imported as follows, </li></ul><p>!|height=256|alt=image|width=623|src=|border=0!</p><ul><li>16. Once the SWF File is imported go to the ROOTUIELEMENTCONTAINER of V_ISLAND and define the properties as follows,</li></ul><p> </p><p>!|height=388|alt=image|width=365|src=|border=0!</p><p align=”left”> </p><ul><li>17. Copy the following code into the WDDOINIT of the component controller.</li></ul><table border=”1″ cellspacing=”0″ cellpadding=”0″><tbody><tr><td width=”638″ valign=”top”><p>DATA lo_nd_pie_data TYPE REF TO if_wd_context_node.<br />  DATA lt_pie_data TYPE wd_this->elements_pie_data.<br /><br />  lo_nd_pie_data = wd_context->get_child_node( name = wd_this->wdctx_pie_data ).<br /><br />  FIELD-SYMBOLS <wa_data> LIKE LINE OF lt_pie_data.<br /><br />  APPEND INITIAL LINE TO lt_pie_data ASSIGNING <wa_data>.<br />  <wa_data>-label_status = ‘Open’.<br />  <wa_data>-count_status = 20.<br />  APPEND INITIAL LINE TO lt_pie_data ASSIGNING <wa_data>.<br />  <wa_data>-label_status = ‘Staffed’.<br />  <wa_data>-count_status = 20.<br />  APPEND INITIAL LINE TO lt_pie_data ASSIGNING <wa_data>.<br />  <wa_data>-label_status = ‘Closed’.<br />  <wa_data>-count_status = 60.<br />  lo_nd_pie_data->bind_table( new_items = lt_pie_data set_initial_elements = abap_true ).</p></td></tr></tbody></table><ul><li>18. Navigate to the Window and embed the V_ISLAND in the View Container UI Element of MAIN View.</li></ul><p> </p><p>!|height=134|alt=image|width=474|src=|border=0!</p><ul><li>19. Create a Webdynpro application and our Interactive Pie Chart is ready.</li></ul><p align=”left”> </p><p>Output:</p><p>!|height=168|alt=image|width=341|src=|border=0!</p><p>!|height=489|alt=image|width=403|src=|border=0!</p><p> </p><p>Data Illustration


Assigned tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Guillaume GARCIA
      Guillaume GARCIA

      To my opinion, visualization with Flex can help a lot in improving the user experience of Web Dynpro applications. IGS is not powerful enough when compared with RIA on this aspect (it is my personal view on it, I may be completely wrong!).
      I think what would really make a difference would be a standard SAP Flash Islands component that would be easily configured on the Web Dynpro side.

      Indeed, not all WD developers are willing to spend that much time learning all various aspects of Flex/ActionScript coding. A "clickable" configuration (analoguous to what is proposed in Visual Composer) would be a great step!!

      Best regards,

      Author's profile photo Former Member
      Former Member
      Blog Post Author
      Standard SAP Flash Islands component. I'm with you on this Guillaume. It would really help a lot of WD ABAP Developers. As of Flex Coding, we have a lot of code samples in Adobe Help. The only part that I had to concentrate was the Integration. It didn't seem to difficult to me understanding MXML.
      Author's profile photo Former Member
      Former Member
      Do you have any information on creating a tree view ??
      Author's profile photo Former Member
      Former Member
      Hello Sai,

      I am getting a syntax error "1120: Access of undefined property FlashIsland." after pasting the code given in step 3.

      Please advise.

      Vidhya T

      Author's profile photo Former Member
      Former Member
      Blog Post Author
      Hello Vidhya,

      This Error is because you haven't added the SWC file in your Flex Code. Please go through the following weblog by Andreas.

      SAP Libraries Required for Adobe Flash Islands in Web Dynpro


      Author's profile photo Former Member
      Former Member


      It seems this blog wasn't converted properly during the migration of the old SDN to the new SCN. Can you fix it?