Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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

getJSONData

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 { } object.

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

getXMLData

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 <chart /> element as string.

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

getCSVData

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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
Sub array [1] - Updated value of set

Data for dataset [2] data index [1] - returned as an array with two elements.

Sub array [0] - Id of set
Sub array [1] - Updated value of set

Data for dataset [n] data index [m] - returned as an array with two elements.

Sub array [0] - Id of set
Sub array [1] - Updated value 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
Sub array [1] - Updated value 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
Sub array [1] - Updated value 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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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>
Top