How to save an image of the chart on the server with highcharts?

Question

With highcharts, you have a built-in button to download the current chart (example: http://www.highcharts.com/demo/, this button: ). You can save it as PNG, JPEG, PDF or SVG.

What I'd like to do is to create a link that saves the image on the server, instead of downloading it. How could I do that ?

I suppose that I have to modify the exportChart function in the exporting.src.js file. It looks like this (but I don't know javascript enough to do that) :

exportChart: function (options, chartOptions) {
        var form,
            chart = this,
            svg = chart.getSVG(chartOptions);

        // merge the options
        options = merge(chart.options.exporting, options);

        // create the form
        form = createElement('form', {
            method: 'post',
            action: options.url
        }, {
            display: NONE
        }, doc.body);

        // add the values
        each(['filename', 'type', 'width', 'svg'], function (name) {
            createElement('input', {
                type: HIDDEN,
                name: name,
                value: {
                    filename: options.filename || 'chart',
                    type: options.type,
                    width: options.width,
                    svg: svg
                }[name]
            }, null, form);
        });

        // submit
        form.submit();

        // clean up
        discardElement(form);
    },

gakhov · Answer 1 · 2012-12-06T10:59:47.763

It could be done really easy with PhantomJS. You can render Highchart chart and save it to SVG, PNG, JPEG or PDF. The example below renders a demo Highcharts diagram to SVG and PDF at the same time:

var system = require('system');
var page = require('webpage').create();
var fs = require('fs');

// load JS libraries
page.injectJs("js/jquery.min.js");
page.injectJs("js/highcharts/highcharts.js");
page.injectJs("js/highcharts/exporting.js");

// chart demo
var args = {
    width: 600,
    height: 500
};

var svg = page.evaluate(function(opt){
    $('body').prepend('<div id="container"></div>');

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            width: opt.width,
            height: opt.height
        },
        exporting: {
            enabled: false
        },
        title: {
            text: 'Combination chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
        },
        yAxis: {
            title: {
                text: 'Y-values'
            }
        },
        labels: {
            items: [{
                html: 'Total fruit consumption',
                style: {
                    left: '40px',
                    top: '8px',
                    color: 'black'
                }
            }]
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            },
            series: {
                enableMouseTracking: false, 
                shadow: false, 
                animation: false
            }
        },
        series: [{
            type: 'column',
            name: 'Andrii',
            data: [3, 2, 1, 3, 4]
        }, {
            type: 'column',
            name: 'Fabian',
            data: [2, 3, 5, 7, 6]
        }, {
            type: 'column',
            name: 'Joan',
            data: [4, 3, 3, 9, 0]
        }, {
            type: 'spline',
            name: 'Average',
            data: [3, 2.67, 3, 6.33, 3.33],
            marker: {
                lineWidth: 2,
                lineColor: 'white'
            }
        }, {
            type: 'pie',
            name: 'Total consumption',
            data: [{
                name: 'Andrii',
                y: 13,
                color: '#4572A7'
            }, {
                name: 'Fabian',
                y: 23,
                color: '#AA4643'
            }, {
                name: 'Joan',
                y: 19,
                color: '#89A54E'
            }],
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });

    return chart.getSVG();
},  args);

// Saving SVG to a file
fs.write("demo.svg", svg);
// Saving diagram as PDF
page.render('demo.pdf');

phantom.exit();

If you save the code as demo.js, then just run bin/phantomjs demo.js to generate demo.svg and demo.pdf

I'm using database, how can I integrate my data in demo.js dynamically? Thanks — Hocine Ben, Nov 05 '14 at 11:02
@HocineBen If you have an HTTP-accessible script that can perform DB queries and return items in json, xml, text etc., then integration is fairly simple ... just call it from `demo.js` https://github.com/ariya/phantomjs/blob/master/examples/phantomwebintro.js — gakhov, Nov 05 '14 at 14:43
@gakhov Thanks, in my case I connect to my DB with php, I get the data with fetchAll(), I don't know how to continue from here. How to pass the data to javascript file wich in turn return a json items? I'm newbie to this. — Hocine Ben, Nov 06 '14 at 13:14
@HocineBen the simples way is just call you PHP script from JS and parse the response: `page.open('http://yourdomain.org/your.php', function (status) { var content = page.content; console.log('Content: ' + content); phantom.exit(); }); ` http://phantomjs.org/api/webpage/property/content.html — gakhov, Nov 06 '14 at 16:12
I am getting and error message when I run your example code with phantomJS (from the command line): `ReferenceError: Can't find variable: $` An empty demo.svg file is being created, any ideas? — Gideon, Nov 18 '14 at 06:07
@Gideon that means the JQuery not loaded. Just check if you have `js/jquery.min.js` — gakhov, Jan 02 '15 at 14:44
can I use phantomjs without any instalation (just like using jquery) ? If it's not, the What I need to do to install it ? Is that need SSH access ? — M Argus Chopin Gyver, Feb 20 '17 at 07:44

score 10 · Answer 2 · answered Mar 11 '12 at 19:08

I just implement this using Nobita's method. I was creating a survey that showed the user's results in a chart, uploaded the image to my server and then sent out an email with the image in it. Here's a few things to note.

I had to make a few updates to the highcharts/exporting-server/index.php file which are the following:

I changed the directory from "temp" to something else and just note that it is in 4 different locations.

I had to change shell_exec() adding "-XX:MaxHeapSize=256m" because it was giving me an error:

$output = shell_exec("java -XX:MaxHeapSize=256m -jar ". BATIK_PATH ." $typeString -d $outfile $width /mypathhere/results/$tempName.svg");

If you want it to download that image you can leave the following alone:

header("Content-Disposition: attachment; filename=$filename.$ext");
header("Content-Type: $type");
echo file_get_contents($outfile);

But, I changed this because I wanted to send back the path to the image, so I deleted the above and replace this with the image path (Note that I'm just using the temporary name.):

echo "/mypathhere/results/$tempName.$ext";

Also, this file is deleting the svg file and also the new file you made. You need to remove the code that deletes the file:

unlink($outfile);

And you can also delete the line before it if you want to keep the svg file.

Make sure to include highcharts/js/modules/exporting.js

Then, in your JS you can do something like the following:

var chart = new Highcharts.Chart();    
var imageURL = '';
var svg = chart.getSVG();
var dataString = 'type=image/jpeg&filename=results&width=500&svg='+svg;
$.ajax({
    type: 'POST',
    data: dataString,
    url: '/src/js/highcharts/exporting-server/',
    async: false,
    success: function(data){
        imageURL = data;
    }
});

The URL you are posting to is the new version of the /exporting-server/index.php. Then, you can use the imageURL however you like.

Really helped me .. And for who didnt get the output , please follow nobita's comment . If you didnt install batik you wont get any output. Or alternately you can use image magic (in that case use `shell_exec("convert /mypathhere/results/$tempName.svg $outfile")` — Serjas, Mar 16 '13 at 11:44

score 4 · Answer 3 · edited Feb 26 '15 at 21:57

I haven't done that before, but I believe you want to play with the index.php file located in the exporting-server folder. By default Highcharts provides (for free) a web service but you can modify that and create your own web service for exporting, or do whatever you want with the chart. Look at these instructions which can be found here Export module:

"If you want to set up this web service on your own server, the index.php file that handles the POST is supplied in the download package inside the /exporting-server directory.

Make sure that PHP and Java is installed on your server.
Upload the index.php file from the /exporting-server directory in the download package to your server.
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).
Download Batik from http://xmlgraphics.apache.org/batik/#download. Find the binary distribution for your version of jre
Upload batik-rasterizer.jar and the entire lib directory to a location on your web server. In the options in the top of the index.php file, set the path to batik-rasterier.jar.
In your chart options, set the exporting.url option to match your PHP file location. "

score 0 · Answer 4 · answered Mar 20 '14 at 10:46

You can try this

 var chart = $('#yourchart').highcharts();
    svg = chart.getSVG();   
    var base_image = new Image();
    svg = "data:image/svg+xml,"+svg;
    base_image.src = svg;
    $('#mock').attr('src', svg);

Take html of Mock and send to DB or save only the binary code .

Save highchart as binary image

How to save an image of the chart on the server with highcharts?

4 Answers4

Linked