J’utilise de plus en plus Highcharts à mon travail et je l’apprécie de plus en plus. Voici un tutoriel qui va vous apprendre à utiliser Highcharts avec ajax. Je vais illustrer ce tutoriel avec un dataset plutôt d’actualité : le prix de l’essence mis en comparaison au prix du pétrole.
Que va t’on apprendre dans ce tutoriel sur Highcharts ?
- Comment charger des données via AJAX dans Highcharts
- Comment ajouter un 2ème axe Y à un graphique pour comparer des valeurs d’ordre différent.
- Comment travailler les labels des axes X et Y
- Comment insérer plusieurs séries de données dans un graph
Charger des données via AJAX dans Highcharts
Pour charger des données via AJAX dans Highcharts, il s’agit de construire un objet javascript contenant les options qui vont servir à générer le graph, il suffit donc de déclarer un objet et de lui attribuer les options de bases :
var chart;
var colors = ["#98DF8A", "#FFBB78", "#8C564B"];
var options = {};
options.chart = {
renderTo: 'essenceChart',
width: 588,
height: 400,
marginTop: 70,
marginLeft: 100,
marginRight: 100,
type:'line'
};
options.credits = {
enabled: false
};
options.colors = colors;
options.title = {
text: "Évolution du prix de l'essence et du baryl de pétrole de 1995 à 2012",
margin: 10
};
options.tooltip = {
formatter: function() {
return "Dépense : " + number_format(this.y,3,',',' ') + "€" ;
}
};
Définition des variables
On créer la variable « chart » qui va servir à instancier le graphique plus tard.
On créer la array « colors » pour définir ses couleurs personnelles et ainsi overwriter les couleurs par défaut.
On créer l’objet « options » qui va contenir tous les paramètres définissant le graphique.
Définition des paramètres du graph
« options.chart » représente les paramètres généraux du graph. On va pouvoir renseigner le type, la taille, les margins, le container …
« options.credits » permet de supprimer le lien vers Highcharts en bas à droite
« options.colors » définit les couleurs à utiliser (couleur par défaut si non renseigné)
« options.title » permet de donner un titre au graphique
« options.tooltip » permet de formater l’affichage du tooltip (étiquette au passage de la souris)
Créer 2 axes Y dans Highcharts
Le but de créer de axe Y est de pouvoir comparer 2 valeurs d’ordre différent. Dans notre exemple, on va comparer le prix de l’essence en euro avec une valeur autour de 1€ et le prix de baryl de pétrole en $ autour de 50$. Vous voyez où je veux en venir ?
options.yAxis = [
{
title : {
text: "Gazoil & Super 95 (€)"
},
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
}];
Je pense que la définition de l’objet parle d’elle même, en gros on créer un array contenant deux objets définissant chaque axe. La beauté de Highcharts réside dans le fait qu’elle va s’occuper de mettre à l’échelle les axes en fonction des valeurs fournis, donc rien à faire de ce côté là.
Mettre en place l’axe des X avec une rotation des labels
options.xAxis = {
categories: [],
labels: {
rotation: -45,
y: 20
}
};
Encore une fois c’est assez parlant, vous pouvez jouer avec la valeur de rotation du label pour arriver au résultat souhaité.
Insérer plusieurs dataset dans un graphique
Cela se traduit par insérer plusieurs courbe dans notre graphique avec pour chaque courbe ses valeurs propres.
options.series = [
{
name: 'Gazoil (€)',
data: []
},
{
name: 'Super 95 (€)',
data: []
},
{
name: 'Baryl de pétrole ($US)',
yAxis: 1,
data: []
}
]
Ici nous créons donc un array de series, chaque element de cet array est un objet définissant le nom et le array qui recevra les données via ajax.
Préparation du fichier HTML qui va recevoir le graphique
<!DOCTYPE HTML>
<html>
<head>
<title>Undisconnected - Prix essence illustré avec Highcharts</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; />
<!-- Libs -->
<script type=&#039;text/javascript&#039; src=&#039;https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&#039;></script>
<script type=&#039;text/javascript&#039; src=&#039;../js/Highcharts-2.1.9/js/highcharts.js&#039;></script>
<script type=&#039;text/javascript&#039; src=&#039;../js/utils.js&#039;></script>
<script type=&#039;text/javascript&#039; src=&#039;main.js&#039;></script>
</head>
<body style=&#039;margin:0px;&#039;>
<div class=&#039;wrapper&#039;>
<div id=&#039;essenceChart&#039;></div>
</div>
</body>
</html>
Chargement des données dans Highchart
Pour charger les données en ajax, j’utilise ici la methode get de Jquery pour aller lire le fichier de donnees JSON. Il suffit ensuite de manipuler les données dans votre fonction de callback pour aller nourrir les array de data de chacune de vos series. On en profite pour créer les categories (les labels) qui apparaîtrons sur l’axe des X.
$.getJSON('https://undisconnected.com/sandbox/highcharts-essence/prix-essence.json', function(essence) {
$.each(essence, function(i,e){
var theDate = new Date(parseInt(i),0,1);
options.series[0].data.push(e.gazoil);
options.series[1].data.push(e.super95);
options.series[2].data.push(e.brent);
options.xAxis.categories.push(i);
})
console.log(options.categories)
chart = new Highcharts.Chart(options);
});
Le resultat
Conclusion
J’espère que vous aurez pris plaisir à suivre ce tutoriel. Highcharts permet de customiser vos graphiques en javascript de manière simple, efficace et rapide. Comme vous le voyez, faire ce graphique n’est pas une tâche ultra complexe et pourtant le résultat obtenu est vraiment interessant.
Ressources :
