Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

Method Description

Using the j- prefix

The JavaScript function name is placed after the j- notation. The function is evaluated as a standard JavaScript function. A single parameter of type string is can be passed to the function by placing a (dash) after the function name and then the parameter value. This method lets you pass only one JavaScript function as a link.

Using the JavaScript: prefix

This method lets you pass JavaScript functions as links. Similar to the j- prefix method, the function name and the parameter is placed after the JavaScript: notation. To call a function in JavaScript: notation, make the function available in the global scope and the function name should be the same as that of the string provided after the JavaScript: prefix.
Due to some security policies, usage of eval has been removed and some of the features of Javascript: prefix has been deprecated:

  • Special characters like (, ), - and , cannot be passed as a parameter while function call.
  • Multiple functions cannot be passed after Javascript: prefix.
  • A function cannot be defined after Javascript: prefix.

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.

FusionCharts will load here..
{ "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" } ] }
{
    "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "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"
        }]
    },
    events: {
        'dataplotClick': function(evt, args) {
            window.showAlert  = function(str){
                var arr = str.split(",");    
                alert("[Example for the 'j-' prefix] \n" + arr[0] + " juice sales for the last year: " + arr[1]);
            };
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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 showAlert(myVar) {
        window.alert(myVar);
    }
    -->
</script>

JSON data:

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:

FusionCharts will load here..
{ "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')" } ] }
{
    "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')"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "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')"
        }]
    },
    events: {
        'dataplotClick': function(evt, args) {
            window.showAlert  = function(str){
                var arr = str.split(",");    
                alert("[Example for the 'JavaScript:' prefix] \n" + arr[0] + " juice sales for the last year: " + arr[1]);
            };
            //alert("Test");
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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 showAlert(myVar) {
        window.alert(myVar);
    }
    -->
</script>

JSON data:

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.

Top