Skip to content

Commit a4dc850

Browse files
HerbertsVaadinHerbertsVaadin
committed
Refactor structure of exporting charts. Add tab for offline module.
1 parent 7c958f0 commit a4dc850

File tree

4 files changed

+158
-130
lines changed

4 files changed

+158
-130
lines changed

‎articles/components/charts/exporting/index.adoc‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
---
2+
title: Exporting
3+
page-title: Exporting Charts
4+
description: How to export charts using different methods.
5+
tab-title: SVG Generator
6+
layout: tabbed-page
7+
meta-description: Create scalable and exportable SVG charts with Vaadin, or use Remote Server to export in different formats. Learn how to customize and integrate them into your applications effortlessly.
8+
order: 10
9+
---
10+
11+
12+
[[charts.svggenerator]]
13+
= Exporting Charts as SVG
14+
15+
Charts can be exported as SVG by using the [classname]`SVGGenerator` class. This allows you to generate an SVG string of any chart, using a [classname]`Configuration` object with the chart's data.
16+
17+
== Installing
18+
19+
Add the `vaadin-charts-flow-svg-generator` dependency to your project's [filename]`pom.xml` as follows:
20+
21+
[source,xml]
22+
----
23+
<dependency>
24+
<groupId>com.vaadin</groupId>
25+
<artifactId>vaadin-charts-flow-svg-generator</artifactId>
26+
</dependency>
27+
----
28+
29+
.Node.js required
30+
[NOTE]
31+
Node.js must be installed for the generator to work.
32+
See the configuration instructions in <<{articles}/flow/configuration/development-mode/node-js#,Installing Node.js>>.
33+
34+
== Using the Generator
35+
36+
Create an instance of [classname]`SVGGenerator` and call the [methodname]`generate()` method, passing the chart's [classname]`Configuration` as an argument.
37+
The method returns a string with the SVG data of the chart.
38+
39+
.Close the generator
40+
WARNING: Remember to *close the generator when you're done using it*.
41+
It's recommended to use a try-with-resources block, so the generator is automatically closed.
42+
43+
[source,java]
44+
----
45+
Configuration configuration = new Configuration();
46+
// ...
47+
try (SVGGenerator generator = new SVGGenerator()) {
48+
String svg = generator.generate(configuration);
49+
} catch (IOException | InterruptedException ex) {
50+
// handle exceptions accordingly
51+
}
52+
----
53+
54+
== Customizing SVG Generation
55+
56+
You can customize some attributes of the resulting SVG.
57+
58+
The customizable options include the following:
59+
60+
* Width
61+
* Height
62+
* Theme
63+
* Language
64+
* Showing timeline
65+
* Executing JavaScript code (formatter functions)
66+
67+
Any customizations are handled with the [classname]`ExportOptions` class.
68+
69+
.CSS styling not supported
70+
NOTE: CSS styling isn't supported when exporting a chart as SVG.
71+
72+
[source,java]
73+
----
74+
Configuration configuration = new Configuration();
75+
// ...
76+
ExportOptions options = new ExportOptions();
77+
options.setWidth(800);
78+
options.setHeight(600);
79+
try (SVGGenerator generator = new SVGGenerator()) {
80+
String svg = generator.generate(configuration, options);
81+
} catch (IOException | InterruptedException ex) {
82+
// handle exceptions accordingly
83+
}
84+
----
85+
86+
=== Executing JavaScript Functions
87+
88+
You can execute functions from [classname]`Configuration` objects, for example, formatter functions.
89+
Executing functions must be explicitly enabled by setting the `executeFunctions` flag to `true`.
90+
91+
.Only Run Trusted Code
92+
CAUTION: Enabling this option allows JavaScript code to run on your server.
93+
Make sure to only allow safe and trusted code.
94+
95+
[source,java]
96+
----
97+
Configuration configuration = new Configuration();
98+
configuration.getyAxis().getLabels().setFormatter("function () { return this.value +' mm'; }");
99+
// ...
100+
ExportOptions options = new ExportOptions();
101+
options.setExecuteFunctions(true);
102+
try (SVGGenerator generator = new SVGGenerator()) {
103+
String svg = generator.generate(configuration, options);
104+
} catch (IOException | InterruptedException ex) {
105+
// handle exceptions accordingly
106+
}
107+
----
108+
109+
== Preview SVG (For Debugging)
110+
111+
You can add the generated SVG to a component to see the resulting image.
112+
113+
.For debugging purposes only
114+
CAUTION: Use the <<basic-use#,Chart>> component to render charts.
115+
This approach is only intended to help you debug your application.
116+
117+
[source,java]
118+
----
119+
Div div = new Div();
120+
Configuration configuration = new Configuration();
121+
// ...
122+
try (SVGGenerator generator = new SVGGenerator()) {
123+
String svg = generator.generate(configuration);
124+
div.getElement().setProperty("innerHTML", svg);
125+
} catch (IOException | InterruptedException ex) {
126+
// handle exceptions accordingly
127+
}
128+
add(div);
129+
----

‎articles/components/charts/exporting/offline.adoc‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: Offline module (unsupported)
3+
page-title: Exporting Charts using offline exporting module
4+
description: How to export charts to different format supported by using Highcharts offline exporting module.
5+
meta-description: Provide configuration to export Vaadin Charts in various formats using only client-side implementation.
6+
order: 15
7+
---
8+
9+
[[charts.offlinemodule]]
10+
= Exporting Charts using the Offline module
11+
12+
Highcharts (the charting library used by Vaadin Charts) supports
13+
https://www.highcharts.com/docs/export-module/client-side-export[client-side export]
14+
through its offline-exporting module. This allows exporting chart images without sending any data to an external server.
15+
16+
Vaadin Charts does not officially support the offline-exporting module yet. Support for this feature is being tracked in an
17+
https://github.com/vaadin/web-components/issues/441[existing GitHub issue]. You can add a 👍 reaction on the issue to upvote it and help raise its priority.
18+
19+
Until official support is available, you can follow the workaround described in
20+
https://github.com/vaadin/web-components/issues/441#issuecomment-3527965104[this GitHub comment]
21+
to implement the feature yourself.

articles/components/charts/export-remote-server.adoc renamed to articles/components/charts/exporting/remote-server.adoc

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Exporting Charts using a Remote Export Service
3-
page-title: How to export Vaadin Charts using a Remote Export Service
2+
title: Remote Export Service
3+
page-title: Exporting Charts using a Remote Export Service
44
description: How to export charts to different format supported by using a Remote Export Service.
5-
meta-description: Provide configuration to access your Remote Export Service to export charts in various formats.
5+
meta-description: Set up configuration to connect to a Remote Export Service in order to export charts in various formats.
66
order: 10
77
---
88

@@ -19,7 +19,6 @@ You can enable the built-in export function by setting `setExporting(true)` in t
1919
chart.getConfiguration().setExporting(true);
2020
----
2121

22-
2322
To configure it further, you can provide an `Exporting` object with custom settings.
2423

2524
[source,java]
@@ -36,15 +35,15 @@ chart.getConfiguration().setExporting(exporting);
3635

3736
Once configured, the chart should have a menu with multiple export options visible.
3837

39-
[[figure.css.styling.example2]]
38+
[[figure.charts.remoteexportservice.example]]
4039
.Menu Showing Chart Export Options
4140
[.fill.white]
42-
image::img/charts-export-server-menu.png[]
41+
image::../img/charts-export-server-menu.png[]
4342

4443

4544
== Using Custom Export Service
4645

47-
The functionality uses a https://export.highcharts.com[HighCharts export service] by default. To use your own, you need to https://www.highcharts.com/docs/export-module/setting-up-the-server[set up an export server] and then configure it in the `Exporting` configuration as follows:
46+
The exporting feature uses a https://export.highcharts.com[HighCharts export service] by default. To use your own, you need to https://www.highcharts.com/docs/export-module/setting-up-the-server[set up an export server] and then configure it in the `Exporting` configuration as follows:
4847

4948
[source,java]
5049
----

‎articles/components/charts/svg-generator.adoc‎

Lines changed: 2 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,9 @@
11
---
22
title: Exporting Charts as SVG
3-
page-title: How to export Vaadin Charts as SVG
4-
description: How to export charts to SVG format.
5-
meta-description: Create scalable and exportable SVG charts with Vaadin. Learn how to customize and integrate them into your applications effortlessly.
6-
order: 9
3+
section-nav: hidden
74
---
85

9-
10-
[[charts.svggenerator]]
116
= Exporting Charts as SVG
127

13-
Charts can be exported as SVG by using the [classname]`SVGGenerator` class. This allows you to generate an SVG string of any chart, using a [classname]`Configuration` object with the chart's data.
14-
15-
== Installing
16-
17-
Add the `vaadin-charts-flow-svg-generator` dependency to your project's [filename]`pom.xml` as follows:
18-
19-
[source,xml]
20-
----
21-
<dependency>
22-
<groupId>com.vaadin</groupId>
23-
<artifactId>vaadin-charts-flow-svg-generator</artifactId>
24-
</dependency>
25-
----
26-
27-
.Node.js required
28-
[NOTE]
29-
Node.js must be installed for the generator to work.
30-
See the configuration instructions in <<{articles}/flow/configuration/development-mode/node-js#,Installing Node.js>>.
31-
32-
== Using the Generator
33-
34-
Create an instance of [classname]`SVGGenerator` and call the [methodname]`generate()` method, passing the chart's [classname]`Configuration` as an argument.
35-
The method returns a string with the SVG data of the chart.
36-
37-
.Close the generator
38-
WARNING: Remember to *close the generator when you're done using it*.
39-
It's recommended to use a try-with-resources block, so the generator is automatically closed.
40-
41-
[source,java]
42-
----
43-
Configuration configuration = new Configuration();
44-
// ...
45-
try (SVGGenerator generator = new SVGGenerator()) {
46-
String svg = generator.generate(configuration);
47-
} catch (IOException | InterruptedException ex) {
48-
// handle exceptions accordingly
49-
}
50-
----
51-
52-
== Customizing SVG Generation
53-
54-
You can customize some attributes of the resulting SVG.
55-
56-
The customizable options include the following:
57-
58-
* Width
59-
* Height
60-
* Theme
61-
* Language
62-
* Showing timeline
63-
* Executing JavaScript code (formatter functions)
64-
65-
Any customizations are handled with the [classname]`ExportOptions` class.
66-
67-
.CSS styling not supported
68-
NOTE: CSS styling isn't supported when exporting a chart as SVG.
69-
70-
[source,java]
71-
----
72-
Configuration configuration = new Configuration();
73-
// ...
74-
ExportOptions options = new ExportOptions();
75-
options.setWidth(800);
76-
options.setHeight(600);
77-
try (SVGGenerator generator = new SVGGenerator()) {
78-
String svg = generator.generate(configuration, options);
79-
} catch (IOException | InterruptedException ex) {
80-
// handle exceptions accordingly
81-
}
82-
----
83-
84-
=== Executing JavaScript Functions
85-
86-
You can execute functions from [classname]`Configuration` objects, for example, formatter functions.
87-
Executing functions must be explicitly enabled by setting the `executeFunctions` flag to `true`.
88-
89-
.Only Run Trusted Code
90-
CAUTION: Enabling this option allows JavaScript code to run on your server.
91-
Make sure to only allow safe and trusted code.
92-
93-
[source,java]
94-
----
95-
Configuration configuration = new Configuration();
96-
configuration.getyAxis().getLabels().setFormatter("function () { return this.value +' mm'; }");
97-
// ...
98-
ExportOptions options = new ExportOptions();
99-
options.setExecuteFunctions(true);
100-
try (SVGGenerator generator = new SVGGenerator()) {
101-
String svg = generator.generate(configuration, options);
102-
} catch (IOException | InterruptedException ex) {
103-
// handle exceptions accordingly
104-
}
105-
----
106-
107-
== Preview SVG (For Debugging)
108-
109-
You can add the generated SVG to a component to see the resulting image.
110-
111-
.For debugging purposes only
112-
CAUTION: Use the <<basic-use#,Chart>> component to render charts.
113-
This approach is only intended to help you debug your application.
114-
115-
[source,java]
116-
----
117-
Div div = new Div();
118-
Configuration configuration = new Configuration();
119-
// ...
120-
try (SVGGenerator generator = new SVGGenerator()) {
121-
String svg = generator.generate(configuration);
122-
div.getElement().setProperty("innerHTML", svg);
123-
} catch (IOException | InterruptedException ex) {
124-
// handle exceptions accordingly
125-
}
126-
add(div);
127-
----
128-
8+
The contents of this page have been moved to <<{articles}/components/charts/exporting#, Exporting Charts>> page.
1299

130-
[discussion-id]`C8510402-621D-437D-ADD9-E219BBDB532D`

0 commit comments

Comments
 (0)