FusionCharts for Flex > Drill Down Charts >Using JavaScript Functions as Links

FusionCharts also allows drilldown through JavaScript links. This implies that, you can invoke a JavaScript function that is present in the HTML page, which also contains the chart. The drilldown occurs when the user clicks on the data plot of the chart.

Note: JavaScript links works only in Flex Web Applications. One needs to define and add the JavaScript function in the HTML that embeds the Flex Web Application.

To implement this, you need to specify the name of the JavaScript function to be invoked in the link attribute of the <set> tag.

In the above code, myJS is the name of the JavaScript function, which is to be invoked. It is present in the same HTML page as the chart. When the data plot (column, pie, bar etc) is clicked, myJS will be invoked and 'USA, 235' would be passed to the function as parameters. In the code (above) we've passed the values of label and value attributes as parameters. However, you can also pass identifier numbers or strings to each data as parameters of the function. When the user clicks the link, these identifiers will be sent to the JavaScript function for further actions such as loading detailed data pertaining to the identifier using AJAX or anything else - the possibilities are endless.

Let's quickly put up an example chart to demonstrate this type of link. We'll create a simple 2D Column chart, which displays the number of branches that ABC Bank has in various Asian countries. When a particular column is clicked, its label and value will be displayed through an alert box.

We define the JavaScript function in the HTML that embeds the Flex Web Application:

<html>
   <head>

      <script type="text/javascript" >

         function myJS(myVar){
            window.alert(myVar);
         }

      </script>

   </head>

</html>

Here, we've a defined a function myJS, which will respond to the click event that is triggered when the user clicks the data plot.

Here is the code:

<chart caption='ABC Bank Branches' subCaption='(In
Asian Countries)' yaxislabel='Branches' xaxislabel='Country'>
    <set
label='Hong Kong' value='235' link="JavaScript:myJS('Hong Kong,
235');"/> 
    <set label='Japan'
value='123' link="JavaScript:myJS('Japan, 123');"/>

    <set label='Singapore' value='129' link="JavaScript:myJS('Singapore,
129');"/> 
    <set label='Malaysia'
value='121' link="JavaScript:myJS('Malaysia, 121');"/>

    <set label='Taiwan' value='110' link="JavaScript:myJS('Taiwan,
110');"/> 
    <set label='China'
value='90' link="JavaScript:myJS('China, 90');"/>

    <set label='S. Korea' value='86' link="JavaScript:myJS('S.
Korea, 86');"/> 
</chart>

As you can see, in the code (above), we've defined a JavaScript link for each data item and they all point to myJS. The values of the label and value attribute will be passed to myJS as parameters.

The code (above) will render the following chart: