search

Xportability / css-to-pdf

Convert any HTML page or region to PDF - supports CSS, SVG, embedded XML objects, and more..
http://www.cloudformatter.com/CSS2Pdf
207 stars 77 forks source link

Google bar chart with scaleType: 'log' enabled #38

Closed ikoukuhn closed 8 years ago

ikoukuhn commented 8 years ago

If I have google chart with scaleType: 'log' enabled, the pdf bars doesn't show correctly: https://drive.google.com/open?id=0B4vXYJx2hoDpRngxTHdIYUFZWU0 As you can see the bars is overlaying the labels. Here's what the scaleType:log do: https://developers.google.com/chart/interactive/docs/customizing_axes#axis-scale

And here's my jsfiddle: https://jsfiddle.net/Ljmhvrp4/4/

kbrown01 commented 8 years ago

You really need to fix the fiddles you send. You mix http and https and you also have errors like this:

arrayToDataTable is not defined.

xepOnline is not defined because you post an https reference and then call things with http.

From: ikoukuhn [mailto:notifications@github.com] Sent: Thursday, August 25, 2016 4:38 PM To: Xportability/css-to-pdf css-to-pdf@noreply.github.com Subject: [Xportability/css-to-pdf] Google bar chart with scaleType: 'log' enabled (#38)

If I have google chart with scaleType: 'log' enabled, the pdf bars doesn't show correctly: https://drive.google.com/open?id=0B4vXYJx2hoDpRngxTHdIYUFZWU0 As you can see the bars is overlaying the labels. Here's what the scaleType:log do: https://developers.google.com/chart/interactive/docs/customizing_axes#axis-scale

And here's my jsfiddle: https://jsfiddle.net/Ljmhvrp4/4/

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Xportability/css-to-pdf/issues/38 , or mute the thread https://github.com/notifications/unsubscribe-auth/AAsJo_lqXLQ7TpZe7LlU4RyldzfN_qYOks5qjidygaJpZM4Jtm9_ . https://github.com/notifications/beacon/AAsJo9924EJHXC2Qh4bj-QCRkS5iG6cSks5qjidygaJpZM4Jtm9_.gif

ikoukuhn commented 8 years ago

I've cleaned the code, here's my updated jsfiddle: http://jsfiddle.net/Ljmhvrp4/8/

kbrown01 commented 8 years ago

I have found the reason for the issue. The only solution you would have is to implement some code to fix (dumb) structures created by the charting solution. Here is what happens:

When you create that SVG dynamically, the actual chart is what you see rendered in our PDF except the bars have a clip path applied to clip their extended length.

Now, that clip path is also inside the actual SVG. However, the google chart code is giving the following URL for the clip path:

<g clip-path="url(http://fiddle.jshell.net/_display/#_ABSTRACT_RENDERER_ID_0)">

You will note that the full URL path is given to an internal anchor when it could have (should have) been just:

<g clip-path="url(#_ABSTRACT_RENDERER_ID_0)">

I say should have because this makes this SVG totally unusable outside of this html page. You would note that if you just copy the SVG out and save it and then view it separately, it would be broken just as it renders in our software. Our software is not going to go find it at that URL and it fact in JSFiddle that would be impossible because not even the full path is accessible as it doesn;t even have the fiddle # or anything and it would not even exist as it is dynamically generated.

So the backend software receives that URL for the clip path and of course it cannot find it (it does not exist) and you get no clip and the bars long longer.

So you only solution is to implement something that strips those URLs to the real local anchor it should be.

kbrown01 commented 8 years ago

Here is an updated fiddle to show the issue. It is not generic, I would leave that to you. This basically removes the baseURI from the specification of the clip-path. This shows that the proper specification of the URL should not include the full path and it still works.

And the PDF is perfect because of this.

http://jsfiddle.net/Ljmhvrp4/12/

You could make this generic by getting the baseURL from the SVG and stripping that string for all the clip-paths.