jQuery Sparklines – des micrographiques en quelques lignes
jQuery Sparklines est une extension jQuery permetant de créer très facilement des micrographiques du type de ceux qu’on peux voir dans le monde de la bourse.
jQuery sparklines Décidement jQuery ne cesse de m’étonner par sa simplicité d’utilisation et le nomùbre impressionant de plugins qu’on trouve à droite à gauche.
Vous pouvez telecharger jQuery sparklines à cette adresse. Il vous permettra le plus simplement du monde de faire des micrographiques comme ceux que l’on voit sur le screenshot.
Les données peuvent aussi bien être contenues directement dans le dom, dans l’element qui accueillera le micrographique, ou bien définies dynamiquement. Un exemple valant un long discours, voici le code pour la mise en place de 4 graphes.
La source html:
<p> Graphe avec des données dynamique: <span class="sparkline">1,3,5,8,10,7,3</span>. </p> <p> Graphe avec des données dynamique: <span class="sparklinedynamique">Chargement en cours..</span> </p> <p> Graphe en barre avec données dynamiques: <span class="enbarredynamique">Chargement en cours..</span> </p> <p> Graphe en barre avec données dans le dom: <span class="enbarre">5,4,10,8,7,9</span> </p> |
La source Javascript:
$j(document).ready(function(){ /* Sparkline simple avec les données dans le dom */ $j('.sparkline').sparkline(); /* Sparkline avec données dynamiques*/ var values = [15,6,21,2,12,18,9]; $j('.sparklinedynamique').sparkline(values); /* Graphe en barre avec valeurs dynamiques vert */ $j('.enbarredynamique').sparkline(values, {type: 'bar', barColor: 'green'} ); /* Graphe en barre rouge avec les données dans le DOM (spécifié par 'html' à la place du tableau de données) */ $j('.enbarre').sparkline('html', {type: 'bar', barColor: 'red'} ); }); |
