Using JavaScript Functions as Links

An alternative to using simple links in drill-down charts is using JavaScript functions, present in the same page, that can be invoked when a data plot on the chart is clicked.

FusionCharts provides the following two ways for setting JavaScript functions as links:

Both these prefixes are explained in detail with examples below.

The j- Prefix

An example of a drill-down chart and its corresponding code, that implements linking using the j- prefix, is shown below.

For this example, a JavaScript function, showAlert, is defined to show the label and value of the data plot clicked. For example, when the data plot labeled Apple is clicked, the showAlert function is invoked and an alert box is displayed with the data value and the label.

The code for the above example is given below:

HTML code:

<div id="chart-container">FusionCharts will render here</div>
<!-- Drill-down: Simple Link Open in Same Page. Attribute: # link -->
<script language="JavaScript" src="fusioncharts/js/fusioncharts.js"></script>
<script language="JavaScript">
    <!--
    function myJS(myVar) {
        window.alert(myVar);
    }
    -->
</script>

JSON data:

• JSON
• XML

{
    "chart": {
        "caption": "Sales Figures for Top Three Juice Flavors",
        "subCaption": "2014",
        "xAxisName": "Flavor",
        "yAxisName": "Amount",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Apple",
            "value": "810000",
            "link": "j-showAlert-Apple,$810K"
        },
        {
            "label": "Cranberry",
            "value": "620000",
            "link": "j-showAlert-Cranberry,$620K"
        },
        {
            "label": "Grapes",
            "value": "350000",
            "link": "j-showAlert-Grapes,$350K"
        }
    ]
}

In the above code snippet, showAlert is a custom function that is present in the HTML page that embeds the chart. Apple, $810K is the parameter value passed to the function. As mentioned before, the j- prefix allows to pass only one string parameter to the JavaScript function.

Now, when the data plot labeled Apple is clicked, the string Apple, $810K is passed as a parameter to the showAlert function.

For this example, the parameter string contains the data label and data value only for demonstration purposes. For actual implementations, identifier numbers or strings of data can be passed. When a user clicks the link, the identifiers are sent back to the JavaScript function for further actions (for example, loading detailed data for that identifier using AJAX, or any such tasks—the possibilities are endless).

The JavaScript: Prefix

An example of a drill-down chart and its corresponding code, that implements linking using the JavaScript: prefix, is shown below:

Similar to the above example, the showAlert function is defined to ahow an alert message that contains the clicked data plot’s label and value.

The code for the above example is given below:

HTML code:

<div id="chart-container">FusionCharts will render here</div>
<!-- Drill-down: Simple Link Open in Same Page. Attribute: # link -->
<script language="JavaScript" src="fusioncharts/js/fusioncharts.js"></script>
<script language="JavaScript">
    <!--
    function myJS(myVar) {
        window.alert(myVar);
    }
    -->
</script>

JSON data:

• JSON
• XML

{
    "chart": {
        "caption": "Sales Figures for Top Three Juice Flavors",
        "subCaption": "2014",
        "xAxisName": "Flavor",
        "yAxisName": "Amount",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Apple",
            "value": "810000",
            "link": "JavaScript:showAlert('Apple, $810K')"
        },
        {
            "label": "Cranberry",
            "value": "620000",
            "link": "JavaScript:showAlert('Cranberry, $620K')"
        },
        {
            "label": "Grapes",
            "value": "350000",
            "link": "JavaScript:showAlert('Grapes, $350K')"
        }
    ]
}

Apple and $810K are passed as two parameters to the showAlert function—Apple is passed as a string parameter and $810K is passed as a numeric parameter.

Now, when the data plot labeled Apple is clicked, the showAlert function is invoked and the two parameters are passed to it.