4

I am trying to render some charts using D3 and wicked_pdf. The charts show up fine when I enable the show_as_html flag. But when I render the PDFs itself, only the axes show up. The chart area itself is blank. I know the JavaScript executes since the axes are rendered after the chart content. Actual chart Rendered chart I tried converting the SVG to a canvas object using canvg. 

canvg($(this).find('#canvas')[0], $('<div>').append($(picture).clone()).html(), { ignoreMouse: true, ignoreAnimation: true })

No change. Then, I converted the SVG to a PNG image using:

$(this).find('#chart').append("<img id='as' src='" + $(this).find('#canvas')[0].toDataURL() + "'>").show()

Still no change. However, when I insert a similar png image into the document as a static image using wicked_pdf_image_tag, the correct image is rendered. How do I get wicked_pdf to render the images correctly? I don't care about the format as long as the chart is rendered properly.

Duniyadnd
  • 4,013
  • 1
  • 22
  • 29
user1742188
  • 4,563
  • 8
  • 35
  • 60

3 Answers3

1

Unfortunately @TheMcMurder's answer will not help as wicked_pdf uses wkhtmltopdf. Furthermore, this is actually an issue for wkhtmltopdf not wicked_pdf. I've been working on the same issue with Chart.js (which uses elements).

Here is a link to two threads on the whhtmltopdf Google Group about the issue

And here is a thread discussing what might be the same issue on Github

Some basic searching points to phantom.js as a possible alternative but I haven't tried it yet.

can't post link because my rep is too low, but Google has you covered

Good luck and let us know if you make any progress.

Community
  • 1
  • 1
John Kacz
  • 404
  • 5
  • 15
  • i don't think this is an issue with `wkhtmltopdf`. I have the latest 0.12.x version of `wkhtmltopdf` and it generates expected pdf with charts. But `wicked_pdf` doesn't. – Swaps Jul 04 '16 at 07:00
  • Wicked PDF just wraps wkhtmltopdf. What version of wkhtmltopdf is your setup of wicked pdf using? – John Kacz Jul 05 '16 at 15:18
  • 1
    Its the same as I mentioned in my previous comment `wkhtmltopdf 0.12.3 (with patched qt)`. I found that my charts were not displaying in a pdf bcz it was not calling the `js` function I created for graph generation. I then just included my `js` file with the `wicked_pdf_javascript_include` helper tag and it worked. – Swaps Jul 06 '16 at 04:42
0

If you can try using http://wkhtmltopdf.org/ I've found that this does a better job displaying the SVG.

TheMcMurder
  • 758
  • 3
  • 9
  • 22
0

I had same issue. With a localhost setup the solution for me was to save the full web page to html(mouse menu button and save page as complete web page). Then execute: 

wkhtmltopdf -O Landscape -s A3 saved-page.html output.pdf

You might need to add --javascript-delay 10000 too, but maybe not.

It's weird but d3.js chart in svg is being rendered this way, but it's not rendered if you place the url...

J0nh1dd3n
  • 161
  • 5