FusionCharts, JavaScript and saveAsImage() Method |
If you've configured your chart to allow export to images (see section Saving as Image), you can invoke this functionality using JavaScript too, using the saveAsImage() method of each chart. The first step is to set registerWithJS flag of chart as 1, as shown under: |
<div id="chart1div"> |
Next, in your XML data configure the parameters required for chart saving (imageSave, imageSaveURL etc.). Thereafter, you can invoke the saveAsImage() method of the chart object to invoke the chart saving routine. |
<HTML> <HEAD> <TITLE>FusionCharts & JavaScript - Saving Chart Example</TITLE> <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function saveChart(){ //Get chart from its ID var chartToPrint = getChartFromId("chart1Id"); chartToPrint.saveAsImage(); } </SCRIPT> </HEAD> <BODY> <CENTER> <h2>FusionCharts and JavaScript - Basic Example</h2> <div id="chart1div"> FusionCharts </div> <script language="JavaScript"> var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1"); chart1.setDataXML("<chart imageSave='1' imageSaveURL='http://<<Path to your script>>/FusionChartsSave.aspx'><set label='A' value='10' /><set label='B' value='11' /></chart>"); chart1.render("chart1div"); </script> <center><input type='button' value='Save Chart as Image' onClick='javascript:saveChart();'></center> </CENTER> </BODY> </HTML> |
In the above code, we're first creating a Column 3D chart with DOM Id as chart1Id. We also register it with JavaScript. Thereafter, we've created a HTML button, which when clicked invokes the local saveChart() function. This function just gets the reference to the chart using getChartFromId() function and finally invokes the saveAsImage() method on the chart. If you intend to save the chart soon after the chart has loaded, make sure to put the saveAsImage() command in FC_Rendered event; otherwise, the exporting will get invoked before the chart has started rendering, and you'll get a blank image output. |