Managed Printing in Mozilla browsers

Managed Printing is required only for Flash maps

FusionMaps XT provides advanced print management for Flash maps 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 just need to add a single line of code in JavaScript which enables Print Manager for all maps present in a web page. Once enabled, all the maps present in a page are prepared to print correctly. Once the maps 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 maps will come-up properly in the print media.

The Print Manager internally does the following to achieve this:

  • Gathers all the image data of the present state of the map once a map is rendered
  • Converts the image data into an image using the canvas HTML object
  • Hides the canvas image below the map
  • Creates a parallel CSS based print media layout » using @media printwhen print is invoked
  • Hides the Flash based map in the print media layout and displays the canvas image
  • Sends this layout with the canvas image to the printer for print

Note: Print Manager works only in browsers that supports canvas object.

Let's now go through a sample code which will provide you with first-hand experience of what has been said above.

Please note that the Print Manager captures the initial view of the map when first loaded. Hence, the run-time changes made in the interactive maps do not get reflected on the printed image. Additionally, changes made to the maps using the setChartAttribute function do not get reflected on the printed image. 

<html>
  <head> 	
    <title>FusionCharts Print Manager</title> 	
    <script type="text/javascript" src="Maps/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	
      FusionCharts.printManager.enabled(true);

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0", );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
					
      FusionCharts.addEventListener ( 
          FusionChartsEvents.PrintReadyStateChange , 
          function (identifier, parameter) {
            if(parameter.ready){ 
               alert("Map 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>

In the above code:

  • We first enable FusionCharts Print Manager using FusionCharts.printManager.enabled(true)
  • Next, we create a world map. We add a button which on click will call the managedPrint()function of FusionCharts.printManager class
  • Thereafter, we add a listener for the global event PrintReadyStateChange to the global object FusionCharts

Note that the PrintReadyStateChange event is a global event. Thus, this event cannot be listened from individual map instance. Hence, only FusionCharts static class can listen to this event.

  • The parameters event argument contains a property ready. This returns true when the Print Manager is ready to print all maps in a page
  • Hence, in this event we show an alert and also enable the button, which was disabled prior to this.

Now, if you try printing from File → Print menu or using a button or function that call window.print()function. You can also click the "Managed Print" button to print the map.

Advanced Functions

The Print Manger class provides two more functions that helps in advanced configurations. The functions are described below:

  1. isReady(): This function returns true or false based on the status of Print Manger. When the print manager is completely ready with all the equivalent canvas images of all the maps present in a page, it returns true.
  2. configure(): This function helps in configuring the Print Manager. It takes an Object as parameter. The object can have the following properties:
    • enabled : This is a Boolean property where you can explicitly define here whether to enable managed printing feature or not
    • invokeCSS: This is a Boolean property which sets whether CSS based print media layout should be created for managed print or not.
    • message: This property takes a string as message. While the print manager is still not ready with the converted images of the maps, this text message is placed instead of the map images. The default value is "Map is being prepared for print.".

    Note that this function should be called before calling FusionCharts.printManager.enabled( true );

To see implementation code snippets using these advanced functions, please go through API Reference > Functions page.

Please note that the Print Manager takes a bit of time to prepare all the maps ready for printing. It depends on the size of the map as well as the processing power of the client side computer. If the print action is invoked while the Print Manager is not yet ready with the image, the map does not show up in the print media. However, if the function, managedPrint(), is called, it automatically waits for the all the maps to get ready before it proceeds to call the window.print() function.
Hence, it is recommended to call managedPrint() function instead of the other actions.