You are viewing documentation for an older version. For current documentation - click here.

Here, we'll cover examples for setting up batch exporting of charts. We'll first start with the simplest example and then move ahead by configuring various parameters.

Before you start, you'll need to follow these steps:

  1. Copy FusionChartsExportComponent.js from Download Package > JSClass to your server. A good location is where you've placed FusionCharts.js
  2. Copy FCExporter.swf from Download Package > Charts to your server. A good location is where you've placed the other chart SWF files.

With that done, our next few steps are:

  1. Configure the charts in your page to allow export of charts at client-side
  2. Include an instance of Exporter Component in your web page
  3. Invoke the BeginExport method of Exporter Component to start batch export

Let's see how to implement each of them in details.

Configuring XML for client-side export

In the XML of each chart that you need to export, you need to do three things:

  • Enable your chart for export (using exportEnabled attribute)
  • Set it to use client-side export (using exportAtClient attribute)
  • Give reference (DOM Id) of the export component that we'll next create in the HTML page (using exportHandler attribute)

The following XML snippet shows how to attain these:

<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0' exportEnabled='1' exportAtClient='1' exportHandler='fcBatchExporter'>
      <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>

We now create 3 charts in our page - Column2D, Column3D and Pie3D. All these charts, for the sake of example, use the same XML.

<div id="chart1div" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
  <script type="text/javascript">
         var myChart1 = new FusionCharts("../../FusionCharts/Column2D.swf", "myChartId1", "350", "300", "0", "1");
         myChart1.setXMLUrl("SimpleExample.xml");
         myChart1.render("chart1div");
  </script>
      <div id="chart2div" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
  <script type="text/javascript">  
           var myChart2 = new FusionCharts("../../FusionCharts/Column3D.swf", "myChartId2", "350", "300", "0", "1");
           myChart2.setXMLUrl("SimpleExample.xml");
           myChart2.render("chart2div");
  </script>
       <div id="chart3div" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
  <script type="text/javascript">  
           var myChart3 = new FusionCharts("../../FusionCharts/Pie3D.swf", "myChartId3", "350", "300", "0", "1");
           myChart3.setXMLUrl("SimpleExample.xml");
           myChart3.render("chart3div");
  </script>      

Note that all the charts have registerWithJS set to 1 and their DOM IDs are myChartId1, myChartId2 and myChartId3 respectively. The next step is to add the exporter component to the page.

Creating instance of Export Component in your web page

The instance of the export component can be created in your web page easily using our FusionChartsExportComponent JavaScript class.

So, you first need to include the JavaScript class in your page as under. Make sure to include this page after FusionCharts.js, as this class references some of the objects defined in FusionCharts.js. This order of inclusion is important.

<head>
   <script language="JavaScript" src="../../FusionCharts/FusionCharts.js"></script>
   <script language="JavaScript" src="../../FusionCharts/FusionChartsExportComponent.js"></script>
</head>

Now, using this class, you need to create an instance of this component in your page. For that, you first define an empty DIV and name it, as shown under:

<!-- We also create a DIV to contain the FusionCharts client-side exporter component -->
<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>

As you can see above, the DIV has been named as fcexpDiv.

Note that you can place this DIV anywhere in your page - it's not necessary to place it beside the chart. However, since the UI of this export component shows a button for initiating export, it's better to place it somewhere near the chart so that your users can recognize it.

Next, you create an instance of the export component in your page using the following JavaScript code:

<script type="text/javascript">
 //Note: fcExporter1 is the DOM ID of the DIV and should be specified as value of exportHandler
 //attribute of chart XML.
   var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");

Here, we first create an instance of FusionChartsExportObject, which is the JavaScript class representation of FusionCharts Export Component. To this, we specify the DOM-Id of this export component instance - fcExporter1 in this case. We also specify the location of the component SWF file as second parameter.

Next, we need to convey the list of charts that we intend to add to the batch. This is done by specifying all such DOM Ids of the charts in an array. This allows you to selectively configure the charts you want to add to your queue. Or, if you need to instantiate multiple batch exports, each with a different combination of charts, you can do so.

//Add the charts to queue. The charts are referred to by their DOM Id.
myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];

After this, we configure the export component UI to show in full mode, allow saving of output as individual or single file and to allow user to select the saving format. This is done using the following code:

//Set the mode as full mode
myExportComponent.componentAttributes.fullMode='1';
//Set saving mode as both. This allows users to download individual charts/ as well as download all charts as a single file.
myExportComponent.componentAttributes.saveMode='both';
//Show allowed export format drop-down
myExportComponent.componentAttributes.showAllowedTypes = '1';

We also set the cosmetic attributes of UI.

//Width and height
myExportComponent.componentAttributes.width = '350';
myExportComponent.componentAttributes.height = '140';
//Message - caption of export component
myExportComponent.componentAttributes.showMessage = '1';
myExportComponent.componentAttributes.message = 'Click on button above to begin export of charts. Then save from here.';

Finally, we call the Render method of the class with our DIV id as parameter. This generates an instance of the exporter component in the specified DIV at run-time.

//Render the exporter SWF in our DIV fcexpDiv
myExportComponent.Render("fcexpDiv");

Now, all we need to do is invoke the BeginExport() API of batch method.

Invoking BeginExport method

We place a button in our page, which when clicked invokes this. The code is shown under:

//Define a function, which will be invoked when user clicks the batch-export-initiate button
      function initiateExport(){
         myExportComponent.BeginExport();
    }
    ...
 <input type='button' onClick="javascript:initiateExport();" value="Begin batch export" />

The final code of the page looks as under:

<html>
      <head>
        <script language="JavaScript" src="../../FusionCharts/FusionCharts.js"></script>
        <script language="JavaScript" src="../../FusionCharts/FusionChartsExportComponent.js"></script>
        <script type="text/javascript"> 
          //Define a function, which will be invoked when user clicks the batch-export-initiate button
    function initiateExport(){
      myExportComponent.BeginExport();
    }
  </script>
</head>
<body bgcolor="#ffffff">
  <div id="chart1div" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
  <script type="text/javascript">
    var myChart1 = new FusionCharts("../../FusionCharts/Column2D.swf", "myChartId1", "350", "300", "0", "1");
      myChart1.setXMLUrl("SimpleExample.xml");
      myChart1.render("chart1div");
    </script>
        <div id="chart2div" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
    <script type="text/javascript">
            var myChart2 = new FusionCharts("../../FusionCharts/Column3D.swf", "myChartId2", "350", "300", "0", "1");
            myChart2.setXMLUrl("SimpleExample.xml");
            myChart2.render("chart2div");
    </script>
         <div id="chart3div" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
    <script type="text/javascript">
            var myChart3 = new FusionCharts("../../FusionCharts/Pie3D.swf", "myChartId3", "350", "300", "0", "1");
            myChart3.setXMLUrl("SimpleExample.xml");
            myChart3.render("chart3div");
    </script>
   
        <input type='button' onClick="javascript:initiateExport();" value="Begin batch export" />
        <div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div></td>
    <script type="text/javascript">
            //Initialize Batch Exporter with DOM Id as fcBatchExporter
            var myExportComponent = new FusionChartsExportObject("fcBatchExporter", "../../FusionCharts/FCExporter.swf");
            //Add the charts to queue. The charts are referred to by their DOM Id.
            myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];
            //------ Export Component Attributes ------//
    //Set the mode as full mode
    myExportComponent.componentAttributes.fullMode='1';
            //Set saving mode as both. This allows users to download individual charts/ as well as download all charts as a single file.
            myExportComponent.componentAttributes.saveMode='both';
            //Show allowed export format drop-down
            myExportComponent.componentAttributes.showAllowedTypes = '1';
            //Cosmetics 
    //Width and height
            myExportComponent.componentAttributes.width = '350';
            myExportComponent.componentAttributes.height = '140';
            //Message - caption of export component
            myExportComponent.componentAttributes.showMessage = '1';
            myExportComponent.componentAttributes.message = 'Click on button above to begin export of charts. Then save from here.';
            //Render the exporter SWF in our DIV fcexpDiv
            myExportComponent.Render("fcexpDiv");           
    </script>
  </tr>
  </body>
</html>  

When you now fire up your HTML page, you'll see a screen as under. As you can see, the batch export component is present along with the charts, waiting for the user to initiate batch process.

See it live!

Once the button is clicked, all charts enter capture phase as shown below:

Finally, when the charts have been exported to Export Component, it gets populated, as under. The charts exported can either be individually saved from this, or all charts can be saved as a single file (by clicking on Save All) button.

If you do not wish to allow export of all the charts as a single file, you can just set:

 myExportComponent.componentAttributes.saveMode='individual'; 

This will result in the image below. Note that the "Save-All" panel at the bottom of export component is missing now.

Or, if you do not want the user to be able to save individual files, you can set this to:

myExportComponent.componentAttributes.saveMode='batch';

This will result as under. Note that you can no longer save individual charts. All the chart export output get compiled in a single file, for which you can choose a saving format.

In batch mode, the output file name is named as FusionCharts by default (extension depending on what format the user selected). To specify your own file name, you can set the following in JavaScript.

myExportComponent.componentAttributes.defaultExportFileName = 'MyCharts';

The exportFileName attribute would NOT work in batch export, as that file name is chart specific. The above line collectively specifies a name for all the charts in the batch - when exported as a single file in batch mode.

Similarly, if you want to specify a default export format (JPG, PNG or PDF), and hide the combo box (to select formats), you can set:

myExportComponent.componentAttributes.defaultExportFormat='PDF';
myExportComponent.componentAttributes.showAllowedTypes='0';
This results in a single button being shown, which when clicked downloads a single PDF file containing all the charts in batch. 

Customizing the Export Component UI

The export component offers extensive UI customization options. Here, we'll see some of the basic configuration options. The entire list can be found in the section Component UI Customization. Consider the code below:

<!-- We also create a DIV to contain the FusionCharts client-side exporter component -->
  <div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>
  <script type="text/javascript">
      //Render the export component in this
     //Note: fcExporter1 is the DOM ID of the DIV and should be specified as value of exportHandler
     //attribute of chart XML.
     var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");
         //Add the charts to queue. The charts are referred to by their DOM Id.
      myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];
      //------ Export Component Attributes ------//
      //Set the mode as full mode
      myExportComponent.componentAttributes.fullMode='1';
      //Set saving mode as both. This allows users to download individual charts/ as well as download all charts as a single file.
      myExportComponent.componentAttributes.saveMode='both';
            //Show allowed export format drop-down
      myExportComponent.componentAttributes.showAllowedTypes = '1';
           //Customize the component properties 
           //Width and height
           myExportComponent.componentAttributes.width = '400';
           myExportComponent.componentAttributes.height = '120';
           //Background color
           myExportComponent.componentAttributes.bgColor = 'ffffdd';
           //Border properties
           myExportComponent.componentAttributes.borderThickness = '2';
           myExportComponent.componentAttributes.borderColor = '0372AB';
           //Font properties
           myExportComponent.componentAttributes.fontFace = 'Arial';
           myExportComponent.componentAttributes.fontColor = '0372AB';
           myExportComponent.componentAttributes.fontSize = '12';
           //Message - caption of export component
           myExportComponent.componentAttributes.showMessage = '1';
           myExportComponent.componentAttributes.message = 'Export the chart first, and then click on this button to save';
           //Button visual configuration
           myExportComponent.componentAttributes.btnWidth = '200';
           myExportComponent.componentAttributes.btnHeight= '25';
           myExportComponent.componentAttributes.btnColor = 'E1f5ff';
           myExportComponent.componentAttributes.btnBorderColor = '0372AB';
           //Button font properties
           myExportComponent.componentAttributes.btnFontFace = 'Verdana';
           myExportComponent.componentAttributes.btnFontColor = '0372AB';
           myExportComponent.componentAttributes.btnFontSize = '15';
           //Title of button
           myExportComponent.componentAttributes.btnSaveTitle = 'Save this chart'
           myExportComponent.componentAttributes.btnSaveAllTitle = 'Save all charts together'
           myExportComponent.componentAttributes.btnDisabledTitle = 'Waiting for export'; 
           //Render the exporter SWF in our DIV fcexpDiv
           myExportComponent.Render("fcexpDiv");
  </script>

In this example, we've customized font properties, color properties and titles. You can also customize scroll bar properties, combo-box properties, padding and margins. Refer to the section Client-side Exporting > Component UI Customization to get an idea of the same.