ejemplo usando P"lotly Java Wrapper"

El Plotly Java Wrapper es una biblioteca no oficial que facilita la creación de gráficos de
Plotly en Java al generar archivos HTML de manera programática. Aunque el gráfico no se
muestra directamente en la interfaz de usuario de la aplicación de escritorio, puedes abrir el
archivo HTML en un navegador embebido (como JavaFX WebView o JxBrowser) o un
navegador externo.

Aquí tienes un ejemplo paso a paso de cómo usar el Plotly Java Wrapper para generar un
gráfico sencillo de barras en Java:

Paso 1: Agrega la Dependencia de Plotly Java Wrapper

Asegúrate de agregar la dependencia de Plotly Java Wrapper en tu archivo pom.xml si usas

Maven:

<dependency>

<groupId>tech.tablesaw</groupId>

<artifactId>tablesaw-jsplot</artifactId>

<version>0.38.2</version>

</dependency>

Nota: Esta biblioteca está basada en Tablesaw, que integra Plotly para visualización en aplicaciones
Java.

Paso 2: Genera el Gráfico de Barras

Aquí hay un ejemplo de código para crear un gráfico de barras usando Plotly Java Wrapper
y guardarlo como un archivo HTML.

import tech.tablesaw.api.Table;

import tech.tablesaw.plotly.Plot;

import tech.tablesaw.plotly.api.BarPlot;

import tech.tablesaw.plotly.components.Figure;

import java.io.File;

import java.io.FileWriter;
import java.io.IOException;

public class PlotlyJavaWrapperExample {

public static void main(String[] args) {

try {

// Crear datos de ejemplo

String[] countries = {"USA", "Canada", "UK", "Germany", "France"};

int[] population = {331, 38, 67, 83, 65};

// Crear tabla de datos con Tablesaw

Table data = Table.create("Población por País")

.addColumns(

tech.tablesaw.api.StringColumn.create("País", countries),

tech.tablesaw.api.IntColumn.create("Población (millones)", population)

);

// Crear gráfico de barras con Plotly Java Wrapper

Figure figure = BarPlot.create("Población por País", data, "País", "Población (millones)");

// Guardar el gráfico como archivo HTML

String outputFilePath = "bar_chart.html";

saveFigureAsHtml(figure, outputFilePath);

System.out.println("Gráfico generado en: " + new File(outputFilePath).getAbsolutePath());

} catch (IOException e) {

e.printStackTrace();

}
 private static void saveFigureAsHtml(Figure figure, String filePath) throws IOException {

// Convertir el gráfico a HTML y guardar en el archivo

try (FileWriter writer = new FileWriter(filePath)) {

writer.write(Plot.show(figure).html());

Paso 3: Ejecuta el Código

Este código:

1. Crea una tabla de datos para diferentes países y sus poblaciones.

2. Genera un gráfico de barras utilizando BarPlot de la biblioteca Tablesaw (que
incluye Plotly para la visualización).
3. Guarda el gráfico en un archivo bar_chart.html.

Después de ejecutar este código, deberías tener un archivo HTML con el gráfico de barras.
Puedes abrirlo en un navegador para ver el gráfico o usar un visor web embebido en Java
(como WebView en JavaFX).

Opcional: Mostrar el Gráfico en una Aplicación JavaFX

Para mostrar el archivo HTML generado en una aplicación de escritorio, usa JavaFX
WebView:

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.web.WebEngine;

import javafx.scene.web.WebView;

import javafx.stage.Stage;

import java.io.File;
public class DisplayChartApp extends Application {

@Override

public void start(Stage stage) {

WebView webView = new WebView();

WebEngine webEngine = webView.getEngine();

// Cargar el archivo HTML con el gráfico de Plotly.js generado

String filePath = "bar_chart.html";

File file = new File(filePath);

webEngine.load(file.toURI().toString());

Scene scene = new Scene(webView, 800, 600);

stage.setScene(scene);

stage.setTitle("Gráfico de Plotly.js en JavaFX");

stage.show();

public static void main(String[] args) {

launch(args);

Explicación de los Componentes

 Tablesaw: Ayuda a manejar y manipular los datos en tablas, simplificando la

integración con gráficos.
 Plotly Java Wrapper: Genera gráficos interactivos al construir archivos HTML
con Plotly.
 JavaFX WebView: Carga el archivo HTML para mostrar el gráfico en una
aplicación JavaFX.
Este método facilita el uso de Plotly en Java sin necesidad de manipular directamente
JavaScript y HTML, simplificando la creación de gráficos interactivos en aplicaciones de
escritorio.

ejemplo usando asJavaScript() con MultiPlot

l método asJavaScript() en tablesaw permite exportar gráficos como código JavaScript

en lugar de HTML completo, lo cual es útil para integraciones más personalizadas, como
cuando deseas insertar varios gráficos en un solo archivo HTML (usando MultiPlot).

Aquí tienes un ejemplo donde creamos dos gráficos con Tablesaw y Plotly, los
combinamos en un archivo HTML y los insertamos usando asJavaScript().

Paso 1: Configuración de Dependencias

Primero, asegúrate de tener la biblioteca Tablesaw en tu proyecto. Agrega esta dependencia

en tu archivo pom.xml:

<dependency>

<groupId>tech.tablesaw</groupId>

<artifactId>tablesaw-jsplot</artifactId>

<version>0.38.2</version>

</dependency>

Paso 2: Crear el Código Java

Aquí, vamos a:

1. Crear dos gráficos de barras diferentes.

2. Exportarlos como código JavaScript con asJavaScript().
3. Insertar ambos gráficos en un único archivo HTML.

import tech.tablesaw.api.Table;

import tech.tablesaw.plotly.Plot;

import tech.tablesaw.plotly.api.BarPlot;

import tech.tablesaw.plotly.components.Figure;
import java.io.FileWriter;

import java.io.IOException;

public class MultiPlotExample {

public static void main(String[] args) {

try {

// Crear datos para los dos gráficos

String[] countries = {"USA", "Canada", "UK", "Germany", "France"};

int[] population = {331, 38, 67, 83, 65};

int[] gdp = {21137, 1736, 2829, 3846, 2707}; // PIB en miles de millones de USD

// Crear tabla de datos con Tablesaw

Table data1 = Table.create("Población por País")

.addColumns(

tech.tablesaw.api.StringColumn.create("País", countries),

tech.tablesaw.api.IntColumn.create("Población (millones)", population)

);

Table data2 = Table.create("PIB por País")

.addColumns(

tech.tablesaw.api.StringColumn.create("País", countries),

tech.tablesaw.api.IntColumn.create("PIB (miles de millones de USD)", gdp)

);

// Crear gráficos de barras con Plotly

Figure populationFigure = BarPlot.create("Población por País", data1, "País", "Población

(millones)");

Figure gdpFigure = BarPlot.create("PIB por País", data2, "País", "PIB (miles de millones de
USD)");
 // Obtener los scripts JavaScript de los gráficos

String populationJs = Plot.show(populationFigure).asJavascript("populationPlot");

String gdpJs = Plot.show(gdpFigure).asJavascript("gdpPlot");

// Generar archivo HTML combinando ambos gráficos

createMultiPlotHtml(populationJs, gdpJs);

System.out.println("MultiPlot HTML generado en 'multiplot_chart.html'");

} catch (IOException e) {

e.printStackTrace();

private static void createMultiPlotHtml(String populationJs, String gdpJs) throws IOException {

String htmlContent = """

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>MultiPlot Example</title>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>

<body>

<h1>MultiPlot con Plotly.js</h1>

<div id="populationPlot" style="width:600px;height:400px;"></div>

<div id="gdpPlot" style="width:600px;height:400px;"></div>

 <script>

// Código JavaScript de cada gráfico

%s

%s

</script>

</body>

</html>

""".formatted(populationJs, gdpJs);

try (FileWriter writer = new FileWriter("multiplot_chart.html")) {

writer.write(htmlContent);

Explicación del Código

1. Preparación de Datos: Creamos dos conjuntos de datos (uno para población y otro
para PIB) y los almacenamos en tablas Tablesaw.
2. Creación de Gráficos: Generamos un gráfico de barras para la población y otro
para el PIB.
3. Exportación a JavaScript: Usamos asJavascript("elementId") para cada
gráfico. Este método genera el código JavaScript necesario para dibujar los gráficos
en un div específico de la página HTML.
4. Generación del HTML: Creamos el HTML principal, que incluye:
o Un script para cargar Plotly.js desde un CDN.
o Dos elementos <div> (populationPlot y gdpPlot) donde se mostrarán los
gráficos.
o Un script de JavaScript que incluye los códigos generados con
asJavaScript() para mostrar ambos gráficos en la misma página.

Resultado

Este código generará un archivo llamado multiplot_chart.html con ambos gráficos de

Plotly.js. Puedes abrirlo en un navegador o cargarlo en una aplicación de escritorio con un
visor como JavaFX WebView para ver el contenido integrado.
Codigo para generar la pagina web con un servlet

Para generar la página web con los gráficos usando un Servlet en Java, ajustaremos el
código para crear una clase servlet que genere el contenido HTML dinámicamente y lo
envíe al navegador del cliente.

Paso 1: Configuración de Dependencias

Asegúrate de incluir las siguientes dependencias en tu proyecto Maven:

<dependencies>

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>javax.servlet-api</artifactId>

<version>4.0.1</version>

<scope>provided</scope>

</dependency>

<dependency>

<groupId>tech.tablesaw</groupId>

<artifactId>tablesaw-jsplot</artifactId>

<version>0.38.2</version>

</dependency>

</dependencies>

Paso 2: Crear el Servlet

El siguiente código crea un servlet que genera dos gráficos (población y PIB) y los incluye
en la respuesta HTML usando asJavaScript().

import tech.tablesaw.api.Table;
import tech.tablesaw.plotly.Plot;

import tech.tablesaw.plotly.api.BarPlot;

import tech.tablesaw.plotly.components.Figure;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

@WebServlet("/multiPlotServlet")

public class MultiPlotServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {

// Generar datos y gráficos

String populationJs = generatePopulationChartJs();

String gdpJs = generateGdpChartJs();

// Configurar la respuesta y el contenido HTML

response.setContentType("text/html");

PrintWriter out = response.getWriter();

out.println("""

<!DOCTYPE html>

<html lang="en">

<head>
 <meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>MultiPlot Example</title>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>

<body>

<h1>MultiPlot con Plotly.js</h1>

<div id="populationPlot" style="width:600px;height:400px;"></div>

<div id="gdpPlot" style="width:600px;height:400px;"></div>

<script>

%s

%s

</script>

</body>

</html>

""".formatted(populationJs, gdpJs));

private String generatePopulationChartJs() {

// Datos de ejemplo para el gráfico de población

String[] countries = {"USA", "Canada", "UK", "Germany", "France"};

int[] population = {331, 38, 67, 83, 65};

// Crear la tabla de datos

Table data = Table.create("Población por País")

.addColumns(

tech.tablesaw.api.StringColumn.create("País", countries),

tech.tablesaw.api.IntColumn.create("Población (millones)", population)

 );

// Crear el gráfico y exportarlo a JavaScript

Figure figure = BarPlot.create("Población por País", data, "País", "Población (millones)");

return Plot.show(figure).asJavascript("populationPlot");

private String generateGdpChartJs() {

// Datos de ejemplo para el gráfico de PIB

String[] countries = {"USA", "Canada", "UK", "Germany", "France"};

int[] gdp = {21137, 1736, 2829, 3846, 2707};

// Crear la tabla de datos

Table data = Table.create("PIB por País")

.addColumns(

tech.tablesaw.api.StringColumn.create("País", countries),

tech.tablesaw.api.IntColumn.create("PIB (miles de millones de USD)", gdp)

);

// Crear el gráfico y exportarlo a JavaScript

Figure figure = BarPlot.create("PIB por País", data, "País", "PIB (miles de millones de USD)");

return Plot.show(figure).asJavascript("gdpPlot");

Explicación del Código

1. Definición del Servlet: El servlet se mapea a /multiPlotServlet mediante la

anotación @WebServlet.
2. Generación de Gráficos:
 o generatePopulationChartJs(): Crea el gráfico de población,
exportándolo como JavaScript para ser insertado en el HTML.
o generateGdpChartJs(): Crea el gráfico de PIB, también exportado como
JavaScript.
3. Respuesta HTML:
o El método doGet() configura la respuesta para enviar contenido HTML.
o El HTML generado incluye el código JavaScript de Plotly en la cabecera (a
través del CDN de Plotly.js) y dos <div> donde se insertan los gráficos.
o El contenido de populationJs y gdpJs se inserta dentro del bloque
<script>.

Paso 3: Despliegue y Prueba

1. Despliega el Servlet en un servidor compatible con Java EE (por ejemplo, Apache

Tomcat).
2. Accede a la URL http://localhost:8080/tu-app/multiPlotServlet.

Esto debería mostrar la página generada dinámicamente con ambos gráficos de Plotly.js
embebidos, renderizados mediante JavaScript.