[Chartjs]-Chart from chart.js to pdf

by

4👍

This is fine but what if you want to bypass the on screen part and go straight to a pdf document and include the image

You can still use chart.js exporting as PDF with PhantomJs (a headless browser that will open a html page with your charts, and save it via PDF). If you are working with nodejs there’s a good library that abstracts PhantomJs and make the PDF easy: https://github.com/sindresorhus/pageres. It seems like a workaround, but usually these canvas to PDF doesn’t render well, specially charts!

Yeah, you still need to create a html page to print your PDF, however you have 2 options:

2👍

I was working on a similar problem and built QuickChart. It is a web service that renders Chart.js charts in several static formats including PDF.

The full source code is here: https://github.com/typpo/quickchart

You may be interested in lib/charts.js and lib/pdf.js in particular. The solution is built on top of a Javascript canvas implementation (node-canvas) and a Chart.js wrapper library (chartjs-node-canvas). First the chart is rendered to a PNG image using the canvas. Then the PNG is positioned on a document and rendered using pdfkit.

Hope you find the source code useful. I also host the QuickChart web service for free so you can use the web API directly https://quickchart.io/chart?width=500&height=300&format=pdf&c={chart.js config here}

Here’s an example of a PDF chart generated on-the-fly:

https://quickchart.io/chart?f=pdf&bkg=white&c={type:’bar’,data:{labels:[‘January’,’February’,’March’,’April’,’May’],datasets:[{label:’Dogs’,data:[50,60,70,180,190]},{label:’Cats’,data:[100,200,300,400,500]}]}}

0👍

While this does not answer the question directly as I could not get chart.js to do what I wanted being client side, I found a good solution using pChart. As the pdf is being generated, the chart is created and is temporarily saved on the server until the pdf is finished. The chart is inserted into the pdf and then deletes the chart from the server. There is a bit of manipulation to correctly size the image.

$myPicture->render("path/imagename.png");

if (file_exists("path/imagename.png")) {
    $ycurrent = $pdf->GetY();
    list($width, $height) = getimagesize("path/imagename.png");
    $imageWidth = 160;
    $ratio = $imageWidth/$width;
    $xpos = 25;
    $pdf->Image("path/imagename.png", $xpos, $ycurrent, $width * $ratio, $height * $ratio, "png", '');
    unlink ("path/imagename.png");
}

Leave a comment