Managed Printing in Mozilla browsers |
FusionCharts XT provides advanced print management using JavaScript for Mozilla/WebKit/Gecko based browsers like Firefox, Safari etc. Even though displayed properly on screen, printed output had been not proper in these browsers. So long! FusionCharts JavaScript class offers a separate Print Manger class to take care of this. The implementation of Print Manager is fairly simple. You will just need to add a single line of code in JavaScript which enables Print Manager for all charts present in a web page. Once enabled, all the charts present in a page are prepared to print correctly. Once the charts are ready, which can be tracked by listening to an event raised by the Print Manager, you can use browser's File → Print menu, JavaScript's native window.print() function or Print Manager's advanced function - managedPrint(). In any of these actions, the charts will come-up properly in the print media. The Print Manager internally does the following to achieve this:
Note: Print Manager works only in browsers that supports canvas object. Let us now go through a sample code which will provide you first-hand experience of what has been said above. Code examples discussed in this section are present in Download Package > Code > JavaScript > Basics folder. |
<html> <head> <title>FusionCharts Print Manager</title> <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> </head> <body> <div id="chartContainer">FusionCharts XT will load here!</div> <script type="text/javascript"><!-- FusionCharts.printManager.enabled(true); var myChart = new FusionCharts( "FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" ); myChart.setXMLUrl("Data.xml"); myChart.render("chartContainer"); FusionCharts.addEventListener ( FusionChartsEvents.PrintReadyStateChange , function (identifier, parameter) { if(parameter.ready){ alert("Chart is now ready for printing."); document.getElementById('printButton').disabled = false; } }); // --></script> <input type="button" onclick="FusionCharts.printManager.managedPrint()" value="Managed Print" disabled="disabled" id="printButton" > </body> </html> See it live! |
In the above code:
Note that PrintReadyStateChange event is a global event. Thus, this event cannot be listened from individual chart instance. Hence, only FusionCharts static class can listen to this event.
Now, you can try printing from File → Print menu or use a button or function that calls window.print() function. You can also click "Managed Print" button to print the chart. |
Advanced Functions |
Print Manger class provides two more functions that helps in advanced configurations. The functions are described below:
To see implementation code snippets using these advanced functions go through API Reference > Functions page. Please note that Print Manager takes a bit of time to prepare all the charts ready for printing. It depends on the size of the chart as well as the processing power of the Client-side computer. If print action is invoked while the Print Manager is not yet ready with the image, the chart does not show up in the print media. However, if the function managedPrint() is called, it automatically waits for the chart to get ready before it proceeds to call the window.print() function. |