Pure JavaScript charts also provides support for exporting to JPEG, PNG, PDF, SVG formats. Lets see how we can implement this feature.

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

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

<chart exportEnabled='1' caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales' numberPrefix='$' > 
    <set label='Week 1' value='14400' /> 
    <set label='Week 2' value='19600' /> 
    <set label='Week 3' value='24000' /> 
    <set label='Week 4' value='15700' /> 
</chart>

{
  "chart":{
    "exportenabled":"1",
    "caption":"Weekly Sales Summary",
    "xaxisname":"Week",
    "yaxisname":"Sales",
    "numberprefix":"$"
  },
  "data":[{
      "label":"Week 1",
      "value":"14400"
    },
    {
      "label":"Week 2",
      "value":"19600"
    },
    {
      "label":"Week 3",
      "value":"24000"
    },
    {
      "label":"Week 4",
      "value":"15700"
    }
  ]
}

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 would appear when the above data is used in a column 2D chart.

See it live!

During export of the pure JavaScript based 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 an external server, you may setup the chart to send the data 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.

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

The export features of the JavaScript based charts presently have limited customizability when compared to the Flash based FusionCharts. 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 would still be able to export the chart using it's JavaScript API similar to FusionCharts Flash based charts. There are other settings that you can configure using _overrideJSChartConfiguration function provided by the chart. This function takes an Object as parameter. You can pass the following export settings through this function:

• buttons : Configuration options for the buttons associated with the exporting module.   For more information please read High Charts Options Reference (online)
• enabled : Whether to enable the exporting module. Defaults to true
• filename : The filename, without extension, to use for the exported chart
• type : Default MIME type for exporting file format. Possible values are image/png, image/jpeg, application/pdf and image/svg+xml. Defaults value is image/png
• url : The URL for the server module converting the SVG string to an image format. By default, this points to Highcharts Software's free web service which is http://export.highcharts.com
• width : The pixel width of the exported file. Defaults value is 800.

Please go through the High Charts Options Reference (online) for detailed information on each of the above settings.

The following code shows how you can configure the settings:

// Check whether it is an js chart or not
if( typeof chartObj1._overrideJSChartConfiguration  === 'function'){
  // pass exporting configuration module 
  chartObj1._overrideJSChartConfiguration({
    exporting:{
         type: 'application/pdf', 
         filename : 'mychart'
     }
  });
}

In the above code:

• we are having a chart with reference stored in chartObj1
• We call _overrideJSChartConfiguration and pass type and filename settings as properties of exporting object
• The exporting object is passed as a property of the object which is passed as a parameter of _overrideJSChartConfiguration function

If you want to set up the export service on your own server, download index.php provided by Highcharts download pack. This file helps you bypass export data to the export modules ( which are a set of Java runtime and Java library files ). You need to download and setup batik-rasterizer.jar and the entire lib directory to a location on your web server.

Additionally, and most importantly, you need to set the path of the index.php as the export handler through the chart's configuration. The following code shows how to set this url using _overrideJSChartConfiguration function:

// Check whether it is an javascript chart or not
if( typeof chartObj1._overrideJSChartConfiguration  === 'function'){
  // pass exporting configuration module 
  chartObj1._overrideJSChartConfiguration({
    exporting:{
         url: '../export/JSChartExport/index.php   //path of HC exporter
     }
  });
}

Checklist while you setup:

1. Make sure that PHP and Java is installed on your server
2. Upload the index.php file to your server
3. In your FTP program, create directory called temp in the same directory as index.php and chmod this new directory to 777 (Linux/Unix servers only)
4. Download Batik from http://xmlgraphics.apache.org/batik/#download. Find the binary distribution for your version of JRE 5
5. Upload batik-rasterizer.jar and the entire lib directory to a location on your web server
6. In the options in the top of the index.php file, set the path to batik-rasterier.jar
7. In your _overrideJSChartConfiguration, set the exporting.url option to match the index.php file location

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