Introduction

Afin de pouvoir afficher des graphiques (camemberts, courbes, histogrammes, etc...) dans une page Adelia Web, on pourra utiliser une bibliothèque javascript externe.
Dans cet exemple nous utiliserons la bibliothèque Highcharts (http://www.highcharts.com) 

Highcharts est un produit commercial, il est gratuit uniquement à des fins de tests et développements internes, son utilisation à des fins commerciales nécessite l'achat d'une licence.

 

Prérequis et installation

Récupérer le fichier highcharts.js présent sur la page de téléchargement du site Highcharts (http://www.highcharts.com/download).
Placer le fichier highcharts.js dans le répertoire contenant les fichiers javascript (dans l'exemple le fichier sera placé dans le répertoire js de l'application web.
Placer en en-tête de page (entre les balises <head> et </head>) les liens d'inclusion de bibliothèques suivants :

<head>
...

<!- Ajout de l'inclusion du JavaScript dans l'en-tete de la page ->  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>

...
</head>

A savoir

Afin de permettre à l'utilisateur d'exporter ses graphes, on pourra également inclure le fichier exporting.js dans le répertoire contenant les fichiers javascript de l'application web.
On ajoutera alors également le code <script type="text/javascript" src="../js/exporting.js"></script>.

Création du graphique

Pour pouvoir afficher le graphique, on réservera dans la page html un espace dédié à l'aide d'une balise div (ici nommée container).

Ceci sera fait à l'intérieur du corps du document (à l'intérieur de la balise <body> ... </body>).

<!- Ajout du container ->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

On ajoutera alors la fonction javascript suivante qui va déclarer un graphique de type camembert (pie), lequel sera rempli par le programme Adelia Web par le biais de la variable ::Pie_Donnees(1000).

<!-- 2. Ajout du JavaScript d'initialisation du document quand la page est prête -->
<script type="text/javascript">
   var chart;
   $(document).ready(function() {
      chart = new Highcharts.Chart({
         chart: {
            animation:           true,
            renderTo:            'container',
            plotBackgroundColor: null,
            plotBorderWidth:     null,
            plotShadow:          false
         },
         title: {
            text: 'Ventes Année 2010'
         },
         legend: {
         enabled: true
      },
      tooltip: {
         formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.y +' Euros';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor:           'pointer',
            showInLegend:     false,
            dataLabels: {
               enabled:        true,
               color:          '#000000',
               connectorColor: '#000000',
               formatter:      function() {
                                  return '<b>'+ this.point.name +'</b>: '+ this.y +' Euros';
                               },
            }
         }
      },
      series: [{
         type: 'pie',
         name: 'Browser share',
         point: {
            events: {
               click: function(e) {
                         this.slice();
                      }
            }
         },
         data: [
            ::Pie_Donnees(1000)
         ]
      }]
   });
});
</script>

Le code Adelia

Les données envoyées par le code Adelia via la variable Pie_Donnees devront avoir la structure suivante :

{
   name:   Janvier,    
   y:      12.8,
   sliced: true
}, 
{
   name:   Février,    
   y:      25,
   sliced: false
}

L'attribut sliced servant à indiquer si la part doit être détachée ou non. Ce paramètre pourra être omis.

Le code Adelia pourrait être le suivant :

Tab_Lib(01) = 'Janvier'
Tab_Val(01) = 23
Tab_Lib(02) = 'Février'
Tab_Val(02) = 5,9
Tab_Lib(03) = 'Mars'
Tab_Val(03) = 10
Tab_Lib(04) = 'Avril'
Tab_Val(04) = 67
Tab_Lib(05) = 'Mai'
Tab_Val(05) = 22,05
Tab_Lib(06) = 'Juin'
Tab_Val(06) = 7,65
Tab_Lib(07) = 'Juillet'
Tab_Val(07) = 31
Tab_Lib(08) = 'Août'
Tab_Val(08) = 31
Tab_Lib(09) = 'Septembre'
Tab_Val(09) = 65,43
Tab_Lib(10) = 'Octobre'
Tab_Val(10) = 43
Tab_Lib(11) = 'Novembre'
Tab_Val(11) = 80
Tab_Lib(12) = 'Décembre'
Tab_Val(12) = 99

ind = 1
Tant_Que Ind <= 12

   Val_Alpha    = &NUM_ALPHA(Tab_Val(Ind);'.')
   Val_AlphaInd = &NUM_ALPHA(Ind)

      PIE_DONNEES = PIE_DONNEES /// '{'
      PIE_DONNEES = PIE_DONNEES /// '   name: ' // Tab_Lib(Ind) /// ','
      PIE_DONNEES = PIE_DONNEES /// '   x: ' // Val_AlphaInd /// ','
      PIE_DONNEES = PIE_DONNEES /// '   y: ' // Val_Alpha /// ','
      PIE_DONNEES = PIE_DONNEES /// '   sliced: false'
      PIE_DONNEES = PIE_DONNEES /// '},'

   ind = ind + 1

Refaire

Ressources

  • Highcharts-2.1.6.zip : Fichier contenant les bibliothèques javascript Highcharts (version 2.1.6)
  • jquery.min.js : Fichier jquery nécessaire si l'application web ne peut accéder à la version en ligne du fichier (version 1.6.1)