Home » Tutorial » NetBeans Tutorial » Chart JS Library : EXAMPLE 1 { Pie Chart }

Chart JS Library : EXAMPLE 1 { Pie Chart }

CHART JS : Pie Chart JavaScript Tutorial
Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Chart JS Library
Pie Chart JavaScript Tutorial

CHART JS EXAMPLES
JavaScript & Dashboard

Objectif

En premier lieu , l’objectif de ce Tutorial Pie Chart JavaScript est d’étudier comment peut -on visualiser data file en utilisant Amcharts JS Library .

De plus , Vous allez voir comment intégrer Netbeans IDE sous Google Chrome .

 

Structure Projet Pie Chart JavaScript Tutorial

Pour cela , vous allez créer sous Netbeans Html 5 / JS Application comme c’est montré dans Pie Chart Test Video .

Alors , il est clair que vous avez besoin d’un fichier pour stocker vos données de type csv data file ou json data file . Donc , vous devez mettre vos fichiers des données sous un dossier nommé Data comme c’est montré dans la figure suivante .

Html 5 / JS Application Pie Chart JavaSrcipt Tutorial
Html 5 / JS Application Pie Chart JavaSrcipt Tutorial

En résumé , cette figure montre les emplacements des balise HTML utilisé dans Pie Chart JavaScript Tutorial .

Balise Page Html
Balise Page Html

Chart JS Library : CSV Data File | Json Data File

En outre , la biblitheque Amcharts Library grace à son plugin Dataloader vous permez de specifier le type de votre fichier data utilisé et ces caracteristques en détail . Ainsi , vous allez trouvez les fichiers des données de type CSV et JSON dans  Pie Chart Test Video .

CHART JS LIBRARY : pie JS Tutorial
Pie JS Tutorial

MySql Workbench

De plus  , si vous avez une base des données vous pouvez exportez des fichiers de type csv ou json à partir des tables grâce au logiciel MySql Workbench pour les visualiser après dans des dashboard .

Donc , vous allez trouvez un exemple dans Pie Chart Test Video .

NetBeans Connector

Vous allez remarquer aussi en regardant Pie Chart Test video que le projet est exécuter sous Google Chrome , en fait c’est à l’aide de l’extension NetBeans Connector .

Netbeans Connector Google Chrome
Netbeans Connector Google Chrome

Donc , installez l’extension Netbeans Connector pour trouvez le résultat suivant .

Netbeans Connector Google Chrome

Chart JS Library : Pie Chart Test Video

Intégration Pie Chart Web Application

En fait , dans la deuxième vidéo vous allez voir comment on peut intégrer le travail réalisé dans la première vidéo  Pie Chart JavaScript d’un projet de type HTML 5 /JS Application sous un autre projet de type Java Web Application .

Donc pour la deuxieme video les logiciels utilisés sont  : NetBeans , Glassfish , Mysql Workbench , Xampp

  • Type de projet : Java Web –> Web Application
  • Server : GlassFish Server 4.1.1
  • Java EE version: Java EE 7 web
  •  Framworks : JavaServer Faces
  • Server Library : JSF2.2

Dans cette vidéo , vous trouvez :

Comment  utiliser ”Amchart” pour visualiser Visualiser data file javascript et créer des tableaux de bord ( Dashboad )

 

Enfin

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •