FusionCharts for Flex > Drill Down Charts > Flex links

FusionCharts for Flex also allows the developers to trap and use this DrillDown feature through Flex Application itself. FusionCharts for Flex provides the following two processes to acheive drilldown in Flex.

  • Trapping FCClickEvent and
  • Calling a function defined in Flex.
 
Using FCLinkClicked Event
When a dataplot's link is defined with a "S-" prefix the dataplot beomes a hotspot which can be trapped by event-trapping. Clicking the dataplot would trigger an event named "FCClickEvent". You can pass any value after "S-" which would be passed as a parameter of the event listener function. Thus a developer can use this value to setup further acttions for drilldown. For example, you can invoke a message box with a distinct value for each dataplot, when the end viewer clicks on each dataplot on the chart.
 
XML Example:
 
<chart caption='ABC Bank Branches' subCaption='(In Asian Countries)' yaxislabel='Branches' xaxislabel='Country'>
    <set label='Hong Kong' value='235' link="S-Week 4"/>
 
Here, we pass a value "Week 4" to the event listener function.
 
Array Example:
 
[Bindable]
private var data:ArrayCollection=new ArrayCollection([
 
        {label:'Week 4',value:'48',link:'S-Week 4'}
    ]);
 
XMLList Example:
 
[Bindable]
private var chartData:XML=
     <main>
          <data>
               <data label='Jan' value='17400' link='S-Week 4' />
          </data>
     </main>
 
Model Example:
 
<mx:Model id="chartData">
        <chart>
           <data>
               <label>Jan</label>
                <value>17400</value>
               <link>S-Week 4</link>
           </data>
        </chart>
</mx:Model>
 
Please refer to "Handline Events" page in Flex Developers' Guide >> FusionCharts control section to get a complete example on how to use FCClickEvent.
 
Using Flex Functions as Link:
You can also invoke a Flex function when the end viewer clicks a data element on the chart. To attain this, all you need to do is place the name of Flex function preceded by E- instead of the link URL. You can also pass a value as a parameter to that function by adding the value after the function name, separated by a commma. This is shown below:
 
<set ... value='235' link='E-my_func,Hong Kong,235'/>
 

In the above code, my_func refers to a Flex function present in your Flex project. You can specify any number of parameters for this function. When you now click the data item (column, pie, bar etc.) for a particular data, my_func function would be invoked and 'Hong Kong, 235' would be passed to the function as the function parameter. Here, we've passed the data label and value just for demonstration purposes. In actual charts, you can pass identifier numbers or strings to each data.

 

Let's take an example to demonstrate this kind of links. We'll create a simple 2D Column chart indicating "ABC Bank Branches" in Asia. Each column when clicked, would pass its label and value to our Flex function my_func, which (for the sake of demonstration) would just write it out in an alert box.

The code for this would look like given below:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">


   <ns1:FusionCharts x="10" y="10" FCChartType="Column2D" FCDataURL="chartData.xml" width="500" height="300" />

   <mx:Script>
      <![CDATA[

         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);
         }

      ]]>
   </mx:Script>
</mx:Application>

 
And here is the XML for the chart where the links are defined:
 
<chart caption='ABC Bank Branches' subCaption='(In Asian Countries)' yaxislabel='Branches' xaxislabel='Country'>
<set label='Hong Kong' value='235' link='E-my_func,Hong Kong,235'/>
<set label='Japan' value='123' link='E-my_func,Japan,123'/>
<set label='Singapore' value='129' link='E-my_func,Singapore,129'/>
<set label='Malaysia' value='121' link='E-my_func,Malayasia,121'/>
<set label='Taiwan' value='110' link='E-my_func,Taiwan, 110'/>
<set label='China' value='90' link='E-my_func,China, 90'/>
<set label='S. Korea' value='86' link='E-my_func,S. Korea, 86'/>
</chart>
 
Here, we've a defined a function my_func that will respond to the clicks generated from the chart. Now, When you view the chart and click on a column, you'll see something like under:
 
 
Let us also see how the this can be defined in Array, XMLList and Model objets.
Array Example:
 
[Bindable]
private var chartData:ArrayCollection=new ArrayCollection([
                 { label:'Jan', value:'17400', link:'E-my_func,Hong Kong,235'}
             ]);
 
XMLList Example:
 
[Bindable]
private var chartData:XML=
     <main>
         <data>
            <data label='Jan' value='17400' link:'E-my_func,Hong Kong,235'/>
         </data>
    </main>;
 
Model Example:
 
<mx:Model id="chartData">
        <chart>
           <data>
               <label>Jan</label>
                <value>17400</value>
               <link>E-my_func,Hong Kong,235</link>
           </data>
        </chart>

</mx:Model>