GWT Highcharts - Guide rapide

GWT Highcharts est une bibliothèque open source basée sur Java qui fournit des visualisations Highcharts élégantes et riches en fonctionnalités dans une application GWT et peut être utilisée avec les bibliothèques de widgets GWT.

traits

Compatible- Tous les navigateurs modernes sont pris en charge avec les navigateurs iPhone / iPad et Internet Explorer 6 et les versions ultérieures. Les navigateurs modernes utilisent SVG pour le rendu graphique et dans les anciens graphiques Internet Explorer sont dessinés à l'aide de VML.
Pure Java - Aucun JavaScript n'est requis car l'API Highcharts complète est disponible dans les méthodes Java.
No Flash - Aucune exigence de plug-ins côté client comme Flash Player ou Java car Highcharts utilise des technologies de navigateur natives et les graphiques peuvent fonctionner sans modification sur les appareils mobiles modernes.
Clean Syntax - La plupart des méthodes sont chaînables, donc les options de configuration du graphique peuvent être gérées en utilisant une syntaxe aussi étroite que JSON.
Dynamic- Des séries et des points peuvent être ajoutés dynamiquement à tout moment après la création du graphique. Crochets d'événement pris en charge. Les interactions avec le serveur sont prises en charge.
Documented - Les API Highcharts sont entièrement documentées avec de nombreux exemples de code et de syntaxe.

Ce didacticiel vous explique comment préparer un environnement de développement pour démarrer votre travail avec Highcharts et GWT Framework. Ce tutoriel vous apprendra également comment configurer JDK, Tomcat et Eclipse sur votre machine avant de configurer GWT Framework -

Exigence du système

GWT nécessite JDK 1.6 ou supérieur, donc la toute première exigence est d'avoir JDK installé sur votre machine.

JDK	1.6 ou supérieur.
Mémoire	aucune exigence minimale.
Espace disque	aucune exigence minimale.
Système opérateur	aucune exigence minimale.

Suivez les étapes indiquées pour configurer votre environnement pour commencer le développement d'applications GWT.

Étape 1 - Vérifiez l'installation de Java sur votre machine

Ouvrez maintenant la console et exécutez la commande java suivante.

OS	Tâche	Commander
Windows	Ouvrez la console de commande	c: \> java -version
Linux	Ouvrir le terminal de commande	$ java -version
Mac	Terminal ouvert	machine: ~ joseph $ java -version

Vérifions la sortie pour tous les systèmes d'exploitation

Sr.No.	OS et sortie générée
1	Windows version java "1.6.0_21" Environnement d'exécution Java (TM) SE (build 1.6.0_21-b07) VM client Java HotSpot (TM) (build 17.0-b17, mode mixte, partage)
2	Linux version java "1.6.0_21" Environnement d'exécution Java (TM) SE (build 1.6.0_21-b07) VM client ava HotSpot (TM) (build 17.0-b17, mode mixte, partage)
3	Mac version java "1.6.0_21" Environnement d'exécution Java (TM) SE (build 1.6.0_21-b07) VM serveur 64 bits Java HotSpot (TM) (build 17.0-b17, mode mixte, partage)

Étape 2 - Configuration du kit de développement Java (JDK)

Si Java n'est pas installé, vous pouvez installer le kit de développement logiciel Java (SDK) à partir du site Java d'Oracle: Téléchargements Java SE . Vous trouverez des instructions pour installer JDK dans les fichiers téléchargés, suivez les instructions données pour installer et configurer la configuration. Enfin, définissez les variables d'environnement PATH et JAVA_HOME pour faire référence au répertoire qui contient java et javac, généralement rép_install_java / bin et rép_install_java respectivement.

Met le JAVA_HOMEvariable d'environnement pour pointer vers l'emplacement du répertoire de base où Java est installé sur votre machine. Par exemple

Sr.No.	OS et sortie
1	Windows Définissez la variable d'environnement JAVA_HOME sur C: \ Program Files \ Java \ jdk1.6.0_21
2	Linux export JAVA_HOME = / usr / local / java-current
3	Mac export JAVA_HOME = / Bibliothèque / Java / Accueil

Ajoutez l'emplacement du compilateur Java au chemin système.

Sr.No.	OS et sortie
1	Windows Ajoutez la chaîne;% JAVA_HOME% \ bin à la fin de la variable système, Path.
2	Linux export PATH = $ PATH: $ JAVA_HOME / bin /
3	Mac non requis

Sinon, si vous utilisez un environnement de développement intégré (IDE) tel que Borland JBuilder, Eclipse, IntelliJ IDEA ou Sun ONE Studio, compilez et exécutez un programme simple pour confirmer que l'EDI sait où vous avez installé Java, sinon effectuez la configuration appropriée comme document donné de l'IDE.

Étape 3 - Configuration de l'IDE Eclipse

Tous les exemples de ce didacticiel ont été écrits à l'aide de l'IDE Eclipse. Je suggère donc que la dernière version d'Eclipse soit installée sur votre machine en fonction de votre système d'exploitation.

Pour installer Eclipse IDE, téléchargez les derniers binaires Eclipse à partir de https://www.eclipse.org/downloads/. Une fois que vous avez téléchargé l'installation, décompressez la distribution binaire dans un emplacement pratique. Par exemple dans C: \ eclipse sous Windows, ou / usr / local / eclipse sous Linux / Unix et définissez enfin la variable PATH de manière appropriée.

Eclipse peut être démarré en exécutant les commandes suivantes sur la machine Windows, ou vous pouvez simplement double-cliquer sur eclipse.exe

%C:\eclipse\eclipse.exe

Eclipse peut être démarré en exécutant les commandes suivantes sur une machine Unix (Solaris, Linux, etc.) -

$/usr/local/eclipse/eclipse

Après un démarrage réussi, si tout va bien, il devrait afficher le résultat suivant -

Étape 4: Installez le SDK et le plug-in GWT pour Eclipse

Suivez les instructions fournies sur le lien Plugin for Eclipse (y compris SDK) pour installer la version GWT SDK & Plugin for Eclipse installée sur votre machine.

Après une configuration réussie pour le plugin GWT, si tout va bien, il devrait afficher l'écran suivant avec Google icon marqué d'un rectangle rouge comme indiqué ci-dessous -

Étape 5: Installez Highcharts

Téléchargez le dernier jar Highcharts à partir de sa page de téléchargement et ajoutez-le au chemin de classe du projet.

Ajoutez l'entrée suivante dans le fichier <nom-projet> .gwt.xml

<inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>

Ajoutez l'entrée suivante dans le fichier <nom-projet> .html

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>
<script src = "https://code.highcharts.com/highcharts.js"/>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-3d.js" />
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js" />
<script src = "https://code.highcharts.com/modules/heatmap.js" />
<script src = "https://code.highcharts.com/modules/treemap.js" />

Dans ce chapitre, nous présenterons la configuration requise pour dessiner un graphique à l'aide de l'API Highcharts dans GWT.

Étape 1: créer une application GWT

Suivez les étapes suivantes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2	Modifiez HelloWorld.gwt.xml , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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="org.moxieapps.gwt.highcharts.Highcharts"/>
   <source path = 'client'/>
   <source path = 'shared'/>
</module>

Voici le contenu du fichier hôte HTML modifié war/HelloWorld.html.

<html>
   <head>
      <title>GWT Highcharts Showcase</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
         <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />
         <script src = "https://code.highcharts.com/highcharts.js" />
      </script>
   </head>
   <body>    
   </body>
</html>

Nous verrons le HelloWorld.java mis à jour à la fin après avoir compris les configurations.

Étape 2: créer des configurations

Créer un graphique

Configurez le type, le titre et le sous-titre du graphique.

Chart chart = new Chart()
   .setType(Type.SPLINE)
   .setChartTitleText("Monthly Average Temperature")
   .setChartSubtitleText("Source: WorldClimate.com");

xAxis

Configurez le ticker à afficher sur l'axe X.

XAxis xAxis = chart.getXAxis();
xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
   "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

yAxis

Configurez le titre, tracez les lignes à afficher sur l'axe Y.

YAxis yAxis = chart.getYAxis();
yAxis.setAxisTitleText("Temperature Â°C");
yAxis.createPlotLine()
   .setValue(0)
   .setWidth(1)
   .setColor("#808080");

info-bulle

Configurez l'info-bulle. Mettez le suffixe à ajouter après la valeur (axe y).

ToolTip toolTip = new ToolTip();
toolTip.setValueSuffix("°C");
chart.setToolTip(toolTip);

Légende

Configurez la légende à afficher sur le côté droit du graphique avec d'autres propriétés.

legend.setLayout(Legend.Layout.VERTICAL)
   .setAlign(Legend.Align.RIGHT)
   .setVerticalAlign(Legend.VerticalAlign.TOP)
   .setX(-10)
   .setY(100)
   .setBorderWidth(0);
chart.setLegend(legend);

séries

Configurez les données à afficher sur le graphique. Series est un tableau dans lequel chaque élément de ce tableau représente une seule ligne sur le graphique.

chart.addSeries(chart.createSeries()
   .setName("Tokyo")
   .setPoints(new Number[] {
      7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
      26.5, 23.3, 18.3, 13.9, 9.6
   })
);

chart.addSeries(chart.createSeries()
   .setName("New York")
   .setPoints(new Number[] {
      -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
      24.1, 20.1, 14.1, 8.6, 2.5
   })
);

chart.addSeries(chart.createSeries()
   .setName("Berlin")
   .setPoints(new Number[] {
      -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
      17.9, 14.3, 9.0, 3.9, 1.0
   })
);

chart.addSeries(chart.createSeries()
   .setName("London")
   .setPoints(new Number[] {
      3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
      16.6, 14.2, 10.3, 6.6, 4.8
   })
);

Étape 3: ajoutez le graphique au panneau parent.

Nous ajoutons le graphique au panneau racine.

RootPanel.get().add(chart);

Exemple

Prenons l'exemple suivant pour mieux comprendre la syntaxe de configuration -

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.SPLINE)
         .setChartTitleText("Monthly Average Temperature")
         .setChartSubtitleText("Source: WorldClimate.com");

      XAxis xAxis = chart.getXAxis();
      xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
         "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

      YAxis yAxis = chart.getYAxis();
      yAxis.setAxisTitleText("Temperature Â°C");
      yAxis.createPlotLine()
         .setValue(0)
         .setWidth(1)
         .setColor("#808080");

      ToolTip toolTip = new ToolTip();
      toolTip.setValueSuffix("Â°C");
      chart.setToolTip(toolTip);

      Legend legend = new Legend();
      legend.setLayout(Legend.Layout.VERTICAL)
         .setAlign(Legend.Align.RIGHT)
         .setVerticalAlign(Legend.VerticalAlign.TOP)
         .setX(-10)
         .setY(100)
         .setBorderWidth(0);
      chart.setLegend(legend);

      chart.addSeries(chart.createSeries()
         .setName("Tokyo")
         .setPoints(new Number[] {
            7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("New York")
         .setPoints(new Number[] {
            -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
            24.1, 20.1, 14.1, 8.6, 2.5
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("Berlin")
         .setPoints(new Number[] {
            -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
            17.9, 14.3, 9.0, 3.9, 1.0
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("London")
         .setPoints(new Number[] {
            3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
            16.6, 14.2, 10.3, 6.6, 4.8
         })
      );
      RootPanel.get().add(chart);
   }
}

Résultat

Vérifiez le résultat.

Les graphiques en courbes sont utilisés pour dessiner des graphiques basés sur des lignes / splines. Dans cette section, nous aborderons les différents types de graphiques basés sur des lignes et des splines.

Sr.No.	Type et description du graphique
1	Ligne de base Graphique linéaire de base.
2	Avec des étiquettes de données Graphique avec étiquettes de données.
3	Série chronologique, zoomable Graphique avec séries chronologiques.
4	Spline avec axes inversés Diagramme spline ayant des axes inversés.
5	Spline avec symboles Diagramme spline utilisant des symboles de chaleur / pluie.
6	Spline avec bandes de tracé Diagramme spline avec bandes de tracé.

Les graphiques en aires sont utilisés pour dessiner des graphiques en zones. Dans cette section, nous discuterons des différents types de graphiques basés sur des zones.

Sr.No.	Type et description du graphique
1	Zone de base Graphique à aires de base.
2	Zone avec des valeurs négatives Graphique en aires ayant des valeurs négatives.
3	Zone empilée Graphique ayant des zones empilées les unes sur les autres.
4	Zone de pourcentage Graphique avec données en pourcentage.
5	Zone avec des points manquants Graphique avec des points manquants dans les données.
6	Axes inversés Zone utilisant des axes inversés.
sept	Zone-spline Graphique en aires utilisant une spline.

Les graphiques à barres sont utilisés pour dessiner des graphiques à barres. Dans cette section, nous aborderons les différents types de graphiques à barres.

Sr.No.	Type et description du graphique
1	Barre de base Graphique à barres de base.
2	Barre empilée Diagramme à barres ayant des barres empilées les unes sur les autres.
3	Graphique à barres avec des valeurs négatives Graphique à barres avec des valeurs négatives.

Les graphiques à colonnes sont utilisés pour dessiner des graphiques basés sur des colonnes. Dans cette section, nous aborderons les différents types de graphiques basés sur des colonnes.

Sr.No.	Type et description du graphique
1	Colonne de base Graphique à colonnes de base.
2	Colonne avec des valeurs négatives Histogramme ayant des valeurs négatives.
3	Colonne empilée Graphique ayant des colonnes empilées les unes sur les autres.
4	Colonne empilée et groupée Graphique avec colonne sous forme empilée et groupée.
5	Colonne avec pourcentage empilé Graphique avec pourcentage empilé.
6	Colonne avec étiquettes pivotées Graphique à colonnes avec étiquettes pivotées dans les colonnes.
sept	Gamme de colonnes Graphique à colonnes utilisant des plages.

Les graphiques à secteurs sont utilisés pour dessiner des graphiques à secteurs. Dans cette section, nous discuterons des différents types de graphiques à secteurs.

Sr.No.	Type et description du graphique
1	Tarte de base Graphique à secteurs de base.
2	Tarte aux légendes Graphique à secteurs avec légendes.
3	Graphique en anneau Graphique en anneau.

Voici un exemple de diagramme de dispersion de base.

Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .

Un exemple de diagramme de dispersion de base est donné ci-dessous.

Configurations

Voyons maintenant les configurations / étapes supplémentaires prises.

séries

Configurez le type de graphique pour qu'il soit basé sur la dispersion. series.typedécide du type de série du graphique. Ici, la valeur par défaut est "line".

chart.addSeries(chart.createSeries()  
   .setName("Observations")  
   .setType(Type.SCATTER)  
   .setPoints(new Number[] {  
      1, 1.5, 2.8, 3.5, 3.9, 4.2  
   })  
);

Exemple

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Series.Type;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      final Chart chart = new Chart()  
         .setChartTitleText("Scatter plot");  

      chart.getXAxis()  
         .setMin(-0.5)  
         .setMax(5.5);  

      chart.getYAxis()  
         .setMin(0);  

      chart.addSeries(chart.createSeries()  
         .setName("Observations")  
         .setType(Type.SCATTER)  
         .setPoints(new Number[] {  
            1, 1.5, 2.8, 3.5, 3.9, 4.2  
         })  
      );  
      RootPanel.get().add(chart);
   }
}

Résultat

Vérifiez le résultat.

Les graphiques dynamiques sont utilisés pour dessiner des graphiques basés sur des données où les données peuvent changer après le rendu du graphique. Dans cette section, nous aborderons les différents types de graphiques dynamiques.

Sr.No.	Type et description du graphique
1	Spline mise à jour chaque seconde Le diagramme spline est mis à jour chaque seconde.
2	Cliquez pour ajouter un point Graphique avec capacité d'ajout de points.

Les graphiques combinés sont utilisés pour dessiner des graphiques mixtes; par exemple, un graphique à barres avec un graphique à secteurs. Dans cette section, nous aborderons les différents types de graphiques de combinaisons.

Sr.No.	Type et description du graphique
1	Colonne, ligne et tarte Graphique avec colonne, ligne et secteur.
2	Deux axes, ligne et colonne Graphique avec deux axes, ligne et colonne.
3	Plusieurs axes Graphique ayant plusieurs axes.
4	Dispersion avec ligne de régression Diagramme de dispersion avec ligne de régression.

Les graphiques 3D sont utilisés pour dessiner des graphiques en 3 dimensions. Dans cette section, nous aborderons les différents types de graphiques 3D.

Sr.No.	Type et description du graphique
1	Colonne 3D Diagramme à colonnes 3D.
2	Scatter 3D Graphique de dispersion 3D.
3	Tarte 3D Graphique à secteurs 3D.

Les graphiques cartographiques sont utilisés pour dessiner une carte thermique ou des graphiques en arbre. Dans cette section, nous aborderons les différents types de graphiques cartographiques.

Sr.No.	Type et description du graphique
1	Carte de chaleur Carte de chaleur.
2	Carte d'arbre Carte d'arbre.

↰ Previous page

GWT Highcharts - Guide rapide

traits

Exigence du système

Étape 1 - Vérifiez l'installation de Java sur votre machine

Étape 2 - Configuration du kit de développement Java (JDK)

Étape 3 - Configuration de l'IDE Eclipse

Étape 4: Installez le SDK et le plug-in GWT pour Eclipse

Étape 5: Installez Highcharts

Étape 1: créer une application GWT

Étape 2: créer des configurations

Créer un graphique

xAxis

yAxis

info-bulle

Légende

séries

Étape 3: ajoutez le graphique au panneau parent.

Exemple

Résultat

Configurations

séries

Exemple

Résultat

Tutoriel GWT Highcharts

GWT Highcharts Ressources utiles