Exporting charts as PDF/Images > Exporting from JavaScript

In this section, we will discuss how we can export charts using JavaScript. First we will start with the simplest of examples and then move on to the harder ones.

Important:
The JavaScript method will only work when the chart has been fully rendered in the client browser. You can use the FC_Rendered method to track the same.
 
Due Adobe Flash Player's default security system, the JavaScript method does not work from local filesystem. It only works when hosted on a server (localhost or remote) unless configured otherwise.

Simple JavaScript-Triggered Export

In this example, we would first require you to create a chart on your page. Then use an HTML button to initiate the export process on that chart.

To achieve this, we will have to do the following:

  1. Create an HTML page with a chart in it.
  2. Setup the XML of the chart to enable exporting.
  3. Create a JavaScript function to initiate exporting of the chart.
  4. Insert an HTML button to call the above JavaScript.

 

Create your page with a chart in it:

The process involves including the FusionCharts.js file within the <head> section of your newly created HTML page. Then follow the standard process to load a chart using the FusionCharts JavaScript object. (You may refer to JavaScript Embedding article under "Creating your First Chart" section.)

The JavaScript code to create a chart will appear like below:

var myChart = new FusionCharts('FusionCharts/Column3D.swf', 'myChart', '900', '300', '0', '1');

myChart.setDataURL('Data.xml');

myChart.render('chartContainerDiv');
Note that the RegisterWithJS parameter while initializing your chart must be set to '1' for the charts to respond to your JavaScripts.

 

Adjust your Data XML to enable exporting:

For this example, we will be export at a PHP server, with a default action of "Download". For more information on server-side exporting, refer to our Server-side exporting section. The XML to do so will be like below (the attributes pertinent to exporting is marked in bold) and the file will be saved as "Data.xml" beside your HTML file:

<chart yAxisName='Sales Figure' caption='Top 5 Sales Person'  numberPrefix='$' useRoundEdges='1' bgColor='FFFFFF,FFFFFF'  showBorder='0'
 exportEnabled='1' exportHandler='http://www.domain.com/FusionCharts/ExportHandlers/PHP' exportAtClient='0' exportAction='download' >
            <set label='Alex' value='25000'  />
            <set label='Mark' value='35000' /> 
            <set label='David' value='42300' />
            <set label='Graham' value='35300' /> 
            <set label='John' value='31300' />
</chart>
The exporting procedure to export at client-side is almost similar, except that additional steps are required to setup the client-side Export Component. For more information, refer to the Client-side exporting section.

 

Now, we write our JavaScript function to initiate exporting on that chart:

The JavaScript function uses the simple unction provided within FusionCharts.js to locate the chart SWF from its id. Then it calls the new "exportChart()" function on the chart. Note that we have first verified whether the chart has fully rendered by calling the new hasRendered() function of the chart.

<script type="text/javascript">
    function ExportMyChart() {
         var chartObject = getChartFromId('myChart');
         if( chartObject.hasRendered() ) chartObject.exportChart();
    }
 </script>

Now that we have all our codes ready, we assemble them within one HTML file and see the results...

The Final code will look like this:

<html>
<head>
    <title>My Chart</title>
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
    <script type="text/javascript">
        function ExportMyChart() {
            var chartObject = getChartFromId('myChart');
            if( chartObject.hasRendered() ) chartObject.exportChart();
 
    }
    </script>
</head>
<body>
    <div id="chartContainerDiv">FusionCharts loaded here...</div>
    <script type="text/javascript">
        var myChart = new FusionCharts('FusionCharts/Column3D.swf', 'myChart', '900', '300', '0', '1');
        myChart.setDataURL('Data.xml');
        myChart.render('chartContainerDiv');
    </script>
    <input type="button" value="Export My Chart" onclick="ExportMyChart()" />
</body>
</html>

After this, we open this file in a browser and click on the "Export My Chart" button and the chart will start exporting all by itself! In case you face any error, refer to "Debug Mode" section under "JavaScript Reference"

 

Providing Export Parameters (Overriding XML Export Attributes) using JavaScript:

The new FusionCharts (v3.1 and above) allows you to provide values for XML attributes via JavaScript as well. The exportChart() function also takes in a parameter that accepts these XML attributes in a JSON object notation.

Not all XML attributes are overridable. The list of export-related XML attributes that can be overridden, can be found under the "Export Attributes" section under "JavaScript Reference." You can provide export attributes in {key1: 'value1', key2: 'value2', ...} format as shown below:

<script type="text/javascript">
    function ExportMyChart() {
         var chartObject = getChartFromId('myChart');
         chartObject.exportChart( { exportAtClient: '1',  exportFormat: 'PDF' } );
    }
 </script>