Highcharts est un plugin JavaScript gratuit vous permettant de créer facilement des graphiques interactifs. Tous ces graphiques sont réalisés en SVG, qui est un format d’image vectorielle pour le web.

Highcharts propose deux types de librairies. La première Highstock (pour la bourse par exemple) et la deuxième, celle que nous allons utiliser, Highcharts.

Pour ce tutoriel, nous allons utiliser jQuery. Il est possible de l’utiliser en « Stand Alone » (sans bibliothèque), avec Mootools et avec Prototype.

Mise en place

Ce tutoriel va s'organiser en deux parties. La première, ici, qui consistera à vous montrer comment fonctionne Highcharts et comment créer des graphiques simples. La deuxième partie viendra sous la forme d'un autre tutoriel avec cette fois-ci des graphiques dynamiques, c'est-à-dire avec des données issues d'une base de données MySQL.

Commençons d’abord par lier les fichiers JavaScript à notre page web :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

Après, comme à chaque fois où l’on utilise un plugin, il faut forcément un container pour stocker les informations. Créez donc une div (ou autre chose) avec un identifiant particulier. Par exemple :

<div id="graphique" style="width: 100%; height: 400px;"></div>

Vous pouvez après choisir la taille que vous voulez.

Création de notre premier graphique

Le plugin prend en paramètre plusieurs données. Vous en avez la liste ici : http://api.highcharts.com/highcharts

$(function () {
    $('#graphique').highcharts({
        chart: {
            type: 'bar' // pie pour des graphiques en camembert
        },
        title: {
            text: 'Consommation de fruit'
        },
        xAxis: {
            categories: ['Pommes', 'Bananes', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Nombre de fruits mangés'
            }
        },
        // Les données de notre graphique
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

Voici ce que cela donne :

Vous avez vu ce n'est pas trop dur, mais comme vous avez pu vous en rendre compte, les données sont écrites directement dans le code. Or dans un système un peu plus poussé, nous aurons sans doute besoin de récupérer les données via une base de données.

Modifier dynamiquement les données d'un graphique Highcharts

Dans notre exemple, John avait mangé 3 Oranges. Mais là, l'envie lui prends d'en manger une autre. Mais comment mettre à jour notre graphique avec cette nouvelle donnée ?

Commençons par récupérer notre objet highcharts

var charts = $('#graphique').highcharts();

Si nous faisons un console.log(charts), nous voyons plusieurs informations qui nous seront utiles pour nos mises à jours. En fouillant dedans on s'aperçoit que les informations sont structurées comme plus haut. Donc si nous voulons mettre à jour le graphique, nous devons changer les series. Nous allons donc faire :

charts.series[1].setData([5,7,4], true);

Dans series, je sélectionne 1 (deuxième entrée dans le tabeau), car c'est celle qui correspond à John. Puis avec la fonction setData, je lui passe le nouveau tableau de données et le true, permet de dire à Highcharts de redessiner le graphique.

Pour pouvez faire de même avec la fonction setSeries, qui vous permettra de rajouter une nouvelle personne.

Conclusion

Highcharts permet vraiment de grandes choses, mais la meilleure reste encore de pouvoir charger des graphiques via une base de données.

Dans le prochain tutoriel, nous verrons comment faire un système de sondage avec l'exploitation des données de 2 façons différentes. L'une en passant directement les informations en JSON et l'autre en stockant les données dans des attributs personnalisés de notre div au cas où nous avons plusieurs sondages a afficher et donc diminuer le nombre de requêtes AJAX et SQL.

Demo

2016-08-30 19:51:05

Source

http://lemon-cake.fr/?p=534