Voici le type de graphique réalisable : 

Je vous laisse regarder les exemples sur cette page : 

http://sigmajs.org/

Si quelqu’un à déjà utilisé cette librairie, je serais interessé d’avoir des avis dessus, alors laissez un commentaire. 

PHPJS c’est quoi ?

Il s’agit d’une bande de tarré qui se sont lancé dans l’écriture référencée des fonctions PHP en language Javascript. Je ne sais pas si vous me suivez mais en gros ça permet de faire un « array_key_exists »  ou un « array_search » en Javascript avec 1 ligne de code. C’est un projet trop peu connu à mon goût mais pourtant très utile à la communauté et aux développeurs Javascript.

Pourquoi utiliser PHPJS ?

PHPJS est très utile pour vous simplifier la vie (surtout pour travailler avec les array). Certaines fonctions PHP sont très puissantes et permettent des traitements rapide avec les array ou avec les strings que Javascript ne possède pas nativement. Avec PHPJS on a tout ça sous la main et ça peut parfois éviter un bon nombre de ligne de code.

Comment utiliser PHPJS?

Je dirais qu’il existe 3 manières d’utiliser PHPJS.

La façon manuelle :

Il suffit d’utiliser dans un fichier de fonction (par exemple nommé utils.js) les fonctions PHPJS dont vous aurez besoin pour votre projet. Voici la page qui référence les fonctions. Il suffit de copier / coller les fonctions que vous avez besoin pour votre projet. C’est très simple à faire et surtout on optimise ici le temps de traitement des pages, la librairie complète de PHPJS est un peu lourde tout de même. (+ de 100 ko)

Les packages de fonctions :

Il existe différents packages de la librarie que l’on peut télécharger et utiliser gratuitement sur cette page. Vous aurez donc un fichier contenant toutes les fonctions PHPJS. C’est très pratique car on a pas de question à se poser, savoir si cette fonction est déjà dans son fichier de fonction ou non. (A conseiller pour les applications web plus que pour les sites web).

Les packages objet :

Ces packages permettent d’utiliser toutes les fonctions (comme dans les packages de fonctions) mais celles-ci sont encapsulées dans un objet. Ceci évite les conflits de nom avec des fonctions déjà existantes dans un projets. (A conseiller pour les applications web plus que pour les sites web).

Conclusion :

Je vous conseille donc d’aller faire un tour sur le site de PHPJS. C’est une librairie vraiment interessante qui vaut le coup d’être étudiée. Le code est très propre. J’ai aussi appris beaucoup en ouvrant les fichiers et en regardant la construction de certaines fonctions.

Ressources :

• http://phpjs.org/

J’utilise Highcharts presque quotidiennement pour ma job et je dois avouer que je suis assez content de l’avoir choisi pour plusieurs raisons :

1. Facilité d’emplois
2. Paramétrable à souhait avec un objet JSON
3. Le rendu est vraiment beau
4. Les types de graphiques (pie chart, bar graph, bubble graph, timeline, …)
5. Le module d’export intégré (JPEG, PDF, SVG, PNG)
6. Cross navigateur (fonctionne en VML et en SVG)

1 – La facilité d’emplois

En effet Highcharts est très simple d’utilisation. On est en plein dans le plug&play ! Il suffit d’ajouter le script Javascript et la feuille de style pour commencer à apercevoir la puissance de l’outil. Vous verrez dans la suite de ce tutoriel complet sur Highcharts (partie 2/3) comment faire un premier graphique. Vous allez vite comprendre que ce n’est pas sorcier !

2 – Paramétrable à souhait avec un objet JSON

Le paramétrage de Highcharts s’effectue à l’aide d’un objet JSON.  Les paramètres sont assez larges et permettent de configurer tout ce qui peut être utile dans un graphique. Le type de graph, la légende, les échelles, les labels, les axes … On peut aussi ajouter des évènements comme onClick, onMouseOver …

3 – Le rendu est vraiment beau

C’est toujours une question de goût mais je dois dire que j’ai testé quelques librairies Javascript dans ce type et que celle-ci m’a tapé dans l’oeil. Les transitions au chargement du graphique sont vraiment belles et fluides. On peut également paramétrer les couleurs et tous les éléments des graphiques ce qui permet de l’adapter facilement dans sa charte graphique. Parlez-en à votre graphiste, il comprendra

4 – Les types de graphique

Vous retrouvez dans Highcharts de quoi faire n’importe quel type de graphique : Bar, pie, donut, scatter, bubble, line, stacked, spline, area, timeline. Il est aussi possible de combiner plusieurs type de graph sur un même canvas avec des axes différents, ce qui se révèle être l’arme ultime de la librairie. Un mode permet aussi d’updater un graphique en temps réel (Voir les exemples).

5 – Le module d’export intégré (JPEG, PDF, SVG, PNG)

Highcharts propose un module d’export (fait en java) qu’il est possible d’utiliser depuis une API (à partir de leur serveur) ou que l’on peut installer en local. Encore une fois, c’est vraiment simple, si l’on active le mode d’export, le graphique se verra ajouté un petit combo-box permettant de choisir le type d’export souhaité : JPEG, PDF, SVG, PNG. Cette fonctionnalité peut paraître futile, mais je peux vous assurer que si un jour on vous demande un export, c’est un sacré gain de temps de ne pas avoir à le coder.

6 – Cross navigateur (fonctionne en VML et en SVG)

Encore une fois Highcharts marque des points puisque la librairie fonctionne sur tous les navigateurs modernes à savoir Firefox, Chrome, Safari, Opera mais aussi Internet Explorer 6, 7, 8 et 9. Les navigateurs mobiles basés sur Webkit permettent aussi d’afficher ces graphs, ce qui inclue Ipod, Iphone et Ipad.

Conclusion :

Voilà les gros points forts de cette librairie. Je concède que pour les projets commerciaux (comprenez qui rapporte de l’argent sous n’importe quelle forme), il vous faudra acheter une licence. Tout ce que je peux dire c’est que je n’est pas hésiter à dépenser les quelques 200€ pour la licence développeur. On peut ensuite l’utiliser pour n’importe quel projet. Vu le travaille qu’il y’a derrière, c’est justifié et vu le temps que l’on gagne, ça en vaut le coup.

La bonne idée est aussi d’avoir permis l’utilisation pour les projets personnels ce qui permet de vous faire une idée avant de l’acheter.

Un petit point négatif tout de même, c’est la documentation. Elle n’est pas toujours très claire et des fois on doit chercher pas mal pour trouver ce que l’on souhaite. Donc si vous avez des questions, n’hésitez pas, je pourrais peut être vous renseigner.

Références :

• Le site officiel de Highcharts
• La documentation de Highcharts