I have developed exporting of multiple highcharts on a single pdf page (A3 Layout) which consists of 6 graphs and relative text.
The functionality is working fine. The below is the link for my code.
When I click on the "Export PDF" button, the pdf is been downloaded containg all the charts and text (I have copied only 1 chart in the sample example).
When you click on the ctrl+p on the downloaded document to print then the user can see lot of additional white space on the top and bottom of the pdf page. There shouldn't be any such additional white space. In the downloaded document there is no such white space.
How to modify the SVG elemets for height and width of such issues.
$(function () {
Highcharts.getSVG = function(charts,texts, options, callback) {
var svgArr = [],
top = 0,
width = 0,
newLine = false,
txt,txt1,txt2,txt3,txt4,txt5,txt6,txt7,txt8,txt9,txt10,txt11,txt12,txt13,txt14,txt15,txt16,txt17,txt18,txt19,txt20,txt21,txt22,txt23,txt24,txt25,txt26;
addSVG = function(svgres,i) {
// Grab width/height from exported chart
var svgWidth = +svgres.match(
/^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
)[1],
svgHeight = +svgres.match(
/^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
)[1],
// Offset the position of this chart in the final SVG
svg;
if (svgWidth > 900) {
if(i==5){
top = 1000;
svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')"');
}else{
svg = svgres.replace('<svg', '<g transform="translate(' + width + ', 0 )"');
}
top = Math.max(top, svgHeight);
} else {
if (newLine) {
if(i==4){
width = 800;
}
svg = svgres.replace('<svg', '<g transform="translate(' + width + ', ' + top + ')"');
top += svgHeight;
width += svgWidth;
newLine = false;
} else {
newLine = true;
if(i==5){
top = 1000;
svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
}else{
svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
}
top = Math.max(top, svgHeight);
width += svgWidth;
//width = Math.max(width, chart.chartWidth);
}
}
svg = svg.replace('</svg>', '</g>');
svgArr.push(svg);
txt = texts[i];
},
exportChart = function(i) {
if (i === charts.length) {
// add SVG image to exported svg
//addSVG(svgImg.outerHTML);
//addSVG(svgImg.outerHTML);
//console.log(top+'-----'+width);
return callback('<svg height="2000" width="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
}
charts[i].getSVGForLocalExport(options, {}, function() {
console.log("Failed to get SVG");
}, function(svg) {
addSVG(svg,i);
return exportChart(i + 1); // Export next only when this SVG is received
});
};
//console.log(svgArr);
exportChart(0);
};
Highcharts.exportCharts = function(charts,texts, options) {
options = Highcharts.merge(Highcharts.getOptions().exporting, options);
// Get SVG asynchronously and then download the resulting SVG
Highcharts.getSVG(charts,texts, options, function(svg) {
Highcharts.downloadSVGLocal(svg, options, function() {
console.log("Failed to export on client side");
});
});
};
//Set global default options for all charts
Highcharts.setOptions({
exporting: {
fallbackToExportServer: false // Ensure the export happens on the client side or not at all
}
});
If I increase the height in the SVG then it is increasing the width as well
return callback('<svg height="2000" width="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
