Exporting Charts as PDF or Images > Batch export > Setting JavaScript callback

When exporting charts using batch export component, the component raises 3 events (calls JavaScript methods) during the total course of action:

  • FC_ExportReady(string DOMId) - This is raised when individual charts in the queue have finished capture process and have passed their data to export component. Between initiation of chart export and till the time FC_ExportReady event is raised, you might show a waiting message/alert to the user that the chart is in processing stage.
  • FC_Exported(Object objRtn) - This is raised when the user selects an individual chart from UI to be saved on his disk (not possible when saveMode is set as batch). This method name can be changed by specifying the same in individual chart's XML as exportCallback attribute.
  • FC_BatchExported (Object objRtn) - This is raised when the entire batch was saved as a single file on user's disk.

To handle these events, you need to define this function in your JavaScript code. In case of FC_Exported(objRtn) or FC_BatchExported(objRtn), objRtn contains the following parameters (returned from Export Component):

  • statusCode - Has the value of 1 in case of success, and 0 in case of failure.
  • statusMessage - In case of failure, this parameter contains a string description of the error (returned by server)
  • fileName - If saving was successful, this parameter contains the HTTP reference to the image/PDF file saved on server
  • width & height - If saving was successful, these parameters contain the width/height of saved image. Else, they contain 0.
  • DOMId - In case of Save-All, this parameter contains a list of DOMId of the charts in queue that were successfully exported separated by comma. In case of individual chart saving, it contains that chart's DOM Id.

Let's quickly see an example code where all the callback functions has been implemented. In this example, we just track the events and show messages using JavaScript alert.

<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();
    }
    //This event is raised when the chart has finished capture phase and passed the data to
    //Export Component for further processing
    function FC_ExportReady(DOMId){
      alert("The chart with DOM ID as " + DOMId + " has finished capture mode. It's now ready to be downloaded individually");
    }

    //This event is raised when an individual chart has been successfully saved on user's disk (post click of button)
    function FC_Exported(objRtn){
      if (objRtn.statusCode=="1"){
        alert("The chart was successfully saved. Its DOM Id is " + objRtn.DOMId);
      } else{
        alert("There was an error saving the chart. Error message: " + objRtn.statusMessage + ". Its DOM Id is " + objRtn.DOMId);
      }
    }

    //This event is invoked when the user clicked on Save-All button and all the charts were saved on user's disk
    //as a single file.
    function FC_BatchExported(objRtn){
      if (objRtn.statusCode=="1"){
        alert("The batch was exported and saved as a single file named '" + objRtn.fileName + "'. The charts processed were " + objRtn.DOMId);
      }else{
        alert("There was an error saving the chart. Error message: " + objRtn.statusMessage);
      }
    }
</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>
   <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">
    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>
</body>
</html>
This code, when run, will show you all the events generated for the export.