Mobile Menu

Highcharts : des graphiques animés et dynamiques

30 / 07 / 2015
Développement, Intégration

Vous souhaitez réaliser des graphiques interactifs sur votre site internet et vous ne savez pas comment vous y prendre ? La solution à votre problème s’appelle Highcharts.

Qu’est-ce que c’est ?

Highcharts est une bibliothèque JavaScript qui vous permet de créer des graphiques interactifs de nature dynamique ou statique. Cette librairie possède des caractéristiques qui font d’elle un outil indispensable pour la création de graphiques.

Highcharts est simple d’utilisation, compatible tous navigateurs et responsive. C’est un outil modulable et interactif proposant différents types de graphiques basés sur une structure en HTML5.

Exemple d’utilisation

Dans un premier temps, vous devez télécharger le fichier highcharts.js à l’adresse code.highcharts.com. Vous aurez aussi besoin de la librairie jQuery.

Une fois ces deux fichiers téléchargés, vous devez les inclure dans la balise <head> de votre site :

Il faut maintenant créer votre structure HTML afin de pouvoir commencer votre graphique. Dans cet exemple, nous allons créer un graphique interactif dynamique. Nous utiliserons un code en PHP afin d’extraire les informations de notre fichier CSV (vous pouvez le télécharger ici). Cela nous permettra d’interagir directement entre les données de notre graphique et le fichier CSV.

Nous devons formater les informations extraites de notre fichier CSV afin de reproduire la structure nécessaire au bon fonctionnement de Highcharts.

Voici un exemple d’application sur un graphique camembert. Vous pouvez personnaliser beaucoup d’options : couleur de rendu de votre graphique, choix de la police de caractères, taille, titre…

Voici le rendu de cette mise en application avec Highcharts :

rendu-graphique-highcharts

Pour en savoir plus sur Highcharts, vous pouvez consulter la documentation officielle en ligne : www.highcharts.com/docs