Highcharts : Export multiple charts to pdf in custom layout

Question

I was trying to export multiple charts to a single pdf with the following layout.

It is working well as said in http://jsfiddle.net/BlackLabel/b0jnqd0c/

But when I try to export more number of charts, the entire charts are not exported. For example, if I change the lines in js fiddle code to:

$('#export-pdf').click(function() {
    Highcharts.exportCharts([chart1, chart2, chart3, chart4, chart1, chart2, chart3, chart4], {
      type: 'application/pdf'
    });
  });

And try to export 8 charts, my export pdf is missing the 8 charts and is restricted to 6 charts.

My requirement is to export the whole bunch of charts that are dynamically generated to pdf, there may be any number of charts. Also as seen in image, the charts are not fit to pdf page.

Answer 1

I think it is because all the 8 charts do not fit in one page of the PDF (only 6 fit), when I change the height of each chart to 200px then export. It works fine, see this fiddle JSfiddle . If you want the PDF output in two pages you can use a library called jspdf .

Here is the sample code for jspdf.

$('#export_all').click(function () {
var doc = new jsPDF();

// chart height defined here so each chart can be placed
// in a different position
var chartHeight = 80;

// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.setFontSize(40);
doc.text(35, 25, "My Exported Charts");

//loop through each chart
$('.myChart').each(function (index) {
    var imageData = $(this).highcharts().createCanvas();

    // add image to doc, if you have lots of charts,
    // you will need to check if you have gone bigger 
    // than a page and do doc.addPage() before adding 
    // another image.

    /**
    * addImage(imagedata, type, x, y, width, height)
    */
    doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
});


//save with name
doc.save('demo.pdf');
});

For more explanation. refer to this link

Answer 2

Would you like to achieve something like in the demo below? In the demo which I prepared, I tested exporting of 17 charts.

Highcharts.getSVG = function(charts) {
 var svgArr = [],
     top = 0,
     width = 0,
     endWidth = 0;

Highcharts.each(charts, function(chart) {
var svg = chart.getSVG(),
  // Get width/height of SVG for export
  svgWidth = +svg.match(
    /^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
  )[1],
  svgHeight = +svg.match(
    /^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
  )[1];

svg = svg.replace(
  '<svg',
  '<g transform="translate(' + width + ', ' + top + ')" '
);

svg = svg.replace('</svg>', '</g>');

width += svgWidth;
endWidth = Math.max(endWidth, width)

if (width === 2 * svgWidth) {
  width = 0;
  top += svgHeight;
}

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

Demo

Answer 3

The actual issue is with the proportion of page dimensions. If the width of html page is '60', then the height of page is also restricted in proportion to that, so that all the data overflowing are hidden.

Setting the width equal to height can make all the content to be shown. For that change the export pdf code from:

exportChart = function(i) {
        if (i === charts.length) {
          return callback('<svg height="' + top + '" width="' + width+
            '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
        }

to the following:

exportChart = function(i) {
        if (i === charts.length) {
          return callback('<svg height="' + top + '" width="' + top +
            '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
        }

But as the width increases with height, the content may seem smaller in size. If that seems to be an issue when you have bulk content for exporting, you can go for exporting with multi paged pdf option. Added this answer so that it may help someone. I am also looking for a solution how to set width for single page continuous pdf.