Highcharts using svg image to create pdf

[dsr1811]

edwbro...@gmail.com commented:

Version PhantomJS 1.3.0

What steps will reproduce the problem?

1. run phantomjs rasterize.js http://localhost/high_test_svg.html phantomjs_test_svg_png.pdf
2. I have attached a test html file with source images and output.

What is the expected output?
chart with no grayed out lines

What do you see instead?
graph lines are being grayed out

Which operating system are you using?
Linux version 2.6.18-238.19.1.el5 (mockbuild@builder10.centos.org) (gcc version 4.1.2 20080704 (Red Hat 4.1.2-50))

Did you use binary PhantomJS or did you compile it from source?
Compile from source
Please provide any additional information below.

Disclaimer:
This issue was migrated on 2013-03-15 from the project's former issue tracker on Google Code, Issue #364.
🌟   7 people had starred this issue at the time of migration.

[aportale]

alessandro.portale@gmail.com commented:

I took a closer look at the Highchart svg files and found the source of the thick grey bars. There are actually overlaid paths on the chart. And their job is to track the mouseOver events. This is one of them:

Anyways, the opacity 0.000001 makes them invisible in the browser but Qt shows them as fully opaque in the PDF. I would like to dig deeper into the issue to find out what causes it. Also for a Qt bugreport, I want to narrow the issue down, and ideally reproduce it with pure Qt, without QtWebKit.

But until that issue is fixed in Qt, here is a small&dirty workaround... I changed rasterize.js like this and got rid of everything with very low opacity (i.e. tracker paths and shadows):

diff --git a/examples/rasterize.js b/examples/rasterize.js
index fcd74cd..dcc81d4 100644
--- a/examples/rasterize.js
+++ b/examples/rasterize.js
@@ -19,6 +19,16 @@ if (phantom.args.length < 2 || phantom.args.length > 3) {
console.log('Unable to load the address!');
} else {
window.setTimeout(function () {

•            // Remove all low-opacity paths. see PhantomJS issue #364
  

•            page.evaluate(function () {
  

•                var paths = document.getElementsByTagName("path");
  

•                for (var i = paths.length - 1; i >= 0; i--) {
  

•                    var path = paths[i];
  

•                    var strokeOpacity = path.getAttribute('stroke-opacity');
  

•                    if (strokeOpacity != null && strokeOpacity < 0.2)
  

•                        path.parentNode.removeChild(path);
  

•                }
  

•            });
           page.render(output);
           phantom.exit();
       }, 200);
  

...That's the power of PhantomJS :)
The resulting PDF is attached.

[dsr1811]

edwbro...@gmail.com commented:

Thanks for taking a look at this, the patch will do the trick.

While, researching this issue further, I also thought that tracking might be
causing some of the difficulties, so in trying to isolate and simplify the
re-creation of the issue, I created an additional svg file, with all the
animations, tracking, and tooltips turned off, etc and it looks good.

I also wrote a simple PyQt script that exports to pdf using the QWebView
and QPrinter functions to try to isolate the issue may be. I have attached
both files.

Love phontom. Thanks.

Thanks.

[elistevens]

wickedg...@gmail.com commented:

Just a note, I wouldn't be surprised if this is due to how certain CSS styles get overridden while printing (I've noticed that opacity gets set to 1.0 in other contexts).

[starquake]

janvis...@bananensap.nl commented:

This fix is one way to do it. It disables the shadows though. Another way would be to disable mousetracking in the options. The only problem I'm left with now is the shadow opacity. Any ideas?

Here's an example http://jsfiddle.net/jvisser/aKJLv/

And use this command to rasterize:
phantomjs examples/rasterize.js http://fiddle.jshell.net/jvisser/aKJLv/show/light/ output.pdf A4

[stale]

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!