Share
Il existe de nombreux tutoriels sur la création de graphiques à barres CSS. Mais parfois, les graphiques à barres ne suffisent pas. Que se passe-t-il si nos traces de données changent avec le temps et qu'un graphique linéaire est plus approprié? Ou peut-être que nous ne sommes pas satisfaits avec juste un graphique à barres. Entrez Flot, le plugin ajQuery qui nous permet de créer facilement de beaux graphiques.
Dans un monde axé sur les données, nous devons souvent afficher de grandes quantités de données sur le Web. Généralement, nous montrons un tableau de valeurs avec des en-têtes et si nous voulions vraiment avoir envie, nous utiliserions une image d'un graphique. Les gens aiment les images. J'aime les photos Pourquoi? Parce qu'il est beaucoup plus facile d'interpréter les données quand elles sont sous forme visuelle. Cependant, créer un graphique et le mettre à jour avec de nouvelles données peut être une tâche pénible. Dans ce tutoriel, nous allons utiliser un plugin jQuery appelé Flot pour créer des graphiques à la volée..
Pour commencer, nous avons besoin de données. Pour ce tutoriel, nous allons utiliser des données de PIB pour quelques pays différents que j'ai trouvés sur Wikipedia. Malheureusement, les données ne vont qu’en 2003, mais comme ce n’est pas une leçon d’économie, cela suffira. Mettons les données dans un tableau simple et ajoutons quelques lignes pour le décrire.
Tutoriel Flot
PIB, basé sur les taux de change, au fil du temps. Valeurs en milliards de dollars. 2003 2002 2001 2000 1999 1998 Etats-Unis 10 882 10 383 10 020 9 762 9 213 8 720 UE 10 970 9 040 8 303 8 234 8,901 8 889 Royaume-Uni 1 765 1 564 1 430 1 438 1 460 1 423 Chine 1 575 1 434 1 345 1 252 1 158 1 148 Inde 599 510 479 457 447 414 PIB, basé sur les taux de change, au fil du temps. Valeurs en milliards de dollars.
Notez que la table est contenue dans une div avec un identifiant de «plotarea». Le graphique que nous allons créer plus tard remplacera la table contenue dans cette div. Le tableau a l'air un peu moche en ce moment, ajoutons donc quelques CSS pour le rendre plus présentable.
Vous devriez avoir quelque chose qui ressemble à ceci.
Maintenant que nous avons toutes les données dans un tableau, nous pouvons commencer à ajouter du code JavaScript qui créera un graphique pour nous. Techniquement, nous n’avons pas besoin de table, mais c’est bien d’avoir deux raisons:
Liez les bibliothèques JavaScript requises. Il y en a deux, plus un de plus pour le support IE. Nous devons d'abord relier jQuery, puis la bibliothèque Flot, car cela dépend de jQuery. Comme Flot utilise l'élément canvas pour dessiner les graphiques, nous devons inclure le script ExplorerCanvas qui émule l'élément canvas dans IE. Les utilisateurs de Firefox, Opera et Safari n'en ont pas besoin. Nous allons donc utiliser des commentaires conditionnels pour nous assurer que seuls les utilisateurs d'IE le téléchargent..
Créer un graphique avec Flot est assez simple car beaucoup d’options ont des valeurs par défaut raisonnables. Cela signifie que vous pouvez créer un graphique de bonne qualité avec un travail minimal, mais vous pouvez également le modifier à votre guise. Pour créer un graphique de base, nous devons spécifier un élément conteneur et les données à représenter. L'élément conteneur doit également avoir une largeur et une hauteur spécifiées. Nous allons donc utiliser jQuery pour définir la div de «plotarea» sur une largeur de 500px et une hauteur de 250px..
Le premier paramètre est un objet jQuery de l'élément conteneur. Le deuxième élément est un tableau en 3 dimensions où les premiers tableaux enfants sont des jeux de données et les tableaux de "petits-enfants" sont des paires ordonnées spécifiant une valeur X et Y pour un plan cartésien. Représentons d'abord les données du PIB pour les États-Unis.
Le tableau de données que nous avions auparavant devrait être remplacé par un graphique de belle apparence. Comme vous pouvez le constater, le tableau contenant l'ensemble de données est contenu dans un autre tableau parent. Pour représenter graphiquement un autre jeu de données, nous l'ajoutons simplement en tant qu'élément du tableau parent. Ajoutons les données pour les autres pays de notre tableau.
var data = [[[2003, 10882], [2002, 10383], [2001, 10020], [2000, 9762], [1999, 9213], [1998, 8720]], [[2003, 10970], [ 2002, 9040], [2001, 8303], [2000, 8234], [1999, 8901], [1998, 8889]], [[2003, 1795], [2002, 1564], [2001, 1430], [ 2000, 1438], [1999, 1460], [1998, 1423]], [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158], [ 1998, 1148]], [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]];
Nous avons maintenant un graphique assez beau, mais nous ne savons pas quelle ligne correspond à quel pays! Ce dont nous avons besoin, c'est d'une légende. Heureusement, Flot le supporte et consiste à placer nos ensembles de données dans un objet JSON et à ajouter un élément label..
var data = [label: "USA", données: [[2003, 10882], [2002, 10383], [2001, 10020], [2000, 9762], [1999, 9213], [1998, 8720]] , label: "EU", données: [[2003, 10970], [2002, 9040], [2001, 8303], [2000, 8234], [1999, 8901], [1998, 8889]], label: "UK", données: [[2003, 1795], [2002, 1564], [2001, 1430], [2000, 1438], [1999, 1460], [1998, 1423]], label : "Chine", données: [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158], [1998, 1148]], label: " Inde ", données: [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]];
J'ai déjà mentionné que bien que Flot ait beaucoup de défauts par défaut. Bien qu'ils conviennent probablement à la plupart des gens, la légende masque partiellement certaines des données. Flot a un troisième paramètre pour passer des options dans un objet JSON.
$ .plot (parcelle, données, options);
Pour que les données situées à l'extrémité du graphique soient un peu plus visibles, nous allons ajuster l'opacité de l'arrière-plan et les marges de la légende..
var options = légende: show: true, marge: 10, backgroundOpacity: 0.5;
Certaines personnes (comme moi) aiment pouvoir voir exactement où sont les points de données, alors spécifions dans les options pour marquer chaque point avec un cercle d'un rayon spécifié.
var options = légende: show: true, marge: 10, backgroundOpacity: 0.5, points: show: true, rayon: 3;
Génial, nous avons des points de données, mais où sont passées les lignes?! Revenons explicitement sur.
var options = légende: show: true, marge: 10, backgroundOpacity: 0.5, points: show: true, rayon: 3, lignes: show: true;
Notre code final ressemble à ceci:
Tutoriel Flot
PIB, basé sur les taux de change, au fil du temps. Valeurs en milliards de dollars. 2003 2002 2001 2000 1999 1998 Etats-Unis 10 882 10 383 10 020 9 762 9 213 8 720 UE 10 970 9 040 8 303 8 234 8,901 8 889 Royaume-Uni 1 765 1 564 1 430 1 438 1 460 1 423 Chine 1 575 1 434 1 345 1 252 1 158 1 148 Inde 599 510 479 457 447 414 PIB, basé sur les taux de change, au fil du temps. Valeurs en milliards de dollars.
Il y a beaucoup de possibilités avec Flot. L'API Flot détaille toutes les différentes options disponibles pour peaufiner vos graphiques, notamment la spécification de différents types de graphes, couleurs, axes et même l'activation de fonctions interactives telles que la sélection et le zoom. Une autre possibilité est de rendre le tout entièrement dynamique et de générer le code JavaScript de manière dynamique avec les données d'une base de données utilisant PHP.
Accentsconagua