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:
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):
Let's quickly see an example code where all the callback functions have 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.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"> 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> |
See it live!
This code, when run, will show you all the events generated for the export. |