FusionCharts for Flex > Drill Down Charts > Flex Links

You can easily implement FusionCharts drilldown functionality directly from your Flex application. FusionCharts for Flex provides the following two processes through which you can imbibe drilldown functionality in charts. The two processes are:

• Trapping FCClickEvent
• Calling a function defined in Flex.

In the above code, my_func is a function defined in a Flex project. The function is invoked when a data plot (column, pie, bar etc.) is clicked, and the values of the label and value attribute pertaining to that data plot will be passed as parameters. You can even pass identifier numbers or strings to each data as parameters to the function.

Let's make an example chart to demonstrate Flex function call thtough a link. We'll create a simple 2D Column chart to display number of branches that ABC bank has in various Asian countries. When a column is clicked a message box is displayed, showing values of label and value attributes pertaining to the clicked data plot.

Here's the code:

By default, FusionCharts for Flex calls the Flex functions from the Global scope. However, if you wish to define the functions inside an object, you need to specify the reference to that object through the FCFlexFunctionsObject property. Let's modify the above example to demonstrate this:

<?xml version="1.0" encoding="utf-8"?>
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
     xmlns:components="com.fusioncharts.components.*" initialize="init()">

        <components:FusionCharts id="myChart" FCChartType="Column2D" width="500" height="300" FCDataURL="Data.xml" />

   <mx:Script>
      <![CDATA[

            // Declare a myFunctions object            
            public var myFunctionsObj:myFunctions;

            public function init():void
            {
                  // instantiate myFunctionsObj                 
                  myFunctionsObj = new myFunctions();

                  // assign myFunctionsObj to chart                  
                  myChart.FCFlexFunctionsObject = myFunctionsObj;
            }
     
      ]]>
   </mx:Script>
</mx:Application>

The code of the myFunction class is:

package
{
    // This class contains the functions which will be called from 
    // the Flex function links defined in the chart data

    internal class myFunctions
    {

        import mx.controls.Alert; 

        // This function will be invoked upon click in a particular data element.
        // The function name and parameters are specified on the chart data or in 
        // the XML file as link attribute and starts with 'E-' 

        public function my_func(linkParam:String):void
        {
            Alert.show(linkParam);
        }

        public function myFunctions(){ }

    }
}

In the above code, we put my_func in a class named myFunctions and instantiated the class as an object named myFunctionsObj. We assign this object as the Flex function handler object through FCFlexFunctionsObject = myFunctionsObj. This makes the chart call the Flex function from the myFunctionsObj object when a link with E- prefix is invoked.