Exporting Charts and Chart Data Using the Auto Export Feature
FusionCharts Suite XT lets you export charts as images and PDF as well as the chart data in the XLS format. To enable chart export, the suite supports the following three modes of export:
- Server-side export
- Client-side export
- Auto export
While FusionCharts already included support for server-side and client-side exporting, it introduces the auto export feature in its v3.12.1.
Before we delve into details about the auto export feature, let us first take at a look at the comparison between the server-side and clinet-side exporting modes to understand what prompted the need for an auto export mode.
The table below shows the comparison between the server-side and client-side modes of export:
| Server-side Export | Client-side Export | |
|---|---|---|
| Advantages | The entire export process is carried out through the export server. This ensures that the quality of the exported chart is the same as that on the webpage. | The entire export process is carried out through the client’s browser. This ensures privacy, eliminating the data confidentiality concerns that may arise due to using a publicly hosted export server. |
| Disadvantages | Exporting takes significantly longer, the process further delayed depending on the file size and the network speed. | The success of the export process depends on the capabilities and the version of the browser being used. |
As is understood from the above table, each of the above two modes of exporting has its own pros and cons. Choosing one over the other is tricky, unless one has extremely precise requirements and priorities.
To ensure that a better trade-off is achieved, FusionCharts Suite XT v3.12.1 introduces the auto export feature that combines the capabilities of both modes, making optimum utilization of the advantages offered by each.
Given below is a brief description of the attributes used to enable to the auto export mode:
| Attribute Name | Type | Range | Description |
|---|---|---|---|
exportEnabled |
Boolean | 0/1 | Enables the exporting feature in charts, when set to 1 Default value: 0 (the exporting feature is disabled) |
exportMode |
String | server, client, auto | When chart exporting is enabled, this attribute is used to switch between the modes of export. Default value: auto (the auto exporting feature is enabled) Note: Starting v3.12.1, the exportMode attribute replaces the exportAtClientSide attribute. |
The sample chart below showcases the auto export feature. Click/hover over the 
button from the top-right corner of the chart and select an export format.
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"canvasBgAlpha": "0",
"bgColor": "#DDDDDD",
"bgAlpha": "50",
"exportEnabled": "1",
"exportMode": "auto",
"theme": "fusion"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"canvasBgAlpha": "0",
"bgColor": "#DDDDDD",
"bgAlpha": "50",
//Enabling chart export
"exportEnabled": "1",
//Enabling auto-side export
"exportMode": "auto",
"theme": "fusion"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Switch to the JSON tab of the chart rendered above to see how the exportEnabled and exportMode attributes are used.
Note that when export is enabled, the export mode is set to to auto by default. Therefore, exiplicitly defining the
exportModeis not needed. However, we've shown it in this example, so that you know how the attribute is used.
Starting v3.132.10, the
exportModeattribute replaces theexportAtClient Sideattribute. A description of theexportModeattribute is given in the table above. However, you don’t need to make any changes to the existing setup because, starting v3.12.1, the FusionCharts library comes with the proper mapping already provided.