19
MARS

Chart.js - Créer des graphes performants en Javascript / HTML5

Publié le 19/03/13 à 08h50 par DJo

Chart.js est une bibliothèque Javascript permettant de créer des graphiques web sexy et performants.

Chart.js est une bibliothèque Javascript permettant de créer des graphiques web sexy et performants.

Une belle bibliothèque Javascript pour mettre en forme vos statistiques et données sur vos pages web.

Chart.js est un script de 4.5kb (gzippé et minifié) permettant de créer 6 types de graphes design:

  • Histogrammes en courbes
  • Graphes en barres
  • Graphiques radar
  • Camemberts
  • Graphiques polaires
  • Graphes Donuts

Chart.js est un script de 4.5kb (gzippé et minifié) permettant de créer 6 types de graphes design

Côté technologie, la librairie se repose sur du HTML5 Canvas pour le rendu des graphes, mais dispose d'un fallback IE7 et IE8 pour assurer la compatibilité.

De nombreuses options permettent de personnaliser intégralement vos graphiques pour les rendre adaptés à votre contenu et à votre webdesign.

La bibliothèque est indépendante de toute librairie, mais peut être utilisée conjointement à jQuery. Exemple de code pour créer un graphique en courbe:

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }
    ]
}

var myNewChart = new Chart(ctx).Line(data,options);

La documentation est complète avec un exemple d'utilisation des options disponibles.

Les graphiques sont performants et un effet de chargement leur donnent encore plus de style. On regrettera seulement le manque d'interactivité au passage de la souris sur le graphe. Pas de possibilité de connaître la valeur précise d'un point... Mais tout peut être développé !

 

Site Officiel

Baraguiné par le 19/03/13 à 12h39
Projet mort-né. Dommage.
Baraguiné par le 19/03/13 à 12h42
Il a même retiré les sources du master sur github, triste..
Article à mettre à jour Djo ^^
Baraguiné par zistoloen le 19/03/13 à 13h04
zistoloen sur La Ferme du Web
Personnellement, cela ressemble énormément à ce qu'on peut faire avec ExtJS en moins design. Par contre, c'est peut être moins lourd.
Baraguiné par le 19/03/13 à 13h08
C'est bien dommage, ce projet semblait interessant !
Baraguiné par davidaparicio le 19/03/13 à 15h48
davidaparicio sur La Ferme du Web
Bonjour à tous,

J'ai publié un backup:
http://davidaparicio.github.com/chartjs/
Baraguiné par Ouark le 19/03/13 à 17h51
Ouark sur La Ferme du Web
Il semblerait que le site ait été réactivé ainsi que les sources.
Baraguiné par le 21/03/13 à 14h39
En effet, Il a republié le site ! Merci

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web