Some charts work, other charts don't.

[altjx]

All of the pie charts I have within my HTML document seem to work just fine with the PDF after adding the following few lines:

<script>
    Function.prototype.bind = Function.prototype.bind || function (thisp) {
      var fn = this;
      return function () {
        return fn.apply(thisp, arguments);
      };
    };
</script>

Now, I am trying to add some additional charts, such as the JustGage chart, and it's not working. I have changed the animation from 700 ms to 0, just in case it was the animation causing it to not make it to the PDF version, but no luck.

Is there another workaround so that I can use pretty much any chart in the future? It looks fine when I append ?debug=true at the end of the URL to see the HTML version, but it just doesn't appear in the PDF.

• JSFiddle: https://jsfiddle.net/ue8x5ym1/1/
• Basic HTML file containing gauge: test.html.zip
• Arguments used to create PDF:

[root:4da905054321:~/rails_app]# bin/wicked_pdf --version                                                                                                                                                                      2:09PM/05.02
wkhtmltopdf 0.12.5 (with patched qt)
[root:4da905054321:~/rails_app]# bin/wicked_pdf --page-size "Letter" --margin-top 25 --margin-bottom 17 --margin-left 10 --margin-right 10 test.html test.pdf

Additional Details:

• wicked_pdf gem version: wicked_pdf (1.4.0)
• wickedhtmltopdf binary version: wkhtmltopdf 0.12.5 (with patched qt)
• Distribution: Ubuntu 18.04
• JustGage: https://toorshia.github.io/justgage/

[unixmonkey]

Many chart libraries have trouble with wkhtmltopdf, since the webkit engine it is built on, is equivalent to a very old version of Chrome (around Chrome 13, I think). One that doesn't support a lot of ES6 style JavaScript or CSS3 or Flexbox, or other modern-ish technologies used to build charting libraries.

To really determine what's happening you may need to resort to installing a Chrome from around that version, or use a lot of element.innerHTML = 'some test string' debugging.

I'm really glad you found something that is working and documented how to make it work, as I'm sure it will help others looking for a charting solution that is compatible with wkhtmltopdf.

Please let me know if you find out anything else.

[altjx]

Thanks a lot @unixmonkey for your work on this. Currently in the process of researching and will let you know if I find an alternative -- a bit stuck right now honestly. Hoping to get something squared away within the next few days.

If I may ask, do you know of any other alternatives to getting something like this working, even if another gem or a completely different method? I could build docx files but then it requires manually converting to PDF which would be problematic and not scalable for me. I think other gems like prawn and pdfkit may have similar issues.

[unixmonkey]

PDFKit would certainly have the same issues. It is also a wrapper around wkhtmltopdf.

You might try out PrinceXML and Princely, which is roughly what this gem was originally based on.

PrinceXML acts a lot like wkhtmltopdf, but is a commercial product aimed at making HTML to PDF conversion better. There are many cases where it works better than wkhtmltopdf, but the downside is it relatively expensive, but probably worth it if it saves you a decent amount of time.

You can download an evaluation version that leaves a watermark on your documents to see if it will work for you or not.

There's also a web service that lets you use PrinceXML-generated documents called DocRaptor, that has a free trial.

Prawn puts a lot of control back in your hands, but then you have to build everything by hand, so no JS-based charting library is going to help with that, but it's fast and stable.

PR #733 Adds support for using a modern Chrome's save-to-pdf through use of the Puppeteer library. It requires some extra dependencies, but might be just what you need.

Please report back with whatever you end up doing, and what worked or didn't! Good luck!

[altjx]

Perfect. Thanks so much @unixmonkey! Will do!!

[jakeNiemiec]

We were having a weird error with charts rendering well as html but not pdf ("undefined is not a function"). We were able to debug with something like this:

<script type="text/javascript" charset="utf-8">
  window.onerror = function(message, source, lineno, colno, error) {
    document.write('<br>');
    document.write(message);
    document.write('<br>');
    document.write(source);
    document.write('<br>');
    document.write(lineno);
    document.write('<br>');
    document.write(colno);
    document.write('<br>');
    document.write(error);
  };
</script>

It turned out that a recent version of highcharts does something that wicked cannot handle (7.x still works). No idea why it breaks, but I hope this helps someone else.

[altjx]

Hi guys,

Just wanted to let you know that I've moved over to puppeteer and it seems that all is well now. All of my charts and everything show up just perfectly fine now. Super excited!

[altjx]

Going to ahead and close this since I found an alternative option. Really appreciate your work on this as well. This gem has made my life much easier!

[moeezsaiyam]

Hi @altjx I'm having the same issue while displaying graphs. My graphs are working fine when i display them as html but i just see an empty canvas in pdf. Can you provide some help?