|
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/batch-exporting/ |
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 - Batch export - Setting it up </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", "Batch exporting|ECBatchOverview.html", "Setting it up" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Setting it up </td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, we will cover examples for setting up Batch 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, the few steps are:</p>
<ol>
<li><a href="#configurexml">Configure the charts in your page to allow export of charts at Client-side</a></li>
<li><a href="#exportcomponentinstance">Include an instance of Exporter Component in your web page</a></li>
<li><a href="#beginexport method">Invoke the BeginExport method of Exporter Component to start Batch export</a></li>
</ol>
<p class="highlightBlock">To aid your understanding of this section, we will recommend you to go through the <a href="ECBatchOverview.html"><strong>Overview</strong></a> page of <span class="codeInline">Exporting Charts as PDF or Images > Batch export </span></p>
<p>Let us see how to implement each of them in details. </p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="configurexml" id="configurexml"></a>Configuring XML for client-side export </td>
</tr>
<tr>
<td valign="top" class="text"><p>In the XML of each chart that you need to export, 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 we will create next in the HTML page (using <span class="codeInline">exportHandler</span> attribute).
<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>The following XML snippet shows how to attain these: </p></td>
</tr>
<tr>
<td valign="top"><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' exportAtClient='1' exportHandler='fcBatchExporter'</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"><p>We now create three charts in our page - Column2D, Column3D and Pie3D. All these charts, for the sake of example, use the same XML.</p> </td>
</tr>
<tr>
<td valign="top"><pre class="prettyprint code_container"><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> </pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>Note that all the charts have <span class="codeInline">registerWithJS</span> set to 1 and their DOM IDs are <span class="codeInline">myChartId1</span>, <span class="codeInline">myChartId2</span> and <span class="codeInline">myChartId3</span> respectively. The next step is to add the Exporter Component to the page.</p> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="exportcomponentinstance" id="exportcomponentinstance"></a>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 provides references to 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" class="text"><pre class="prettyprint code_container"><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" class="text"> <pre class="prettyprint code_container"><span class="codeComment"><!-- We also create a DIV to contain the FusionCharts client-side exporter component --></span>
<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>Next, you create an instance of the Export Component in your page using the following JavaScript code: </p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><script type="text/javascript">
<span class="codeComment">//Note: fcExporter1 is the DOM ID of the DIV and should be specified as value of exportHandler
//attribute of chart XML.</span>
var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");</pre> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, we first create an instance of <span class="codeInline">FusionChartsExportObject</span>, which is the JavaScript class representation of FusionCharts Export Component. To this, 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. </p>
<p>Next, we need to convey the list of charts that we intend to add to the batch. This is done by specifying all such DOM Ids of the charts in an array. This allows you to selectively configure the charts you want to add to your queue. Or, if you need to instantiate multiple Batch exports, each with a different combination of charts, you can do so. </p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><span class="codeComment">//Add the charts to queue. The charts are referred to by their DOM Id.</span>
myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>After this, we configure the Export Component UI to show in full mode, allow saving of output as individual or single file and to allow user to select the saving format. This is done using the following code:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><span class="codeComment">//Set the mode as full mode</span>
myExportComponent.componentAttributes.fullMode='1';
<span class="codeComment">//Set saving mode as both. This allows users to download individual charts/ as well as download all charts as a single file.</span>
myExportComponent.componentAttributes.saveMode='both';
<span class="codeComment">//Show allowed export format drop-down</span>
myExportComponent.componentAttributes.showAllowedTypes = '1';</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>We also set the cosmetic attributes of UI.</p> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><span class="codeComment">//Width and height</span>
myExportComponent.componentAttributes.width = '350';
myExportComponent.componentAttributes.height = '140';
<span class="codeComment">//Message - caption of export component</span>
myExportComponent.componentAttributes.showMessage = '1';
myExportComponent.componentAttributes.message = 'Click on button above to begin export of charts. Then save from here.';</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>Finally, we call the <span class="codeInline">Render</span> method of the class with our <span class="codeInline">DIV id</span> as parameter. This generates an instance of the Exporter Component in the specified <span class="codeInline">DIV</span> at run-time.</p> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><span class="codeComment">//Render the exporter SWF in our DIV fcexpDiv</span>
myExportComponent.Render("fcexpDiv");</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>Now, all we need to do is invoke the BeginExport() API of batch method. </p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="beginexport method" id="beginexport method"></a>Invoking BeginExport method </td>
</tr>
<tr>
<td valign="top" class="text"><p>We place a button in our page, which when clicked, invokes this. The code is shown under:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><span class="codeComment">//Define a function, which will be invoked when user clicks the batch-export-initiate button</span>
function initiateExport(){
myExportComponent.BeginExport();
}
...
<input type='button' onClick="javascript:initiateExport();" value="Begin batch export" /></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>The final code of the page looks as under: </p></td>
</tr>
<tr>
<td valign="top"><pre class="prettyprint code_container"><html>
<head>
<script language="JavaScript" src="../../FusionCharts/FusionCharts.js"></script>
<script language="JavaScript" src="../../FusionCharts/FusionChartsExportComponent.js"></script>
<script type="text/javascript">
<span class="codeComment"> //Define a function, which will be invoked when user clicks the batch-export-initiate button</span>
function initiateExport(){
myExportComponent.BeginExport();
}
</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">
<span class="codeComment"> //Initialize Batch Exporter with DOM Id as fcBatchExporter</span>
var myExportComponent = new FusionChartsExportObject("fcBatchExporter", "../../FusionCharts/FCExporter.swf");
<span class="codeComment"> //Add the charts to queue. The charts are referred to by their DOM Id.</span>
myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];
<span class="codeComment"> //------ Export Component Attributes ------//
//Set the mode as full mode
</span> myExportComponent.componentAttributes.fullMode='1';
<span class="codeComment"> //Set saving mode as both. This allows users to download individual charts/ as well as download all charts as a single file.</span>
myExportComponent.componentAttributes.saveMode='both';
<span class="codeComment"> //Show allowed export format drop-down</span>
myExportComponent.componentAttributes.showAllowedTypes = '1';
<span class="codeComment"> //Cosmetics
//Width and height
</span> myExportComponent.componentAttributes.width = '350';
myExportComponent.componentAttributes.height = '140';
<span class="codeComment"> //Message - caption of export component</span>
myExportComponent.componentAttributes.showMessage = '1';
myExportComponent.componentAttributes.message = 'Click on button above to begin export of charts. Then save from here.';
<span class="codeComment"> //Render the exporter SWF in our DIV fcexpDiv</span>
myExportComponent.Render("fcexpDiv"); <span class="codeComment"> </span>
</script>
</body>
</html> </pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>When you now fire up your HTML page, you will see a screen as under. As you can see, the Batch Export Component is present along with the charts, waiting for the user to initiate Batch process.</p>
<img src="../Images/ECBatchSetup1.jpg" width="703" height="557" class="imageBorder" />
<p>See it <a href="../../../Code/ExportChartSamples/BatchExport/BatchModeOnly.html" target="_blank">live</a>! </p>
<p>Once the button is clicked, all charts enter capture phase as shown below:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="../Images/ECBatchSetup2.jpg" width="716" height="596" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>Finally, when the charts have been exported to Export Component, it gets populated, as under. The charts exported can either be individually saved from this, or all charts can be saved as a single file (by clicking on <span class="codeInline">Save All</span>) button.</p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="../Images/ECBatchSetup3.jpg" width="357" height="198" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>If you do not wish to allow export of all the charts as a single file, you can just set:</p>
<pre class="prettyprint code_container"> myExportComponent.componentAttributes.saveMode='individual'; </pre>
<p>This will result in the image below. Note that the "Save-All" panel at the bottom of Export Component is missing now. </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../Images/ECBatchSetup4.jpg" width="357" height="198" border="1" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>Or, if you do not want the user to be able to save individual files, you can set this to:</p>
<pre class="prettyprint code_container">myExportComponent.componentAttributes.saveMode='batch';</pre>
<p>This will result as under. Note that you can no longer save individual charts. All the chart export output get compiled in a single file, for which you can choose a saving format. </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../Images/ECBatchSetup5.jpg" width="352" height="131" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>In batch mode, the output file name is named as <span class="codeInline">FusionCharts</span> by default (extension depending on what format the user selected). To specify your own file name, you can set the following in JavaScript. </p>
<pre class="prettyprint code_container">myExportComponent.componentAttributes.defaultExportFileName = 'MyCharts';</pre>
<p>The <span class="codeInline">exportFileName</span> attribute will not work in Batch export, as that file name is chart specific. The above line collectively specifies a name for all the charts in the batch - when exported as a single file in batch mode. </p>
<p>Similarly, if you want to specify a default export format (JPG, PNG or PDF), and hide the combo box (to select formats), you can set:</p>
<pre class="prettyprint code_container">myExportComponent.componentAttributes.defaultExportFormat='PDF';
myExportComponent.componentAttributes.showAllowedTypes='0';
This results in a single button being shown, which when clicked downloads a single PDF file containing all the charts in batch. </pre></td>
</tr>
<tr>
<td valign="top" class="text"><p><img src="../Images/ECBatchSetup6.gif" width="180" height="109" class="imageBorder" /></p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Customizing the Export Component UI </td>
</tr>
<tr>
<td valign="top" class="text"><p>The Export Component offers extensive UI customization options. Here, we will 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:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><span class="codeComment"><!-- We also create a DIV to contain the FusionCharts client-side exporter component --></span>
<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div>
<script type="text/javascript">
<span class="codeComment"> //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.
</span><span class="codeComment"> </span>var myExportComponent = new FusionChartsExportObject("fcExporter1", "../../FusionCharts/FCExporter.swf");
<span class="codeComment"> </span><span class="codeComment">//Add the charts to queue. The charts are referred to by their DOM Id.</span>
myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];
<span class="codeComment"> //------ Export Component Attributes ------//
//Set the mode as full mode
</span> myExportComponent.componentAttributes.fullMode='1';
<span class="codeComment"> //Set saving mode as both. This allows users to download individual charts/ as well as download all charts as a single file.</span>
myExportComponent.componentAttributes.saveMode='both';
<span class="codeComment"> //Show allowed export format drop-down</span>
myExportComponent.componentAttributes.showAllowedTypes = '1';
<span class="codeComment"> //Customize the component properties
//Width and height
</span><span class="codeComment"> </span>myExportComponent.componentAttributes.width = '400';
<span class="codeComment"> </span>myExportComponent.componentAttributes.height = '120';
<span class="codeComment"> //Background color</span>
<span class="codeComment"> </span>myExportComponent.componentAttributes.bgColor = 'ffffdd';
<span class="codeComment"> //Border properties</span>
<span class="codeComment"> </span>myExportComponent.componentAttributes.borderThickness = '2';
<span class="codeComment"> </span>myExportComponent.componentAttributes.borderColor = '0372AB';
<span class="codeComment"> //Font properties</span>
<span class="codeComment"> </span>myExportComponent.componentAttributes.fontFace = 'Arial';
<span class="codeComment"> </span>myExportComponent.componentAttributes.fontColor = '0372AB';
<span class="codeComment"> </span>myExportComponent.componentAttributes.fontSize = '12';
<span class="codeComment"> //Message - caption of export component</span>
<span class="codeComment"> </span>myExportComponent.componentAttributes.showMessage = '1';
<span class="codeComment"> </span>myExportComponent.componentAttributes.message = 'Export the chart first, and then click on this button to save';
<span class="codeComment"> //Button visual configuration</span>
<span class="codeComment"> </span>myExportComponent.componentAttributes.btnWidth = '200';
<span class="codeComment"> </span>myExportComponent.componentAttributes.btnHeight= '25';
<span class="codeComment"> </span>myExportComponent.componentAttributes.btnColor = 'E1f5ff';
<span class="codeComment"> </span>myExportComponent.componentAttributes.btnBorderColor = '0372AB';
<span class="codeComment"> //Button font properties</span>
<span class="codeComment"> </span>myExportComponent.componentAttributes.btnFontFace = 'Verdana';
<span class="codeComment"> </span>myExportComponent.componentAttributes.btnFontColor = '0372AB';
<span class="codeComment"> </span>myExportComponent.componentAttributes.btnFontSize = '15';
<span class="codeComment"> //Title of button</span>
<span class="codeComment"> </span>myExportComponent.componentAttributes.btnSaveTitle = 'Save this chart'
<span class="codeComment"> </span>myExportComponent.componentAttributes.btnSaveAllTitle = 'Save all charts together'
<span class="codeComment"> </span>myExportComponent.componentAttributes.btnDisabledTitle = 'Waiting for export';
<span class="codeComment"> //Render the exporter SWF in our DIV fcexpDiv</span>
<span class="codeComment"> </span>myExportComponent.Render("fcexpDiv");
</script></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>In this example, we have customized font properties, color properties and titles. You can also customize scroll bar properties, combo-box properties, padding and margins. Refer to the section <span class="codeInline">Client-side Exporting > Component UI Customization</span> to get an idea of the same.</p> </td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Batch exporting|ECBatchOverview.html","Setting JavaScript callback|ECBatchCallback.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>