Présentation de la librairie Highcharts

Durant de nombreuses années, sur les projets PHP, la seule possibilité de tracer des graphiques de types courbe ou histogramme passait par l'utilisation de la librairie JpGraph écrite en PHP et basée elle même sur la librairie GD.
Cette dernière, bien qu'exécutant à ravir son job, avait les inconvénients d'une syntaxe lourde et la génération de graphiques sous forme d'images statiques.

Depuis, de l'eau a coulé sous les ponts et on a vu l'émergence de solutions basées sur le langage Javascript. De ces librairies JS, je retiendrai deux noms : AMCharts et HighCharts. C'est de cette dernière dont je vais maintenant vous parler.

Brève présentation

Comme indiqué ci-dessus, Highcharts est une librairie développée en JS permettant le tracé de nombreux types de graphes, des plus classiques comme les courbes, les histogrammes et les camemberts jusqu'aux plus exotiques comme les boxplot ou encore les jauges et les vu-mètres.
Cette librairie est actuellement développée et maintenue par une équipe d'origine norvégienne.

Mais entrons de suite dans le vif du sujet. Le but de cet article n'est pas de fournir une documentation exhaustive de la librairie. Je ne saurais que trop vous conseiller la lecture de la documentation officielle qui s'avère être complète et qui fourmille de nombreux exemples en tous genres.

Tracé en courbes simples

Au préalable, il vous faut inclure dans votre page HTML la librairie jQuery et bien sûr Highcharts. Dans l'en-tête de votre page HTML, placez ces deux lignes :

<script type="text/javascript" src="/assets/js/jquery.min.js"> </script>
<script type="text/javascript" src="/assets/js/highcharts.js"> </script>

Toujours dans votre page HTML, placez la ligne suivante :

<div id="rem" style="width: 500px; height: 400px;"></div>

Cette balise <div> vide va nous servir à accueillir ledit graphe. Puis à la fin de votre page copiez/collez le code suivant :

<script type="text/javascript">
var remuneration = new Highcharts.Chart({
	chart: {
        type: "line",
        renderTo: "rem"
    },
    title: {
        text: "Rémunération globale"
    },
    xAxis: {
        categories: [2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015]
    },
    yAxis: {
        title: {
            text: "Euros"
        },
        plotLines: [{
                value: 0,
                width: 1,
                color: "#808080"
            }]
    },
    legend: {
        layout: "vertical",
        align: "right",
        verticalAlign: "middle",
        borderWidth: 0
    },
    credits: {
        enabled: false
    },
    series: [
        {
            name: "Décile 1",
            data: [79550,84396,72000,67082,79104,79104,71330,82740,98537.1,103854.36,93908]
        },
        {
            name: "Quartile 1",
            data: [101660,102856,94839,87000,100000,105401,100000,110000,123420,136961.41,121705]
        },
        {
            name: "Médiane",
            data: [115700,131712,137278,135776,138763.07,145360,137204,145430,160600,177483,159016]
        },
        {
            name: "Quartile 3",
            data: [189500,193660,198500,174467,181224,176243.61,195357.24,205689.96,239440.81,239421.7,215437]
        },
        {
            name: "Décile 9",
            data: [282020,303398,303398,217900,314443.85,248088,255000,269197.11,361606.01,278168.9,268669]
        }
    ]
});
</script>

Tracé d'un histogramme

Dans votre page HTML, introduisez une nouvelle balise <div> vide :

<div id="histo" style="width: 500px; height: 400px;"></div>

Puis copiez/collez ce bout de code :

<script type="text/javascript">
var histogramme = new Highcharts.Chart({
        chart: {
            type: 'column',
            renderTo: "histo"
        },
        title: {
            text: 'Moyenne mensuelle des précipitations'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Fev',
                'Mar',
                'Avr',
                'Mai',
                'Jun',
                'Jui',
                'Aou',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Précipitations (mm)'
            }
        },
        series: [
        {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        },
        {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        },
        {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        }]
    });

</script>

A l'issue de l'exercice, vous devriez obtenir les graphiques suivants :

Voilà c'est terminé ! Vous noterez la simplicité avec laquelle nous pouvons mettre en oeuvre des graphiques beaux et puissants.
Notez également la tooltip qui s'affiche au survol des données ! La classe, non ?

A bientôt pour un nouvel article sur Highcharts !

Le blog