FusionWidgets v3 Documentation

Exporting Charts as PDF or Images > Batch export > Setting it up

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:

Copy FusionChartsExportComponent.js from Download Package > JSClass to your server. A good location is where you've placed FusionCharts.js
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:

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

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

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:

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.setDataURL("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.setDataURL("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.setDataURL("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.

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:

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.

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();
}

...

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.setDataURL("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.setDataURL("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.setDataURL("SimpleExample.xml");
    myChart3.render("chart3div");
  </script>

  <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.

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.

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:

<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.