Bubble Page to Pdf Converter issue with html+3rd party plugin

[raymond.gerritsen]

Hello,

I’m using this plugin for several apps. On one of my apps I want convert a page that uses elements modified by html and an element from another 3rd party plugin (graphs).

I’m using the ‘Generate pdf from html server’-action on all of my applications because it yields the highest graphical quality for text-elements, but on the aforementioned app the html-modified elements aren’t displayed correctly (parts of the element in the wrong location). Also the 3rd party plugin doesn’t show at all. I’ve displayed a screenshot of the issue with the html-modified elements.

Does anyone have a solution to this?

Looking forward to your reaction.

Yours sincerely,

Raymond Gerritsen

[diana.c]

Hi @raymond.gerritsen!

Thank you for reaching out!

@raymond.gerritsen

On one of my apps I want convert a page that uses elements modified by html and an element from another 3rd party plugin (graphs).

Unfortunately, we cannot guarantee the proper functionality of our plugins when you integrate them with 3rd party add-ons. Nevertheless, our team would like to take a closer look at your issue.

Could you please provide us with more details regarding the 3rd party plugin you are using - including the name, screenshots of each step you take when triggering the action, or, better yet - a video of the whole process?

This would help us understand better what could have gone wrong.

Thank you and have a great day!

[raymond.gerritsen]

Hello Diana,

Thanks for the reply.
The 3rd party plugin is called Chart Element, which simply lets me display graphs.
I’ve got several graphs stacked on to each other and made them invisibile on page load. Visibility for a specific graph gets toggled when the user has selected the corresponding datapoint earlier in the tool.
Screenshot of Element with conditional:

Please let me know if u need additional information.

Thanks in advance!

[diana.c]

Hi @raymond.gerritsen!

Thank you for the details.

I have forwarded this to our developer’s team for further investigation. Once I have any updates - I will let you know.

Have a nice day!

[diana.c]

Hi @raymond.gerritsen!

I just wanted to give you a quick update - currently, our team is looking into this, as it is an issue with the 3rd party plugin, this might take some time.

Once any news will become available - I will let you know.

Thank you for your patience!

[raymond.gerritsen]

Hi @diana.c ,

That is okay, I’m really glad that you are helping me out.
If there’s any additional information you need, let me know

[diana.c]

Hi, @raymond.gerritsen!

After a thorough investigation of your report, it appears that our plugin is not compatible with the Bubble Chart Element.

The Bubble plugin draws the chart elements through JS, however, our plugin doesn’t read that kind of data. This is why it can’t “see” it when you try to convert the whole page.

Apologies for any inconvenience this might cause.

Best regards,
Diana

[raymond.gerritsen]

Hello @diana.c,

That’s very unfortunate, nevertheless thanks for the effort put in to help me.
Do you perhaps have a recommendation on any chart plugins that are compatible with the Bubble Page to pdf converter?

Looking forward to hearing from you.

Best regards,

Raymond

[diana.c]

Hi @raymond.gerritsen!

@raymond.gerritsen

Do you perhaps have a recommendation on any chart plugins that are compatible with the Bubble Page to pdf converter?

Since our plugin is not compatible with JS, I would recommend any plugin that doesn’t use that script.

I’ve tested our Google Charts Plugin and it works perfectly since it “calls” the elements through the Google API : Google Charts Plugin for Bubble | Plugin for Bubble by Zeroqode.

Editor:

PDF:

Please note, however, this plugin is not free.

As an alternative, allow me to suggest converting the chart to an HTML element. If you’re familiar with HTML, you can customize the following code to your needs:

see the code here

<div id="chart_div19014864"><div style="position: relative;"><div dir="ltr" style="position: relative; width: 1120px; height: 400px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" aria-label="A chart."><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1120" height="400" aria-label="A chart." style="overflow: hidden;"><defs id="_ABSTRACT_RENDERER_ID_0"><clipPath id="_ABSTRACT_RENDERER_ID_1"><rect x="154" y="77" width="813" height="247"></rect></clipPath></defs><rect x="0" y="0" width="1120" height="400" stroke="none" stroke-width="0" fill="#FFFFFF"></rect><g><text text-anchor="start" x="154" y="51.9" font-family="Arial" font-size="14" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Column Chart</text><rect x="154" y="40" width="813" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#FFFFFF"></rect></g><g><rect x="981" y="77" width="125" height="83" stroke="none" stroke-width="0" fill-opacity="0" fill="#FFFFFF"></rect><g><rect x="981" y="77" width="125" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#FFFFFF"></rect><g><text text-anchor="start" x="1014" y="88.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">Copper</text></g><rect x="981" y="77" width="28" height="14" stroke="none" stroke-width="0" fill="#FFBD80"></rect></g><g><rect x="981" y="100" width="125" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#FFFFFF"></rect><g><text text-anchor="start" x="1014" y="111.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">Silver</text></g><rect x="981" y="100" width="28" height="14" stroke="none" stroke-width="0" fill="#EEAAAD"></rect></g><g><rect x="981" y="123" width="125" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#FFFFFF"></rect><g><text text-anchor="start" x="1014" y="134.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">Gold</text></g><rect x="981" y="123" width="28" height="14" stroke="none" stroke-width="0" fill="#9EBEC7"></rect></g><g><rect x="981" y="146" width="125" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#FFFFFF"></rect><g><text text-anchor="start" x="1014" y="157.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">Platinum</text></g><rect x="981" y="146" width="28" height="14" stroke="none" stroke-width="0" fill="#1698B6"></rect></g></g><g><rect x="154" y="77" width="813" height="247" stroke="none" stroke-width="0" fill-opacity="0" fill="#FFFFFF"></rect><g clip-path="url(https://zeroqode-demo-01.bubbleapps.io/version-test/google_charts?debug_mode=true#_ABSTRACT_RENDERER_ID_1)"><g><rect x="154" y="323" width="813" height="1" stroke="none" stroke-width="0" fill="#CCCCCC"></rect><rect x="154" y="274" width="813" height="1" stroke="none" stroke-width="0" fill="#CCCCCC"></rect><rect x="154" y="225" width="813" height="1" stroke="none" stroke-width="0" fill="#CCCCCC"></rect><rect x="154" y="175" width="813" height="1" stroke="none" stroke-width="0" fill="#CCCCCC"></rect><rect x="154" y="126" width="813" height="1" stroke="none" stroke-width="0" fill="#CCCCCC"></rect><rect x="154" y="77" width="813" height="1" stroke="none" stroke-width="0" fill="#CCCCCC"></rect><rect x="154" y="298" width="813" height="1" stroke="none" stroke-width="0" fill="#EBEBEB"></rect><rect x="154" y="249" width="813" height="1" stroke="none" stroke-width="0" fill="#EBEBEB"></rect><rect x="154" y="200" width="813" height="1" stroke="none" stroke-width="0" fill="#EBEBEB"></rect><rect x="154" y="151" width="813" height="1" stroke="none" stroke-width="0" fill="#EBEBEB"></rect><rect x="154" y="102" width="813" height="1" stroke="none" stroke-width="0" fill="#EBEBEB"></rect></g><g><rect x="310" y="236" width="124" height="87" stroke="none" stroke-width="0" fill="#FFBD80"></rect><rect x="435" y="221" width="125" height="102" stroke="none" stroke-width="0" fill="#EEAAAD"></rect><rect x="561" y="134" width="125" height="189" stroke="none" stroke-width="0" fill="#9EBEC7"></rect><rect x="687" y="113" width="124" height="210" stroke="none" stroke-width="0" fill="#1698B6"></rect></g><g><rect x="154" y="323" width="813" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g></g><g></g><g><g><text text-anchor="end" x="140" y="328.4" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">0</text></g><g><text text-anchor="end" x="140" y="279.2" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">5</text></g><g><text text-anchor="end" x="140" y="230" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">10</text></g><g><text text-anchor="end" x="140" y="180.8" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">15</text></g><g><text text-anchor="end" x="140" y="131.6" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">20</text></g><g><text text-anchor="end" x="140" y="82.4" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#444444">25</text></g></g></g><g></g></svg><div aria-label="A tabular representation of the data in the chart." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;"><table><thead><tr><th>Name</th><th>Copper</th><th>Silver</th><th>Gold</th><th>Platinum</th></tr></thead><tbody><tr><td></td><td>8.94</td><td>10.49</td><td>19.3</td><td>21.45</td></tr></tbody></table></div></div></div><div aria-hidden="true" style="display: none; position: absolute; top: 410px; left: 1130px; white-space: nowrap; font-family: Arial; font-size: 14px;">Platinum</div><div></div></div></div>

Editor:

PDF:

I hope this helps!

Best regards,
Diana

[raymond.gerritsen]

Hi @diana.c ,

That is wonderful news, I will definitely look into this. Thank you very much for your help!

With kind regards,

Raymond

[diana.c]

You’re welcome @raymond.gerritsen!

Let me know if there’s anything else I can help you with.

Have a great day!