Highcharts JS: Download all charts of current site with one click

Question

We use Highcharts JS in our Webapp. We also use "highcharts exporting" so that our customers can download a diagram or piechart with just one click.

Now I would like to add the functionality that you can download all diagramms which are display by highcharts with just one click. So that our customer does not have to download each chart individually. is there such a functionality in highcharts already?

How would you output the files? A .zip containing all the PNGs/PDFs? — Mark, Dec 15 '12 at 22:07
Found something that might help a little: http://stackoverflow.com/questions/8802528/how-to-save-an-image-of-the-chart-on-the-server-with-highcharts — Pascal Klein, Jan 14 '13 at 02:48
I'm trying to provide similar functionality and was wonder if you were ever successful. Here is my question http://stackoverflow.com/questions/17413075/interactive-single-chart-highchart-application-make-multiple-chart-files — jeff, Jul 12 '13 at 15:23

score 2 · Answer 1 · answered Dec 16 '12 at 15:51

I can not find an easy way to do this.

The highcharts exporting module is submitting a POST request to the highcharts server (passing in the SVG of the chart) to generate the PDF or PNG.

I tried calling chart.exportChart() in succession but this will not work since the first calls changes document focus and the subsequent calls will not fire. So I think you have two options:

Do it server side. Have your javascript return the SVG (chart.getSVG()) of all the charts and write a server side script that generates the POST requests, zipping up the resulting files and returns them client side.
Stay client side. Get the SVG of the chart objects and manipulate it to embed multiple charts in one SVG document. Then make the request to the highcharts server. This way you could get one PDF document containing multiple charts.

Could you please elaborate on your first approach: Why would the serverside script generate the post request? — Pascal Klein, Dec 17 '12 at 09:59
You essentially need to make multiple POST requests against the highcharts export server. I was unsuccessful doing this clientside in javascript because once you make the first request your page focus changes and your subsequent requests stop firing. — Mark, Dec 17 '12 at 17:56

score 0 · Answer 2 · answered Dec 06 '15 at 21:29

This is how I would do it:

Set up your own export server with the hekp of PhantomJS. (Here's a shortcut for this http://www.highcharts.com/articles/2-news/52-serverside-generated-charts)
Send each chart data through AJAX to the PhantomJS export service.
Combine your exported PNG's to one image with server side script (php or py) or with the help of PhantomJS by rendering all in one page, rasterize and export as one and send back its path via AJAX to the front end.
Receive the image and let users download it :) .

The first two steps are explained i ndetails in a recent tutorial video I created for Packt here: https://www.packtpub.com/web-development/learning-highcharts-video

I hope it helps.

Highcharts JS: Download all charts of current site with one click

2 Answers2