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.exe

Eclipse se puede iniciar ejecutando los siguientes comandos en una máquina Unix (Solaris, Linux, etc.):

$/usr/local/eclipse/eclipse

Despué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.