Setting JavaScript callback |
When exporting charts using Batch Export Component, the component raises three 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):
To aid your understanding of this section, we will recommend you to go through the Overview page of Exporting Charts as PDF or Images > Batch export Let us 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. |