Exporting Charts as PDF or Images > Client-side export > Setting JavaScript callback

When using FusionCharts Export component, you can configure the component to invoke a callback JavaScript method, when the chart has been saved by user. This is useful for tracking whether the exported charts have been saved by your user.

By default, the invoked function name is FC_Exported(objRtn). You can, however, call a different function as well by specifying the following in your chart XML:

<chart .. exportCallback='myCallBackFunction' ...>

And you then need to define this function in your JavaScript code. However, if you do not define any call back function in your XML, the default callback function FC_Exported is invoked. In either case, an object is passed to the function as FC_Exported(objRtn) or myCallBackFunction(objRtn), which 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 - DOMId of the chart that was successfully exported.

Let's quickly see an example code where a callback function has been implemented. In this example, once the user has saved the exported chart on his disk (after clicking the Save button for the same), we just show it in a JavaScript alert.

<html>
<head>
<script language="JavaScript" src="../../FusionCharts/FusionCharts.js"></script>
<script language="JavaScript" src="../../FusionCharts/FusionChartsExportComponent.js"></script>
<script type="text/javascript">
  //Default callback function that gets invoked when user has finished saving the exported output to his disk
  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);
   }
  }
</script>
</head>

<body bgcolor="#ffffff">
<div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
var myChart = new FusionCharts("../../FusionCharts/Column2D.swf", "myChartId", "500", "300", "0", "1");
myChart.setDataURL("Callback.xml");
myChart.render("chartdiv");
</script>

<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>
<script type="text/javascript">
var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");
myExportComponent.Render("fcexpDiv");
</script>

</body>
</html>
 
FC_ExportReady event

At times, you might want to track the event when the chart has finished its capture phase and has passed the data to export component, but user has not saved the image/PDF on his disk. 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.

The syntax of event is FC_ExportReady(DOMId). You can use DOMId (string) as the identifier for each chart to check which chart has finished processing.

The following code explains its usage:

<script type="text/javascript">
   //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");
   }
</script>