Exporting charts and maps as an image or PDF

IMPORTANT NOTICE! The information provided in this article is deprecated. The export scripts, described in this tutorial were replaced by a better alternative since version 3.14. Please refer to this tutorial for further information.

Since V 3.2.0 of our charts and V 3.7.0 of maps you can give your charts a way to escape out your browser and be a part of your file system. We added a possibility to export charts as an image. This works on all modern browsers except IE9 (works fine with IE10). You are only two steps away from this feature in it’s raw nature*.

Saving chart as a PNG, JPG or SVG

Simply add the following JavaScript files (located in amcharts/exporting folder) to your document:

<script src="amcharts/exporting/amexport.js" type="text/javascript"></script>
<script src="amcharts/exporting/canvg.js" type="text/javascript"></script>
<script src="amcharts/exporting/rgbcolor.js" type="text/javascript"></script>
<script src="amcharts/exporting/filesaver.js" type="text/javascript"></script>

Yes, quite a few, but if you are worried about the number of requests to your server and file size, you can minify these files and compile them into one file. We haven’t done this, as in different scenarios you might not need all the files or two more files might be required. You can simply use Google’s closure compiler (or any other tool) to minify and compile all the files into one piece.

Next, add the following line before you call the write method to initiate your chart:

chart.amExport = {};

Or, if you use JSON for your chart’s config, add amExport:{} item to you config object.

Now, id you  open your chart page with your browser (note, you should do it from your web server, not directly from hard drive), you should see download icon on bottom-right corner of your chart. If you click the icon, your browser should offer to save amChart.png image.

You can easily adjust position, colors of the download image, also add two more possibilities – save chart as JPG or SVG. Saving to SVG has some issues which are not yet solved – it will offer to save separate SVG for the chart and legend (if the chart has it) and in case you do it with Stock chart, each panel and each legend will be saved in a separate SVG. Below is an example of amExport with all properties you can modify and all three file formats added:

amExport = {
	top		: 0,
	right		: 0,
	exportJPG	: true,
	exportPNG	: true,
	exportSVG	: true
}

// Advanced configuration
amExport.userCFG = {
	menuTop		: 'auto',
	menuLeft	: 'auto',
	menuRight	: '0px',
	menuBottom	: '0px',
	menuItems	: [{
		textAlign : 'center',
		icon      : '../amcharts/images/export.png',
		iconTitle : 'Save chart as an image',
		onclick   : function () {},
		items     : [{
			title: 'JPG',
			format: 'jpg'
		}, {
			title: 'PNG',
			format: 'png'
		}, {
			title: 'SVG',
			format: 'svg'
		}]
	}],
	menuItemStyle: {
		backgroundColor		: 'transparent',
		opacity			: 1,
		rollOverBackgroundColor	: '#EFEFEF',
		color			: '#000000',
		rollOverColor		: '#CC0000',
		paddingTop		: '6px',
		paddingRight		: '6px',
		paddingBottom		: '6px',
		paddingLeft		: '6px',
		marginTop		: '0px',
		marginRight		: '0px',
		marginBottom		: '0px',
		marginLeft		: '0px',
		textAlign		: 'left',
		textDecoration		: 'none',
		fontFamily		: 'Arial', // Default: charts default
		fontSize		: '12px', // Default: charts default
	},
	menuItemOutput: {
		backgroundColor		: '#FFFFFF',
		fileName		: 'amCharts',
		format			: 'png',
		output			: 'dataurlnewwindow',
		render			: 'browser',
		dpi			: 90,
		onclick			: function(instance, config, event) {
			event.preventDefault();
			instance.output(config);
		}
	},
	legendPosition: "bottom", //top,left,right
	removeImagery: true
}

In case you don’t need your browser to offer saving the file, you can not to include filesaver.js. In this case the image will be opened in a new window/tab. But be careful – most browsers block popup windows now.

Saving chart as PDF

You can also offer your chart viewers saving the charts as PDF. To do this, you’ll need these two additional js files:

<script src="../amcharts/exporting/jspdf.js" type="text/javascript"></script>
<script src="../amcharts/exporting/jspdf.plugin.addimage.js" type="text/javascript"></script>

And then add the PDF format to menuItems array:

menuItems: [{
    textAlign: 'center',
    icon: '../amcharts/images/export.png',
    iconTitle: 'Save chart as an image',
    onclick: function () {},
    items: [{
        title: 'JPG',
        format: 'jpg'
    }, {
        title: 'PNG',
        format: 'png'
    }, {
        title: 'SVG',
        format: 'svg'
    }, {
        title: 'PDF',
        format: 'pdf'
    }]
}]

That’s it – the export to PDF option will appear in the drop-down menu when you’ll hover the export icon.

If you need to change the orientation of the PDF paper you need to overwrite the "click" handler to pass the argument to the PDF instance:

{
    title: 'PDF',
    format: 'jpg',
    output: 'datastring',
    onclick: function(instance, config, event) {
        instance.output(config,function(datastring) {
            data   = instance.canvas.toDataURL('image/jpeg'),
            width  = (instance.canvas.width * 25.4) / 300, // DPI
            height = (instance.canvas.height * 25.4) / 300; // DPI

            var pdf = new jsPDF('landscape');
            pdf.addImage(data, 'JPEG', 0, 0, width, height);
            pdf.save("filename.pdf");
        });
    }
}

Exporting the charts from outside

In case you don’t want the export button to be visible and need to trigger exporting from outside, you should simply pass the empty menuItems array to the config:

menuItems: []

And to trigger the export from outside, call

chart.AmExport.output({format:"jpg"}[,<callback function>]);

Where JPG might be replaced with other supported formats.

And here is example with exporting function implemented.

This is it. We’d like to thank all the guys who created all the additional scripts we use here – you did a great job!