|
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/server-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 - Server-side export - Saving exported output on server disk </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", "Server-side export|ECServerOverview.html", "Saving to server disk" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Saving exported output on server disk </td>
</tr>
<tr>
<td valign="top" class="text"><p>If you do not wish the exported image to be sent back to browser, but instead want it to be saved on the server, you need to make the following changes from the previous example, where the file was downloaded:</p>
<p class="highlightBlock"><strong>Note:</strong> Starting FusionCharts XT v3.3.0, JavaScript charts can be exported and saved to a server disk. To do so, you need to configure your own server. The sever should support <a href="#php">PHP</a> and JAVA (1.3 or above). Also, you need to place the <a href="#php">FusionCharts PHP export handler</a> and <a href="http://xmlgraphics.apache.org/batik/tools/rasterizer.html" target="_blank">Apache Batik SVG Rasterizer library</a> in your server.</p>
<ol>
<li>Open the Server-side Export Handler and configure the path of write-enabled folder in which images will be saved, as well as set the HTTP URL representation of that folder in the code. The handlers also allow a few advanced configuration with respect to file naming. </li>
<li>Change <span class="codeInline">exportAction='save'</span> in the XML.</li>
<li>Remove <span class="codeInline">exportTargetWindow</span> attribute from your XML. As there are no downloads returned, there is no question of which window to return it in.</li>
<li>Create a JavaScript method in your web page that gets called once the image has been saved on server. Specify the name of this function in <span class="codeInline">exportCallback</span> attribute of XML. If you do not specify any names here, by default, a JavaScript function named <span class="codeInline">FC_Exported</span> is called. </li>
</ol>
<p class="highlightBlock">To aid your understanding of this section, we will recommend you to go through the <a href="ECServerOverview.html"><strong>Overview</strong></a> page of <span class="codeInline">Exporting Charts as PDF or Images > Server-side export </span></p>
<p>Let us first start with Step 1, where you configure the path of your temporary save folder on server and set the HTTP reference for the same. </p></td>
</tr>
<tr>
<td valign="top" class="header">Configuring the Server-side Export Handlers </td>
</tr>
<tr>
<td valign="top" class="text"><p>In the Export Handler, you will need to configure the following:</p>
<ul>
<li>Configure the folder on your server where the images/PDFs will be saved. Make sure that this folder has proper write permissions, as otherwise the Export Handlers will not be able to write to the file system. For checking and setting security settings on your server, consult the web server's documentation (i.e., IIS, Apache etc. docs)</li>
<li>You need to specify the HTTP mapping of this folder path, if you need your JavaScript functions to directly access this saved images. For example, say you saved your image on the server at <span class="codeInline">c:\inetpub\wwwroot\yoursite\temp</span> (or <span class="codeInline">/users/{you}/www/temp</span>) and the images saved here can be reached through <span class="codeInline">http://www.yoursite.com/temp</span>, you need to specify the URL "<span class="codeInline">http://www.yoursite.com/temp</span>" as mapping HTTP URL for this folder path. </li>
<li>Configure the file name settings - by default, FusionCharts Export Handlers uses GUID for automatic file name generation. At the end of this, you can opt to append current timestamp of server, or a random number to avoid over-riding of any files (in case of thousands of concurrent files being saved at a given second). You can also configure whether the files will be over-written in that folder or not (which is the default). </li>
</ul>
<p> Depending on which export handler you're using, follow the steps below: </p></td></tr>
<tr>
<td valign="top" class="lightBlueTr"><strong><a name="php"></a>If PHP (You can use PHP export handler to export and save both JavaScript and Flash charts)</strong></td>
</tr>
<tr>
<td class="text" height="20"></td></tr>
<tr>
<td class="text">For exporting the chart as image/PDF at server side using PHP, the following files (can be acquired from <span class="codeInline">FusionCharts Download Pack > ExportHandlers > PHP</span> folder) are required on your server:
<p class="highlightBlock"> If you want to export JavaScript charts, you need to have Java (1.3 or above) running in your server and Apache Batik SVG Rasterizer library available. You can freely download Apache Batik SVG Rasterizer library from <a href="http://xmlgraphics.apache.org/batik/" target="_blank">http://xmlgraphics.apache.org/batik/</a></p>
<ol>
<li><span class="codeInline">index.php</span> (accepts initial export data and loads format specific export modules)</li>
<li><span class="codeInline">Resources/FCExporter_RLE2IMG.php</span> (Export module to export Flash charts to PNG/JPG)</li>
<li><span class="codeInline">Resources/FCExporter_RLE2PDF.php</span> (Export module to export Flash charts to PDF)</li>
<li><span class="codeInline">Resources/FCExporter_SVG2ALL.php</span> (Export module to export JavaScript charts with the help of Java Batik library)</li>
<li><a href="http://xmlgraphics.apache.org/batik/tools/rasterizer.html" target="_blank">Apache Batik SVG Rasterizer library(download)</a></li>
</ol>
</p>
<p><strong>Server configurations to export JavaScript charts</strong><br/>
<ul>
<li>Create a directory called <span class="codeInline">temp</span> in the same directory as <span class="codeInline">index.php</span>. If you have Linux or Unix servers, chmod this new directory to <span class="codeInline">777</span>.</li>
<li>Download the <span class="codeInline">Apache Batik SVG Rasterizer library </span>(as a compressed file) from <a href="http://xmlgraphics.apache.org/batik/download.cgi" target="_blank">here</a>.</li>
<li>Extract the <span class="codeInline">Batik</span> library in a temporary location and upload <a href="http://xmlgraphics.apache.org/batik/download.cgi" target="_blank">batik-rasterizer.jar</a> and the entire <span class="codeInline">lib</span> directory to a location on your web server.</li>
<li>Edit <span class="codeInline">Resources/FCExporter_SVG2ALL.php</span> and set the path to <span class="codeInline">batik-rasterier.jar</span> in the options section provided at the top of the php file as shown below:<br/>
<br/>
<pre class="code_container prettyprint" >// Options
define ('BATIK_PATH', 'batik-rasterizer.jar');</pre><br />
</li>
<li>Set the path to the <span class="codeInline">index.php</span> in the <span class="codeInline">exportHandler</span> attribute of your chart's XML/JSON data as shown below:<br />
<br />
<pre class="code_container prettyprint" ><chart ExportHandler='http://myserver.com/exporter/index.php' ...></pre><br/>
</li>
<li>Enable Export using <span class="codeInline">exportEnabled ='1'</span> in your chart's XML/JSON data.</li>
<li>Open <span class="codeInline">index.php</span>, scroll down, and make the changes in following lines:<br />
<br />
<ol>
<li>Specify the location where the exported files will be saved</li>
<li>Whether to overwrite existing files or to apply intelligent file naming when a file with the same name already exists</li>
<li>Specify the web path of the saved file</li>
<br />
</ol>
<pre class="prettyprint code_container">/* ----------------------- EXPORT PATH & URL -------------------------------- */ <span class="codeComment">/**
* IMPORTANT: You need to change the location of folder where
* the exported chart images/PDFs will be saved on your
* server. Please specify the path to a folder with
* write permissions in the constant SAVE_PATH below.
*/ </span>
define ( "SAVE_PATH", "./" );
<span class="text"><strong>/* Place your folder path here.*/</strong></span><span class="codeComment">/**
* IMPORTANT: This constant HTTP_URL stores the HTTP reference to
* the folder where exported charts will be saved.
* Please enter the HTTP representation of that folder
* in this constant e.g., http://www.yourdomain.com/images/
*/</span>
define ( "HTTP_URL", "http://www.yourdomain.com/images/" );
<span class="text"><strong>/* Define your HTTP Mapping URL here.</strong></span><strong> */</strong><span class="codeComment">/**
* OVERWRITEFILE sets whether the export handler will overwrite an existing file
* the newly created exported file. If it is set to false the export handler will
* not overwrite. In this case if INTELLIGENTFILENAMING is set to true the handler
* will add a suffix to the new file name. The suffix is a randomly generated UUID.
* Additionally, you add a timestamp or random number as additional suffix.
*
*/</span>
define ( "OVERWRITEFILE", false );
define ( "INTELLIGENTFILENAMING", true );
define ( "FILESUFFIXFORMAT", "TIMESTAMP" ) ;// can be TIMESTAMP or RANDOM<strong>/* Define file over-write, auto-naming and naming suffix configuration here.*/</strong></pre>
</li>
</ul>
</p>
</td></tr>
<tr>
<td valign="top" class="text">
</td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="lightBlueTr"><strong>If ASP.NET:</strong> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Open FCExporter.aspx.cs and edit the following:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container">
<span class="codeComment">/// <summary>
/// IMPORTANT: You need to change the location of folder where
/// the exported chart images/PDFs will be saved on your
/// server. Please specify the path to a folder with
/// write permissions in the constant SAVE_PATH below.
///
/// Please provide the path as per ASP.NET path conventions.
/// You can use relative or absolute path.
///
/// Special Cases:
/// '/' means 'wwwroot' directory.
/// '. /' ( without the space after .) is the directory where the FCExporter.aspx file resides.
///
/// Absolute Path :
///
/// can be like this : "C:\\myFolders\\myImages"
/// ( Please never use single backslash as that will stop execution of the code instantly)
/// or "C:/myFolders/myImages"
///
/// You may have a // or \ at end : "C:\\myFolders\\myImages\\" or "C:/myFolders/myImages/"
///
/// You can also have mixed slashes : "C:\\myFolders/myImages"
///
///
/// </summary>
/// directory where the FCExporter.aspx file resides</span>
private const string SAVE_PATH = "./";
<span class="text">
<strong>/* Place your folder path here.*/</strong></span>
<span class="codeComment">/// <summary>
/// IMPORTANT: This constant HTTP_URL stores the HTTP reference to
/// the folder where exported charts will be saved.
/// Please enter the HTTP representation of that folder
/// in this constant e.g., http://www.yourdomain.com/images/
/// </summary>
</span><span class="codeInline">private const string HTTP_URL = "http://www.yourdomain.com/images/";</span>
<span class="codeComment"> <span class="text"><strong>/* Define your HTTP Mapping URL here. */</strong></span>
/// <summary>
/// OVERWRITEFILE sets whether the export handler will overwrite an existing file
/// the newly created exported file. If it is set to false the export handler will
/// not overwrite. In this case, if INTELLIGENTFILENAMING is set to true the handler
/// will add a suffix to the new file name. The suffix is a randomly generated GUID.
/// Additionally, you add a timestamp or a random number as additional suffix.</span>
<span class="codeComment">/// </summary></span>
private bool OVERWRITEFILE = false;
private bool INTELLIGENTFILENAMING = true;
private string FILESUFFIXFORMAT = "TIMESTAMP";<span class="codeComment">// value can be either 'TIMESTAMP' or 'RANDOM'</span>
<strong>/* Define file over-write, auto-naming and naming suffix configuration here. */</strong></pre>
<p class="codeComment"></p>
</td>
</tr>
<tr>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top" class="lightBlueTr"><strong>If J2EE:</strong> </td>
</tr>
<tr>
<td valign="top" class="text"><p>For exporting the chart as image/PDF at server side using JSP, the following library files (can be acquired from <span class="codeInline">FusionCharts Download Pack > ExportHandlers > J2EE</span> folder) are required on your server:</p>
<ol>
<li><span class="codeInline">fcexporter.jar</span> (contains all the dependency classes)</li>
<li><span class="codeInline">fcexporthandler.jar</span> (contains the Export Handler servlet and resources)</li>
<li><span class="codeInline">/classes/fusioncharts_export.properties</span> (configuration file)</li>
</ol>
<p><strong>Setup</strong></p>
<ul>
<li>Step 1: Copy the above mentioned files.
Place the export jars <span class="codeInline">fcexporter.jar </span>and <span class="codeInline">fcexporthandler.jar</span> in <span class="codeInline">WEB-INF/lib </span>and <span class="codeInline">fusioncharts_export.properties</span> in <span class="codeInline">WEB-INF/classes</span> folder.
<p class="highlightBlock"> FusionCharts Exporter has been tested with JDK 1.5. </p>
<p>Note that the FusionCharts Exporter jars for jdk1.4.2 is also available in ExportHandlers/JDK1.4 folder</span></p>
</li>
<li>Step 2: Edit <span class="codeInline">web.xml</span> and add the following servlet mapping in your application's <span class="codeInline">web.xml</span> :
<p><pre class="code_container prettyprint"><servlet>
<display-name>FCExporter</display-name>
<servlet-name>FCExporter</servlet-name>
<servlet-class>com.fusioncharts.exporter.servlet.FCExporter</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FCExporter</servlet-name>
<url-pattern>/JSP/ExportExample/FCExporter</url-pattern>
</servlet-mapping></pre></p>
</li>
<li>Modify the URL-pattern as per your application needs.</li>
<li> Step3:
Specify the xml attribute <span class="codeInline">exportHandler='FCExporter' </span>assuming that the jsp rendering the chart is present in <span class="codeInline">/JSP/ExportExample</span> folder</li>
<li>Step4:
Configuration of save folder for server-side save:
Open <span class="codeInline">fusioncharts_export.properties</span> file present in the <span class="codeInline">Classes</span> directory and make changes in the following values there:</li>
<p class="highlightBlock">Make sure that the folder path that you specify
has write permissions to it.</p>
</ul>
</td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><span class="codeComment">#Please specify the path to a folder with write permissions relative to web application root</span>
SAVEPATH=./images/
<span class="codeComment">#This constant HTTP_URL stores the HTTP reference to
#the folder where exported charts will be saved.
#Please enter the HTTP representation of that folder
#in this constant e.g., http://www.yourdomain.com/images/</span>
HTTP_URL=http://www.yourdomain.com/images/
<span class="codeComment">#OVERWRITEFILE sets whether the export handler will overwrite an existing file
#the newly created exported file. If it is set to false the export handler will
#not overwrite. In this case if INTELLIGENTFILENAMING is set to true the handler
#will add a suffix to the new file name. The suffix is a randomly generated UUID.
#Additionally, you can add a timestamp or random number as additional prefix.</span>
OVERWRITEFILE=false
INTELLIGENTFILENAMING=true
FILESUFFIXFORMAT=TIMESTAMP</pre></td>
</tr>
<tr>
<td valign="top" height="23"></td>
</tr>
<tr>
<td valign="top" class="lightBlueTr"><strong>If Ruby on Rails:</strong> </td>
</tr>
<tr>
<td valign="top" class="text"><p> Open <span class="codeInline">lib/fusioncharts/exporter/properties.rb</span> and make changes in the following values there.</p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><span class="codeComment"> #IMPORTANT: You need to change the location of folder where
# the exported chart images/PDFs will be saved on your
# server. Please specify the path to a folder with
# write permissions in the constant SAVE_PATH below.
# This path is relative to the web application root</span>
@@SAVEPATH = "./images/"
<span class="codeComment">#Used to show as message in SWF
#This constant HTTP_URL stores the HTTP reference to
#the folder where exported charts will be saved.
#Please enter the HTTP representation of that folder
#in this constant e.g., http://www.yourdomain.com/images/</span>
@@HTTP_URL = "http://www.yourdomain.com/images/"
<span class="codeComment">=begin
---------------------------- Export Settings -------------------------------
OVERWRITEFILE sets whether the export handler will overwrite an existing file
the newly created exported file. If it is set to false the export handler will
not overwrite. In this case if INTELLIGENTFILENAMING is set to true the handler
will add a suffix to the new file name. The suffix is a randomly generated UUID.
Additionally, you add a timestamp or random number as additional suffix.
=end</span>
#Values allowed are true or false
@@OVERWRITEFILE = false
#Values allowed are true or false
@@INTELLIGENTFILENAMING = true
#Values allowed are "TIMESTAMP" or "RANDOM"
@@FILESUFFIXFORMAT = "TIMESTAMP"</pre></td>
</tr>
<tr>
<td valign="top" height="23"></td>
</tr>
<tr>
<td valign="top" class="header">Configuring the data </td>
</tr>
<tr>
<td valign="top" class="text"><p>As previously mentioned, we just need to do the following changes to XML:</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='0' exportAction='save' exportHandler='http://www.yoursite.com/ExportHandlers/index.php'</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>This instructs the chart to save the exported image on server. </p>
<p>Note that we have not provided a file name here. If not provided, it takes the default value of "FusionCharts". You can, however, specify your file name using <span class="codeInline">exportFileName</span> attribute of <span class="codeInline"><chart></span> element. However, since in this case, the server path could already have another file name with the same name, the following conditional logic takes place:</p>
<ul>
<li>If the folder path specified on server does not have a file name that matches this file, the image/PDF is created using this file name.</li>
<li>However, if another file with the same name exists, the over-writing is dependent on whether you have changed the over-write flag (as described above) in your Server-side Export Handler.
<ul>
<li>If you have set it to yes, the export handler blindly over-writes the old file.</li>
<li>If you have set it no, the new name depends on whether you have opted for smart auto-naming.
<ul>
<li>If yes, the new name is decided by combining your specific file name + GUID + time stamp or random value (as chosen by value)</li>
<li>If auto-naming is set to off (when over-write is set to off as well), the Export Handler throws an error, as it does not have any option left. </li>
</ul>
</li>
</ul>
</li>
</ul><br /></td>
</tr>
<tr>
<td valign="top" class="header">Setting up the call back handler </td>
</tr>
<tr>
<td valign="top" class="text"><p>Now that everything else is setup, the only thing left is to define a JavaScript callback function handler. This callback function is invoked when the chart gets a response back from server - in both success and failure cases. </p>
<p>To specify your callback function to chart, you need to specify the function name as <span class="codeInline">exportCallback</span> attribute of <span class="codeInline"><chart></span> element as under: </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 call back 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 server):</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/height of saved image. Else, they contain 0. </li>
<li><span class="codeInline">DOMId</span> - DOM Id of the chart that was successfully exported. </li>
</ul>
<p>Let us quickly see an example code where a callback function has been implemented. In this example, once we receive the confirmation from server, we just show it in a JavaScript alert. </p></td>
</tr>
<tr>
<td valign="top">
<pre class="prettyprint code_container"><html><br /> <body>
<script language="JavaScript" src="../../FusionCharts/FusionCharts.js"></script>
<script type="text/javascript">
//Callback handler method which is invoked after the chart has saved image on server.
function FC_Exported(objRtn){
if (objRtn.statusCode=="1"){
alert("The chart was successfully saved on server. The file can be accessed from " + objRtn.fileName);
}else{
alert("The chart could not be saved on server. There was an error. Description : " + objRtn.statusMessage);
}
}
</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. Make sure registerWithJS is set to 1, else callback cannot happen.
var myChart = new FusionCharts( "../../FusionCharts/Column2D.swf", "myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("SaveData.xml");
myChart.render("chartdiv");
</script>
</body>
</html></pre>
</td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, note how the default <span class="codeInline">FC_Exported</span> method is called once the Server-side export of chart is completed. </p>
<p>When you run this code, you will get the following output. </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../Images/ECServerSave1.jpg" width="583" height="300" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, since we have just one chart in the page, we did not put any if-then block to check the <span class="codeInline">DOMId</span> of the chart. However, if you have multiple charts in a page, you can do use if-then statements (based on DOM Id string match) to take a different course of action when each chart in the page has been saved.</p> </td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Returning images as download|ECServerDownload.html","Configuring export formats|ECServerFormats.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>