Provide more information about Exporting Charts

articles/components/charts/exporting/index.adoc

@@ -0,0 +1,133 @@
+---
+title: Exporting
+page-title: Exporting Charts
+description: How to export charts using different methods.
+tab-title: SVG Generator
+layout: tabbed-page
+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.
+order: 10
+---
+
+
+[[charts.svggenerator]]
+= Exporting Charts as SVG
+
+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.
+
+== Installing
+
+Add the `vaadin-charts-flow-svg-generator` dependency to your project's [filename]`pom.xml` as follows:
+
+[source,xml]
+----
+<dependency>
+    <groupId>com.vaadin</groupId>
+    <artifactId>vaadin-charts-flow-svg-generator</artifactId>
+</dependency>
+----
+
+.Node.js Required
+[NOTE]
+Node.js must be installed for the generator to work.
+See the configuration instructions in <<{articles}/flow/configuration/development-mode/node-js#,Installing Node.js>>.
+
+== Using the Generator
+
+Create an instance of [classname]`SVGGenerator` and call the [methodname]`generate()` method, passing the chart's [classname]`Configuration` as an argument.
+The method returns a string with the SVG data of the chart.
+
+.Close The Generator
+[WARNING]
+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.
+
+[source,java]
+----
+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 [classname]`ExportOptions` class.
+
+.CSS Styling Not Supported
+[NOTE]
+CSS styling isn't supported when exporting a chart as SVG.
+
+[source,java]
+----
+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 [classname]`Configuration` objects, for example, formatter functions.
+Executing functions must be explicitly enabled by setting the `executeFunctions` flag to `true`.
+
+.Only Run Trusted Code
+[CAUTION]
+Enabling this option allows JavaScript code to run on your server.
+Make sure to only allow safe and trusted code.
+
+[source,java]
+----
+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.
+
+.For Debugging Purposes Only
+[CAUTION]
+Use the <<basic-use#,Chart>> component to render charts.
+This approach is only intended to help you debug your application.
+
+[source,java]
+----
+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);
+----

articles/components/charts/exporting/offline.adoc

@@ -0,0 +1,21 @@
+---
+title: Offline Module (Unsupported)
+page-title: Exporting Charts using offline exporting module
+description: How to export charts to different format supported by using Highcharts offline exporting module.
+meta-description: Provide configuration to export Vaadin Charts in various formats using only client-side implementation.
+order: 15
+---
+
+[[charts.offlinemodule]]
+= Exporting Charts Using the Offline Module
+
+Highcharts (the charting library used by Vaadin Charts) supports
+https://www.highcharts.com/docs/export-module/client-side-export[client-side export]
+through its offline-exporting module. This allows exporting chart images without sending any data to an external server.
+
+Vaadin Charts does not officially support the offline-exporting module yet. Support for this feature is being tracked in an
+https://github.com/vaadin/web-components/issues/441[existing GitHub issue]. You can add a 👍 [reaction](https://blog.github.com/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) to the issue to help the community and maintainers prioritize this issue.
+
+Until official support is available, you can follow the workaround described in
+https://github.com/vaadin/web-components/issues/441#issuecomment-3527965104[this GitHub comment]
+to implement the feature yourself.

articles/components/charts/exporting/remote-server.adoc

@@ -0,0 +1,51 @@
+---
+title: Remote Export Service
+page-title: Exporting Charts using a Remote Export Service
+description: How to export charts to different format supported by using a Remote Export Service.
+meta-description: Set up configuration to connect to a Remote Export Service in order to export charts in various formats.
+order: 10
+---
+
+[[charts.remoteexportservice]]
+= Exporting Charts using a Remote Export Service
+
+
+Vaadin Charts has a simple built-in export functionality that does the export in a remote export server. Vaadin Charts provides a default export service, but you can also configure your own.
+
+You can enable the built-in export function by setting `setExporting(true)` in the chart configuration.
+
+[source,java]
+----
+chart.getConfiguration().setExporting(true);
+----
+
+To configure it further, you can provide an `Exporting` object with custom settings.
+
+[source,java]
+----
+// Create the export configuration
+Exporting exporting = new Exporting(true);
+
+// Customize the file name of the download file
+exporting.setFilename("mychartfile");
+
+// Use the exporting configuration in the chart
+chart.getConfiguration().setExporting(exporting);
+----
+
+Once configured, the chart should have a menu with multiple export options visible.
+
+[[figure.charts.remoteexportservice.example]]
+.Menu Showing Chart Export Options
+[.fill.white]
+image::../img/charts-export-server-menu.png[]
+
+
+== Using Custom Export Service
+
+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:
+
+[source,java]
+----
+exporting.setUrl("https://my.own.server.com");
+----

articles/components/charts/svg-generator.adoc

@@ -1,130 +1,9 @@
 ---
 title: Exporting Charts as SVG
-page-title: How to export Vaadin Charts as SVG
-description: How to export charts to SVG format.
-meta-description: Create scalable and exportable SVG charts with Vaadin. Learn how to customize and integrate them into your applications effortlessly.
-order: 9
+section-nav: hidden
 ---
 
-
-[[charts.svggenerator]]
 = Exporting Charts as SVG
 
-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.
-
-== Installing
-
-Add the `vaadin-charts-flow-svg-generator` dependency to your project's [filename]`pom.xml` as follows:
-
-[source,xml]
-----
-<dependency>
-    <groupId>com.vaadin</groupId>
-    <artifactId>vaadin-charts-flow-svg-generator</artifactId>
-</dependency>
-----
-
-.Node.js required
-[NOTE]
-Node.js must be installed for the generator to work.
-See the configuration instructions in <<{articles}/flow/configuration/development-mode/node-js#,Installing Node.js>>.
-
-== Using the Generator
-
-Create an instance of [classname]`SVGGenerator` and call the [methodname]`generate()` method, passing the chart's [classname]`Configuration` as an argument.
-The method returns a string with the SVG data of the chart.
-
-.Close the generator
-WARNING: 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.
-
-[source,java]
-----
-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 [classname]`ExportOptions` class.
-
-.CSS styling not supported
-NOTE: CSS styling isn't supported when exporting a chart as SVG.
-
-[source,java]
-----
-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 [classname]`Configuration` objects, for example, formatter functions.
-Executing functions must be explicitly enabled by setting the `executeFunctions` flag to `true`.
-
-.Only Run Trusted Code
-CAUTION: Enabling this option allows JavaScript code to run on your server.
-Make sure to only allow safe and trusted code.
-
-[source,java]
-----
-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.
-
-.For debugging purposes only
-CAUTION: Use the <<basic-use#,Chart>> component to render charts.
-This approach is only intended to help you debug your application.
-
-[source,java]
-----
-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);
-----
-
+The contents of this page have been moved to <<{articles}/components/charts/exporting#, Exporting Charts>> page.
 
-[discussion-id]`C8510402-621D-437D-ADD9-E219BBDB532D`

articles/components/charts/usage-with-lit.adoc

@@ -3,7 +3,7 @@ title: Usage with Lit
 page-title: How to use Vaadin Charts with Lit
 description: Examples of using Charts with Lit.
 meta-description: Learn how to integrate and use Vaadin Charts component with Lit in Vaadin applications.
-order: 11
+order: 12
 ---
 
 

articles/components/charts/usage-with-react.adoc

@@ -3,7 +3,7 @@ title: Usage with React
 page-title: How to use Vaadin Charts component with React
 description: Examples of using Charts with React
 meta-description: Learn how to use Vaadin Charts with React for interactive data visualizations, featuring examples for Column, Area, Pie, and Polar charts
-order: 10
+order: 11
 ---