Grafici Google GWT - Guida rapida

Google Chartsè una libreria di grafici basata su JavaScript puro pensata per migliorare le applicazioni web aggiungendo funzionalità di creazione di grafici interattivi. Supporta un'ampia gamma di grafici. I grafici vengono disegnati utilizzando SVG nei browser standard come Chrome, Firefox, Safari, Internet Explorer (IE). Nella versione precedente di IE 6, VML viene utilizzato per disegnare la grafica.

Google Chart Java Moduleè una libreria open source basata su java che fornisce visualizzazioni di Google Charts eleganti e ricche di funzionalità all'interno di un'applicazione GWT e può essere utilizzata insieme alle librerie di widget GWT. Ci sono capitoli che discutono tutti i componenti di base di Google Charts con esempi appropriati all'interno di un'applicazione GWT.

Caratteristiche

Di seguito sono riportate le caratteristiche salienti della libreria di Google Charts.

• Compatability - Funziona perfettamente su tutti i principali browser e piattaforme mobili come Android e iOS.

• Multitouch Support- Supporta il multitouch su piattaforme basate su touch screen come Android e iOS. Ideale per iPhone / iPad e smartphone / tablet basati su Android.

• Free to Use - Open source ed è gratuito da usare per scopi non commerciali.

• Lightweight - la libreria principale loader.js, è una libreria estremamente leggera.

• Simple Configurations - Utilizza json per definire varie configurazioni dei grafici e molto facile da imparare e da usare.

• Dynamic - Permette di modificare il grafico anche dopo la generazione del grafico.

• Multiple axes- Non limitato agli assi x, y. Supporta più assi sui grafici.

• Configurable tooltips- Il suggerimento viene visualizzato quando un utente passa il mouse su un punto qualsiasi di un grafico. googlecharts fornisce un formattatore integrato di tooltip o un formattatore callback per controllare il tooltip in modo programmatico.

• DateTime support- Gestisci la data e l'ora in modo speciale. Fornisce numerosi controlli integrati su categorie datate.

• Print - Stampa grafico utilizzando la pagina web.

• External data- Supporta il caricamento dinamico dei dati dal server. Fornisce il controllo sui dati utilizzando le funzioni di callback.

• Text Rotation - Supporta la rotazione delle etichette in qualsiasi direzione.

Tipi di grafici supportati

La libreria di Google Charts fornisce i seguenti tipi di grafici:

Sr. No.	Tipo / descrizione del grafico
1	Line Charts Utilizzato per disegnare grafici basati su linee / spline.
2	Area Charts Utilizzato per disegnare grafici area wise.
3	Pie Charts Utilizzato per disegnare grafici a torta.
4	Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Utilizzato per disegnare grafici sparsi.
5	Bubble Charts Utilizzato per disegnare grafici a bolle.
6	Dynamic Charts Utilizzato per disegnare grafici dinamici in cui l'utente può modificare i grafici.
7	Combinations Utilizzato per disegnare combinazioni di varietà di grafici.
8	3D Charts Utilizzato per disegnare grafici 3D.
9	Angular Gauges Utilizzato per disegnare grafici di tipo tachimetro.
10	Heat Maps Utilizzato per disegnare mappe di calore.
11	Tree Maps Utilizzato per disegnare mappe ad albero.

Nei prossimi capitoli, discuteremo ogni tipo di grafici sopra menzionati in dettaglio con esempi.

Licenza

Google Charts è open source ed è gratuito. Segui il link: Termini di servizio .

Questo tutorial ti guiderà su come preparare un ambiente di sviluppo per iniziare il tuo lavoro con Google Charts e GWT Framework. Questo tutorial ti insegnerà anche come configurare JDK, Tomcat ed Eclipse sulla tua macchina prima di configurare GWT Framework -

Requisito del sistema

GWT richiede JDK 1.6 o superiore, quindi il primo requisito è avere JDK installato nella tua macchina.

JDK	1.6 o superiore.
Memoria	nessun requisito minimo.
Spazio sul disco	nessun requisito minimo.
Sistema operativo	nessun requisito minimo.

Segui i passaggi indicati per configurare il tuo ambiente per iniziare con lo sviluppo di applicazioni GWT.

Passaggio 1: verifica l'installazione di Java sulla macchina

Ora apri la console ed esegui il seguente comando java.

OS	Compito	Comando
Windows	Apri la Console di comando	c: \> java -version
Linux	Apri Terminale di comando	$ java -version
Mac	Apri Terminale	macchina: ~ joseph $ java -version

Verifichiamo l'output per tutti i sistemi operativi

Sr.No.	OS e output generato
1	Windows versione java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) VM client Java HotSpot (TM) (build 17.0-b17, modalità mista, condivisione)
2	Linux versione java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) VM client ava HotSpot (TM) (build 17.0-b17, modalità mista, condivisione)
3	Mac versione java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) VM server Java HotSpot (TM) a 64 bit (build 17.0-b17, modalità mista, condivisione)

Passaggio 2: configurazione del Java Development Kit (JDK)

Se non si dispone di Java installato, è possibile installare Java Software Development Kit (SDK) dal sito Java di Oracle: Download di Java SE . Troverai le istruzioni per l'installazione di JDK nei file scaricati, segui le istruzioni fornite per installare e configurare il setup. Infine impostare le variabili di ambiente PATH e JAVA_HOME in modo che facciano riferimento alla directory che contiene java e javac, tipicamente java_install_dir / bin e java_install_dir rispettivamente.

Impostare il JAVA_HOMEvariabile di ambiente in modo che punti alla posizione della directory di base in cui Java è installato sulla macchina. Per esempio

Sr.No.	OS e output
1	Windows Imposta la variabile d'ambiente JAVA_HOME su C: \ Program Files \ Java \ jdk1.6.0_21
2	Linux export JAVA_HOME = / usr / local / java-current
3	Mac export JAVA_HOME = / Library / Java / Home

Aggiungi la posizione del compilatore Java al percorso di sistema.

Sr.No.	OS e output
1	Windows Aggiungi la stringa;% JAVA_HOME% \ bin alla fine della variabile di sistema, Path.
2	Linux export PATH = $ PATH: $ JAVA_HOME / bin /
3	Mac non richiesto

In alternativa, se utilizzi un IDE (Integrated Development Environment) come Borland JBuilder, Eclipse, IntelliJ IDEA o Sun ONE Studio, compila ed esegui un semplice programma per confermare che l'IDE sa dove hai installato Java, altrimenti esegui la corretta configurazione come indicato nel documento dell'IDE.

Passaggio 3: configurazione dell'IDE di Eclipse

Tutti gli esempi in questo tutorial sono stati scritti utilizzando Eclipse IDE. Quindi ti suggerirei di avere l'ultima versione di Eclipse installata sulla tua macchina in base al tuo sistema operativo.

Per installare Eclipse IDE, scarica gli ultimi binari Eclipse da https://www.eclipse.org/downloads/. Dopo aver scaricato l'installazione, decomprimere la distribuzione binaria in una posizione comoda. Ad esempio in C: \ eclipse su Windows, o / usr / local / eclipse su Linux / Unix e infine imposta la variabile PATH in modo appropriato.

Eclipse può essere avviato eseguendo i seguenti comandi sulla macchina Windows, oppure puoi semplicemente fare doppio clic su eclipse.exe

%C:\eclipse\eclipse.exe

Eclipse può essere avviato eseguendo i seguenti comandi su una macchina Unix (Solaris, Linux, ecc.) -

$/usr/local/eclipse/eclipse

Dopo un avvio riuscito, se tutto va bene, dovrebbe visualizzare il risultato

Passaggio 4: installa GWT SDK e plug-in per Eclipse

Seguire le istruzioni fornite al collegamento Plugin for Eclipse (incl. SDK) per installare GWT SDK e Plugin per versione Eclipse installati sulla macchina.

Dopo una corretta configurazione per il plug-in GWT, se tutto va bene, dovrebbe essere visualizzata la seguente schermata con Google icon contrassegnato con un rettangolo rosso.

Passaggio 5: installa Google Charts

Scarica l'ultimo jar di Google Charts dalla sua pagina MVN Repository e aggiungilo al classpath del progetto.

Aggiungi la seguente voce nel file <nome-progetto> .gwt.xml

<inherits name = "com.googlecode.gwt.charts.Charts"/>

In questo capitolo, mostreremo la configurazione richiesta per disegnare un grafico utilizzando l'API di Google Charts in GWT.

Passaggio 1: crea l'applicazione GWT

Segui i passaggi seguenti per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2	Modifica HelloWorld.gwt.xml , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni il resto dei file invariato.
3	Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato 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>

Di seguito è riportato il contenuto del file host HTML modificato 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>

Vedremo il HelloWorld.java aggiornato alla fine dopo aver compreso le configurazioni.

Passaggio 2: creare configurazioni

Carica la libreria e crea un grafico

Carica la libreria utilizzando ChartLoader e quindi crea il grafico.

ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
   public void run() {
      // Create and attach the chart
      PieChart chart = new PieChart();           
   } 
});

Tabella dati

Configura i dettagli creando una tabella dati.

// 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);

Taglia

Configurare la larghezza e l'altezza da impostare.

chart.setWidth("700px");
chart.setHeight("700px");

Passaggio 3: aggiungi il grafico al pannello principale.

Stiamo aggiungendo il grafico al pannello principale.

RootPanel.get().add(chart);

Esempio

Considera il seguente esempio per comprendere ulteriormente la sintassi della configurazione:

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();
   }
}

Risultato

Verifica il risultato.

I grafici ad area vengono utilizzati per disegnare grafici basati su area. In questa sezione discuteremo i seguenti tipi di grafici basati su area.

Sr. No.	Tipo / descrizione del grafico
1	Area di base Grafico ad area di base
2	Area con valori negativi Grafico ad area con valori negativi.
3	Area in pila Grafico con aree impilate l'una sull'altra.
4	Area con punti mancanti Grafico con punti mancanti nei dati.

I grafici a barre vengono utilizzati per disegnare grafici basati su barre. In questa sezione discuteremo i seguenti tipi di grafici a barre.

Sr. No.	Tipo / descrizione del grafico
1	Bar di base Grafico a barre di base
2	Grafico a barre raggruppato Grafico a barre raggruppato.
3	Barra in pila Grafico a barre con barre impilate l'una sull'altra.
4	Barra negativa Grafico a barre con stack negativo.
5	Grafico a barre delle differenze Grafico a barre che mostra le differenze.

I grafici a bolle vengono utilizzati per disegnare grafici a bolle. In questa sezione discuteremo i seguenti tipi di grafici basati su bolle.

Sr. No.	Tipo / descrizione del grafico
1	Bolla di base Grafico a bolle di base.
2	Grafico a bolle con etichette dati Grafico a bolle con etichette dati.

I grafici a candela vengono utilizzati per mostrare il valore di apertura e chiusura su una variazione di valore e sono normalmente utilizzati per rappresentare le azioni. In questa sezione discuteremo i seguenti tipi di grafici basati su candele.

Sr. No.	Tipo / descrizione del grafico
1	Candeliere di base Grafico a candela di base.
2	Candeliere con colori personalizzati Grafico a candela personalizzato.

I grafici a colonne vengono utilizzati per disegnare grafici basati su colonne. In questa sezione discuteremo i seguenti tipi di grafici basati su colonne.

Sr. No.	Tipo / descrizione del grafico
1	Colonna di base Grafico colonne di base
2	Istogramma raggruppato Grafico a colonne raggruppate.
3	Colonna impilata Grafico a colonne con colonne impilate l'una sull'altra.
4	Colonna impilata negativa Grafico a colonne con stack negativo.
5	Grafico a colonne diff Grafico a colonne che mostra le differenze.

Il grafico a combinazione aiuta a rendere ogni serie come un diverso tipo di marcatore dall'elenco seguente: linea, area, barre, candele e area con gradini. Per assegnare un tipo di indicatore predefinito per le serie, utilizzare la proprietà seriesType. La proprietà della serie deve essere utilizzata per specificare le proprietà di ciascuna serie individualmente. Di seguito è riportato un esempio di un istogramma che mostra le differenze.

Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Ora, vediamo un esempio di un grafico a colonne che mostra le differenze.

Configurazioni

Noi abbiamo usato ComboChart class per mostrare un diagramma di combinazione.

// Combination chart
ComboChart chart = new ComboChart();

Esempio

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();
   }
}

Risultato

Verifica il risultato.

Un istogramma è un grafico che raggruppa i dati numerici in segmenti, visualizzando i segmenti come colonne segmentate. Sono usati per rappresentare la distribuzione di un set di dati in base alla frequenza con cui i valori rientrano negli intervalli. Google Charts sceglie automaticamente il numero di bucket per te. Tutti i bucket hanno la stessa larghezza e un'altezza proporzionale al numero di punti dati nel bucket. Gli istogrammi sono simili agli istogrammi sotto altri aspetti. In questa sezione discuteremo i seguenti tipi di grafici basati su istogrammi.

Sr. No.	Tipo / descrizione del grafico
1	Istogramma di base Grafico istogramma di base.
2	Controllo del colore Colore personalizzato del grafico istogramma.
3	Benne di controllo Bucket personalizzati di grafico istogramma.
4	Serie multiple Grafico istogramma con più serie.

I grafici a linee vengono utilizzati per disegnare grafici basati su linee. In questa sezione discuteremo i seguenti tipi di grafici basati su linee.

Sr. No.	Tipo / descrizione del grafico
1	Linea di base Grafico a linee di base.
2	Con punti visibili Grafico con punti dati visibili.
3	Colore di sfondo personalizzabile Grafico con colore di sfondo personalizzato.
4	Colore della linea personalizzabile Grafico con colore della linea personalizzato.
5	Etichette degli assi e delle tacche personalizzabili Grafico con assi personalizzati ed etichette di graduazione.
6	Mirino Grafici a linee che mostrano i mirini nel punto dati sulla selezione.
7	Stile della linea personalizzabile Grafico con colore della linea personalizzato.
8	Grafici a linee con linee curve Grafico con linee curve morbide.

Un grafico di Google Map utilizza l'API di Google Maps per visualizzare la mappa. I valori dei dati vengono visualizzati come indicatori sulla mappa. I valori dei dati possono essere coordinate (coppie lat-long) o indirizzi effettivi. La mappa verrà ridimensionata di conseguenza in modo da includere tutti i punti identificati.

Sr. No.	Tipo / descrizione del grafico
1	Mappa di base Mappa Google di base.
2	Mappa utilizzando latitudine / longitudine Mappa con posizioni specificate utilizzando Latitudine e Longitudine.

Di seguito è riportato un esempio di organigramma.

L'organigramma aiuta a rendere una gerarchia di nodi, utilizzata per rappresentare relazioni superiori / subordinate in un'organizzazione. Ad esempio, un albero genealogico è un tipo di organigramma. Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di organigramma.

Configurazioni

Noi abbiamo usato OrgChart classe per mostrare un organigramma.

// Organization chart
OrgChart chart = new OrgChart();

Esempio

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();
   }
}

Risultato

Verifica il risultato.

I grafici a torta vengono utilizzati per disegnare grafici a torta. In questa sezione discuteremo i seguenti tipi di grafici a torta.

Sr. No.	Tipo / descrizione del grafico
1	Torta di base Grafico a torta di base.
2	Grafico a ciambella Grafico a ciambella.
3	Grafico a torta 3D Grafico a torta 3D.
4	Grafico a torta con sezioni esplose Grafico a torta con sezioni esplose.

Un grafico Sankey è uno strumento di visualizzazione e viene utilizzato per rappresentare un flusso da un insieme di valori a un altro. Gli oggetti connessi sono chiamati nodi e le connessioni sono chiamate collegamenti. I Sankeys vengono utilizzati per mostrare una mappatura molti-a-molti tra due domini o più percorsi attraverso una serie di fasi.

Sr. No.	Tipo / descrizione del grafico
1	Grafico Sankey di base Grafico Sankey di base.
2	Grafico Sankey multilivello Grafico Sankey multilivello.
3	Personalizzazione di Sankey Chart Grafico Sankey personalizzato.

Di seguito è riportato un esempio di un grafico a dispersione.

Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di un grafico a dispersione.

Configurazioni

Noi abbiamo usato ScatterChart class per mostrare un grafico a dispersione.

ScatterChart chart = new ScatterChart();

Esempio

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();
   }
}

Risultato

Verifica il risultato.

Un grafico ad area a gradini è un grafico ad area basato su passi. Discuteremo i seguenti tipi di grafici ad area a gradini.

Sr. No.	Tipo / descrizione del grafico
1	Grafico a gradini di base Grafico ad area a gradini di base.
2	Grafico a gradini impilato Grafico ad area a gradini in pila.

Il grafico a tabella aiuta a rendere una tabella che può essere ordinata e impaginata. Le celle della tabella possono essere formattate utilizzando stringhe di formato o inserendo direttamente HTML come valori di cella. I valori numerici sono allineati a destra per impostazione predefinita; i valori booleani vengono visualizzati come segni di spunta o crocette. Gli utenti possono selezionare singole righe con la tastiera o il mouse. Le intestazioni di colonna possono essere utilizzate per l'ordinamento. La riga di intestazione rimane fissa durante lo scorrimento. La tabella attiva gli eventi corrispondenti all'interazione dell'utente.

Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di un grafico a tabella.

Configurazioni

Noi abbiamo usato Table class per mostrare un grafico a tabella.

Table chart = new Chart();

Esempio

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();
   }
}

Risultato

Verifica il risultato.

TreeMap è una rappresentazione visiva di un albero di dati, in cui ogni nodo può avere zero o più figli e un genitore (eccetto la radice). Ogni nodo viene visualizzato come un rettangolo, può essere ridimensionato e colorato in base ai valori che assegniamo. Dimensioni e colori vengono valutati rispetto a tutti gli altri nodi nel grafico. Di seguito è riportato un esempio di grafico ad albero.

Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di un grafico TreeMap.

Configurazioni

Noi abbiamo usato TreeMap class per mostrare un grafico TreeMap.

TreeMap chart = new TreeMap();

Esempio

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();
   }
}

Risultato

Verifica il risultato.