FusionCharts for Flex allows client-side retrieval of data, which is used for rendering the chart/widget. Data can be exported to either CSV or XML format. Export of data can be triggered in two ways:
This section describes the process of setting up the chart/widget to enable export of data to CSV format through the chart's context menu.
<?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 x="10" y="10" FCChartType="Column2D">
<ns1:FCChartData FCData="{chartData}" FCParams="{chartParams}"/>
</ns1:FusionCharts>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
//Create an ArrayCollection object as a data source for chart
[Bindable]
private var chartData:ArrayCollection=new ArrayCollection([
{label: 'Alex', value: '25000'},
{label: 'Mark', value: '35000'},
{label: 'David', value: '42300'},
{label: 'Graham', value: '35300'},
{label: 'John', value: '31300'}
]);
//Create an ArrayCollection object as a data source for chart parameters
[Bindable]
private var chartParams:ArrayCollection=new ArrayCollection([
{ yAxisName: 'Sales Figure'},
{ caption: 'Top 5 Sales Person'},
{ numberPrefix: '$'},
{ useRoundEdges: '1'},
{ showExportDataMenuItem: '1'}
]);
]]>
</mx:Script>
</mx:Application>
Setting the showExportDataMenuItem attribute to '1' adds the 'Copy data to clipboard' option to the context menu.
The label of this menu item can be customized by adding the following parameter in the chart parameter object:
{ exportDataMenuItemLabel: 'Copy the data of this chart' }
When this option is selected, the data will be copied to the clipboard in CSV format. Pasted in a text editor – the data will look as under:
"Label","Sales Figure"
"Alex","25000"
"Mark","35000"
"David","42300"
"Graham","35300"
"John","31300"
In the next section we will explore the XML attributes, which allow formatting of the CSV data.