Highcharts Export Override

Highcharts Export Override

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>

<h1>Export All Override</h1>
<div id="container1" style="height: 200px"></div>
<div id="container2" style="height: 200px"></div>

<!-- Testing Only Buttons
<button id="exportPng">Export All PNG</button>
<button id="exportJpg">Export All JPG</button>
<button id="exportPdf">Export All PDF</button>
<button id="exportPrint">Print All</button>
-->

CSS

h1 {
    font-size: 3em;
    text-align: center;
}

JavaScript

// ====================================================================
// Create a global getSVG method that takes an array of charts as an argument
// ====================================================================
Highcharts.getSVG = function (charts) {
    var svgArr = [],
        top = 0,
        width = 0;

    $.each(charts, function (i, chart) {
        var svg = chart.getSVG();
        svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
        svg = svg.replace('</svg>', '</g>');

        top += chart.chartHeight;
        width = Math.max(width, chart.chartWidth);

        svgArr.push(svg);
    });

    return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};

// ====================================================================
// Create a global exportCharts method that takes an array of charts as an argument,
// and exporting options as the second argument
// =====================================================================
Highcharts.exportCharts = function (charts, options) {
    var form
    svg = Highcharts.getSVG(charts);

    // merge the options
    options = Highcharts.merge(Highcharts.getOptions().exporting, options);

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

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

    // clean up
   ...