FusionCharts for Flex > Exporting Data > Exporting to CSV Format

FusionCharts for Flex API can be used to export the chart/widget data to CSV format. The following code demonstrates the process of implementing the methods of FusionCharts for Flex API to obtain chart data as CSV string:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:ns1="com.fusioncharts.components.*" >
<ns1:FusionCharts id="myChart" x="200" y="150" FCChartType="Column3D" FCRenderEvent="showCSV()">
<ns1:FCChartData FCData="{chartData}" FCParams="{chartParams}"/>
</ns1:FusionCharts>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import com.events.FCEvent;

//Create an ArrayCollection object as a data source for chart
[Bindable]
private var chartData:ArrayCollection=new ArrayCollection([
{ label:'Jan', value:'17400' },
{ label:'Feb', value:'19800' },
{ label:'Mar', value:'21800' },
{ label:'Apr', value:'23000' },
{ label:'May', value:'29000' },
{ label:'Jun', value:'27600' }
]);

//Create an ArrayCollection object as a data source for chart parameters
[Bindable]
private var chartParams:ArrayCollection=new ArrayCollection([
{ caption:'Half Yearly Sales Summary' },
{ subcaption:'For the year 2008 - First Half' },
{ xAxisName:'Month' },
{ yAxisName:'Sales' },
{ numberPrefix:'$' }
]);

private function showCSV():void { // Get CSV data using FusionCharts For Flex API function - FCGetCSVData()
var str:String = myChart.FCGetCSVData();
Alert.show(str);
}
]]>
</mx:Script>
</mx:Application>

In the code, showCSV() function is attached to the FCRender event. This function invokes the FCGetCSVData() method of the FusionCharts object. The CSV string generated by the method is returned through an alert box. Following output screen will be displayed when the code is executed.

CSV Data

Customizing the CSV Output

FusionCharts for Flex allows customization of following aspects of the CSV output:

  • The separation character: This refers to the character which separates two adjacent values, comma is used as the default separator.
  • The qualifier character: The qualifier encapsulate each data value, double quotes are used as default qualifiers.
  • Formatting: You can either obtain formatted or unformatted data, in case you opt for formatted data, you'll get the data with formatting that is similar to the formatting with which the data is displayed on the chart.

Following is a list of XML attributes, which can be used for customization of the CSV output:

Attribute Description Example
exportDataSeparator

Lets you set the separator for the CSV data. This attribute accepts the following pseudo codes as characters:

  • {tab} - Denotes tab
  • {quot} - Denotes double quotes
  • {apos} - Denotes single quotes

You can also specify any other character apart from these pseudo codes.

exportDataSeparator='{tab}'
exportDataQualifier

Lets you set the qualifier character for CSV data. This attribute accepts following pseudo codes for characters:

  • {tab} - Denotes tab
  • {quot} - Denotes double quotes
  • {apos} - Denotes single quotes

You can also specify any other character apart from these pseudo codes.

exportDataQualifier='{quot}'
exportDataFormattedVal This attribute excepts boolean values in terms of '1' and '0', where 1 denotes yes and 0 denotes no. If the the vlaue is set to 1, the exported CSV data will be displayed with the same formatting with which it is displayed on chart. exportDataFormattedVal='1'