Initiating from JavaScript

In this section, we will discuss how we can export maps using JavaScript. First we will start with the simplest of examples and then move on to the harder ones.

Important:
The JavaScript method will only work when the map has been fully rendered in the client browser. You can use the FC_Rendered method to track the same.

Due to Adobe Flash Player's default security system, the JavaScript method does not work from local file system. It only works when hosted on a server (localhost or remote) unless configured otherwise.

Simple JavaScript-Triggered Export

In this example, you will first need to create a map on your page. Then use an HTML button to initiate the export process on that map.

To achieve this, we will have to do the following:

  1. Create an HTML page with a map in it.
  2. Setup the XML of the map to enable exporting.
  3. Create a JavaScript function to initiate exporting of the map.
  4. Insert an HTML button to call the above JavaScript.

Create an HTML page with a map in it:

The process involves including the FusionCharts.js file within the <head> section of your newly created HTML page. Then follow the standard process to load a map using the FusionCharts JavaScript object. (You may refer to Creating your first map article under "Creating your First Map " section.)

The JavaScript code to create a map will appear like below:

var myMap = new FusionCharts('Maps/FCMap_World.swf', 'myMap', '900', '300', '0', '1');
myMap.setXMLUrl('Data.xml');
myMap.render('mapContainerDiv');

Setup the XML of the map to enable exporting

For this example, we will export at a PHP server, with a default action of "Download". For more information on server-side exporting, refer to our Server-side exporting section. The XML to do so will be like below (the attributes pertinent to exporting is marked in bold) and the file will be saved as "Data.xml" beside your HTML file:

<map borderColor='005879' fillColor='D7F4FF' numberSuffix=' Mill.' includeValueInLabels='0' labelSepChar=': ' baseFontSize='9'  
exportEnabled='1' exportAtClient='0' exportAction='download' 
exportHandler='http://www.domain.com/ExportHandlers/FCExporter.php' exportFileName='MyFileName'>
	<colorRange>
		<color minValue='0' maxValue='500' displayValue='Sparsely Populated' color='A7E9BC' />
		<color minValue='500' maxValue='1000' displayValue='Well Populated' color='FFFFCC' />
		<color minValue='1000' maxValue='5000' displayValue='Densely Populated' color='FF9377' />
	</colorRange>
	<data>
		<entity id='NA' value='515' />
		<entity id='SA' value='373' />
		<entity id='AS' value='3875' />
		<entity id='EU' value='727' />
		<entity id='AF' value='885' />
		<entity id='AU' value='32' />
	</data>		
</map>

The exporting procedure to export at client-side is almost similar, except that additional steps are required to setup the client-side Export Component. For more information, refer to the Client-side exporting section.

Create a JavaScript function to initiate exporting of the map

The JavaScript function uses the simple function provided within FusionCharts.js to locate the map SWF from its id. Then it calls the exportChart() function on the map. Note that we have first verified whether the map has fully rendered by calling the new hasRendered() function of the map.

<script type="text/javascript">
    function ExportMyChart() {
         var mapObject = FusionCharts('myMap');
         if( mapObject.hasRendered() ) mapObject.exportChart(); 
   }
</script>

Insert an HTML button to call the above JavaScript

Now that we have all our codes ready, we assemble them within one HTML file and see the results.

The Final code will look like this:

<html>
<head>
<title>My Map</title>
	<script type="text/javascript" src="Maps/FusionCharts.js"></script>
	<script type="text/javascript">
        	function ExportMyChart() {
            		var mapObject = FusionCharts('myMap');
            		if( mapObject.hasRendered() ) mapObject.exportChart();
    		}
	</script>
</head>
<body>
	<div id="mapContainerDiv">FusionMaps XT loaded here...</div>
	<script type="text/javascript">
		var myMap = new FusionCharts('Maps/FCMap_World.swf', 'myMap', '900', '300', '0' );
		myMap.setXMLUrl('Data.xml');
		myMap.render('mapContainerDiv');
	</script>
	<input type="button" value="Export My Map" onclick="ExportMyChart()" />
</body>
</html>

After this, we open this file in a browser and click on the "Export My Map " button and the map will start exporting all by itself! In case you face any error, refer to the "Debug Mode" section under "JavaScript Reference"

Providing Export Parameters (Overriding XML Export Attributes) using JavaScript:

FusionMaps XT allows you to provide values for XML attributes via JavaScript as well. The exportChart() function also takes in a parameter that accepts these XML attributes in a JSON object notation.

You cannot override all XML attributes. The list of export-related XML attributes that can be overridden, can be found under the Export Attributes section under JavaScript Reference. You can provide export attributes in {key1: 'value1', key2: 'value2', ...} format as shown below:

<script type="text/javascript">
  function ExportMyChart() {         
    var mapObject = FusionCharts('myMap');         
    mapObject.exportChart( { exportAtClient: '1',  exportFormat: 'PDF' } );    
  } 
</script>