|
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/javascript-ref/ |
Upload File : |
<!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=utf-8" />
<title>Exporting Charts as PDF or Images - JavaScript Reference - Initiating from JavaScript </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">
table2 caption { text-align:left; font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
padding-bottom: 6px; }
table2 td { padding-bottom: 10px;}
table2 td p { margin: 0; }
</style>
<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", "JavaScript Reference|ECReferenceJS.html", "Initiating from JavaScript" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Initiating from JavaScript </td>
</tr>
<tr>
<td valign="top" class="text">
<p>In this section, we will discuss how we can export charts using JavaScript. First we will start with the simplest of examples and then move on to the harder ones.</p>
<p class="highlightBlock"><strong>Important:</strong><br />
The JavaScript method will only work when the chart has been fully rendered in the client browser. You can use the FC_Rendered method to track the same.<br /><br />
Due to Adobe Flash Player's default security system, the JavaScript method does not work from local file system. It only works when hosted on a server (localhost or remote) unless configured otherwise.</p>
<p class="header">Simple JavaScript-Triggered Export</h3>
<p>In this example, we will first require you to create a chart on your page. Then use an HTML button to initiate the export process on that chart.</p>
<p>To achieve this, we will have to do the following:</p>
<ol>
<li><a href="#html_page">Create an HTML page with a chart in it.</a></li>
<li><a href="#xml">Setup the XML of the chart to enable exporting.</a></li>
<li><a href="#function">Create a JavaScript function to initiate exporting of the chart.</a></li>
<li><a href="#button">Insert an HTML button to call the above JavaScript.</a></li>
</ol>
<p class="textBold"><a name="html_page" id="html_page"></a>Create an HTML page with a chart in it</p>
<p class="text">The process involves including the <span class="codeInline">FusionCharts.js</span> file within the <span class="codeInline"><head></span> section of your newly created HTML page. Then follow the standard process to load a chart using the <span class="code-inline">FusionCharts</span> JavaScript object. (You may refer to <a href="../../FirstChart/FirstChart.html">Creating your first chart</a> article under "Creating your First Chart" section.)</p>
<p>The JavaScript code to create a chart will appear like below:</p>
<pre class="prettyprint code_container">var myChart = new FusionCharts('FusionCharts/Column3D.swf', 'myChart', '900', '300', '0', '1');
myChart.setXMLUrl('Data.xml');
myChart.render('chartContainerDiv');</pre>
<p>
Note that the <span class="codeInline">RegisterWithJS</span> parameter while initializing your chart must be set to '1' for the charts to respond to your JavaScripts.</p>
<p class="textBold"><a name="xml" id="xml"></a>Setup the XML of the chart to enable exporting</p>
<p>For this example, we will be exporting at a PHP server, with a default action of "Download". For more information on Server-side exporting, refer to our <a href="../server-side/ECServerOverview.html">Server-side exporting</a> section. The XML to do so will be like below (the attributes pertinent to exporting is marked in bold) and the file will be saved as "Data.xml" beside your HTML file:</p>
<pre class="prettyprint code_container"><chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0'<strong> exportEnabled='1' exportHandler='http://www.domain.com/FusionCharts/ExportHandlers/PHP/index.php' exportAtClient='0' exportAction='download' </strong>>
<set label='Alex' value='25000' />
<set label='Mark' value='35000' />
<set label='David' value='42300' />
<set label='Graham' value='35300' />
<set label='John' value='31300' />
</chart></pre>
<p class="highlightBlock"> The exporting procedure to export at Client-side is almost similar, except that additional steps are required to setup the Client-side Export Component. For more information, refer to the <a href="../client-side/ECClientOverview.html">Client-side exporting</a> section.</p>
<p class="textBold"><a name="function" id="function"></a>Create a JavaScript function to initiate exporting of the chart</p>
<p>The JavaScript function uses the simple function provided within <span class="codeInline">FusionCharts.js</span> to locate the chart SWF from its ID. Then it calls the new "<span class="codeInline">exportChart()</span>" function on the chart. Note that we have first verified whether the chart has fully rendered by calling the new <span class="codeInline">hasRendered()</span> function of the chart.</p>
<pre class="prettyprint code_container"><script type="text/javascript">
function ExportMyChart() {
var chartObject = getChartFromId('myChart');
if( chartObject.hasRendered() ) chartObject.exportChart();
}
</script> </pre>
<p class="textBold"><a name="button" id="button"></a>Insert an HTML button to call the above JavaScript</p>
<p>Now that we have all our codes ready, we assemble them within one HTML file and see the results.</p>
<p>The Final code will look like this:</p>
<pre class="prettyprint code_container"><html>
<head>
<title>My Chart</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript">
function ExportMyChart() {
var chartObject = getChartFromId('myChart');
if( chartObject.hasRendered() ) chartObject.exportChart();
}
</script>
</head>
<body>
<div id="chartContainerDiv">FusionCharts loaded here...</div>
<script type="text/javascript">
var myChart = new FusionCharts('FusionCharts/Column3D.swf', 'myChart', '900', '300', '0', '1');
myChart.setXMLUrl('Data.xml');
myChart.render('chartContainerDiv');
</script>
<input type="button" value="Export My Chart" onclick="ExportMyChart()" />
</body>
</html></pre>
<p>After this, we open this file in a browser and click on the "<span class="codeInline">Export My Chart</span>" button and the chart will start exporting all by itself! In case you face any error, refer to "<a href="../ECReferenceDebugJS.html">Debug Mode</a>" section under "<strong>JavaScript Reference</strong>"</p>
<p class="header">Providing Export Parameters (Overriding XML Export Attributes) using JavaScript:</p>
<p>The new FusionCharts (v3.1 and above) allows you to provide values for XML attributes via JavaScript as well. The <span class="codeInline">exportChart()</span> function also takes in a parameter that accepts these XML attributes in a JSON object notation.</p>
<p>Not all XML attributes are overridable. The list of export-related XML attributes that can be overridden, is found under the <a href="ECReferenceExport.html">Export Attributes</a> section under <strong>JavaScript Reference</strong>. You can provide export attributes in {key1: 'value1', key2: 'value2', ...} format as shown below:</p>
<pre class="prettyprint code_container"><script type="text/javascript">
function ExportMyChart() {
var chartObject = getChartFromId('myChart');
chartObject.exportChart( <strong>{ exportAtClient: '1', exportFormat: 'PDF' }</strong> );
}
</script></pre> <br />
</td></tr></table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Export attributes|ECReferenceExport.html","Exporting pure JavaScript charts|../ECPureJS.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>