Pill Chart : graphe en forme de pillule

Introduction

Suite à la création du sélecteur de couleur sous forme d’une petite barre, j’ai voulu faire un graphique simple sur une dimension. J’ai repris les mêmes bases que le plugin précédent pour celui-ci.

Description

La syntaxe en JS est assez simple, un « PillChart » est défini par :

  • le DIV qui sera utilisé pour afficher le plugin
  • les données à afficher, avec les clés suivantes :
    • « label » : libellé au survol de la souris
    • « value » : valeur à faire apparaître dans la case du graphe
    • « width » : largeur en pixel ou en pourcentage
    • « cssAttr » : texte à coller dans l’attribut CSS « style »
new PillChart({
            containerId: 'pill_1',
            data: [ {
                label: "moins de 10 ans",
                value: 20,
                width: '20px',
                cssAttr: "background-color: #69C8FF;"
              }, ...
           ],
            updateCallback: function(obj){alert("clicked on : "+obj.label );}
        }).draw();

 

Démo

La page de démo est disponible sur cette page : http://jc.specs.free.fr/pillChart/demo.html

 

Démo avec une légende (générée par le plugin) :

 

Plugin jQuery pour choix de couleur

Si vous avez un sélecteur de couleur sous la forme d’un champ SELECT avec une palette de quelques couleurs, je vous propose de tester mon plugin jQuery qui le remplacera par une liste de blocs de couleurs sélectionnables. Je l’ai nommé « Short Color Selector » parce qu’il ne prend pas plus d’une ligne (d’où le « short » — Si vous avez un meilleur nom, je suis preneur !).

Voici un exemple :

Démo (avec syntaxe utilisée) : http://jc.specs.free.fr/shortColorSelector/demo.html

Dans le premier exemple, le champ SELECT est conservé. Dans le second, il est caché.

Pour plus de détail, voici les options possibles :

  • id du SELECT à utiliser pour reprendre les couleurs de la palette
  • largeur de chaque cellule de la palette (en pixels)
  • caractère de sélection de la couleur (par exemple, une étoile, check, etc…). Ce n’est pas une image car avec font-awesome, on peut trouver un picto qui ira très bien…
  • cacher ou pas le SELECT correspondant
  • appel d’une fonction JS pour déclencher un évènement lors de la sélection d’une couleur (le SELECT est mis à jour avec le choix de la couleur par défaut)

Actuellement, il n’est pas possible de choisir plusieurs couleurs en même temps, dans la même palette (je n’ai pas trouver l’intérêt que ça peut avoir — autant mettre 2 palettes pour les 2 couleurs à sélectionner…).

Merci de me donner votre avis et me dire ce qui manque.

inspiration :

Color Rotate

jc.specs à la mode Windows8

Microsoft prend une nouvelle tournure avec l’interface « MetroUI » ou »tiles » (= tuiles en français) de la version 8 de son système d’exploitation Windows8.

Plusieurs adaptations sont proposées pour les sites Web. J’ai essayé metroui.org.ua car il contient beaucoup de fonctionnalités et il est basé sur bootstrap :

  • CSS complète avec un bon choix des tailles et couleurs de tuiles
  • Icones en différentes tailles (adaptées avec le texte : h1, h2, …)
  • Des petites features bien sympas en JS (dont le scroll horizontal qui peut dérouter un peu)
  • Relativement léger à l’exécution, pas comme d’autres package « MetroUI styles »
  • Pas trop de features inutiles ou gourmandes en ressources

Voici un exemple d’installation pour le site jc.specs.free.fr, qui reprend mes essais (plus ou moins fructueux de mes projets personnels). Le choix de passer par cette interface n’a pas été sans mal, mais le résultat est plutôt original.