WordPress et visualisation de données

Publié: 2022-02-04

Avez-vous tout un tas de données que vous souhaitez présenter sur votre site WordPress sous forme de graphique ? Peut-être des statistiques de vente ou des données qui montrent à un client comment vous avez amélioré le trafic vers son site Web sur une période de plusieurs mois ? Quelle que soit la raison, la présentation visuelle des données facilite grandement la communication des points essentiels avec votre public tout en étant plus agréable… après tout, à moins que vous ne soyez un vrai geek des chiffres, en vous penchant sur des feuilles de calcul avec des rangées et des rangées de chiffres n'est l'idée de personne de beaucoup de plaisir !

Vous aimerez peut-être l'idée de présenter les données de manière visuelle, mais la question clé est « comment faites-vous ? ». Il peut être tentant de créer un graphique ou un camembert dans un logiciel de conception graphique (comme Canva), puis de placer l'image sur votre site Web. Cela fera certainement le travail, mais que se passerait-il s'il y avait un meilleur moyen ?

Heureusement, il y en a, et, étant WordPress, tout commence par un plugin ! Dans cet article, nous examinerons certaines des options de plug-in disponibles pour vous aider à afficher ces données de manière conviviale, intéressante et lisible. Allons-y!

Graphiques faciles

Le plugin Easy Charts est un plugin populaire et gratuit qui fait le travail. Il n'a pas été mis à jour depuis un certain temps, mais cela semble être davantage dû au fait qu'il continue de fonctionner correctement "tel quel" qu'à une négligence importante.

Il est bien présenté et assez simple pour commencer. Une fois installé, dirigez-vous directement vers le lien du menu "Ajouter un nouveau" à partir de la zone d'administration d'Easy Charts.

Vous verrez que vous pouvez ajouter des données dans des lignes et des colonnes (un peu comme vous le feriez dans un Excel ou d'autres feuilles de calcul. En prime, il y a un panneau de prévisualisation pour que vous puissiez voir les résultats à la volée.

La configuration est détaillée. Vous pouvez personnaliser le style, la typographie, la légende, les couleurs et plus encore pour obtenir le look que vous souhaitez. Il existe plusieurs façons de présenter vos données… celle que vous choisirez dépendra en grande partie du type de données que vous présentez.

Diagramme à bandes
Graphique en aires
Graphique à barres empilées
Graphique en aires empilées
Graphique à barres en pourcentage
Graphique en pourcentage
Diagramme circulaire
Graphique en anneau
Intensifier le graphique à barres
Graphique en cascade
Graphique en ligne
Carte de la zone polaire

Lorsque vous avez créé votre graphique, vous recevez un shortcode que vous pouvez ensuite coller dans un article ou une page. Alternativement, vous pouvez ajouter votre graphique directement depuis l'éditeur visuel, si vous en utilisez un, à l'aide d'un bouton d'insertion rapide "Easy Charts".

Le plugin a été développé à l'aide de la bibliothèque Javascript uvCharts et crée des graphiques avec des transitions SVG et CSS3. En prime, vous pouvez également télécharger tous les graphiques que vous créez sous forme de fichier image. Enfin, vous remarquerez également que les graphiques sont réactifs… un must dans le monde actuel de la conception Web mobile.

Visualiseur

Le plugin Visualizer est un autre choix populaire pour créer de beaux graphiques et diagrammes réactifs pour votre site Web. Avec plus de 40 000 installations et une multitude de bonnes critiques, c'est une excellente option.

Après avoir installé et activé le plugin, vous devriez voir sa liste dans le menu WordPress. Cliquez sur "Visualizer -> Ajouter un nouveau graphique" pour ajouter votre premier graphique.

Une fenêtre contextuelle apparaîtra qui vous guidera tout au long du processus de sélection des options qui sont parfaites pour vos besoins particuliers en matière de graphique.

Vous avez le choix entre 6 modèles gratuits :

Table
Tarte/Beignet
Ligne
Zone
Géo
Bar

Vous pouvez télécharger vos données CSV localement ou importer des données à partir d'un fichier CSV distant ou d'une feuille de calcul Google. Vous voudrez probablement d'abord télécharger le modèle de fichier CSV, mais pour vérifier que vos données sont structurées de manière à ce que le plugin comprenne. Vous pouvez également importer des données à partir d'une source JSON distante ou ajouter des données manuellement.

Dans l'onglet Paramètres, vous trouverez une gamme d'options qui vous permettent de modifier le style de votre graphique avant de le publier.

Une fois que vous avez créé votre graphique, vous pouvez copier son shortcode associé ou l'exporter sous forme de CSV ou d'image. Le plugin Visualizer utilise l'API Google Visualization, DataTables.net et ChartJS pour accomplir ce qui précède.

wpDataTables

Le plugin wpDataTables est un autre excellent choix pour créer des tableaux de données et des graphiques à afficher sur votre site Web WordPress. C'est un plugin premium mais offre une version gratuite légère qui pourrait bien fournir suffisamment de fonctionnalités pour de nombreux projets.

Une fois installé et activé, rendez-vous sur "wpDatatables -> Créer un graphique" pour commencer.

Vous pouvez utiliser l'assistant et suivre les étapes pour créer le graphique de votre choix. Définissez un nom pour le graphique, choisissez le moteur de rendu et le type de visualisation, puis récupérez les données source qui doivent être une table créée avec le même plugin.

Examinons ce processus un peu plus en détail afin d'examiner une fonction non offerte par les plugins mentionnés précédemment. Cliquez sur "Créer un tableau" pour commencer.

Comme vous pouvez le voir, vous pouvez soit le créer à partir de rien, soit extraire le contenu du tableau d'une source existante. Pour cet exemple, nous choisirons de créer à partir d'une source existante. Après avoir cliqué dessus, il nous sera alors demandé de choisir le "Type de source de données d'entrée".

Dans la version gratuite, nous pouvons utiliser le format de fichier CSV, Excel, XML ou JSON ou fournir un objet PHP sérialisé.

C'est une fonctionnalité intéressante car elle offre le choix de présenter les données de votre base de données. Ce n'est pas le plus facile à faire, mais bon, nous sommes prêts à relever un défi !

Dans cet exemple, disons que nous voulons voir des statistiques qui montrent le nombre de messages par rapport aux pages.

Le code PHP qui génère le tableau sérialisé devrait ressembler à ceci :

 <?php include('wp-blog-header.php'); header("HTTP/1.1 200 OK"); $return_array = array(); $posts_query = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish' ) ); $pages_query = new WP_Query( array( 'post_type' => 'page', 'post_status' => 'publish' ) ); $posts = $posts_query->found_posts; $pages = $pages_query->found_posts; $return_array[] = array( 'Type' => 'Posts', ' Count' => $posts ); $return_array[] = array( 'Type' => 'Pages', 'Count' => $pages ); echo serialize( $return_array ); ?>

Selon la documentation officielle fournie par wpDataTables, les entrées du tableau parent seront analysées en tant que lignes, les clés du tableau enfant seront analysées en tant qu'en-têtes de colonne et les valeurs du tableau enfant en tant que valeurs de cellule.

Nous avons enregistré le code dans un fichier que nous avons nommé test.php et, pour les besoins de cet exemple, nous le placerons dans le dossier racine de notre installation WordPress.

De retour dans la zone d'administration, nous allons remplir le chemin du fichier comme ceci :

Nous enregistrons les modifications et le tour est joué.

Nous pouvons maintenant définir le tableau comme source du graphique, sélectionner le type de graphique et enregistrer le graphique. Aussi simple que cela! Les étapes finales consistent à suivre l'assistant jusqu'à sa conclusion, ce qui impliquera de peaufiner les paramètres disponibles pour obtenir la conception souhaitée pour votre graphique. Après cela, vous êtes libre de le publier.

Conclusion

Il est extrêmement utile de pouvoir afficher des données de manière visuelle sur un site Web. Cependant, de nombreux utilisateurs de WordPress ne réalisent tout simplement pas que c'est une chose relativement facile à faire à l'aide d'un plugin. J'espère que ce qui précède vous a donné une idée des options qui s'offrent à vous. Bonne construction de graphes !