Pure JavaScript charts also provide support for exporting to JPEG, PNG, PDF, SVG formats. Let's see how we can implement this feature.

Similar to FusionWidgets XT Flash-based charts, the JavaScript chart's export feature can be enabled by specifying exportEnabled="1" of the <chart> XML element or exportEnabled:"1" in JSON.

The following sample data enables the exporting feature of FusionWidgets XT (both Flash and JavaScript charts alike) using the default settings.

<chart exportEnabled='1' caption="Top 5 Sales Person" numberPrefix="$" isSliced="1" showBorder="0" bgColor="FFFFFF,FFFFFF"> 
    <set label='Alex' value='25000' /> 
    <set label='Mark' value='35000' /> 
    <set label='David' value='42300' /> 
    <set label='Graham' value='65300' /> 
    <set label='John' value='91300' /> 
</chart>

{
  "chart":{
    "exportenabled":"1",
    "caption":"Top 5 Sales Person",
    "isSliced":"1",
    "showBorder":"1",
    "numberprefix":"$",
    "bgColor":"FFFFFF,FFFFFF"
  },
  "data":[{
      "label":"Alex",
      "value":"25000"
    },
  "data":[{
      "label":"Mark",
      "value":"35000"
    },
    {
      "label":"David",
      "value":"42300"
    },
    {
      "label":"Graham",
      "value":"65300"
    },
    {
      "label":"John",
      "value":"91300"
    }
  ]
}

Once the exportEnabled attribute is set, a "Download" button will be displayed on the top right corner of your chart. This button, when clicked, will provide you a list of various export file formats thereby enabling you to download an image or PDF version of the chart.

The following image shows how the list will appear when the above data is used in a Pyramid chart.

See it live!

During export of the pure JavaScript charts, the chart data is sent to external servers for processing and converting to image. User must have an active internet connection for this feature to work. In case you want to process the exported data on your own server, you may setup the chart to send the data to your own server. The details of how to do the same has been explained later on this page.

There is a possibility that the exported image/PDF appears slightly visually different with respect to colors and effects from your original chart that is being exported.

FusionWidgets XT Flash charts do not have a button to export the chart. Instead, upon right-clicking the Flash charts, users can select exporting options using a context-menu.

The export features of the JavaScript charts presently have limited customizability when compared to the Flash FusionWidgets XT. This is primarily owing to certain limitations of the present JavaScript export feature.

You can hide the "Download" button on the chart using the exportShowMenuItem="0". This will hide the export button. But, you will still be able to export the chart using its JavaScript API similar to FusionWidgets XT Flash charts.

You may want to set up the export service of the JavaScript charts on your own server. For this, you require PHP and Java running in your server. A JavaScript chart sends the export data to a PHP file. This PHP file (present as index.php in the Download Pack > ExportHandlers > JavaScript folder) relays the data to a third party Java library named Batik, which in turn, converts the exported data into the required export format.

Perform the following steps to set up your server:

• Get index.php from the Download Pack > ExportHandlers > JavaScript folder and upload the file to a location on your web server.
• Create a directory called temp in the same directory as index.php. If you have Linux or Unix servers, chmod this new directory to 777.
• Download the Batik library (as a compressed file) from here.
• Extract the Batik library in a temporary location and upload batik-rasterizer.jar and the entire lib directory to a location on your web server.
• Edit index.php and set the path to batik-rasterier.jar in the options section provided at the top of the index.php file as shown below:
  

  // Options
  define ('BATIK_PATH', 'batik-rasterizer.jar');

• Set the path to the index.php in the html5ExportHandler attribute of your chart's XML/JSON data as shown below:
  

  <chart html5ExportHandler='http://myserver.com/exporter/index.php' ...>

For detailed information on setting up the export modules please refer to http://www.highcharts.com/documentation/how-to-use.