Comment charger des données via Ajax avec Highcharts
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 :
15 Commentaires
Benoit
A propos12 ans agoSavez-vous comment faire pour supprimer l'axe des abscisses ?
RépondreImatt
A propos12 ans agoSalut Benoit, Est-ce que tu parles de supprimer les labels de l'axe des abscisses ? Si oui voici ce qu'il fait faire : xAxis: { labels: { enabled: false; } } http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-enabled/ Dis moi si ça t'aide !
Répondremadmax
A propos12 ans agoBonjour j'ai récupéré un code pour généré des graph mais je voudrais changer deux ou trois truc dessus et ne trouve pas je pourrais t'envoyer mes fichiers pour que tu m'aides merci bcp pour ton super travail
RépondreImatt
A propos12 ans agoSalut Madmax, Merci pour ton commentaire ! Envoie moi tes fichiers en expliquant ce que tu veux changer j'essayerais de t'aider dans la mesure du possible !
Répondremadmax
A propos12 ans agoje te les envoie en email ? ou comment ?
RépondreImatt
A propos12 ans agowebfuses@gmail.com
RépondreMelek
A propos11 ans agocomment peut faire pour que les autre option (title,subtitle,xaxis,yaxis) et toutes les autre option soit charger par le fichier json ?
RépondreImatt
A propos11 ans agoSalut Melek, En fait tu peux créer ton graphique grâce à un json du type :
Répondreoptions = { chart: { renderTo: "ajaxChart" }, title: "Mon nouveau graphique", sutitle: "Peuplé grâce à un objet json", xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: "Mes données test" }, series: [ { name: "série 1", data: [22,45,12,34,23,56,67,78,76,34,45,56] }, { name: "série 2", data: [12,34,56,76,87,16,34,23,59,24,14,42] } ] }Et ensuite tu lances ton graphique avec :chart = new Highcharts.Chart(options);Voici un exemple : http://undisconnected.com/sandbox/highcharts-ajax/Justine
A propos10 ans agoMerci pour tes tutos sur Hightcharts, j'ai du m'y mettre rapidement pour un projet et ça m'a bien aidé. =) Il est donc possible avec un seul json de faire plusieurs graphes différents pour séparer les données que l'on souhaite afficher non? As tu un conseil à me donner si je veux changer dynamiquement mon axe des x: Je souhaite par exemple afficher des relevés sur une journée, un mois ou un an.
RépondreImatt
A propos10 ans agoBonjour Justine, Excuse moi pour le retard de ma réponse. Tu peux utiliser la fonction "zoomable" dans Highcarts pour ceci : http://www.highcharts.com/demo/line-time-series Est-ce que ça t'aide ?
RépondreJustine
A propos10 ans agoSympaaaaaa! J'avais loupé cette possibilité, du coup j'ai utilisé un datepicker. Merci d'avoir répondu! Je vais continuer à suivre ton site.
RépondreImatt
A propos10 ans agoSalut Justine, Ça fait plaisir :) N'hésite pas à poster quand tu as des questions :) Merci de suivre le blog ! @ Bientôt
RépondreJean-Paul
A propos10 ans agoBonjour, Ayant des données météo traitées par Highcharts(voir un exemple ici: http://www.vardecouverte.fr/NOAAcompare/NOAA.php?period=r_mensuel) j’ai une petite anomalie en ce qui concerne le graphique des précipitations. En passant la souris sur celui-ci, j'ai bien la pluie du jour qui apparait ainsi que le cumul du mois mais ce dernier n'affiche pas le chiffre après la virgule , exemple: pluie du jour 1.3mm, pluie du mois 1mm Auriez vous la gentillesse de bien vouloir m’indiquer ce que je doit rectifier et dans quel fichier. Je précise que je ne suis pas un pro de l'informatique mais autodidacte. Cordialement.
RépondreGUSS2016
A propos8 ans agoBonjour IMATT J'essaie de réaliser un graph dynamique (comme ton exemple) à partir d'un GeoJSON. Cependant je ne veux pas utiliser jquery. Comment faire? J'ai regardé les forums mais en tant que débutant, je place mal mes éléments. peux-tu m'aider?
RépondreImatt
A propos8 ans agoBonjour Arnaud, Y a t-il une raison pourquoi tu ne veux pas utiliser jQuery? C'est tellement pratique.
Répondre