diff --git a/articles/components/charts/exporting/index.adoc b/articles/components/charts/exporting/index.adoc new file mode 100644 index 0000000000..8a8d8756ea --- /dev/null +++ b/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] +---- + + com.vaadin + vaadin-charts-flow-svg-generator + +---- + +.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 <> 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); +---- diff --git a/articles/components/charts/exporting/offline.adoc b/articles/components/charts/exporting/offline.adoc new file mode 100644 index 0000000000..5098b3a9f5 --- /dev/null +++ b/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. diff --git a/articles/components/charts/exporting/remote-server.adoc b/articles/components/charts/exporting/remote-server.adoc new file mode 100644 index 0000000000..9d255fe481 --- /dev/null +++ b/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"); +---- \ No newline at end of file diff --git a/articles/components/charts/img/charts-export-server-menu.png b/articles/components/charts/img/charts-export-server-menu.png new file mode 100644 index 0000000000..47731011e8 Binary files /dev/null and b/articles/components/charts/img/charts-export-server-menu.png differ diff --git a/articles/components/charts/svg-generator.adoc b/articles/components/charts/svg-generator.adoc index 1c697e778b..799302b8de 100644 --- a/articles/components/charts/svg-generator.adoc +++ b/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] ----- - - com.vaadin - vaadin-charts-flow-svg-generator - ----- - -.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 <> 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` diff --git a/articles/components/charts/usage-with-lit.adoc b/articles/components/charts/usage-with-lit.adoc index 29ee1e1f29..34d9ac451d 100644 --- a/articles/components/charts/usage-with-lit.adoc +++ b/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 --- diff --git a/articles/components/charts/usage-with-react.adoc b/articles/components/charts/usage-with-react.adoc index d7d6dca863..625fdc1177 100644 --- a/articles/components/charts/usage-with-react.adoc +++ b/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 ---