Dans de nombreuses situations, la présentation de données dans un format attrayant et facile à assimiler peut offrir de nombreux avantages. Les widgets graphiques pour WordPress vous permettent de transformer des chiffres bruts et des statistiques en une présentation visuelle et informative attrayante. Le plus souvent, ces widgets se présentent sous la forme d’une extension qui vous permet de travailler avec ces données au sein de WordPress.

Dans cet article, nous allons explorer les widgets graphiques pour WordPress, y compris les différents types que vous pouvez utiliser, les situations dans lesquelles vous les utiliserez, et bien d’autres choses encore. Dans la seconde partie de l’article, nous présenterons quelques extensions qui peuvent vous aider à mettre en œuvre des widgets graphiques, puis nous vous montrerons comment en utiliser une pour vos propres besoins.

Comprendre les widgets graphiques dans WordPress

Les sites web (y compris ceux qui utilisent WordPress) utilisent deux types de widgets : les widgets graphiques et les widgets textuels. Les widgets textuels classiques peuvent être captivants, mais les widgets graphiques affichent les informations dans un format plus attrayant.

Graphique linéaire présentant des données relatives aux chats et à deux types de couvertures sur les périodes A à N. La courbe des chats atteint un pic d'environ 8 unités au cours de la période F avant de décliner, tandis que les courbes des couvertures restent faibles et stables tout au long de la période.
Un widget graphique d’un diagramme linéaire sur la page d’accueil d’un site web.

Ces widgets comportent des composants dynamiques qui utilisent différentes représentations visuelles, telles que des tableaux, des graphiques, des cartes et des barres de progression, pour transmettre des informations complexes d’un seul coup d’œil. Cela peut vous aider à mieux communiquer avec vos lecteurs, ce qui leur permet de comprendre et d’interpréter rapidement vos données. Cela peut également améliorer l’engagement et la fidélisation des utilisateurs.

Bien qu’il existe différentes façons de présenter vos données, les widgets graphiques ont quelques éléments en commun :

  • Ils affichent les données de manière dynamique.
  • Vous pourrez proposer des éléments interactifs pour aider les utilisateurs à « creuser » dans vos données.
  • Quel que soit le design de votre site, vous pourrez personnaliser vos widgets en conséquence.
  • Dans de nombreux cas, vous pourrez proposer des mises à jour en temps réel des données que vous présentez.

Cependant, les widgets graphiques ne servent pas uniquement à ajouter une touche visuelle à votre site. Ils jouent un rôle important dans la visualisation et l’interaction avec vos données brutes.

Pourquoi les widgets graphiques peuvent-ils aider votre présentation de données sur site ?

L’utilisation de graphiques pour transmettre un message présente de nombreux avantages. Dans l’ensemble, le contenu visuel est un élément important du marketing en ligne.

Pour vous et vos données, il y a beaucoup d’autres points positifs à noter :

  • Amélioration de la visualisation des données. Les ensembles de données complexes peuvent être plus accessibles, permettant aux utilisateurs de saisir rapidement les tendances et les modèles. Ils peuvent également simplifier la manière dont vous diffusez l’information en utilisant des formats visuels polyvalents, adaptables et digestes.
  • Amélioration de l’engagement des utilisateurs. Les éléments interactifs donnent aux utilisateurs la possibilité d’augmenter le temps qu’ils passent sur le site et d’améliorer les indicateurs d’engagement globaux.
  • Esthétique professionnelle. Si vous choisissez la bonne conception, les widgets peuvent rehausser l’attrait visuel de votre site. Cet aspect poli et professionnel peut donner un avantage à votre présentation de données.

Dans tous les domaines, l’information visuelle a souvent l’avantage sur le texte, ce qui signifie que vous pouvez présenter des points de données clés d’une manière qui les rendra plus percutants C’est pourquoi il est primordial de les utiliser correctement sur votre site.

Quand utiliser les widgets graphiques sur votre site WordPress ?

L’excès d’une bonne chose devient répétitif et saturant. Cela signifie que vous devez utiliser les widgets graphiques avec soin et attention.

La bonne nouvelle, c’est qu’il existe de nombreuses situations dans lesquelles vous pouvez utiliser des widgets graphiques. Le moment le plus évident pour sortir les graphiques est lorsque vous devez simplifier des concepts complexes pour votre lectorat. Il existe toutefois d’autres cas de figure :

  • Présenter des ensembles de données complexes, lorsque vous devez mettre en évidence de grandes quantités de données ou des relations complexes entre des points de données.
  • La mise en évidence de tendances dans le temps et l’affichage de changements ou de modèles dans les données sur différentes périodes. Vous pouvez même représenter des objectifs, des étapes ou des mesures de croissance.
  • Comparer plusieurs variables pour illustrer les relations ou les différences entre diverses catégories de données.
  • Présenter des données géographiques pour des lieux spécifiques ou lorsque vos données nécessitent un contexte spatial.

Vous pouvez même utiliser des widgets graphiques lorsque vous avez besoin de l’interaction de l’utilisateur, par exemple pour des rapports dynamiques ou d’autres tableaux de bord. L’essentiel est de décider si l’affichage visuel de vos données améliorera leur compréhension et leur engagement par rapport à d’autres approches.

En bref, si le format visuel apporte de la valeur et de la clarté à vos données, il est probable qu’il conviendra à un widget graphique.

Les différents types de widgets graphiques pour WordPress

La visualisation des données elle-même se présente sous différentes formes, et chaque type d’affichage répond à des besoins différents en matière de données et de présentation. Nous n’entrerons pas ici dans les détails de chaque manière dont vous pouvez présenter vos données, bien qu’il y ait quelques options typiques et remarquables à noter.

Les diagrammes et graphiques classiques, tels que les diagrammes à barres, les diagrammes circulaires, les diagrammes linéaires et les diagrammes de surface, constituent toujours un bon choix pour la visualisation des données. Ce sont des éléments essentiels de l’approche :

Le tableau de bord des statistiques de Wikipédia indique le nombre total de pages vues au cours des deux dernières années. Une barre de recherche située en haut de la page permet aux utilisateurs d'explorer des sujets ou de consulter des questions. Le contenu principal affiche un graphique à barres dont les barres vertes représentent les données mensuelles sur les pages consultées. Les options de la barre latérale comprennent diverses mesures et filtres. Le nombre total de pages consultées est de 265 milliards.
Le site de Wikipédia présente un diagramme à barres pour sa mesure du nombre total de pages vues.

Les diagrammes de dispersion sont un peu plus complexes, mais ils vous permettent de montrer la relation entre deux variables :

Graphique en nuage de points montrant les données du box-office pour les mois de mai, juin et juillet 2021. L'axe des x va de 0 à 12, tandis que l'axe des y va de 0 à 20. Les points de couleur représentent les points de données pour chaque mois, avec une tendance générale à la hausse visible sur les trois mois.
Un diagramme de dispersion pour les mesures du box-office du British Film Institute (BFI).

Les cartes peuvent se présenter sous différentes formes. Les cartes thermiques sont utilisées dans des cas particuliers, mais elles utilisent des dégradés de couleur pour afficher l’intensité des ensembles de données. Une carte du monde interactive peut être utile lorsque vous avez besoin d’une interactivité basée sur les lieux :

Une carte du monde affichant des marqueurs jaunes avec des numéros, indiquant les emplacements des WordCamps dans différents pays et continents. La carte montre une concentration de marqueurs en Amérique du Nord, en Europe et dans certaines parties de l'Asie.
Le site web principal de WordCamp indique tous les évènements organisés dans le monde entier sur une carte interactive intégrée.

Les compteurs et les barres de progression sont plutôt destinés aux réalisations importantes. Dans ce cas, vous vous tournerez vers des compteurs de nombres qui utilisent le comptage dynamique jusqu’à une valeur finale. Les barres de progression circulaires permettent de mettre en évidence les pourcentages d’achèvement. Vous pouvez également utiliser une barre linéaire horizontale ou verticale :

La page du dépôt GitHub pour WordPress montrant la section « Community Standards ». La liste de contrôle indique que le projet a complété les éléments pour la description, le README, le code de conduite et la licence, avec quelques éléments encore en attente tels que les directives de contribution et la politique de sécurité.
L’aperçu des normes communautaires sur la page GitHub officielle de WordPress montre une barre de progression publique relative à une liste de tâches en dessous.

Même les galeries d’images, les visionneuses et les diaporamas peuvent vous aider à présenter vos données sous forme de diapositives multiples, avec des superpositions, ou presque comme une histoire. C’est là que les visualisations de la chronologie peuvent entrer en jeu, tout comme les flux de processus. Un type de visualisation de données que vous verrez souvent sur les sites de tutoriels de photographie est la « comparaison avant/après »

Deux scènes urbaines contrastées sont présentées verticalement. L'image du haut montre une vue diurne d'une rue encombrée de bâtiments et de nombreux fils électriques et ampoules suspendus. L'image du bas dépeint une ruelle humide et faiblement éclairée la nuit, avec des enseignes au néon et des distributeurs automatiques visibles au loin.
L’utilisation d’un diaporama dynamique et interactif avant/après peut vous aider à mettre en évidence les différences entre deux images par ailleurs similaires.

Cela vous permet de comparer deux versions d’une image à l’aide d’un diaporama dynamique qui glisse sur l’image, révélant l’autre. Ce type de visualisation n’est peut-être pas très utilisé dans vos cas d’utilisation, mais n’oubliez pas qu’il existe une application idéale pour chaque type de visualisation.

Où utiliser les widgets graphiques (avec des exemples)

Le type de visualisation que vous utilisez est important, mais la manière dont vous l’utilisez (et l’endroit où vous l’utilisez) l’est tout autant. En d’autres termes, il existe différentes applications pour lesquelles l’utilisation de widgets graphiques présente un grand avantage.

Vous constaterez qu’en dehors des cas d’utilisation typiques, il existe également des applications que vous voyez souvent mais que vous n’associez pas à la visualisation de données. Dans les prochaines sections, nous aborderons quelques-unes de ces utilisations.

Applications professionnelles

L’une des applications les plus courantes des widgets graphiques est la présentation de vos indicateurs clés. Pour les entreprises, il s’agit d’un gain évident en termes de présentation de leurs données d’une manière attrayante. Un diagramme à barres est facile à lire avec les bonnes valeurs d’axe et permet de visualiser les tendances des ventes dans le temps ou de comparer différents produits ou services.

Target fait partie des millions d’entreprises qui utilisent ce type de graphique pour présenter la croissance annuelle de leur chiffre d’affaires :

Infographie sur les performances financières de Target présentant le chiffre d'affaires total, le résultat d'exploitation, le bénéfice net et le bénéfice par action dilué de 2018 à 2023. Les diagrammes à barres montrent la croissance d'une année sur l'autre pour tous les indicateurs, l'année 2023 étant surlignée en rouge. Les pourcentages de performance et le TCAC sur cinq ans sont fournis pour chaque catégorie.
Target utilise des diagrammes à barres pour comparer les performances d’une année sur l’autre à partir d’un certain nombre de points de données.

Cela montre également comment ces présentations simples peuvent illustrer la relation entre différentes mesures, telles que le cout d’acquisition des clients ou la valeur de la durée de vie. Les diagrammes à barres empilées peuvent également présenter ce type de comparaison. WordPress utilise cette approche dans le répertoire des extensions pour afficher la répartition de la version d’une extension installée par les utilisateurs :

L'écran avancé d'un plugin WordPress qui montre les versions actives, le graphique des téléchargements par jour et les détails du plugin. Ces détails comprennent le numéro de version, les installations actives et les évaluations. Le plugin a plus de quatre millions d'installations actives et une note de 4,5 étoiles.
L’annuaire des extensions WordPress utilise des diagrammes à barres empilées pour montrer quelles versions les utilisateurs téléchargent.

Les diagrammes circulaires et les diagrammes en forme de beignet sont très utiles lorsqu’une entreprise souhaite présenter des données sur sa clientèle. Souvent, celle-ci sera segmentée par âge, par lieu ou par un autre facteur pertinent. Elementor utilise une visualisation de particules cool et unique pour mettre en évidence ses plus grandes bases d’utilisateurs :

Le site web d'Elementor présente une visualisation des pays qui comptent le plus d'utilisateurs dans sa communauté. Trois cercles colorés représentent les États-Unis (le plus grand), l'Allemagne (le plus grand) et le Royaume-Uni (le plus petit). Des lignes décoratives en forme de constellation relient les cercles.
Les effets de particules peuvent également servir à la visualisation de données. Elementor l’utilise pour afficher des informations relatives à sa base d’utilisateurs.

Dans d’autres cas, vous pouvez choisir de montrer les étapes importantes de votre entreprise ou la progression d’un projet. Flourish utilise une ligne du temps pour présenter son histoire, ce qui peut avoir un impact sur la fidélité à la marque :

Une chronologie montrant l'évolution de Flourish, un outil de visualisation de données. Les étapes clés comprennent l'idée initiale en 2016, le SDK pour les développeurs en 2017 et le lancement de l'éditeur de Flourish en 2018. La chronologie montre également les difficultés rencontrées dans la narration des données en 2016 et les promotions auprès des journalistes en 2018.
Le site web de Flourish utilise une chronologie attrayante pour présenter son histoire.

En fait, le commerce électronique fonctionne parallèlement aux applications commerciales générales, de sorte que tout ce qui précède peut également s’appliquer à un magasin. Néanmoins, il existe des méthodes spécifiques de visualisation des données dans ce secteur.

Mesures du commerce électronique

Les décisions d’achat ne nécessitent souvent que quelques secondes de réflexion. Il est donc essentiel de fournir rapidement les bonnes informations aux clients. Les comparaisons de produits à l’aide de diagrammes à barres ou de diagrammes en radar vous aident à comparer les caractéristiques ou les spécifications de différents produits, mais ce n’est qu’un début.

Par exemple, SRFACE utilise un guide de style interactif pour expliquer les spécifications de ses combinaisons de plongée et visualiser l’aspect de chaque variante :

GIF pour une page produit concernant une combinaison de plongée noire pour femme. Elle présente une image de la combinaison, des informations sur les prix, des options de taille et d'épaisseur, ainsi que des détails sur le produit, tels que les informations relatives à l'expédition et à la garantie. Tout au long de la page, l'utilisateur navigue entre les tailles, les styles et les informations sur le produit, qui s'affichent à l'écran.
Les guides de style interactifs peuvent être très utiles aux boutiques de commerce électronique, car ils offrent aux clients potentiels une expérience plus immersive.

Cela se rapproche d’une application commerciale, mais vous pouvez également utiliser des tableaux et des graphiques pour aider les visiteurs à comprendre les tendances en matière d’adoption de produits. Le répertoire des thèmes WordPress le fait en utilisant des diagrammes à barres :

Graphique à barres montrant les téléchargements quotidiens d'un thème WordPress au fil du temps. Le graphique indique des installations actives de plus d'un million. Le nombre de téléchargements fluctue, avec plusieurs pics atteignant environ 12 000 téléchargements par jour, entrecoupés de périodes d'activité plus faible autour de 6 000 à 8 000 téléchargements quotidiens. L'axe des abscisses s'étend de novembre 2023 à juillet 2024.
L’annuaire des thèmes WordPress comprend un diagramme à barres qui montre les chiffres de téléchargement de chaque thème au fil du temps.

Vous pouvez placer des widgets graphiques là où vous utiliseriez du texte. Par exemple, de nombreuses boutiques de commerce électronique utilisent un texte simple et contrasté pour calculer les stocks. Cependant, les barres de progression pourraient être mieux adaptées ici, car elles pourraient également renforcer l’urgence d’une vente.

Suivi des mesures en temps réel

Les visualisations en temps réel sont très intéressantes car elles permettent de voir la progression en temps réel de l’indicateur suivi. Les organisations caritatives et à but non lucratif utilisent fréquemment ce type de widgets graphiques.

GoFundMe est la plus grande plateforme de crowdfunding de la planète, et chaque collecteur de fonds dispose d’un thermomètre ou d’une barre de suivi de la progression qui se remplit à l’approche d’un objectif :

Page de collecte de fonds GoFundMe pour une équipe féminine de softball de la Petite Ligue. La page montre une photo d'équipe de jeunes filles en uniforme tenant une bannière des championnes de softball de la Petite Ligue Centrale. La collecte de fonds a permis de récolter 2 450 dollars sur un objectif de 12 000 dollars pour aider l'équipe à se rendre à la Little League World Series.
GoFundMe, la plateforme de crowdfunding la plus populaire, utilise des barres de progression et la visualisation d’un thermomètre pour montrer à quel point une collecte de fonds est sur le point d’être achevée.

Des compteurs animés ou des infographies peuvent aider à montrer l’impact en temps réel de vos produits et services. Par exemple, le site principal WordPress.org dispose d’une page dédiée qui affiche le nombre de téléchargements de la plateforme principale, mise à jour toutes les minutes :

Une page web au thème sombre qui affiche le nombre de téléchargements de WordPress 6.6, soit 44 316 991. La page a des liens de navigation pour Releases, Nightly, Counter, et Source en haut. Après quelques secondes, le nombre augmente, ce qui montre une mise à jour en temps réel du nombre de téléchargements.
Le compteur de téléchargements de WordPress.org est mis à jour toutes les minutes et affiche le nombre total de téléchargements en cours.

Kinsta utilise même un tableau pour vous aider à surveiller le temps de fonctionnement de votre site à travers nos différents services :

Un rapport de temps de fonctionnement de la page Kinsta Status montrant un temps de fonctionnement de 100 % pour le site principal Kinsta.com et le tableau de bord des affiliés sur une période de 90 jours. Le tableau de bord MyKinsta a un temps de fonctionnement de 99,89 % avec quelques brèves interruptions indiquées par des barres rouges et jaunes.
La page Statut de Kinsta propose un graphique qui indique toute période d’indisponibilité prolongée.

Cette stratégie de mise à jour « en direct » peut avoir des applications pratiques autres que faire de l’esbroufe. Dans certains cas, vous aurez besoin d’une connaissance actualisée de certaines mesures.

Analyses internes

Le contrôle des performances a un large champ d’application. Il peut s’agir d’une stratégie de mesure des indicateurs clés de performance en première ligne ou d’une vue d’ensemble personnalisée d’un indicateur particulier. Google Analytics est un bon exemple de présentation captivante d’une multitude de données relatives à un site de niche :

Le tableau de bord de Google Analytics affiche des données en temps réel sur le trafic du site web. L'interface affiche une carte du monde avec la localisation des utilisateurs, le nombre d'utilisateurs actifs et des graphiques de l'activité des utilisateurs au fil du temps. Les barres latérales présentent diverses catégories de rapports et de mesures, telles que les sources d'utilisateurs et les pages vues.
Google Analytics regroupe de nombreux types de visualisation de données sur une seule page.

DeploymentHawk, l’application d’audit de Google Lighthouse, utilise un certain nombre de diagrammes, de graphiques, de compteurs et autres pour analyser les chiffres et visualiser les résultats d’un rapport :

Le tableau de bord de DeploymentHawk affiche les mesures de performance du site web, y compris les scores de performance (96), d'accessibilité (96), de meilleures pratiques (95) et de référencement (100). D'autres mesures de performance telles que le premier tableau de contenu et le plus grand tableau de contenu sont également affichées.
L’application DeploymentHawk prend les données de Google Lighthouse et les présente à l’aide de diagrammes, de graphiques et de compteurs personnalisés.

L’outil Application Performance Monitoring (APM) de Kinsta et le tableau de bord MyKinsta font de même, en utilisant de nombreux types de visualisation de données différents en fonction des mesures que vous souhaitez voir :

L'interface du tableau de bord MyKinsta. Elle affiche diverses mesures et graphiques, notamment l'utilisation des ressources, la bande passante, les visites et l'utilisation du CDN pour les sites WordPress. La barre latérale gauche montre les options de navigation pour les différents services d'hébergement.
Le tableau de bord MyKinsta affiche différents diagrammes et graphiques basés sur les données du site.

La gamification peut toujours vous aider si vous avez des objectifs à atteindre. Todoist le fait en utilisant des diagrammes à barres et des diagrammes linéaires, ainsi que son système de points « karma » :

Le tableau de bord de Todoist affiche 4744 tâches terminées. Un indicateur de progression circulaire affiche l'objectif hebdomadaire de 26/30 tâches terminées. D'autres mesures comprennent des informations sur les stries et un diagramme à barres comparant l'achèvement des tâches au cours des quatre dernières semaines.
L’application Todoist utilise des techniques de gamification pour s’assurer que vous accomplissez vos tâches avec la plus grande efficacité.

Enfin, certaines organisations à but non lucratif publient leurs résultats internes. Cela crée une dichotomie unique entre la présentation au public et l’utilisation des données comme baromètre interne. Par exemple, la Fondation Gates prend sa philosophie et sa vision internes, les applique à l’avenir et crée ainsi un excellent exemple de statistiques prédictives :

Un graphique montrant la possibilité de sauver des millions de vies grâce à l'accessibilité de l'innovation. Le graphique à zones empilées prévoit 2 millions de vies sauvées d'ici à 2030 et 6,4 millions d'ici à 2040, réparties par région : Afrique subsaharienne, Asie du Sud et autres PFR-PRI.
La Fondation Gates utilise des diagrammes à barres uniques pour promouvoir sa philosophie et ses actions.

Grâce à cette flexibilité dans le type de visualisation et l’application, vous pouvez également exploiter la capacité d’adaptation des widgets graphiques. La suite de cet article vous montrera comment le faire avec WordPress.

Plugins qui vous aident à afficher des widgets graphiques pour WordPress

Bien sûr, pour mettre en œuvre des widgets graphiques sur WordPress, vous utiliserez une extension. Dans les deux sections suivantes, nous allons examiner quelques-unes des meilleures options qui s’offrent à vous – sans ordre particulier.

1. Visualizer : Tableaux et graphiques

Visualizer de ThemeIsle est un choix solide pour les extensions de widgets graphiques gratuites. Elle prend en charge une variété de types de graphiques et est simple à utiliser, comme le sont ses autres thèmes et extensions.

L'image de la bannière d'en-tête de WordPress.org pour le plugin Visualizer. L'image présente différents types de graphiques et de visualisations de données, en mettant l'accent sur des fonctionnalités telles que plus de 14 graphiques, des shortcodes, des animations de graphiques et des capacités d'édition en direct.
L’image d’en-tête de l’extension Visualizer provient de WordPress.org.

Il propose quatre types de graphiques différents, un éditeur de données avec une interface de type feuille de calcul et de nombreuses options de personnalisation. L’extension s’intègre également à Google Charts (et à d’autres API de Google). Cependant, bien que cette extension dispose de toutes les fonctionnalités, vous devez payer pour la version premium (199 $ par an) pour accéder à plus de types de graphiques et d’édition.

La version gratuite conviendra toutefois à la plupart des utilisateurs, en particulier pour une visualisation de données basique mais magnifique.

2. Data Tables Generator par Supsystic

À première vue, Data Tables Generator ne semble pas avoir sa place dans cette liste d’extensions de widgets graphiques pour WordPress. Après tout, comme son nom l’indique, vous ne pouvez créer que des tableaux de données textuels. C’est vrai pour la version gratuite, mais l’édition premium inclut beaucoup plus de fonctionnalités, y compris des diagrammes et des graphiques.

L'image d'en-tête du plugin Data Tables Generator de WordPress.org. Il existe un ensemble d'icônes et d'éléments d'interface représentant les caractéristiques d'un système de gestion de données, notamment les types de données, les formules, la fonctionnalité de recherche, le tri et les outils de création de tableaux.
L’image d’en-tête de l’extension Data Tables Generator provient de WordPress.org.

La bonne nouvelle, c’est que vos créations peuvent être fantastiques dès leur sortie de la boite. Vous disposez de toutes sortes d’options de visualisation, telles que les diagrammes à barres et linéaires, les diagrammes en forme de beignet, les graphiques à bulles, et bien plus encore. Nous pensons également que les options de tri et de filtrage sont les plus performantes.

Cela signifie que l’extension conviendra parfaitement aux sites qui ont besoin d’un haut niveau d’interactivité, en particulier s’ils ont également besoin de tableaux de données et de représentations de données plus visuelles.

Malgré cela, il n’y a pas de diagrammes ou de graphiques disponibles dans la version gratuite. Avec une licence à vie coutant 89 $, Data Tables Generator est une bonne affaire pour la fonctionnalité que vous obtenez.

3. amCharts : Graphiques et cartes

L’extension amCharts est unique en ce sens qu’elle se connecte à un réseau de diffusion de contenu (CDN) externe pour fournir sa bibliothèque. En tant que telle, l’extension vous aide seulement à connecter les bibliothèques JavaScript à WordPress plutôt que de créer les graphiques directement.

L'image d'en-tête du plugin amCharts de WordPress.org. Elle montre une vague sinusoïdale blanche superposée à des graphiques à barres verticales grises sur un fond dégradé violet. Le premier plan montre la silhouette noire d'un paysage montagneux ou vallonné, créant un effet de superposition avec les éléments graphiques.
L’image d’en-tête de amCharts provient de WordPress.org.

Les fonctionnalités d’amCharts sont étendues et offrent un haut niveau de personnalisation. Cependant, vous devez utiliser l’interface d’amCharts pour créer vos widgets graphiques, ce qui implique de passer d’une plateforme à l’autre.

Si vous avez besoin d’un ensemble varié de types de graphiques et que vous êtes satisfait de l’interface d’un tiers, amCharts pourrait vous convenir. Cependant, il n’y a pas de niveau gratuit pour accéder aux diagrammes ou aux graphiques, vous aurez donc besoin d’une licence premium à partir de 80 $ par an.

4. Graphina – Tableaux et graphiques Elementor

Si vous utilisez Elementor, vous disposez déjà de quelques options de widgets graphiques dans le constructeur de pages. Cependant, Graphina renforce ces options avec de nombreux tableaux, graphiques et autres types de visualisation de qualité.

L'image d'en-tête du plugin Graphina de WordPress.org. La bannière montre des exemples colorés de diagrammes radiaux, de graphiques linéaires et d'autres visualisations de données sur un fond sombre.
L’image d’en-tête de Graphina provient de WordPress.org.

Cette extension possède le plus grand nombre de types de graphiques et de designs dans une extension de widget graphique gratuite et a une intégration profonde avec Elementor et Divi. Vous disposez également d’options de personnalisation parmi les plus complètes disponibles dans n’importe quelle extension, et encore plus dans une extension gratuit.

Cela semble incroyable, mais la version premium augmente encore les fonctionnalités pour faire de Graphina l’extension de widget graphique la plus complète pour WordPress. Bien sûr, vous aurez besoin d’Elementor (ou Divi) pour profiter de l’ensemble des fonctionnalités, ce qui pourrait être un obstacle. Pour 49 $, cependant, cela peut valoir la peine de passer à l’un de ces constructeurs de pages populaires.

5. wpDataTables

Tout comme Data Tables Generator, wpDataTables ne se concentre pas sur les diagrammes et les graphiques. Vous pouvez cependant le faire avec l’extension, et les résultats sont de qualité. Les sites qui traitent de grands ensembles de données complexes voudront jeter un coup d’œil à cette extension.

L'image d'en-tête du plugin wpDataTables de WordPress.org. La bannière présente un fond bleu foncé avec le logo du plugin et le texte The Best Tables & Charts WordPress Table Plugin. Des exemples de tableaux, de graphiques et de tarifs sont affichés sur le côté droit de l'image.
L’image d’en-tête de wpDataTables provient de WordPress.org.

Comme vous pouvez vous y attendre, il y a plus d’options pour créer des tableaux ici, mais il y a une intégration avec Google Charts et Charts.js pour vous donner 15 types de visualisation différents. Il est capable de gérer de grands ensembles de données et les options d’importation de sources sont fantastiques. Vous pouvez importer des données à partir d’Excel, de XML, de fichiers CSV, de JSON et même de tableaux PHP si vous avez de l’expérience en développement.

Cependant, en raison de l’accent mis sur les graphiques, il n’est pas aussi simple de les construire avec wpDataTables. Cette courbe d’apprentissage, en plus de la quantité de fonctionnalités cachées derrière l’édition premium (à partir de 39 $ par an), pourrait vous amener à regarder ailleurs.

6. Ninja Charts

La dernière extension de notre liste est entièrement gratuit, sans aucun niveau de prix premium. Ninja Charts pourrait être la bonne solution si vous êtes novice en matière de visualisation de données, mais il offre les fonctionnalités nécessaires pour rivaliser avec les meilleurs.

L'image d'en-tête du plugin Ninja Charts de WordPress.org. Elle montre un homme d'affaires assis sur des formes géométriques et utilisant une tablette, connectée à des icônes représentant des feuilles de calcul, des graphiques et des analyses. Un graphique à barres ascendantes et des éléments de tableau de bord sont affichés sur le côté droit.
L’image d’en-tête de Ninja Charts provient de WordPress.org.

Il offre une grande sélection de types de graphiques et vous donne la possibilité de les personnaliser en fonction de vos besoins. L’interface est simple, et il offre une intégration profonde avec une autre extension du même développeur, Ninja Tables.

Malgré cela, il y a des limites. D’autres utilisateurs se plaignent du manque de fonctionnalités de base, comme l’agrégation de données, par exemple. Vous ne pouvez pas battre le prix, cependant, et nous croyons toujours qu’il peut convenir à de nombreux sites différents avec ce qu’il offre.

Comment ajouter des widgets graphiques pour WordPress en utilisant le plugin Visualizer

Passons rapidement en revue le processus d’ajout d’un widget graphique à votre site Web WordPress. Nous utiliserons Visualizer, car nous l’avons suffisamment apprécié pour en faire notre favori.

Cependant, il ne s’agit pas d’un tutoriel sur Visualizer. Par conséquent, les étapes que nous suivons ici peuvent différer de celles de la solution que vous avez choisie. Dans cette optique, installez et activez l’extension de votre choix, puis créez un nouveau diagramme ou graphique.

Dans Visualizer, cette option est disponible dès l’installation :

L'assistant de démarrage du plugin Visualizer. Il présente des options permettant de sélectionner différents types de graphiques, tels qu'un diagramme circulaire/donut, un diagramme à barres et un diagramme linéaire. L'interface comprend un indicateur de progression en haut et un bouton Enregistrer et continuer en bas.
L’assistant de démarrage de l’extension Visualizer.

Très probablement, il y aura un bouton Ajouter un nouveau graphique quelque part dans le panneau d’administration de l’extension :

Le tableau de bord d'administration de WordPress affichant l'interface de la bibliothèque du visualiseur. Le bouton Ajouter un nouveau, surligné en rouge, figure en haut de l'écran. En dessous se trouvent des filtres déroulants pour les types, les bibliothèques, les dates et les sources. La zone de contenu principale montre le début d'un graphique linéaire étiqueté #216 avec une ligne bleue représentant les données Cats.
Ajouter un nouveau graphique en utilisant l’extension Visualizer dans WordPress.

Une fois que vous aurez cliqué sur le bouton et sélectionné votre type de graphique, vous devrez saisir vos données. La version gratuite de Visualizer ne prend en charge que l’édition manuelle, mais votre extension pourrait offrir des intégrations et des options d’importation pour une variété d’outils :

L'interface d'édition de données pour Visualizer. La partie gauche présente une zone de texte avec des valeurs séparées par des virgules, tandis que la partie droite offre des options pour importer des données à partir de différentes sources telles que des fichiers, des URL et des bases de données.
Édition de l’ensemble des données d’un graphique dans l’extension Visualizer.

Ensuite, vérifiez les options de personnalisation dont vous disposez. Visualizer les inclut dans l’écran de création du graphique. Vous disposez de paramètres pour toutes sortes d’aspects, tels que la position du titre, les étiquettes des axes, les lignes de la grille, la taille et l’emplacement du graphique, et bien d’autres choses encore :

L'onglet Paramètres du visualiseur, qui présente une interface de graphique linéaire avec trois séries de données intitulées Cats, Blanket1 et Blanket2. La partie droite présente les options permettant d'ajuster les paramètres généraux, y compris un menu déroulant permettant de définir la position du titre du graphique.
Personnalisation de la conception dans Visualizer.

L’étape finale consiste à intégrer votre graphique sur votre site. De nombreuses extensions utilisent des codes courts à cet effet, ce qui signifie qu’il vous suffit de copier et de coller le graphique dans l’article ou la page de votre choix :

Une partie de l'interface du plugin Visualizer qui montre les paramètres du graphique et un shortcode. Le code court apparaît dans une zone de texte avec un bouton Copier à côté. En dessous, il y a des onglets pour Source, Settings, et Help, avec des sections extensibles pour General Settings et Horizontal Axis Settings visibles.
Un code court pour un graphique Visualizer.

Visualizer fournit également un bloc pour cela, ce qui est pratique et conforme à la conception moderne de WordPress.

Pratiques typiques pour l’affichage de vos widgets graphiques

Il est important de prendre en compte quelques aspects lors de la présentation de vos diagrammes et graphiques. En bref, traitez-les comme le contenu important et percutant qu’ils sont, et cherchez à limiter le nombre de widgets que vous affichez. Pour aller plus loin, considérez les points suivants :

  • L’emplacement. Vos widgets doivent s’intégrer naturellement dans le flux de votre contenu, tout comme vos images et vos vidéos. Les widgets graphiques se situent souvent à cheval entre les médias et le contenu.
  • Vitesse de chargement. Veillez à surveiller les performances de votre site après avoir ajouté des widgets. Certains d’entre eux peuvent avoir un impact sur les performances de votre site.
  • Accessibilité. Même si vous proposez des données visuelles, veillez à inclure un texte alt approprié et à permettre la navigation à l’aide d’un clavier. Cela permet à tous les utilisateurs d’accéder à vos widgets, quel que soit leur niveau de vue.

En ce qui concerne les performances, il convient d’être attentif à cet aspect. De nombreuses facettes peuvent affecter la vitesse de votre site, ce qui est logique étant donné la charge de vos graphiques supplémentaires. Nous vous conseillons d’utiliser des SVG dans la mesure du possible. Ils sont plus performants que les images matricielles pour les graphiques et les icônes simples, et offrent une meilleure évolutivité.

Le chargement différé et la mise en cache peuvent également s’avérer utiles, car ils limitent tous deux le chargement de vos graphiques de différentes manières. Si vous décidez d’extraire des données de sources externes, veillez à choisir des connexions efficaces afin de minimiser le nombre de requêtes HTTP que vous envoyez. L’approche la meilleure et la plus optimale consiste à héberger ces données sur le serveur de votre site, même si vous n’avez pas forcément le contrôle sur cette décision.

Résumé

Les widgets graphiques pour WordPress vous permettent de visualiser vos données textuelles typiques sur votre site. Cette méthode de présentation et de visualisation des données peut transformer des informations complexes en un format plus digeste. Vous pouvez afficher ces données à l’aide de tableaux, de graphiques, de cartes interactives, etc.

Il est essentiel de choisir le bon plugin pour cette tâche, et nous en couvrons un grand nombre dans cet article. Visualizer est une excellente option, tout comme Graphina. Cependant, le choix de l’outil adéquat dépend de vos propres besoins. Il peut sans aucun doute avoir un impact positif énorme sur votre site et son engagement.

Les widgets graphiques pour WordPress sont-ils suffisamment importants pour que vous les mettiez en œuvre ? Nous serions ravis de connaitre votre avis dans la section des commentaires ci-dessous !

Jeremy Holcombe Kinsta

Rédacteur en chef du contenu et du marketing chez Kinsta, développeur web WordPress et rédacteur de contenu. En dehors de WordPress, j'aime la plage, le golf et le cinéma. J'ai aussi des problèmes avec les personnes de grande taille ;).