| FusionWidgets, JavaScript and print Method |
You can print the charts generated by FusionWidgets at client side using the print() method of each chart. In this section, we'll show you how to attain this. The first step is to set registerWithJS flag of chart as 1, as shown under: |
<div id="chart1div"> |
Thereafter, you can invoke the print() method of the chart object to print it. |
| <HTML> <HEAD> <TITLE>FusionWidgets & JavaScript - Printing Chart Example</TITLE> <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function printChart(){ //Get chart from its ID var chartToPrint = getChartFromId("chart1Id"); chartToPrint.print(); } </SCRIPT> </HEAD> <BODY> <CENTER> <h2>FusionCharts and JavaScript - Basic Example</h2> <div id="chart1div"> FusionCharts </div> <script language="JavaScript"> var chart1 = new FusionCharts("../../FusionCharts/Funnel.swf", "chart1Id", "400", "300", "0", "1"); chart1.setDataXML("<chart><set label='A' value='10' /><set label='B' value='11' /></chart>"); chart1.render("chart1div"); </script> <center><input type='button' value='Print Chart' onClick='javascript:printChart();'></center> </CENTER> </BODY> </HTML> |
In the above code, we're first creating a Funnel 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 printChart() function. This function just gets the reference to the chart using getChartFromId() function and finally invokes the print() method on the chart. If you intend to print the chart soon after the chart has loaded, make sure to put the print() command in FC_Rendered event; otherwise, the printing will get invoked before the chart has started rendering, and you'll get a blank print output. The entire thing happens at client side, without any page refreshes. |