Web Avancé

Ciel 1
2023-2024
TD n°4
AJAX – jQuery – Highcharts – PDO

1. OBJECTIF
Hightcharts est une librairie javascript pour créer des vues graphiques sur
une page web. Son utilisation est gratuite pour des projets personnels et
payantes pour un usage commercial. La création des graphiques est
paramétrable à souhait avec un objet représenté au format JSON. Cette
bibliothèque permet de réaliser tous types de graphiques (pie chart, bar
graph, bubble graph, timeline, …) et possède un module d’export intégré
(JPEG, PDF, SVG, PNG).

 Représentation de données sous formes de vues

graphiques.
 Les données sous la forme d'objet JSON

 Les requêtes AJAX avec Jquery

 La construction en langage PHP d'objets de données au

format JSON.

2. CONDITIONS DE RÉALISATION
Accès à la base de données :
hostname : 172.18.58.7
username : snir
password : snir
basename : tarifEssence

3. RESSOURCES
La documentation complète de Hightcharts est disponible
https://www.highcharts.com/docs
le code complet de Hightcharts est disponible sur github
https://github.com/highcharts/highcharts

TD n°4 Pag e 1/8

4. PRÉSENTATION
Vous allez représenter sous forme de graphiques des données
sauvegardées dans une base de données. Pour ce faire vous utiliserez la
bibliothèque Highcharts.
Nous procéderons par étapes successives :
• avec des données situées dans une variable js.
• avec des données situées dans un fichier JSON.
• avec des données au format JSON obtenues en AJAX (méthode
GET)

4.1. Représentation des données sous forme de

camembert
Dans un premier temps nous allons représenter des données contenus
dans un fichier data.js
Créez un fichier index.html comme ceci :

le fichier html charge les fichiers suivants :

• Jquery (via googleapi.com)
• Highcharts (via highcharts.com)
• data.js (Le fichier contenant les données à afficher)
• main.js (le fichier qui va contenir votre code javascript pour lancer
highcharts)

TD n°4 Pag e 2/8

 Créez le script javascript main.js
var couleurs = [
"#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896",
"#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7",
"#bcbd22", "#dbdb8d", "#17becf", "#9edae5"
];

$.afficherGraphique = function(couleurs, data) {

var chart = new Highcharts.Chart({
chart: {
renderTo: 'pieChart',
width: 598,
height: 450,
marginLeft: 25,
marginRight: 25
},
colors: couleurs,
title: {
text: "Dépenses par région",
margin: 10
},
tooltip: {
formatter: function() {
return "Dépense : " + this.y + " €" ;
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
return "" + this.point.name.toLowerCase() + "";
}
}
},
series: {
dataLabels: {
enabled: true,
color: 'black',
fontSize: 3
}
}
},
series: [{
type: 'pie',
data: data
}]
});

};

$(document).ready(function() {
$.afficherGraphique(couleurs, donnees);
});

Dans ce script, la fonction $.afficherGraphique(couleurs, donnees);

affiche un graphique sous la forme d'un camembert.
La variable array couleurs représente les couleurs que l’on va utiliser
pour le graphique.
la fonction $.afficherGraphique est appelé quand le document est ready
en lui passant 2 paramètres, la variable data (représente le dataset contenu
dans data.js) et la variable array couleur.

TD n°4 Pag e 3/8

 Créez un fichier data.js contenant une variable javascript de type tableau
de valeurs:
var donnees = [
["ILE DE FRANCE", 2232943587],
["CHAMPAGNE ARDENNE", 208049172],
["PICARDIE" , 291647915],
["HAUTE NORMANDIE" , 329969182],
["CENTRE" , 426281434],
["NORD PAS DE CALAIS" , 784487750],
["LORRAINE" , 462959889],
["ALSACE" , 313990716],
["FRANCHE COMTE" , 184551882],
["BASSE NORMANDIE" , 251148990],
["PAYS DE LA LOIRE" , 528196589],
["BRETAGNE" , 475894603],
["LIMOUSIN" , 142804187],
["AUVERGNE" , 221209988],
["POITOU CHARENTES" , 255393306],
["AQUITAINE" , 637123470],
["MIDI PYRENEES" , 617798467],
["BOURGOGNE" , 277143087],
["RHONE ALPES" , 1056935822],
["LANGUEDOC ROUSSILLON" , 629009598],
["PROVENCE ALPES COTE D'AZUR" , 1198241479],
["CORSE" , 77128456]
];

Résultat attendu :

TD n°4 Pag e 4/8

 Écrire une deuxième fonction pour afficher les mêmes données sous
forme de graphique de type barres.

4.2. Représentation des données sous forme de

courbe
Nous allons maintenant représenter des données contenu dans un fichier
prixEssence.json au format json.
Créer un nouveau projet de type application PHP nommé PrixEssence en
respectant le modele MVC. Dans le dossiers Vues ajoutez :
Carburant.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="libs/jquery/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="carburants.js"></script>
</head>
<body>
<div class="container">
<div class="mt-5">
<h1>Graphique avec Hightcharts</h1>
</div>
<div>
<div id="essenceChart" class="mt-5 w-100" style="aspect-ratio: 2/1;"></div>
</div>
</div>

TD n°4 Pag e 5/8

 </body>
</html>

Ajoutez également un fichier carburant.js

le script ci dessous construit un objet javascript contenant les options qui
vont servir à générer le graphique, il suffit donc de déclarer un objet options
et de lui attribuer les options de bases :
var chart;
var couleurs = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c"];
var options = {};

options.chart = {
renderTo: 'essenceChart',
backgroundColor: '#F9F9F9',
type: 'line'
};

options.credits = {
text: '© CIEL Soft Touchard Le Mans'
};

options.colors = couleurs;

options.title = {
text: "Évolution du prix de l'essence et du baryl de pétrole",
margin: 10
};

options.tooltip = {
formatter: function () {
return "Année : " + this.x + " Prix : " + this.y + " €";
}
};

4.3. Mettre en place l’axe des X

options.xAxis = {
categories: [],
crosshair: true,
labels: {
rotation: -45,
y: 20
}
};

On peut remarquer dans le tableau categorie[] reste pour le moment vide

il sera complété par la suite.

TD n°4 Pag e 6/8

 4.4. Créer 2 axes Y
Créer deux axes Y va permettre de comparer 2 valeurs d’ordre différent.
Dans notre exemple, on va comparer le prix de l’essence en euro autour de
1,5€ avec le prix du baril de pétrole en $ autour de 50$.
options.yAxis = [
{
title: {
text: "Gazoil & Super 95 98 (€)"
},
labels: {
formatter: function () {
return this.value + ' €';
},
style: {
color: '#000'
}
}
},
{
title: {
text: "Baryl brent ($US)"
},
labels: {
formatter: function () {
return this.value + ' $';
},
style: {
color: '#8C564B'
}
},
opposite: true
}
];

4.5. Insérer plusieurs dataset dans un graphique

options.series = [
{
name: 'Gazoil (€)',
data: []
},
{
name: 'Super 95 (€)',
data: []
},
{
name: 'Super 98 (€)',
data: []
},
{
name: 'Baryl de pétrole ($US)',
yAxis: 1,
data: []
}
];

TD n°4 Pag e 7/8

 4.6. Chargement des données dans les variables
data[]
Pour charger les données en ajax, on utilise la méthode getJSON de
Jquery pour lire le fichier de données prixEssence.json . Il suffit ensuite de
manipuler les données dans la fonction de callback pour aller nourrir les
'array' de data de chacune des séries. On en profite pour créer les catégories
(les labels) qui apparaîtrons sur l’axe des X.
$.getJSON('prixEssence.json', function(prixEssence) {

$.each(prixEssence, function(annee,prix){
options.series[0].data.push(prix.gazoil);
options.series[1].data.push(prix.super95);
options.series[2].data.push(prix.super98);
options.series[3].data.push(prix.brent);
options.xAxis.categories.push(annee);

});
chart = new Highcharts.Chart(options);
});

4.7. Accès à la base de données en PHP

La base de données "tarifEssence" contient une table prixEssence avec
des données. Ces données correspondent aux prix moyens annuels des
carburants pour l'automobile et du baryl de pétrole depuis 1995.
En respectant le modele MVC créez le Modele et le contrôleur permettant
de créer le tableau JSON prixEssence à partir de la base de données
disponnible sur le serveur 172.18.58.7

TD n°4 Pag e 8/8