JQPlot est un plugin JQuery qui permet de dessiner des graphiques dans vos pages HTML. Si vous faites des pages de statistiques sur vos pages Internet vous comprendrez rapidement quelles sont les applications et surtout en quoi il vous simplifie les choses. En effet, il vous suffit de lui donner les données et de décider quel type de graphique vous voulez obtenir en sortie et le tour est joué ! On peut facilement imager une fonction PHP (ou autre) qui va générer les données qu’il faut mettre en entrée de JQPlot à partir de votre base de données.
Voici quelques exemples de graphiques que l’on peut obtenir grâce à ce plugin:
Pour faire suite à l’article sur l’optimisation, voici comment gagner du temps sur le chargement des images de vos pages web.
En général, les développeurs débutants, ou peu soucieux du temps de chargement de la page, utilisent un nombre conséquent d’images différentes. Chaque image est donc téléchargée une à une lors de l’affichage de la page web. Donc s’il y a 100 images sur la page il faudra 100 requêtes HTTP pour toutes les afficher.
Maintenant, il y a une solution alternative, le spriter, qui permet d’afficher les 100 images simultanément et en une seule requête. La page en question s’affiche donc très rapidement. Les grands sites Internet comme Google, Facebook, Amazon, … utilisent cette technique.
Voici par exemple le spriter de Google
La solution, c’est de réunir toutes les images en une seule grande et de n’afficher que la portion dont nous avons besoin grâce au css.
Nous allons utiliser cette image pour afficher seulement une icône à la fois.
Ici, je vous présente un exemple simple d’utilisation de spriter. Seulement les quatre icônes sélectionnées sont affichées, elles apparaissent toutes en même temps.
Différents sites Internet vous permettent de fusionner et de récupérer les coordonnées des icônes dans le spriter : Spritemapper , spritegen ou spritecow
Peity est un petit plugin JQuery ( 2ko ) qui permet de réaliser des graphiques sous forme de fromages, de lignes, ou de simplement barres .
Après avoir inclus votre fichier javascript dans votre page après JQuery, vous pouvez générer vos graphiques.
Pour un graphique en barre :
Dans votre code HTML :
5,3,9,6,5,9,7,3,5,2
Dans le span vous avez toutes les valeurs de votre graphique
Dans votre code Javascript :
$(« .bar »).peity(« bar »);
Voici le type de graphique obtenu :
A savoir que pour chaque type de graphique des options comme width, height ou radius permettent d’ajuster la taille des graphiques à vos attentes.
Si vous êtes un habitué à JQuery cette syntaxe ne vous choquera pas sinon reportez-vous à la page suivante pour voir les sélecteurs possibles en JQuery : Liste des selecteurs
