Question

Does anyone know of a way to automatically create an SVG chart, and export a JPEG or PNG image version of the Highacarts chart at the same time (preferably on $(document).ready)?

I want to display the SVG version to screen and put the PNG or JPEG in a hidden DIV for print.

Thanks in advance.

Answer 1

My solution automatically creates an equivalent image of the SVG of every chart in my page/dashboard (in its starting state), without the need for a user to export them individually. This enables all of the Highcharts graphs and charts on a page to print correctly, with no user interaction needed.

The reason that pages with Highcharts charts do not print correctly is because the charts are made using SVG and the current versions of the common browsers don’t support printing SVG (written Jan 2012). My solution will therefore be irrelevant when they do.

My solution gets around this current browser limitation:

Firstly, I amended the Highcharts exporting.js file in order to automatically trigger the routine which is usually triggered when the user manually chooses to export an image.

Next, it’s important to note that when a user manually chooses to export an image their request is sent as a header request of the overall page.

Therefore, my amendment to the export function doesn’t POST the highcharts data directly, but first POSTS the SVG and other necessary data that Highcharts needs to DIVs in my page/dashboard.

Each DIV that receives the request includes a php file whose routine json_encodes the POST data it receives from the export routine and then POSTS it off to Highcharts export server as its own header.

So, because the POST is triggered from that DIV, the result is sent back directly to that DIV, as a header of the PHP script in that DIV.

Once it was sent back to that DIV I saved the image, made the DIV print only via CSS and the only HTML output of that DIV was the img tag with the image file path.

I triggered the all of the divs to be populated with their images using $(document).ready.

One note to anyone else trying this is that the config of my dev and live server differed, meaning I had to stripslashes the JSON on one of them before sending it to Highcharts.

The following posts will point anyone else trying to do this in the right direction.

Saving Google Chart image to file using PHP

Posting to a DIV:

Post form in JQuery and populate DIV – broken in IE