Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Vaadin Charts - can't conver chart SVG to PNG

Moriya Katvan
5 years ago Jan 03, 2017 1:26pm

hello,

We want to create chart on our and save it as PNG file. we generate the chart on Java server side.
According to your documentation(https://vaadin.com/docs/-/part/charts/java-api/charts-advanced.html), there is no such option, but there is an option to convert the chart to SVG file and then use another SVG tool for our propose.
 
We use your SVGGenerator to get SVG string of the chart, and we try to convert it to PNG file using the Batik tool (one of the tools you mention in your documentation.).
The conversion is finished with no error, but we get an empty PNG file.
When we try to convert another SVG using the Batik tool it works fine. When we open the chart SVG in a browser it works fine.
 
Can you please assist?

attached is the generad SVG chart, and the PNG we get when we try to convert the SVG.

+1
Olli Tietäväinen
5 years ago Jan 04, 2017 1:41pm

Hi,

One thing you can always do with SVG, since it's XML: Edit the file (for example by removing elements) and test the output until you get something out. Isolate the element(s) that are causing problems. Then you can create a transformation that fixes your file. All the blank SVG renders I've seen have been caused by something quite small being off.

Good luck!
-Olli
 

Stephan Grenier
4 years ago Jul 24, 2017 2:59am

I'm having the same issue where the outputted file is blank and can't figure it out either. I've attached the SVG file generated with Vaadin 8.0.7 and Charts 4.0.0. 

I basically saved the following to the file chart.svg

String svg = SVGGenerator.getInstance().generate(chart.getConfiguration());

My Code to convert to jpg with Batik is:

public static void main(String args) throws Exception
{
    InputStream inputStream = new FileInputStream(new File("C:\\temp\\chart.svg"));
   
    JPEGTranscoder t = new JPEGTranscoder();
    t.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, new Float(.8));

    TranscoderInput input = new TranscoderInput(inputStream);

    OutputStream outputStream = new FileOutputStream("C:\\temp\\chart.jpg");
    TranscoderOutput output = new TranscoderOutput(outputStream);

    t.transcode(input, output);

    outputStream.flush();
    outputStream.close();
    System.exit(0);
}

It looks like the part that's causing the issue in the SVG file is:

<g class="highcharts-tooltip" style="cursor:default;padding:0;pointer-events:none;white-space:nowrap;" transform="translate(0,-9000000000)">
    <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"/>
    <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"/>
    <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"  stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"/>
    <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"/>
    <text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20"/>
</g>

*** UPDATE: I found that if I added the following code before the SVGGenerator then it fixed the issue:

configuration.getTooltip().setEnabled(false);

In other words something with the tooltip is causing the issue...

 

Guillermo Alvarez
4 years ago Jul 28, 2017 11:10am

This issue was reported as https://github.com/vaadin/framework/issues/9719 and https://github.com/vaadin/charts/issues/351

As mentioned above one workaround is to disable the tooltip.

Or as explained in the github issue another workaround is to replace translate(0,-9000000000) with translate(0,-9999) in the generated SVG