Exporting Charts as SVG
Charts can be exported as SVG by using the SVGGenerator
class.
This allows you to generate an SVG string of any chart, using a Configuration
object with the chart’s data.
Installing
Add the vaadin-charts-flow-svg-generator
dependency to your project’s pom.xml
as follows:
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-charts-flow-svg-generator</artifactId>
</dependency>
Note
|
Node.js required
Node.js must be installed for the generator to work.
See the configuration instructions in Installing Node.js.
|
Using the Generator
Create an instance of SVGGenerator
and call the generate()
method, passing the chart’s Configuration
as an argument.
The method returns a string with the SVG data of the chart.
Warning
|
Close the generator
Remember to close the generator when you’re done using it.
It’s recommended to use a try-with-resources block, so the generator is automatically closed.
|
Configuration configuration = new Configuration();
// ...
try (SVGGenerator generator = new SVGGenerator()) {
String svg = generator.generate(configuration);
} catch (IOException | InterruptedException ex) {
// handle exceptions accordingly
}
Customizing SVG Generation
You can customize some attributes of the resulting SVG.
The customizable options include the following:
-
Width
-
Height
-
Theme
-
Language
-
Showing timeline
-
Executing JavaScript code (formatter functions)
Any customizations are handled with the ExportOptions
class.
Note
|
CSS styling not supported
CSS styling isn’t supported when exporting a chart as SVG.
|
Configuration configuration = new Configuration();
// ...
ExportOptions options = new ExportOptions();
options.setWidth(800);
options.setHeight(600);
try (SVGGenerator generator = new SVGGenerator()) {
String svg = generator.generate(configuration, options);
} catch (IOException | InterruptedException ex) {
// handle exceptions accordingly
}
Executing JavaScript Functions
You can execute functions from Configuration
objects, for example, formatter functions.
Executing functions must be explicitly enabled by setting the executeFunctions
flag to true
.
Caution
|
Only Run Trusted Code
Enabling this option allows JavaScript code to run on your server.
Make sure to only allow safe and trusted code.
|
Configuration configuration = new Configuration();
configuration.getyAxis().getLabels().setFormatter("function () { return this.value +' mm'; }");
// ...
ExportOptions options = new ExportOptions();
options.setExecuteFunctions(true);
try (SVGGenerator generator = new SVGGenerator()) {
String svg = generator.generate(configuration, options);
} catch (IOException | InterruptedException ex) {
// handle exceptions accordingly
}
Preview SVG (For Debugging)
You can add the generated SVG to a component to see the resulting image.
Caution
|
For debugging purposes only
Use the Chart component to render charts.
This approach is only intended to help you debug your application.
|
Div div = new Div();
Configuration configuration = new Configuration();
// ...
try (SVGGenerator generator = new SVGGenerator()) {
String svg = generator.generate(configuration);
div.getElement().setProperty("innerHTML", svg);
} catch (IOException | InterruptedException ex) {
// handle exceptions accordingly
}
add(div);
C8510402-621D-437D-ADD9-E219BBDB532D