Question: Easy way to automatically save images of Krona HTML charts?
gravatar for steve
4.2 years ago by
United States
steve2.7k wrote:

Krona is a tool that can be used to make some very attractive interactive pie charts, which are useful for metagenomics visualization (example here)

I can easily generate the chart from properly formatted input (generated from Kraken) like this:

zcat file.fastq.gz | head -4000 | kraken --fastq-input /dev/fd/0 | cut -f2,3 > krona.input

ktImportTaxonomy krona.input -o krona.out.html

However I would like to also be able to automatically (programmatically) save this rendered chart as a static PNG, PDF, or similar image format. There does not seem to be any easy way to do this from within the program itself. Any ideas? Here is what I have tried; none of them render correctly, as you can see. Ideally there would be a solution that can be used in a script, running on a headless server.

Using PhantomJS

phantomjs rasterize.js krona.out.html krona_snap.png


Using webkit2png

webkit2png krona.out.html

webkit2png output

kraken metagenomics krona • 2.9k views
ADD COMMENTlink modified 4.2 years ago by Josh Herr5.7k • written 4.2 years ago by steve2.7k

It looks like the snapshot button calls the snapshot() function js. I think you can get phantomjs to call a function after rendering (I think it was page.evaluate). Then you can probably save the snapshot which is just a svg to file.

ADD REPLYlink written 4.2 years ago by Damian Kao15k

Great idea, I will look into this. However it appears that the default snapshot is in SVG format, which would then need to be converted to PNG (ideally), or PDF; I just tried using ImageMagick for this and it did not turn out well: krona_svg_snap Error message: convert: unable to read font '(null)' @ error/annotate.c/RenderFreetype/1239.

ADD REPLYlink modified 4.2 years ago • written 4.2 years ago by steve2.7k

I've found SVG to be a bit loose as a specification. Different programs can sometimes render differently. I think phantomjs should be able to handle it. So use phantomjs to render the svg and save the "page" as png. I've used phantomjs in the past on d3.js generated svgs successfully.

ADD REPLYlink modified 4.2 years ago • written 4.2 years ago by Damian Kao15k

Agreed, this was the solution I settled on. I used phantomjs, and passed it to an editted version of their rasterize.js script, where I changed it to page.viewportSize = { width: 1000, height: 1000 }; at line 15, and changed the timer value at line 46 from 200 to 1000. Results look much better now. Example: phantomjs rasterize_custom.js rdp.krona.html rdp.krona.png

rdp krona

ADD REPLYlink modified 4.2 years ago • written 4.2 years ago by steve2.7k
gravatar for Josh Herr
4.2 years ago by
Josh Herr5.7k
University of Nebraska
Josh Herr5.7k wrote:

I agree with the above answers as different tools selectively parse SVG in various ways. I have had good luck with SVG Crowbar. I then take the SVG output and use Illustrator or Inkscape to modify for publication.

ADD COMMENTlink written 4.2 years ago by Josh Herr5.7k
Please log in to add an answer.


Use of this site constitutes acceptance of our User Agreement and Privacy Policy.
Powered by Biostar version 2.3.0
Traffic: 2422 users visited in the last hour