Gráficos de Google de GWT - Guía rápida
Google Chartses una biblioteca de gráficos puramente basada en JavaScript destinada a mejorar las aplicaciones web al agregar capacidad de gráficos interactivos. Admite una amplia gama de gráficos. Los gráficos se dibujan utilizando SVG en navegadores estándar como Chrome, Firefox, Safari, Internet Explorer (IE). En el IE 6 heredado, se usa VML para dibujar los gráficos.
Google Chart Java Modulees una biblioteca de código abierto basada en Java que proporciona visualizaciones de Google Charts elegantes y ricas en funciones dentro de una aplicación GWT y se puede utilizar junto con las bibliotecas de widgets de GWT. Hay capítulos que analizan todos los componentes básicos de Google Charts con ejemplos adecuados dentro de una aplicación GWT.
Caracteristicas
Las siguientes son las características más destacadas de la biblioteca de Google Charts.
Compatability - Funciona perfectamente en todos los principales navegadores y plataformas móviles como Android e iOS.
Multitouch Support- Soporta multitouch en plataformas basadas en pantalla táctil como Android e iOS. Ideal para iPhone / iPad y teléfonos inteligentes / tabletas basados en Android.
Free to Use - De código abierto y de uso gratuito para fines no comerciales.
Lightweight - biblioteca central loader.js, es una biblioteca extremadamente liviana.
Simple Configurations - Utiliza json para definir varias configuraciones de los gráficos y es muy fácil de aprender y usar.
Dynamic - Permite modificar el gráfico incluso después de su generación.
Multiple axes- No restringido a los ejes x, y. Soporta múltiples ejes en los gráficos.
Configurable tooltips- La información sobre herramientas aparece cuando un usuario se desplaza sobre cualquier punto de un gráfico. googlecharts proporciona un formateador incorporado de información sobre herramientas o un formateador de devolución de llamada para controlar la información sobre herramientas mediante programación.
DateTime support- Manejar la fecha y la hora especialmente. Proporciona numerosos controles incorporados sobre categorías de fechas.
Print - Imprimir gráfico usando la página web.
External data- Admite la carga de datos de forma dinámica desde el servidor. Proporciona control sobre los datos mediante funciones de devolución de llamada.
Text Rotation - Admite la rotación de etiquetas en cualquier dirección.
Tipos de gráficos admitidos
La biblioteca de Google Charts proporciona los siguientes tipos de gráficos:
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 | Line Charts Se utiliza para dibujar gráficos basados en líneas / splines. |
| 2 | Area Charts Se utiliza para dibujar gráficos de áreas. |
| 3 |
Pie Charts Se utiliza para dibujar gráficos circulares. |
| 4 |
Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Se utiliza para dibujar gráficos dispersos. |
| 5 |
Bubble Charts Se utiliza para dibujar gráficos basados en burbujas. |
| 6 |
Dynamic Charts Se utiliza para dibujar gráficos dinámicos donde el usuario puede modificar gráficos. |
| 7 |
Combinations Se utiliza para dibujar combinaciones de una variedad de gráficos. |
| 8 |
3D Charts Se utiliza para dibujar gráficos en 3D. |
| 9 |
Angular Gauges Se utiliza para dibujar gráficos de tipo velocímetro. |
| 10 |
Heat Maps Se usa para dibujar mapas de calor. |
| 11 |
Tree Maps Se utiliza para dibujar mapas de árboles. |
En los próximos capítulos, analizaremos cada tipo de gráficos mencionados anteriormente en detalle con ejemplos.
Licencia
Google Charts es de código abierto y de uso gratuito. Siga el enlace: Términos de servicio .
Este tutorial lo guiará sobre cómo preparar un entorno de desarrollo para comenzar su trabajo con Google Charts y GWT Framework. Este tutorial también le enseñará cómo configurar JDK, Tomcat y Eclipse en su máquina antes de configurar GWT Framework -
Requisitos del sistema
GWT requiere JDK 1.6 o superior, por lo que el primer requisito es tener JDK instalado en su máquina.
| JDK | 1.6 o superior. |
|---|---|
| Memoria | ningún requisito mínimo. |
| Espacio del disco | ningún requisito mínimo. |
| Sistema operativo | ningún requisito mínimo. |
Siga los pasos dados para configurar su entorno para comenzar con el desarrollo de aplicaciones GWT.
Paso 1: verificar la instalación de Java en su máquina
Ahora abra la consola y ejecute el siguiente comando de Java.
| SO | Tarea | Mando |
|---|---|---|
| Windows | Abrir consola de comandos | c: \> java -version |
| Linux | Terminal de comando abierto | $ java -version |
| Mac | Terminal abierta | máquina: ~ joseph $ java -version |
Verifiquemos la salida para todos los sistemas operativos.
| No Señor. | SO y salida generada |
|---|---|
| 1 |
Windows versión de Java "1.6.0_21" Entorno de ejecución Java (TM) SE (compilación 1.6.0_21-b07) VM de cliente Java HotSpot (TM) (compilación 17.0-b17, modo mixto, uso compartido) |
| 2 |
Linux versión de Java "1.6.0_21" Entorno de ejecución Java (TM) SE (compilación 1.6.0_21-b07) Ava HotSpot (TM) Client VM (compilación 17.0-b17, modo mixto, uso compartido) |
| 3 |
Mac versión de Java "1.6.0_21" Entorno de ejecución Java (TM) SE (compilación 1.6.0_21-b07) Servidor VM Java HotSpot (TM) de 64 bits (compilación 17.0-b17, modo mixto, uso compartido) |
Paso 2: configuración del kit de desarrollo de Java (JDK)
Si no tiene Java instalado, puede instalar Java Software Development Kit (SDK) desde el sitio Java de Oracle: Descargas de Java SE . Encontrará instrucciones para instalar JDK en archivos descargados, siga las instrucciones dadas para instalar y configurar la instalación. Finalmente, configure las variables de entorno PATH y JAVA_HOME para hacer referencia al directorio que contiene java y javac, normalmente java_install_dir / bin y java_install_dir respectivamente.
Selecciona el JAVA_HOMEvariable de entorno para apuntar a la ubicación del directorio base donde está instalado Java en su máquina. Por ejemplo
| No Señor. | SO y salida |
|---|---|
| 1 |
Windows Establezca la variable de entorno JAVA_HOME en C: \ Archivos de programa \ Java \ jdk1.6.0_21 |
| 2 |
Linux exportar JAVA_HOME = / usr / local / java-current |
| 3 |
Mac exportar JAVA_HOME = / Library / Java / Home |
Agregue la ubicación del compilador de Java a la ruta del sistema.
| No Señor. | SO y salida |
|---|---|
| 1 |
Windows Agregue la cadena;% JAVA_HOME% \ bin al final de la variable del sistema, Ruta. |
| 2 |
Linux export PATH = $ PATH: $ JAVA_HOME / bin / |
| 3 |
Mac no requerido |
Alternativamente, si usa un entorno de desarrollo integrado (IDE) como Borland JBuilder, Eclipse, IntelliJ IDEA o Sun ONE Studio, compile y ejecute un programa simple para confirmar que el IDE sabe dónde instaló Java; de lo contrario, realice la configuración adecuada como se indica en el documento. del IDE.
Paso 3: configurar el IDE de Eclipse
Todos los ejemplos de este tutorial se han escrito utilizando Eclipse IDE. Por lo tanto, le sugiero que tenga instalada la última versión de Eclipse en su máquina según su sistema operativo.
Para instalar Eclipse IDE, descargue los últimos binarios de Eclipse desde https://www.eclipse.org/downloads/. Una vez que descargó la instalación, descomprima la distribución binaria en una ubicación conveniente. Por ejemplo, en C: \ eclipse en Windows, o / usr / local / eclipse en Linux / Unix y finalmente configure la variable PATH de manera apropiada.
Eclipse se puede iniciar ejecutando los siguientes comandos en la máquina con Windows, o simplemente puede hacer doble clic en eclipse.exe
%C:\eclipse\eclipse.exeEclipse se puede iniciar ejecutando los siguientes comandos en una máquina Unix (Solaris, Linux, etc.):
$/usr/local/eclipse/eclipseDespués de un inicio exitoso, si todo está bien, debería mostrar el resultado
Paso 4: Instale el SDK y el complemento de GWT para Eclipse
Siga las instrucciones dadas en el enlace Complemento para Eclipse (incluidos los SDK) para instalar GWT SDK y Complemento para la versión de Eclipse instalada en su máquina.
Después de una configuración exitosa para el complemento GWT, si todo está bien, debería mostrar la siguiente pantalla con Google icon marcado con un rectángulo rojo.
Paso 5: Instale Google Charts
Descargue el último jar de Google Charts de su página de repositorio MVN y agréguelo a la ruta de clases del proyecto.
Agregue la siguiente entrada en el archivo <nombre-proyecto> .gwt.xml
<inherits name = "com.googlecode.gwt.charts.Charts"/>En este capítulo, mostraremos la configuración requerida para dibujar un gráfico usando la API de Google Charts en GWT.
Paso 1: Cree la aplicación GWT
Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación . |
| 2 | Modifique HelloWorld.gwt.xml , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para verificar el resultado de la lógica implementada. |
A continuación se muestra el contenido del descriptor de módulo modificado src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<inherits name = 'com.google.gwt.user.User'/>
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<inherits name="com.googlecode.gwt.charts.Charts"/>
<source path = 'client'/>
<source path = 'shared'/>
</module>A continuación se muestra el contenido del archivo de host HTML modificado war/HelloWorld.html.
<html>
<head>
<title>GWT Highcharts Showcase</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</head>
<body>
</body>
</html>Veremos el HelloWorld.java actualizado al final después de comprender las configuraciones.
Paso 2: crear configuraciones
Cargar biblioteca y crear gráfico
Cargue la biblioteca usando ChartLoader y luego cree el gráfico.
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
PieChart chart = new PieChart();
}
});Tabla de datos
Configure los detalles creando una tabla de datos.
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Browser");
data.addColumn(ColumnType.NUMBER, "Percentage");
data.addRow("Firefox", 45.0);
data.addRow("IE", 26.8);
data.addRow("Chrome", 12.8);
data.addRow("Safari", 8.5);
data.addRow("Opera", 6.2);
data.addRow("Others", 0.7);
// Draw the chart
chart.draw(data);Talla
Configure el ancho y el alto que se establecerán.
chart.setWidth("700px");
chart.setHeight("700px");Paso 3: agregue el gráfico al panel principal.
Estamos agregando el gráfico al panel raíz.
RootPanel.get().add(chart);Ejemplo
Considere el siguiente ejemplo para comprender mejor la sintaxis de configuración:
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.PieChart;
public class HelloWorld implements EntryPoint {
private PieChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new PieChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Browser");
data.addColumn(ColumnType.NUMBER, "Percentage");
data.addRow("Firefox", 45.0);
data.addRow("IE", 26.8);
data.addRow("Chrome", 12.8);
data.addRow("Safari", 8.5);
data.addRow("Opera", 6.2);
data.addRow("Others", 0.7);
// Draw the chart
chart.draw(data);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Resultado
Verifique el resultado.
Los gráficos de área se utilizan para dibujar gráficos basados en áreas. En esta sección, analizaremos los siguientes tipos de gráficos basados en áreas.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Área básica
Gráfico de área básico |
| 2 |
Área con valores negativos
Gráfico de área con valores negativos. |
| 3 |
Área apilada
Gráfico que tiene áreas apiladas una sobre otra. |
| 4 |
Área con puntos faltantes
Gráfico con puntos faltantes en los datos. |
Los gráficos de barras se utilizan para dibujar gráficos basados en barras. En esta sección, analizaremos los siguientes tipos de gráficos basados en barras.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Barra básica
Gráfico de barras básico |
| 2 |
Gráfico de barras agrupadas
Gráfico de barras agrupadas. |
| 3 |
Barra apilada
Gráfico de barras con barras apiladas unas sobre otras. |
| 4 |
Barra negativa
Gráfico de barras con pila negativa. |
| 5 |
Gráfico de barras de diferencia
Gráfico de barras que muestra las diferencias. |
Los gráficos de burbujas se utilizan para dibujar gráficos basados en burbujas. En esta sección, analizaremos los siguientes tipos de gráficos basados en burbujas.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Burbuja básica
Gráfico de burbujas básico. |
| 2 |
Gráfico de burbujas con etiquetas de datos
Gráfico de burbujas con etiquetas de datos. |
Los gráficos de velas se utilizan para mostrar el valor de apertura y cierre sobre una variación de valor y normalmente se utilizan para representar acciones. En esta sección, analizaremos los siguientes tipos de gráficos basados en velas.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Candelabro básico
Gráfico de velas básico. |
| 2 |
Candelero con colores personalizados
Gráfico de velas personalizado. |
Los gráficos de columnas se utilizan para dibujar gráficos basados en columnas. En esta sección vamos a discutir los siguientes tipos de gráficos basados en columnas.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Columna básica
Gráfico de columnas básico |
| 2 |
Gráfico de columnas agrupadas
Gráfico de columnas agrupadas. |
| 3 |
Columna apilada
Gráfico de columnas que tiene columnas apiladas unas sobre otras. |
| 4 |
Columna apilada negativa
Gráfico de columnas con pila negativa. |
| 5 |
Gráfico de columnas de diferencia
Gráfico de columnas que muestra las diferencias. |
El gráfico de combinación ayuda a representar cada serie como un tipo de marcador diferente de la siguiente lista: línea, área, barras, velas y área escalonada. Para asignar un tipo de marcador predeterminado para la serie, use la propiedad seriesType. La propiedad de la serie se utilizará para especificar las propiedades de cada serie de forma individual. A continuación se muestra un ejemplo de un gráfico de columnas que muestra las diferencias.
Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Google Charts . Ahora, veamos un ejemplo de un gráfico de columnas que muestra diferencias.
Configuraciones
Hemos usado ComboChart clase para mostrar una tabla combinada.
// Combination chart
ComboChart chart = new ComboChart();Ejemplo
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ComboChart;
import com.googlecode.gwt.charts.client.corechart.ComboChartOptions;
import com.googlecode.gwt.charts.client.corechart.ComboChartSeries;
import com.googlecode.gwt.charts.client.options.HAxis;
import com.googlecode.gwt.charts.client.options.SeriesType;
import com.googlecode.gwt.charts.client.options.VAxis;
public class HelloWorld implements EntryPoint {
private ComboChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new ComboChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Fruits");
data.addColumn(ColumnType.NUMBER, "Jane");
data.addColumn(ColumnType.NUMBER, "Jone");
data.addColumn(ColumnType.NUMBER, "Average");
data.addRow("Apples", 3, 2, 2.5);
data.addRow("Oranges",2, 3, 2.5);
data.addRow("Pears", 1, 5, 3);
data.addRow("Bananas", 3, 9, 6);
data.addRow("Plums", 4, 2, 3);
// Set options
ComboChartOptions options = ComboChartOptions.create();
options.setTitle("Fruits distribution");
options.setHAxis(HAxis.create("Person"));
options.setVAxis(VAxis.create("Fruits"));
options.setSeriesType(SeriesType.BARS);
ComboChartSeries lineSeries = ComboChartSeries.create();
lineSeries.setType(SeriesType.LINE);
options.setSeries(2,lineSeries);
// Draw the chart
chart.draw(data,options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Resultado
Verifique el resultado.
Un histograma es un gráfico que agrupa datos numéricos en depósitos y muestra los depósitos como columnas segmentadas. Se utilizan para representar la distribución de un conjunto de datos según la frecuencia con la que los valores caen en rangos. Google Charts elige automáticamente la cantidad de depósitos. Todos los depósitos tienen el mismo ancho y una altura proporcional al número de puntos de datos del depósito. Los histogramas son similares a los gráficos de columnas en otros aspectos. En esta sección, analizaremos los siguientes tipos de gráficos basados en histogramas.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Histograma básico
Gráfico de histograma básico. |
| 2 |
Control de color
Color personalizado del gráfico de histrograma. |
| 3 |
Control de cubos
Cubos personalizados de gráfico de histrograma. |
| 4 |
Serie múltiple
Gráfico de histrograma que tiene varias series. |
Los gráficos de líneas se utilizan para dibujar gráficos basados en líneas. En esta sección, analizaremos los siguientes tipos de gráficos basados en líneas.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Linea basica
Gráfico de líneas básico. |
| 2 |
Con puntos visibles
Gráfico con puntos de datos visibles. |
| 3 |
Color de fondo personalizable
Gráfico con color de fondo personalizado. |
| 4 |
Color de línea personalizable
Gráfico con color de línea personalizado. |
| 5 |
Etiquetas de marca y eje personalizables
Gráfico con etiquetas personalizadas de ejes y ticks. |
| 6 |
Punto de mira
Gráficos de líneas que muestran puntos de mira en el punto de datos en la selección. |
| 7 |
Estilo de línea personalizable
Gráfico con color de línea personalizado. |
| 8 |
Gráficos de líneas con líneas curvas
Gráfico con líneas curvas suaves. |
Un gráfico de mapas de Google utiliza la API de Google Maps para mostrar el mapa. Los valores de los datos se muestran como marcadores en el mapa. Los valores de los datos pueden ser coordenadas (pares lat-long) o direcciones reales. El mapa se escalará en consecuencia para que incluya todos los puntos identificados.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Mapa básico
Mapa básico de Google. |
| 2 |
Mapa usando latitud / longitud
Mapa con ubicaciones especificadas mediante latitud y longitud. |
A continuación se muestra un ejemplo de organigrama.
El organigrama ayuda a representar una jerarquía de nodos, que se utiliza para representar las relaciones superiores / subordinadas en una organización. Por ejemplo, un árbol genealógico es un tipo de organigrama. Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Google Charts . Ahora, veamos un ejemplo de organigrama.
Configuraciones
Hemos usado OrgChart clase para mostrar un organigrama.
// Organization chart
OrgChart chart = new OrgChart();Ejemplo
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.format.PatternFormat;
import com.googlecode.gwt.charts.client.orgchart.OrgChart;
import com.googlecode.gwt.charts.client.orgchart.OrgChartOptions;
public class HelloWorld implements EntryPoint {
private OrgChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.ORGCHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new OrgChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Name");
dataTable.addColumn(ColumnType.STRING, "Manager");
dataTable.addColumn(ColumnType.STRING, "ToolTip");
dataTable.addRows(5);
dataTable.setValue(0, 0, "Mike");
dataTable.setValue(0, 1, "");
dataTable.setValue(0, 2, "The President");
dataTable.setValue(1, 0, "Jim");
dataTable.setValue(1, 1, "Mike");
dataTable.setValue(1, 2, "VP");
dataTable.setValue(2, 0, "Alice");
dataTable.setValue(2, 1, "Mike");
dataTable.setValue(2, 2, "");
dataTable.setValue(3, 0, "Bob");
dataTable.setValue(3, 1, "Jim");
dataTable.setValue(3, 2, "Bob Sponge");
dataTable.setValue(4, 0, "Carol");
dataTable.setValue(4, 1, "Bob");
dataTable.setValue(4, 2, "");
PatternFormat format = PatternFormat.create("{0} {1}");
format.format(dataTable, 0, 2);
// Set options
OrgChartOptions options = OrgChartOptions.create();
options.setAllowHtml(true);
// Draw the chart
chart.draw(dataTable, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Resultado
Verifique el resultado.
Los gráficos circulares se utilizan para dibujar gráficos circulares. En esta sección, analizaremos los siguientes tipos de gráficos circulares.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Pastel básico
Gráfico circular básico. |
| 2 |
Gráfico de anillos
Gráfico de anillos. |
| 3 |
Gráfico circular 3D
Gráfico circular 3D. |
| 4 |
Gráfico circular con rebanadas explosionadas
Gráfico circular con rebanadas explosionadas. |
Un gráfico de Sankey es una herramienta de visualización y se utiliza para representar un flujo de un conjunto de valores a otro. Los objetos conectados se denominan nodos y las conexiones se denominan enlaces. Los Sankeys se utilizan para mostrar un mapeo de muchos a muchos entre dos dominios o múltiples rutas a través de un conjunto de etapas.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Gráfico básico de Sankey
Gráfico básico de Sankey. |
| 2 |
Gráfico de Sankey multinivel
Gráfico Sankey multinivel. |
| 3 |
Personalización del gráfico de Sankey
Gráfico de Sankey personalizado. |
A continuación se muestra un ejemplo de un gráfico de dispersión.
Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Google Charts . Ahora, veamos un ejemplo de un gráfico de dispersión.
Configuraciones
Hemos usado ScatterChart clase para mostrar un gráfico de dispersión.
ScatterChart chart = new ScatterChart();Ejemplo
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ScatterChart;
import com.googlecode.gwt.charts.client.corechart.ScatterChartOptions;
public class HelloWorld implements EntryPoint {
private ScatterChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new ScatterChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.NUMBER, "Age");
data.addColumn(ColumnType.NUMBER, "Weight");
data.addRow(8,12);
data.addRow(4, 5.5);
data.addRow(11,14);
data.addRow(4,5);
data.addRow(3,3.5);
data.addRow(6.5,7);
ScatterChartOptions options = ScatterChartOptions.create();
options.setTitle("Age vs Weight");
options.setLegend(null);
// Draw the chart
chart.draw(data, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Resultado
Verifique el resultado.
Un gráfico de áreas escalonado es un gráfico de áreas basado en pasos. Vamos a discutir los siguientes tipos de gráficos de áreas escalonadas.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 |
Gráfico básico escalonado
Gráfico básico de áreas escalonadas. |
| 2 |
Gráfico escalonado apilado
Gráfico de áreas escalonadas apiladas. |
El gráfico de tabla ayuda a representar una tabla que se puede ordenar y paginar. Las celdas de la tabla se pueden formatear utilizando cadenas de formato o insertando HTML directamente como valores de celda. Los valores numéricos están alineados a la derecha de forma predeterminada; Los valores booleanos se muestran como marcas de verificación o cruces. Los usuarios pueden seleccionar filas individuales con el teclado o el mouse. Los encabezados de columna se pueden utilizar para ordenar. La fila del encabezado permanece fija durante el desplazamiento. La tabla dispara eventos correspondientes a la interacción del usuario.
Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Google Charts . Ahora, veamos un ejemplo de un gráfico de tabla.
Configuraciones
Hemos usado Table clase para mostrar un gráfico de tabla.
Table chart = new Chart();Ejemplo
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.table.Table;
import com.googlecode.gwt.charts.client.table.TableOptions;
public class HelloWorld implements EntryPoint {
private Table chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.TABLE);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new Table();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Name");
dataTable.addColumn(ColumnType.NUMBER, "Salary");
dataTable.addColumn(ColumnType.BOOLEAN, "Full Time Employee");
dataTable.addRows(4);
dataTable.setCell(0, 0, "Mike");
dataTable.setCell(0, 1, 10000, "$10,000");
dataTable.setCell(0, 2, true);
dataTable.setCell(1, 0, "Jim");
dataTable.setCell(1, 1, 8000, "$8,000");
dataTable.setCell(1, 2, false);
dataTable.setCell(2, 0, "Alice");
dataTable.setCell(2, 1, 12500, "$12,500");
dataTable.setCell(2, 2, true);
dataTable.setCell(3, 0, "Bob");
dataTable.setCell(3, 1, 7000, "$7,000");
dataTable.setCell(3, 2, true);
TableOptions options = TableOptions.create();
options.setAlternatingRowStyle(true);
options.setShowRowNumber(true);
// Draw the chart
chart.draw(dataTable, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Resultado
Verifique el resultado.
TreeMap es una representación visual de un árbol de datos, donde cada nodo puede tener cero o más hijos y un padre (excepto la raíz). Cada nodo se muestra como un rectángulo, se puede dimensionar y colorear según los valores que le asignemos. Los tamaños y colores se valoran en relación con todos los demás nodos del gráfico. A continuación se muestra un ejemplo de un gráfico de mapa de árbol.
Ya hemos visto las configuraciones utilizadas para dibujar un gráfico en el capítulo Sintaxis de configuración de Google Charts . Ahora, veamos un ejemplo de un gráfico TreeMap.
Configuraciones
Hemos usado TreeMap class para mostrar un gráfico TreeMap.
TreeMap chart = new TreeMap();Ejemplo
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.treemap.TreeMap;
import com.googlecode.gwt.charts.client.treemap.TreeMapOptions;
public class HelloWorld implements EntryPoint {
private TreeMap chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.TREEMAP);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new TreeMap();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Location");
dataTable.addColumn(ColumnType.STRING, "Parent");
dataTable.addColumn(ColumnType.NUMBER, "Market trade volume (size)");
dataTable.addColumn(ColumnType.NUMBER, "Market increase/decrease (color)");
dataTable.addRow("Global",null,0,0);
dataTable.addRow("America","Global",0,0);
dataTable.addRow("Europe","Global",0,0);
dataTable.addRow("Asia","Global",0,0);
dataTable.addRow("Australia","Global",0,0);
dataTable.addRow("Africa","Global",0,0);
dataTable.addRow("USA","America",52,31);
dataTable.addRow("Mexico","America",24,12);
dataTable.addRow("Canada","America",16,-23);
dataTable.addRow("France","Europe",42,-11);
dataTable.addRow("Germany","Europe",31,-2);
dataTable.addRow("Sweden","Europe",22,-13);
dataTable.addRow("China","Asia",36,4);
dataTable.addRow("Japan","Asia",20,-12);
dataTable.addRow("India","Asia",40,63);
dataTable.addRow("Egypt","Africa",21,0);
dataTable.addRow("Congo","Africa",10,12);
dataTable.addRow("Zaire","Africa",8,10);
// Set options
TreeMapOptions options = TreeMapOptions.create();
options.setMinColor("#ff7777");
options.setMidColor("#ffff77");
options.setMaxColor("#77ff77");
options.setHeaderHeight(15);
options.setShowScale(true);
// Draw the chart
chart.draw(dataTable, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Resultado
Verifique el resultado.
