INFO-TECH

For enabling export of chart at client-side, we'll need to assemble the following elements: Note:Here, we assume that you have been able to generate the chart for your page.

⇒ The chart itself embedded using Fusion Charts JavaScript class inside FusionCharts.js.
⇒ Fusion Charts Export Component - This is named FCExporter.swf.
⇒ Fusion Charts Export Component JavaScript class - This JavaScript class is inside js file named FusionChartsExportComponent.js.

1. Including java script  class in your page:
 <script type="text/javascript" src="js/FusionCharts.js"></script>
<script type="text/javascript"  src="js/FusionChartsExportComponent.js"></script>

2. create an instance of the export component in your page using the following JavaScript code:

//Initialize Batch Exporter with DOM Id as fcBatchExporter
var myExportComponent = new FusionChartsExportObject('fcBatchExporter', "swf/FCExporter.swf");
//Add the charts to queue. The charts are referred to by their DOM Id.
                    myExportComponent.sourceCharts = ['myChartId1'];
  //Chenge the message  
myExportComponent.componentAttributes.defaultExportFileName = 'Column2D Chart';
 //Render the exporter SWF in our DIV fcexpDiv
                myExportComponent.Render("fcexpDiv");
                myExportComponent.BeginExport();
//Display coverscreen and exporter div
function displayscreen(){
                document.getElementById('cover_screen').style.display='block';
                document.getElementById('fcexpDiv1').style.display='block';
            }


3. Draw the chart and export it:

// apply Cover screen
<div class="cover_screen" style="display:none;" id="cover_screen"></div>
        <div id="fcexpDiv1" class="ExportContainer" align="center">
// Div where the export chart is rendered
              <div id="fcexpDiv"> Area for FusionCharts Export  </div> </div>
       
//Div where the chart is shown
<div id="chart1div" style="z-index:-15000;" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
// Java Script for chart
        <script type="text/javascript">
 var myChart1 = new FusionCharts("swf/Column2D.swf", "myChartId1", "350", "300", "0", "1");
 var data=    "<chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$'                                    
                       useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0'exportDialogColor='e1f5ff' 
                       exportDialogBorderColor='0372ab' exportDialogFontColor='0372ab' 
                      exportDialogPBColor='0372ab' exportEnabled='1' exportAtClient='1'"
      data += "exportHandler='fcBatchExporter'>”           
      data +  =  "<set label='Alex' value='25000'/>" 
     data +   = "<set label='Mark' value='35000'/>"
            data+= "<set label='David' value='42300'/>"
            data+= "<set label='Graham' value='35300'/>"
            data+= "<set label='John' value='31300'/>"
            data+= "</chart>"
            myChart1.addParam("wmode", "opaque");
            myChart1.setDataXML(data);
            myChart1.render("chart1div");
        </script>
        <input type="image" src="image/export.gif" id='one' Click="initiateExport();"/>

Chart with export button

capturing the image

Save image