Comment charger des données via Ajax avec Highcharts

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=&amp;quot;Content-Type&amp;quot; content=&amp;quot;text/html; charset=UTF-8&amp;quot; />

<!-- Libs -->
<script type=&amp;#039;text/javascript&amp;#039; src=&amp;#039;https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&amp;#039;></script>
<script type=&amp;#039;text/javascript&amp;#039; src=&amp;#039;../js/Highcharts-2.1.9/js/highcharts.js&amp;#039;></script>
<script type=&amp;#039;text/javascript&amp;#039; src=&amp;#039;../js/utils.js&amp;#039;></script>
<script type=&amp;#039;text/javascript&amp;#039; src=&amp;#039;main.js&amp;#039;></script>

</head>
<body style=&amp;#039;margin:0px;&amp;#039;>
<div class=&amp;#039;wrapper&amp;#039;>
<div id=&amp;#039;essenceChart&amp;#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 ago

Savez-vous comment faire pour supprimer l'axe des abscisses ?

Répondre

Imatt

A propos12 ans ago

Salut 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épondre

madmax

A propos12 ans ago

Bonjour 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épondre

Imatt

A propos12 ans ago

Salut 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épondre

madmax

A propos12 ans ago

je te les envoie en email ? ou comment ?

Répondre

Imatt

A propos12 ans ago

webfuses@gmail.com

Répondre

Melek

A propos11 ans ago

comment peut faire pour que les autre option (title,subtitle,xaxis,yaxis) et toutes les autre option soit charger par le fichier json ?

Répondre

Imatt

A propos11 ans ago

Salut Melek, En fait tu peux créer ton graphique grâce à un json du type : options = { 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/

Répondre

Justine

A propos10 ans ago

Merci 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épondre

Imatt

A propos10 ans ago

Bonjour 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épondre

Justine

A propos10 ans ago

Sympaaaaaa! J'avais loupé cette possibilité, du coup j'ai utilisé un datepicker. Merci d'avoir répondu! Je vais continuer à suivre ton site.

Répondre

Imatt

A propos10 ans ago

Salut Justine, Ça fait plaisir :) N'hésite pas à poster quand tu as des questions :) Merci de suivre le blog ! @ Bientôt

Répondre

Jean-Paul

A propos9 ans ago

Bonjour, 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épondre

GUSS2016

A propos8 ans ago

Bonjour 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épondre

Imatt

A propos8 ans ago

Bonjour Arnaud, Y a t-il une raison pourquoi tu ne veux pas utiliser jQuery? C'est tellement pratique.

Répondre

Laisser un commentaire

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked