Exporting Chart Data > Using JavaScript Menu

You can access the data of the chart from its JavaScript API as well.

 
Setting up the chart to allow JavaScript export

When using the JavaScript API to access chart data, you first need to make sure of the following things:

  • You've set the registerWithJS flag of chart as 1 in your HTML code
  • You're invoking the getDataAsCSV() API only after the chart has been rendered (i.e., in FC_Rendered method)

<HTML>
<HEAD>
   <TITLE>FusionCharts & JavaScript - Getting chart data as CSV </TITLE>
   <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
   <SCRIPT LANGUAGE="JavaScript">
      //FC_Rendered method is called whenever a FusionCharts chart on the page
      //has finished initial rendering. To this function, the chart passes its
      //own DOM Id.
      function FC_Rendered(DOMId){
         //If it's our required chart
         if (DOMId=="chart1Id"){
            //Get reference to the chart object
            var chartObj = getChartFromId("chart1Id");
            //Simply alert the CSV Data
            window.alert(chartObj.getDataAsCSV());
            return;
         }
      }
   </SCRIPT>
</HEAD>
<BODY>
   <div id="chart1div">
      FusionCharts
   </div>
   <script language="JavaScript">
      var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1");
      chart1.setDataXML("<chart><set label='A' value='10' /><set label='B' value='11' /></chart>");
      chart1.render("chart1div");
   </script>
</BODY>
</HTML>
When you run this code, you should get a screen as under:
 
Customizing the output CSV
The customization attributes for exported CSV data still remain the same, as under (to be specified in chart XML):
Attribute Description Example
exportDataSeparator

Lets you set the separator for CSV data. For ease of use, this attribute accepts the following pseudo codes for characters:

  • {tab} - To specify tab character
  • {quot} - To specify double quotes
  • {apos} - To specify 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. For ease of use, this attribute accepts the following pseudo codes for characters:

  • {tab} - To specify tab character
  • {quot} - To specify double quotes
  • {apos} - To specify single quotes

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

exportDataQualifier='{quot}'
exportDataFormattedVal Boolean value indicating whether to output formatted data values (as shown on chart) in the output CSV file. exportDataFormattedVal='1'