Loading
Retrieving Data
FusionCharts API includes several methods that allow you to fetch real-time data from drag-able charts.
In this section, you will be shown how you can:
- Retrieve a data set in the JSON format
- Retrieve a data set in the XML format
- Retrieve a data set in the CSV format
- Retrieve data using the
getDataWithID()method - Retrieve data using the
getData()method
Retrieving a Data Set in the JSON Format
A drag-able column 2D chart configured to retrieve JSON data and render it in an alert window looks like this:
{
"chart": {
"caption": "Inventory status - Bakersfield Central",
"subCaption": "Top 5 Food items",
"xAxisName": "Food Item",
"yAxisName": "No. of Units",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Poultry"
},
{
"label": "Rice"
},
{
"label": "Peanut Butter"
},
{
"label": "Salmon"
},
{
"label": "Cereal"
}
]
}
],
"dataset": [
{
"seriesname": "Available Stock",
"allowDrag": "0",
"data": [
{
"value": "6000"
},
{
"value": "9500"
},
{
"value": "11900"
},
{
"value": "8000"
},
{
"value": "9700"
}
]
},
{
"seriesname": "Estimated Demand",
"dashed": "1",
"data": [
{
"value": "19000"
},
{
"value": "16500"
},
{
"value": "14300"
},
{
"value": "10000"
},
{
"value": "9800"
}
]
}
]
}<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: 'dragcolumn2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Inventory status - Bakersfield Central",
"subCaption": "Top 5 Food items",
"xAxisName": "Food Item",
"yAxisName": "No. of Units",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Poultry"
}, {
"label": "Rice"
}, {
"label": "Peanut Butter"
}, {
"label": "Salmon"
}, {
"label": "Cereal"
}]
}],
"dataset": [{
"seriesname": "Available Stock",
"allowDrag": "0",
"data": [{
"value": "6000"
}, {
"value": "9500"
}, {
"value": "11900"
}, {
"value": "8000"
}, {
"value": "9700"
}]
}, {
"seriesname": "Estimated Demand",
"dashed": "1",
"data": [{
"value": "19000"
}, {
"value": "16500"
}, {
"value": "14300"
}, {
"value": "10000"
}, {
"value": "9800"
}]
}]
},
events: {
'beforeRender': function(evt, args) {
// creating div for controllers
var controllers = document.createElement('div');
// Create radio buttons inside div
controllers.innerHTML = '<input type="button" value="Get Data" id="getdata_btn" style="margin-left:5px;padding-botom:15px;"/><div id="tableView" style="padding-top: 13px;"></div>';
// set css style for controllers div
controllers.style.cssText = '';
args.container.parentNode.insertBefore(controllers, args.container.nextSibling);
controllers.setAttribute('id', 'controllers');
},
'renderComplete': function(evt, arg) {
function showData() {
var chartIns = evt && evt.sender,
data = chartIns && chartIns.getJSONData();
alert(JSON.stringify(data));
}
document.getElementById("getdata_btn").addEventListener("click", showData);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the function used to retrieve JSON data:
| Function Name | Description |
|---|---|
|
It is used to fetch data that has been set on a chart in the JSON format. This function needs to be called on an existing chart. If this function is called on a chart which has no data set on it, it returns an empty |
Retrieving a Data Set in the XML Format
Given below is a brief description of the function used to retrieve XML data:
| Function Name | Description |
|---|---|
|
It is used to fetch data that has been set on a chart in the XML format. This function needs to be called on an existing chart. If this function is called on a chart which has no data set on it, it returns an empty |
Retrieving a Data Set in the CSV Format
Given below is a brief description of the function used to retrieve CSV data:
| Function Name | Description |
|---|---|
|
It is used to fetch data that has been set on a chart in the CSV format. The data returned is the closest possible comma-separated value representation that has been provided to the chart. The exported data does not contain any functional or cosmetic attribute that was set on the chart. |
Retrieving Data Using the getDataWithID() Function
The getDataWithID() function returns a three-dimensional array that contains the data and the dataset IDs. Once the reference for the chart is obtained, this function can be invoked to retrieve data.
A drag-able column chart configured to retrieve data using the getDataWithID() function looks like this:
{
"chart": {
"caption": "Inventory status - Bakersfield Central",
"subCaption": "Top 5 Food items",
"xAxisName": "Food Item",
"yAxisName": "No. of Units",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Poultry"
},
{
"label": "Rice"
},
{
"label": "Peanut Butter"
},
{
"label": "Salmon"
},
{
"label": "Cereal"
}
]
}
],
"dataset": [
{
"seriesname": "Available Stock",
"allowDrag": "0",
"data": [
{
"id": "P_AS",
"value": "6000"
},
{
"id": "R_AS",
"value": "9500"
},
{
"id": "PB_AS",
"value": "11900"
},
{
"id": "S_AS",
"value": "8000"
},
{
"id": "C_AS",
"value": "9700"
}
]
},
{
"seriesname": "Estimated Demand",
"dashed": "1",
"data": [
{
"id": "P_ED",
"value": "19000"
},
{
"id": "R_ED",
"value": "16500"
},
{
"id": "PB_ED",
"value": "14300"
},
{
"id": "S_ED",
"value": "10000"
},
{
"id": "C_ED",
"value": "9800"
}
]
}
]
}<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: 'dragcolumn2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Inventory status - Bakersfield Central",
"subCaption": "Top 5 Food items",
"xAxisName": "Food Item",
"yAxisName": "No. of Units",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Poultry"
}, {
"label": "Rice"
}, {
"label": "Peanut Butter"
}, {
"label": "Salmon"
}, {
"label": "Cereal"
}]
}],
"dataset": [{
"seriesname": "Available Stock",
"allowDrag": "0",
"data": [{
"id": "P_AS",
"value": "6000"
}, {
"id": "R_AS",
"value": "9500"
}, {
"id": "PB_AS",
"value": "11900"
}, {
"id": "S_AS",
"value": "8000"
}, {
"id": "C_AS",
"value": "9700"
}]
}, {
"seriesname": "Estimated Demand",
"dashed": "1",
"data": [{
"id": "P_ED",
"value": "19000"
}, {
"id": "R_ED",
"value": "16500"
}, {
"id": "PB_ED",
"value": "14300"
}, {
"id": "S_ED",
"value": "10000"
}, {
"id": "C_ED",
"value": "9800"
}]
}]
},
events: {
'beforeRender': function(evt, arg) {
var controllers = document.createElement('div');
controllers.setAttribute('id', 'tableCont-2');
controllers.style.display = "inline-block";
controllers.innerHTML = "<div id='tableCont-2' style='width:470px;padding-left:10px'><table id='data-table-2' style='margin: 5px auto;border-collapse: collapse;border: 1px solid;border-bottom: 2px solid #6baa01;'></table></div>";
//Display container div and write table
arg.container.parentNode.insertBefore(controllers, arg.container.nextSibling);
},
'rendered': function(evt, arg) {
var chartIns = evt && evt.sender,
data = chartIns && chartIns.getDataWithId(),
dataTable = document.getElementById("data-table-2"),
i,
j,
len = data && data.length,
len2,
tableStr = "",
tdStyle = "border:1px solid #6baa01;padding: 10px 5px;min-width: 70px;text-align: center",
thStyle = "background-color: #008ee4;color:#fff;border: 1px solid #6baa01;padding: 10px 5px;min-width: 70px;text-align: center";
for (i = 0; i < len; i += 1) {
tableStr += "<tr>";
len2 = data[i].length;
for (j = 0; j < len2; j += 1) {
if (i == 0) {
if (data[i][j] == "") {
tableStr += "<th style='" + thStyle + "'>Food Item</th>";
} else {
tableStr += "<th style='" + thStyle + "'>" + data[i][j] + "</th>";
}
} else {
if (data[i][j] == "") {
tableStr += "<td style='" + tdStyle + "'>empty</td>";
} else {
tableStr += "<td style='" + tdStyle + "'>" + data[i][j] + "</td>";
console.log(data[i][j]);
}
}
}
tableStr += "</tr>"
}
dataTable.innerHTML = tableStr;
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The data returned by the getDataWithID() function is without any editing.
The key pointers of this method are:
-
[0,0] index of the array is empty
-
The first row in the array returned contains the series name of each dataset placed horizontally (sequentially)
-
The first column in the array returned contains the labels of all the categories
-
The remaining columns map to their respective category and dataset. For each data, its id and last updated value on the chart is returned. In our example, because we have not changed any data visually on the chart, it is showing the original data.
Given below is the structure of the three-dimensional array returned by this function:
[0,0] - Empty |
[0,1]- Dataset id |
[0,2] - Dataset Id |
[0,n]- Dataset Id |
[1,0] - Category label of data index 1 |
Data for dataset [1] data index [1] - returned as an array with two elements. Sub array [0] - Id of set |
Data for dataset [2] data index [1] - returned as an array with two elements. Sub array [0] - Id of set |
Data for dataset [n] data index [m] - returned as an array with two elements. Sub array [0] - Id of set |
[2,0] - Category label of data index 2 |
Data for dataset [1] data index [2] - returned as an array with two elements. Sub array [0] - Id of set |
Same as above |
Same as above |
[m,0] - Category label of data index m |
Data for dataset [n] data index [m] - returned as an array with two elements. Sub array [0] - Id of set |
Same as above |
Same as above |
Retrieving Data Using the getData() Function
The getData() function is similar to the getDataWithID() function except that it returns just the updated value of the data on the chart and not its ID.
Thus, the array returned by the getData() function is a two-dimensional array where each data cell contains just the numeric value representing the final value of the data on the chart.
A drag-column chart configured to retrieve data using the getData() method looks like this:
{
"chart": {
"caption": "Inventory status - Bakersfield Central",
"subCaption": "Top 5 Food items",
"xAxisName": "Food Item",
"yAxisName": "No. of Units",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Poultry"
},
{
"label": "Rice"
},
{
"label": "Peanut Butter"
},
{
"label": "Salmon"
},
{
"label": "Cereal"
}
]
}
],
"dataset": [
{
"seriesname": "Available Stock",
"allowDrag": "0",
"data": [
{
"id": "P_AS",
"value": "6000"
},
{
"id": "R_AS",
"value": "9500"
},
{
"id": "PB_AS",
"value": "11900"
},
{
"id": "S_AS",
"value": "8000"
},
{
"id": "C_AS",
"value": "9700"
}
]
},
{
"seriesname": "Estimated Demand",
"dashed": "1",
"data": [
{
"id": "P_ED",
"value": "19000"
},
{
"id": "R_ED",
"value": "16500"
},
{
"id": "PB_ED",
"value": "14300"
},
{
"id": "S_ED",
"value": "10000"
},
{
"id": "C_ED",
"value": "9800"
}
]
}
]
}<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: 'dragcolumn2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Inventory status - Bakersfield Central",
"subCaption": "Top 5 Food items",
"xAxisName": "Food Item",
"yAxisName": "No. of Units",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Poultry"
}, {
"label": "Rice"
}, {
"label": "Peanut Butter"
}, {
"label": "Salmon"
}, {
"label": "Cereal"
}]
}],
"dataset": [{
"seriesname": "Available Stock",
"allowDrag": "0",
"data": [{
"id": "P_AS",
"value": "6000"
}, {
"id": "R_AS",
"value": "9500"
}, {
"id": "PB_AS",
"value": "11900"
}, {
"id": "S_AS",
"value": "8000"
}, {
"id": "C_AS",
"value": "9700"
}]
}, {
"seriesname": "Estimated Demand",
"dashed": "1",
"data": [{
"id": "P_ED",
"value": "19000"
}, {
"id": "R_ED",
"value": "16500"
}, {
"id": "PB_ED",
"value": "14300"
}, {
"id": "S_ED",
"value": "10000"
}, {
"id": "C_ED",
"value": "9800"
}]
}]
},
events: {
'beforeRender': function(evt, arg) {
var controllers = document.createElement('div');
controllers.setAttribute('id', 'tableCont');
controllers.style.display = "inline-block";
controllers.innerHTML = "<div id='tableCont' style='width:470px;padding-left:10px'><table id='data-table' style='margin: 5px auto;border-collapse: collapse;border: 1px solid;border-bottom: 2px solid #6baa01;'></table></div>";
//Display container div and write table
arg.container.parentNode.insertBefore(controllers, arg.container.nextSibling);
},
'rendered': function(evt, arg) {
var chartIns = evt && evt.sender,
data = chartIns && chartIns.getData(),
dataTable = document.getElementById("data-table"),
i,
j,
len = data && data.length,
len2,
tableStr = "",
tdStyle = "border:1px solid #6baa01;padding: 10px 5px;min-width: 70px;text-align: center",
thStyle = "background-color: #008ee4;color:#fff;border: 1px solid #6baa01;padding: 10px 5px;min-width: 70px;text-align: center";
for (i = 0; i < len; i += 1) {
tableStr += "<tr>";
len2 = data[i].length;
for (j = 0; j < len2; j += 1) {
if (i == 0) {
if (data[i][j] == "") {
tableStr += "<th style='" + thStyle + "'>Item Name</th>";
} else {
tableStr += "<th style='" + thStyle + "'>" + data[i][j] + "</th>";
}
} else {
if (data[i][j] == "") {
tableStr += "<td style='" + tdStyle + "'>empty</td>";
} else {
tableStr += "<td style='" + tdStyle + "'>" + data[i][j] + "</td>";
}
}
}
tableStr += "</tr>"
}
dataTable.innerHTML = tableStr;
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>