|
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/Code/ExportChartSamples/ClientSide/ |
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>FusionCharts XT- Client-side Export using JavaScript callback</title>
<link href="../../assets/ui/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" LANGUAGE="Javascript" SRC="../../../Charts/FusionCharts.js"></script>
<script type="text/javascript" language="JavaScript" src="../../../Charts/FusionChartsExportComponent.js"></script>
<script type="text/javascript" LANGUAGE="Javascript" SRC="../../assets/ui/js/jquery.min.js"></script>
<script type="text/javascript" LANGUAGE="Javascript" SRC="../../assets/ui/js/lib.js"></script>
<!--[if IE 6]>
<script src="../../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
/* select the element name, css selector, background etc */
DD_belatedPNG.fix('img');
/* string argument can be any CSS selector */
</script>
<![endif]-->
<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");
}
//This event is raised when the chart has been successfully saved on user's disk (post click of button)
function myFN(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);
}
}
</script>
<style type="text/css">
h2.headline {
font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 0;
margin: 25px 0 25px 0;
color: #7d7c8b;
text-align: center;
}
p.small {
font: normal 68.75%/150% Verdana, Geneva, sans-serif;
color: #919191;
padding: 0;
margin: 0 auto;
width: 664px;
text-align: center;
}
</style>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- header -->
<div id="header">
<div class="logo">
<a class="imagelink" href="http://www.fusioncharts.com/" target="_blank">
<img src="../../assets/ui/images/fusionchartsv3.2-logo.png" width="131" height="75" alt="FusionCharts XT logo" />
</a>
</div>
<h1 class="brand-name">FusionCharts XT</h1>
<h1 class="logo-text">Client-side Export with JavaScript callback</h1>
</div>
<!-- content area -->
<div class="content-area">
<div id="content-area-inner-main">
<p class="text" align="center" >This sample shows how to perform a Client-side export with JavaScript callback.<br/> Right-Click on the chart and select any one of the "Save as..." option. Once the capturing of the chart is completed an alert box will appear. Then click "Save" to save the chart image. After the exporting is completed another alert box will appear. These alert boxes with messages are results of JavaScript callback. </p>
<div id="messageBox" style="margin-left:100px; margin-right:100px; display:none;"></div>
<p> </p>
<div class="clear"></div>
<div class="gen-chart-render">
<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 dataString ='<chart yAxisName="Sales Figure" caption="Top 5 Sales Person" numberPrefix="$" useRoundEdges="1" bgColor="FFFFFF,FFFFFF" showBorder="0" exportEnabled="1" exportAtClient="1" exportHandler="fcExporter1" exportFileName="MyChart" exportCallBack="myFN">\n\
<set label="Alex" value="25000" />\n\
<set label="Mark" value="35000" />\n\
<set label="David" value="42300" />\n\
<set label="Graham" value="35300" />\n\
<set label="John" value="31300" />\n\
</chart>';
//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("../../../Charts/Column2D.swf", "myChartId", "400", "300", "0", "1");
myChart.setXMLData( dataString );
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", "../../../Charts/FCExporter.swf");
//Render the exporter SWF in our DIV fcexpDiv
myExportComponent.Render("fcexpDiv");
</script>
</div>
<div class="clear"></div>
<p> </p>
<p class="small"> </p>
<p> </p>
<div class="underline-dull"></div>
<div>
<p class="highlightBlock">The above sample showcases client-side export with JavaScript callback. Click <a href="../../../Contents/index.html?exporting-image/client-side/ECClientCallback.html" target="_blank">here</a> to know more on how the code of this example works.</p>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<ul>
<li><a href="../index.html"><span>« Back to list of examples</span></a></li>
<li class="pipe">|</li>
<li><a href="../../NoChart.html"><span>Unable to see the chart above?</span></a></li>
</ul>
</div>
</div>
<script type="text/javascript"><!--//
$(document).ready ( function() {
if(isJSRenderer(myChart))
{
$("#initExportBtn").hide();
$("#fcexpDiv").hide();
}
showConditionalMessage( "Your browser does not seem to have Flash Player support. JavaScript charts are rendered instead.<br/><br/><strong>Note :</strong><br />JavaScript charts do not support client-side export or client-side batch export. However, you can click the export button at the top-right corner of the JavaScript chart to perform a server side export and get the downloadable exported file. In this case, callback function will not get executed.", isJSRenderer(myChart) );
});
// -->
</script>
</body>
</html>