All posts in Javascript

Plotr, librairie javascript pour générer des graphique (utilise Canvas)

PlotrPlotr est une librairie javascript créée par Bas Wenneker qui permet de générer des graphiques en utilisant l’objet canvas et la librairie Prototype, qui fonctionne avec Safari, Firefox, Opera et IE 6 (grâce à  ExplorerCanvas).


var dataset = {
                'myFirstDataset': [[0, 1], [1, 0.8], [2, 2.3], [3, 1.3], [4, 2.56]],
                'mySecondDataset': [[0, 0.5], [1, 0.5], [2, 2], [3, 1], [4, 1.4]],
                'myThirdDataset': [[0, 0.7], [1, 0.3], [2, 1.5], [3, 0.8], [4, 1.2]],
                'myFourthDataset': [[0, 0.1], [1, 0.1], [2, 0.1], [3, 0.1], [4, 1]]
};
var options = {
        padding: {left: 30, right: 0, top: 10, bottom: 30},
        colorScheme: 'grey',
        backgroundColor: '#d8efb0',
        xTicks: [{v:0, label:'week 1'},
        {v:1, label:'week 2'},
        {v:2, label:'week 3'},
        {v:3, label:'week 4'},
        {v:4, label:'week 5'}
        ]
};

var lineChart = new Plotr.LineChart('plotr1',options);
lineChart.addDataset(dataset);
lineChart.render();

Plotr

Visiter Plotr >>
Exemple 1 >>
Exemple 2 >>

script.aculo.us Reflector, reflet d’image

scriptaculous reflector
La génération de reflet sous les images d’une page web (façon iWeb) est toujours à la mode. Après le script reflection.js, Thomas Fuchs ajoute Reflector à sa bibliothèque d’effet javascript Scriptaculous.

Scriptaculous Reflector >>
L’article sur Ajaxian >>

L’objet canvas pour Internet Explorer

J’ai déjà parlé de l’objet canvas qui permet de générer des images en javascript, utilisé notamment par Apple pour ses widgets, ou bien encore pour générer dynamiquement des effets de réflexion d’image. Jusque ici, l’objet canvas ne fonctionnait qu’avec Safari, Firefox et Opéra 9. Grâce au développeurs de Google, on peut désormais utiliser l’objet canvas avec IE, en incluant simplement un fichier javascript.

Téléchargez le fichier (+ exemples) >>

Réflexion d’image en javascript, façon iWeb

reflection.js
Avec le nouvel objet canvas en html 5, je me disais qu’il serait surement possible de générer dynamiquement un effet de mirroir sous les images, comme ce que propose la nouvelle suite d’Apple dans Pages, Keynote et iWeb. Au gré de mes recherches dans Google pour trouver plus d’infos sur les canvas, je suis tombé sur un script déjà fait qui réalise exactement ça : reflection.js.
Il suffit d’attribuer la class « reflect » aux images pour lesquelles vous souhaitez avoir un effet de réflexion, et l’image est générée automatiquement au chargement de la page.
Evidemment, ceci ne marche qu’avec les navigateurs implémentant l’objet canvas, c’est à dire Firefox 1.5, Safari 2 et Opera preview 9.

Nouvelle bibliothèque d’effet javascript

moo.fxMoo.fx est une nouvelle bibliothèque d’effet javascript basée sur prototype.js qui permet de réaliser des effets d’apparition, slide, … On pourrait dire que c’est une version light de script.aculo.us, moo.fx ne pesant que 3 kb.

Page de démo >>