|
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 - Simple Example </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", "Simple example" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Simple Example </td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, we will cover examples for setting up Client-side exporting of charts. We will first start with the simplest example and then move ahead by configuring various parameters.</p>
<p>Before you start, you need to follow these steps:</p>
<ol>
<li>Copy <span class="codeInline">FusionChartsExportComponent.js</span> from <span class="codeInline">Download Package > Charts </span>folder to your server. A good location is where you have placed <span class="codeInline">FusionCharts.js</span></li>
<li>Copy <span class="codeInline">FCExporter.swf</span> from <span class="codeInline">Download Package > Charts</span> to your server. A good location is where you have placed the other chart SWF files.</li>
</ol>
<p>With that done, our next few steps are:</p>
<ol>
<li>Include an instance of Exporter Component in your web page</li>
<li>Configure the chart (XML) to use this instance of export component by specifying it in HTML </li>
<li>Start exporting </li>
</ol>
<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 see how to implement each of them in details. </p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Creating instance of Export Component in your web page </td>
</tr>
<tr>
<td valign="top" class="text"><p>The instance of the export component can be created in your web page easily using our <span class="codeInline">FusionChartsExportComponent</span> JavaScript class.</p>
<p> So, you first need to include the JavaScript class in your page as under. Make sure to include this page after <span class="codeInline">FusionCharts.js</span>, as this class references some of the objects defined in <span class="codeInline">FusionCharts.js</span>. This order of inclusion is important.</p></td>
</tr>
<tr>
<td valign="top" ><pre class="code_container prettyprint"><head>
<script language="JavaScript" src="../../FusionCharts/FusionCharts.js"></script>
<script language="JavaScript" src="../../FusionCharts/FusionChartsExportComponent.js"></script>
</head></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>Now, using this class, you need to create an instance of this component in your page. For that, you first define an empty DIV and name it, as shown under:</p></td>
</tr>
<tr>
<td valign="top" ><pre class="code_container prettyprint"><!-- We also create a DIV to contain the FusionCharts client-side exporter component -->
<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, the DIV has been named as <span class="codeInline">fcexpDiv</span>. </p>
<p class="highlightBlock">Note that you can place this DIV anywhere in your page - it is not necessary to place it beside the chart. However, since the UI of this Export Component shows a button for initiating export, it is better to place it somewhere near the chart so that your users can recognize it. </p>
<p>Finally, you create an instance of the export component in your page using the following JavaScript code: </p></td>
</tr>
<tr>
<td valign="top" ><pre class="code_container prettyprint"><script type="text/javascript">
//Note: fcExporter1 is the DOM ID of the DIV and should be specified as value of exportHandler
//attribute of chart XML.
var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");
//Render the exporter SWF in our DIV fcexpDiv
myExportComponent.Render("fcexpDiv");
</script></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>Here:</p>
<ul>
<li>
First we create an instance of <span class="codeInline">FusionChartsExportObject</span>, which is the JavaScript class representation of FusionCharts Export Component.</li>
<li> We specify the DOM Id of this export component instance - <span class="codeInline">fcExporter1</span> in this case. We also specify the location of the component SWF file as second parameter.</li>
<li> Finally, we call the <span class="codeInline">Render</span> method of the class with our DIV Id as parameter. This generates an instance of the Export Component in the specified DIV at run-time.
<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">While there are more parameters that you can provide in this constructor to customize the cosmetics and functional behavior of export component, we will come to them later.</p>
<p>The final code of the page looks as under: </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>
</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">
//Create the chart.
//Note that you necessarily need to set the registerWithJS attribute as 1, as JavaScript is used for client-
//side communication between the chart and FusionCharts Exporter Component.
var myChart = new FusionCharts("../../FusionCharts/Column2D.swf", "myChartId", "500", "300", "0", "1");
myChart.setXMLUrl("SimpleExample.xml");
myChart.render("chartdiv");
</script>
<!-- We also create a DIV to contain the FusionCharts client-side exporter component -->
<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>
<script type="text/javascript">
//Render the export component in this
//Note: fcExporter1 is the DOM ID of the DIV and should be specified as value of exportHandler
//attribute of chart XML.
var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");
//Render the exporter SWF in our DIV fcexpDiv
myExportComponent.Render("fcexpDiv");
</script>
</body>
</html></pre></td>
</tr>
<tr>
<td valign="top" class="text" height="25"> </td>
</tr>
<tr>
<td valign="top" class="text">This completes the code needed in your HTML. Now, we just need to configure our chart XML data to use this export component. </td>
</tr>
<tr>
<td valign="top" class="text" height="25"> </td>
</tr>
<tr>
<td valign="top" class="header">Configuring XML for Client-side Export </td>
</tr>
<tr>
<td valign="top" class="text"><p>In the XML, you need to do three things:</p>
<ul>
<li>Enable your chart for export (using <span class="codeInline">exportEnabled</span> attribute) </li>
<li>Set it to use Client-side export (using <span class="codeInline">exportAtClient</span> attribute) </li>
<li>Give reference (DOM Id) of the export component that you created in your HTML page (using <span class="codeInline">exportHandler</span> attribute) </li>
</ul>
<p>The following XML snippet shows how to attain these: </p></td>
</tr>
<tr>
<td valign="top"> <pre class="code_container prettyprint"><chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0' <strong>exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1'</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></td>
</tr>
<tr>
<td valign="top" class="text" height="25"> </td>
</tr>
<tr>
<td valign="top" class="text">When you now fire up your HTML page, you will see a screen as under. </td>
</tr>
<tr>
<td valign="top" class="text"> </td></tr>
<tr>
<td valign="top" class="text">
<img src="../Images/ECClientSimple1.jpg" width="481" height="340" /></td></tr>
<tr>
<td valign="top" class="text">
See it <a href="../../../Code/ExportChartSamples/ClientSide/SimpleExample.html" target="_blank">live</a>!
</td>
</tr>
<tr>
<td valign="top" class="text"><p>The screen consists of a chart and a small <span class="codeInline">Waiting</span> button below it. This button is the UI of FusionCharts export component. By default, it is enabled as the chart has not yet exported its data to Export Component. The Export Component can have UI in two modes - Compact or Full. What you see here is the compact mode with just the button on. We will cover customization of this mode and full mode in the coming sections. </p>
<p>To start exporting, right click on the chart and select "<span class="codeInline">Save as JPEG</span>". You will see the chart entering capture phase. Once capture phase is finished, the chart passes this data to export component, which in turn processes it and makes it available for download. In this state, the title of button changes to "Save" and it gets enabled, as shown below. </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../Images/ECClientSimple2.jpg" width="492" height="335" /></td>
</tr>
<tr>
<td valign="top" class="text" height="25"> </td>
</tr>
<tr>
<td valign="top" class="text">When you click this button now, the browser shows a "Save as" dialog box, which allows you to save the exported chart output on your hard drive. </td>
</tr>
<tr>
<td valign="top" class="text" height="25"> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="../Images/ECClientSimple3.jpg" width="577" height="475" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, the chart downloads as "<span class="codeInline">FusionCharts.jpg</span>". If you wish to change the name of file, you can specify it in your XML as:</p>
<p class="codeInline"><chart ... exportFileName='MyFileName' ...> </p>
<p>Note that you do not have to provide the extension here, as the extension depends on the format that was selected on chart during export. Now, if you are wondering why the Export Component needs to be a separate SWF file and why does it need to have a UI, let us understand the same. </p> </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">FusionCharts Export Component - Why a separate UI? </td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT is made in Flash 8 (AS2) which does not support byte-streams and file downloads. However, Flash 10 (AS3) does support the same. So, to get the best of both worlds, the Export Component has been coded in Flash 10 (AS3) to be able to handle image/PDF building (using byte streams) and to allow download of the same. </p>
<p>The bridge between FusionCharts XT charts and the Export Component is JavaScript. So, we always ask you to set <span class="codeInline">registerWithJS</span> of chart as 1, and to run the files from a server (either localhost, or a remote server), as Flash Player, by default, blocks JavaScript communication when running from local file system.</p>
<p>Now if you are wondering why we cannot start automatic download of image/PDF from Export Component, rather than having to click a button, let us explain. In Flash Player, to allow download of a file, the end user has to necessarily interact with the Flash movie that initiates download. This has been done to avoid "evil" movies on web from doing any sort of harm. As such, the Export Component provides a button to click on, which initiates the download. As we earlier mentioned, the Export Component has two modes - <span class="codeInline">Compact</span> and <span class="codeInline">Full</span> Mode. The Full mode has a much enhanced UI, wherein you can select format for each chart, or download all charts as a single file. We will cover them later in Batch Export section. </p>
<p>Before that, let us quickly glance through customization options for the compact mode. </p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="customexporthandler"></a>Customizing the Export Component UI </td>
</tr>
<tr>
<td valign="top" class="text" height="25"> </td>
</tr>
<tr>
<td valign="top" class="text">The Export Component offers extensive UI customization options. Here, we'll see some of the basic configuration options. The entire list can be found in the section <span class="codeInline">Component UI Customization</span>. Consider the code below: </td>
</tr>
<tr>
<td valign="top" class="text" height="25"> </td>
</tr>
<tr>
<td valign="top"> <pre class="code_container prettyprint"><!-- We also create a DIV to contain the FusionCharts client-side exporter component -->
<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>
<script type="text/javascript">
//Render the export component in this
//Note: fcExporter1 is the DOM ID of the DIV and should be specified as value of exportHandler
//attribute of chart XML.
var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");
//Customize the component properties
//Width and height
myExportComponent.componentAttributes.width = '400';
myExportComponent.componentAttributes.height = '60';
//Background color
myExportComponent.componentAttributes.bgColor = 'ffffdd';
//Border properties
myExportComponent.componentAttributes.borderThickness = '2';
myExportComponent.componentAttributes.borderColor = '0372AB';
//Font properties
myExportComponent.componentAttributes.fontFace = 'Arial';
myExportComponent.componentAttributes.fontColor = '0372AB';
myExportComponent.componentAttributes.fontSize = '12';
//Message - caption of export component
myExportComponent.componentAttributes.showMessage = '1';
myExportComponent.componentAttributes.message = 'Export the chart first, and then click on this button to save';
//Button visual configuration
myExportComponent.componentAttributes.btnWidth = '200';
myExportComponent.componentAttributes.btnHeight= '25';
myExportComponent.componentAttributes.btnColor = 'E1f5ff';
myExportComponent.componentAttributes.btnBorderColor = '0372AB';
//Button font properties
myExportComponent.componentAttributes.btnFontFace = 'Verdana';
myExportComponent.componentAttributes.btnFontColor = '0372AB';
myExportComponent.componentAttributes.btnFontSize = '15';
//Title of button
myExportComponent.componentAttributes.btnsavetitle = 'Save the chart'
myExportComponent.componentAttributes.btndisabledtitle = 'Waiting for export';
//Render the exporter SWF in our DIV fcexpDiv
myExportComponent.Render("fcexpDiv");
</script></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, we have specified various parameters for export component. This is done in the following syntax:</p>
<p class="codeInline">Component_Instance.componentAttributes.Parameter_name = 'Value';<br />
e.g., myExportComponent.componentAttributes.width = '400';</p>
<p>We have changed background colors, button colors, font properties, added a caption to UI and changed the title of button (both disabled stated and active state). When you now see your page, you will get something as under. </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../Images/ECClientSimple4.gif" width="409" height="69" /></td>
</tr>
<tr>
<td valign="top" class="text" height="25"> </td>
</tr>
<tr>
<td valign="top" class="text">In disabled mode (when export has not been initiated) <br />
</td>
</tr>
<tr>
<td valign="top" class="text"><img src="../Images/ECClientSimple5.gif" width="408" height="68" /></td>
</tr>
<tr>
<td valign="top" class="text" height="25"> </td>
</tr>
<tr>
<td valign="top" class="text">In active mode (post export).
<br />
<br />
See it <a href="../../../Code/ExportChartSamples/ClientSide/SimpleExampleCustom.html" target="_blank">live</a>! <br />
<p>The <span class="codeInline">full</span> mode has more complex UI and allows lot more configuration options. Please see the page <span class="codeInline">Component UI Customization</span> to get the complete list. Before that, let us quickly see what to do when you have multiple charts on the page. </p></td></tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Client-side export|ECClientOverview.html","Setting for Multiple charts|ECClientMultiple.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>