Saltar al contenido principal

Google Charts

Abrir en ChatGPT
Sombra google-chart 23.06
Java API

El componente GoogleChart integra la biblioteca de Google Charts en webforJ, dándote acceso a tipos de gráficos como barras, líneas, pasteles, geo, y más. Los gráficos se configuran con Java utilizando un tipo, un conjunto de datos y un mapa de opciones que controla la apariencia y el comportamiento.

Creando un gráfico​

Importando Google Charts

Para usar la clase GoogleChart en tu aplicación, utiliza el siguiente XML en tu archivo POM:

<dependency>
  <groupId>com.webforj</groupId>
  <artifactId>webforj-googlecharts</artifactId>
  <version>${webforj.version}</version>
</dependency>

Para crear un gráfico, especifica un tipo de gráfico, configura sus opciones visuales y proporciona los datos a mostrar.

Este ejemplo crea un gráfico geo que mapea datos de ingresos en diferentes países, con colores personalizados, posición de la leyenda y tamaño del área del gráfico:

Mostrar Código

Tipos de gráficos​

El complemento GoogleChart ofrece una amplia variedad de tipos de gráficos para satisfacer diversos requerimientos de visualización de datos. Seleccionar el tipo de gráfico apropiado es esencial para comunicar efectivamente la historia de los datos. Consulta la galería a continuación para ver ejemplos de gráficos comunes que pueden ser utilizados en una aplicación webforJ.

Mostrar Código

Opciones​

El complemento GoogleChart permite una amplia personalización a través de una variedad de opciones. Estas opciones te permiten adaptar la apariencia y funcionalidad de tus gráficos para ajustarse a las necesidades de tu aplicación. Las opciones se pasan como un Map<String, Object> al método setOptions() del gráfico.

Aquí hay un ejemplo de cómo establecer las opciones de un gráfico:

Map<String, Object> options = new HashMap<>();
options.put("title", "Ingresos Mensuales");
options.put("backgroundColor", "#EFEFEF");

// Aplicar las opciones al gráfico
chart.setOptions(options);

Para más información sobre las opciones disponibles para gráficos específicos, consulta la referencia de la API de Visualización de Google (Galería de Gráficos).

Estableciendo datos​

Visualizar datos con GoogleChart requiere estructurar y establecer los datos correctamente. Esta guía te llevará a través de la preparación de tus datos y su aplicación a tus gráficos.

Configuración básica de datos​

La forma más sencilla de definir los datos es utilizando List<Object>, donde cada fila es una lista de valores.

List<Object> data = new ArrayList<>();
data.add(Arrays.asList("Tarea", "Horas por Día"));
data.add(Arrays.asList("Trabajo", 11));
data.add(Arrays.asList("Comer", 2));
data.add(Arrays.asList("Desplazamiento", 2));
data.add(Arrays.asList("Ver TV", 2));
data.add(Arrays.asList("Dormir", 7));
chart.setData(data);

Usando mapas para estructuras más complejas​

Para estructuras de datos más complejas, puedes usar mapas para representar filas y luego convertirlas al formato requerido.

List<Object> data = new ArrayList<>();

// Fila de encabezado
data.add(Arrays.asList("País", "Ingresos"));

// Filas de datos
Map<String, Object> row1 = Map.of("País", "Alemania", "Ingresos", 1000);
Map<String, Object> row2 = Map.of("País", "Estados Unidos", "Ingresos", 1170);
Map<String, Object> row3 = Map.of("País", "Brasil", "Ingresos", 660);

data.add(new ArrayList<>(row1.values()));
data.add(new ArrayList<>(row2.values()));
data.add(new ArrayList<>(row3.values()));

chart.setData(data);

Una vez que los datos están preparados, se pueden aplicar al GoogleChart utilizando el método setData.

Mostrar Código

Cargando datos y opciones desde JSON​

También puedes cargar datos y opciones desde archivos JSON utilizando Gson para una gestión más fácil. Este enfoque ayuda a mantener tus datos y opciones organizados y fáciles de actualizar.

List<Object> data = new ArrayList<>();
data.add(Arrays.asList("Año", "Ventas", "Gastos"));
data.add(Arrays.asList("2013", 1000, 400));
data.add(Arrays.asList("2014", 1170, 460));
data.add(Arrays.asList("2015", 660, null)); 
data.add(Arrays.asList("2016", 1030, 540));
chart.setData(data);

Map<String, Object> options = new Gson().fromJson(
  Assets.contentOf("options.json"),
  new TypeToken<Map<String, Object>>() {}.getType()
);
chart.setOptions(options);

Actualizando visuales del gráfico​

Actualizar o refrescar la apariencia de tus gráficos en respuesta a cambios de datos, interacciones del usuario o ajustes de opciones visuales es sencillo con el método redraw(). Este método asegura que tus gráficos permanezcan precisos y visualmente alineados con los datos subyacentes o cualquier modificación a sus configuraciones.

Invoca redraw() en escenarios como:

  • Después de Modificaciones de Datos: Asegura que el gráfico refleje cualquier actualización en su fuente de datos.
  • Al Cambiar Opciones: Aplica nuevos estilos o cambios de configuración al gráfico.
  • Para Ajustes Responsivos: Ajusta el diseño o tamaño del gráfico cuando cambian las dimensiones del contenedor, asegurando una visualización óptima en todos los dispositivos.
Mostrar Código

Exportando gráficos como imágenes​

El método getImageUri() proporciona una forma de exportar tus Gráficos de Google como imágenes PNG codificadas en base64. Este método es particularmente útil para compartir gráficos fuera del entorno web, integrándolos en correos electrónicos o documentos, o simplemente con fines de archivo.

Llama a getImageUri() en tu instancia de gráfico después de que el gráfico haya sido completamente renderizado. Típicamente, este método se usa dentro de un listener de evento "listo" para asegurar que el gráfico esté listo para la exportación:

chart.addReadyListener(e -> {
  String imageUri = chart.getImageUri();
  // Ahora puedes usar el imageUri, por ejemplo, como el atributo src de una etiqueta img
});

GoogleChartSelectedEvent​

El GoogleChartSelectedEvent se activa cada vez que un usuario selecciona un punto de datos o segmento en un componente de Gráfico de Google. Este evento permite la interacción con los datos seleccionados del gráfico, proporcionando detalles sobre qué se seleccionó. El evento se puede escuchar utilizando el método addSelectedListener() en la instancia de GoogleChart.

El GoogleChartSelectedEvent es útil en aplicaciones donde la interacción del usuario con el gráfico es necesaria.

GoogleChart chart = new GoogleChart(GoogleChart.Type.BAR);

// Agregar el listener de selección al gráfico
chart.addSelectedListener(event -> {
  // Obtener la selección
  List<Object> selection = chart.getSelection();
  
  // Manejar el evento seleccionado
  if (!selection.isEmpty()) {
    System.out.println("Fila Seleccionada: " + selection.get(0));
    // Procesamiento adicional basado en la fila/columna de la selección
  }
});

Carga útil​

El GoogleChartSelectedEvent proporciona acceso a los datos de selección, que pueden ser recuperados utilizando el método getSelection() en el objeto gráfico. Este método devuelve una lista de objetos, donde cada objeto contiene las siguientes propiedades:

  • row: El índice de la fila en la tabla de datos del gráfico que fue seleccionada.
  • column: El índice de la columna en la tabla de datos, que es opcional y se aplica a gráficos que permiten la selección de celdas individuales, como un gráfico de tabla.

Para gráficos como gráficos de pasteles o gráficos de barras, solo se suele proporcionar row, indicando el punto de datos seleccionado.

Aquí hay un ejemplo de carga útil:

[
  {
    "row": 3,  // El índice de la fila seleccionada en los datos
    "column": 2  // (Opcional) El índice de la columna seleccionada
  }
]
Seleccionando Múltiples Puntos de Datos

Si el usuario selecciona múltiples puntos de datos, el método getSelection() devolverá un arreglo de objetos, cada uno representando un elemento seleccionado. La carga útil puede variar según el tipo de gráfico y la interacción que realice el usuario.