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:
| Method | Description |
|---|---|
Using the |
The JavaScript function name is placed after the |
Using the |
This method lets you pass JavaScript functions as links. Similar to the
|
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.
{
"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:
{
"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.