Création de graphique facile avec Yacs
Cet été yacs en grandement évolué. La version de décembre 2009 est encore en béta mais la version 9.8 propulse déjà plusieurs créations de site internet par actupro. Cette version propose une utilisation facile de la librairie Open Flash Chart
La librairie Open Flash Chart
Comme son nom l'indique cette librairie permet de créer des graphes au format flash en passant des paramètres à une application flash par l'intermédiaire d'une page html classique via des balises object et embed.
Cette application est en licence LGPL tout comme l'est Yacs.
http://teethgrinder.co.uk/open-flash-chart-2/
Intégration dans Yacs
Yacs n'intègre des librairies que lorsque la licence le permet c'est à dire quand elle est compatible avec la licence LGPL. Open Flash Chart fait donc partie intégrante de yacs mais Yacs ne se contente pas uniquement de çà. Le code Yacs [ chart ]permet de générer des graphes à l'aide de cette librairie en s'affranchissant totalement de l'usage des balises html. On se doute bien qu'il faut quand même passer des paramètres d'une façon ou d'une autre. Le code yacs est assez structurant pour retrouver facilement ses petits. Voici un petit exemple pour vous en faire la démonstration
<p>[ chart=320, 256 ]</p>
{ "elements": [
{ "type": "line", "values": [ 3, 4, 5, 4, 3, 3, 2.5 ], "dot-style": { "type": "hollow-dot", "colour": "#FBB829", "dot-size": 4 }, "width": 1, "colour": "#FBB829", "tip": "Gold #val#", "text": "Mr Gold", "font-size": 10 },
{ "type": "line", "values": [ 2, 2, 2, 2, 2, 2, 2 ], "dot-style": { "type": "star", "colour": "#8000FF", "dot-size": 4 }, "width": 1, "colour": "#8000FF", "tip": "Purple #val#", "text": "Mr Purple", "font-size": 10, "loop": true } ],
"title": { "text": "Radar Chart" },
"radar_axis": { "max": 5, "colour": "#DAD5E0", "grid-colour": "#DAD5E0", "labels": { "labels": [ "Zero", "", "", "Middle", "", "High" ], "colour": "#9F819F" }, "spoke-labels": { "labels": [ "Strength", "Smarts", "Sweet Tooth", "Armour", "Max Hit Points", "foo", "bar" ], "colour": "#9F819F" } }, "tooltip": { "mouse": 1 },
"bg_colour": "#ffffff" }
[ /chart ]
par
[chart=320, 256]{ "elements": [
{ "type": "line", "values": [ 3, 4, 5, 4, 3, 3, 2.5 ], "dot-style": { "type": "hollow-dot", "colour": "#FBB829", "dot-size": 4 }, "width": 1, "colour": "#FBB829", "tip": "Gold #val#", "text": "Mr Gold", "font-size": 10 },
{ "type": "line", "values": [ 2, 2, 2, 2, 2, 2, 2 ], "dot-style": { "type": "star", "colour": "#8000FF", "dot-size": 4 }, "width": 1, "colour": "#8000FF", "tip": "Purple #val#", "text": "Mr Purple", "font-size": 10, "loop": true } ],
"title": { "text": "Radar Chart" },
"radar_axis": { "max": 5, "colour": "#DAD5E0", "grid-colour": "#DAD5E0", "labels": { "labels": [ "Zero", "", "", "Middle", "", "High" ], "colour": "#9F819F" }, "spoke-labels": { "labels": [ "Strength", "Smarts", "Sweet Tooth", "Armour", "Max Hit Points", "foo", "bar" ], "colour": "#9F819F" } }, "tooltip": { "mouse": 1 },
"bg_colour": "#ffffff" }
[/chart]
Des horizons qui s'ouvrent
Cette librairie intégré à Yacs ouvre donc de multiples possiblités pour illustrer des articles mais aussi et surtout pour développer des applications spécifiques à l'aide des overlay. En effet il est tout à fait possible de gérer les données du graphe dans un overlay ou même plusieurs et de restituer ces données sous formes de graphe en générant le code yacs (ou le code html directement pour ceux qui maitrisent mieux le langage php et html) dans un overlay ou même un layout. Avec ce principe yacs peut construire un diagramme de Gant à la volée. Et ce n'est qu'un exemple.
Retrouvez d'autres exemples de graphique sur yacs.fr