|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/exporting-image/client-side/ |
Upload File : |
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exporting Charts as PDF or Images - Client-side export - Setting JavaScript callback </title>
<link rel="stylesheet" href="../../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/prettify/prettify.css" />
<script type="text/javascript" src="../../assets/ui/js/jquery.min.js" ></script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../../Introduction/Overview.html", "Exporting as Image/PDF|../ECOverview.html", "Client-side export|ECClientOverview.html", "Setting JavaScript callback" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Setting JavaScript callback </td>
</tr>
<tr>
<td valign="top" class="text"><p>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. </p>
<p>By default, the invoked function name is <span class="codeInline">FC_Exported(objRtn)</span>. You can, however, call a different function as well by specifying the following in your chart XML: </p>
<p class="codeInline"><chart .. exportCallback='myCallBackFunction' ...></p>
<p>And you then need to define this function in your JavaScript code. However, if you do not define any callback function in your XML, the default callback function <span class="codeInline">FC_Exported</span> is invoked. In either case, an object is passed to the function as <span class="codeInline">FC_Exported(objRtn)</span> or <span class="codeInline">myCallBackFunction(objRtn)</span>, which contains the following parameters (returned from Export Component):</p>
<ul>
<li><span class="codeInline">statusCode</span> - Has the value of 1 in case of success, and 0 in case of failure.</li>
<li><span class="codeInline">statusMessage</span> - In case of failure, this parameter contains a string description of the error (returned by server)</li>
<li><span class="codeInline">fileName</span> - If saving was successful, this parameter contains the HTTP reference to the image/PDF file saved on server</li>
<li><span class="codeInline">width</span> & <span class="codeInline">height</span> - If saving was successful, these parameters contain the width or height of saved image. Else, they contain 0. </li>
<li><span class="codeInline">DOMId</span> - DOM Id of the chart that was successfully exported.
<p class="highlightBlock">To provide cross-browser compatibility, we recommend you not to start the ID with a numerical value, nor use space as part of the ID. </p>
</li>
</ul>
<p class="highlightBlock">To aid your understanding of this section, we will recommend you to go through the <a href="ECClientOverview.html"><strong>Overview</strong></a> page of <span class="codeInline">Exporting Charts as PDF or Images > Client-side export </span></p>
<p>Let us 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. </p></td>
</tr>
<tr>
<td valign="top"><pre class="code_container prettyprint"><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
<strong>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);
}
} </strong>
</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.setXMLUrl("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></pre></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top">See it <a href="../../../Code/ExportChartSamples/ClientSide/Callback.html" target="_blank">live</a>! <br /><br />
</td>
</tr>
<tr>
<td valign="top" class="header">FC_ExportReady event </td>
</tr>
<tr>
<td valign="top" class="text"><p>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 <span class="codeInline">FC_ExportReady</span> event is raised, you might show a waiting message or alert the user that the chart is in processing stage. </p>
<p>The syntax of event is <span class="codeInline">FC_ExportReady(DOMId)</span>. You can use <span class="codeInline">DOMId</span> (string) as the identifier for each chart to check which chart has finished processing. </p>
<p>The following code explains its usage: </p></td>
</tr>
<tr>
<td valign="top"><pre class="code_container prettyprint"><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></pre>
<p>See it <a href="../../../Code/ExportChartSamples/ClientSide/Callback.html" target="_blank">live</a>!</p> </td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Setting for Multiple charts|ECClientMultiple.html","Component UI customization|ECComponentUI.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>