Poor Image Quality Inserting Google Charts into a PDF using JSPDF

Question

I'm trying to render a pdf view of a reporting page that contains google charts to display my data. Currently I am going converting the chart to a url encoded JPEG. The image quality at this stage is still good but once i add it to the pdf document using JSPDF the image quality is severely reduced.

Here's a jsfiddle of my current method: http://jsfiddle.net/5c5YX/3/

function getImgData(chartContainer) {
    var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
    var svg = chartArea.innerHTML;
    var chartDoc = chartContainer.ownerDocument;
    var canvas = chartDoc.createElement('canvas');
    canvas.setAttribute('width', chartArea.offsetWidth);
    canvas.setAttribute('height', chartArea.offsetHeight);


    canvas.setAttribute(
        'style',
        'position: absolute; ' +
        'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
        'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
    chartDoc.body.appendChild(canvas);
    canvg(canvas, svg);
    var imgData = canvas.toDataURL('image/JPEG');
    doc.addImage(imgData, "JPEG", 10,10); 
    doc.addImage(imgData, "JPEG", 10,100); 
    canvas.parentNode.removeChild(canvas);
    return imgData;
  }

Does anyone know of a fix for this or the reason it's doing this? Or if not; is there a different way I can render a pdf containing google chart data (client side preferably) ?

Any help would be greatly appreciated!

Answer 1

Most Visualization API charts now support the #getImageURI method, which returns a URI string that you can use to save a .png image file. Here are the docs on printing the charts, which you can follow to save them as a .png image instead: https://developers.google.com/chart/interactive/docs/printing. There should not be a quality loss from importing the .png file to PDF.