Comment créer des graphiques dans Drupal avec les modules Charts et Charts Twig ?
Dans cet article de blog, je vais partager comment vous pouvez facilement et rapidement créer des graphiques dans Drupal en utilisant les modules Charts et Charts Twig. Ce guide sera particulièrement utile pour les éditeurs, mais aussi pour quiconque souhaitant avoir une fonctionnalité similaire dans leur CMS. Je vous invite à lire l'article ou à regarder un épisode de la série Nowoczesny Drupal (la vidéo est en polonais), où chaque activité est montrée étape par étape.
Installation des modules Charts et Charts Twig
Pour créer des graphiques dans Drupal, nous n'avons besoin que d'un module. Nous n'avons pas besoin d'installer de bibliothèques supplémentaires pour afficher ces graphiques. Tout ce dont nous avons besoin est le module Charts. Il peut être étendu en ajoutant le module Charts Twig.
L'installation est simple et ne diffère pas des autres modules Drupal. Il vous suffit de télécharger le module Charts ou Charts Twig, si vous souhaitez utiliser Twig pour nos graphiques, et de l'installer sur notre site.
Comme nous téléchargeons le module dans le répertoire Modules Contrib, il apparaîtra dans la liste de tous les modules.
Et ici, comme vous pouvez le voir, j'ai déjà installé les modules Charts et autres sous-modules, qui ajoutent des bibliothèques pour nous permettre d'afficher les graphiques donnés. Des bibliothèques populaires comme HighCharts, Chart.js, et Google Charts sont également disponibles.
Dans le reste de cet article, je vais vous montrer la configuration des graphiques en question et, surtout, comment ces graphiques sont créés dans une solution CMS comme Drupal.
Quatre méthodes pour afficher des graphiques avec le module Charts
Avec le module Charts et Charts Twig, nous pouvons afficher des graphiques de quatre manières.
La première et la plus populaire façon est de générer un tel graphique en utilisant le module Views.
La deuxième façon est d'insérer un bloc spécialement créé à cette fin avec le module Charts. Là, vous ajoutez manuellement les données que vous souhaitez voir sur l'axe X ou l'axe Y. En résultat, ce graphique apparaît.
Méthode 3. Champ dans une entité
La troisième façon est d'ajouter un champ à une entité, telle que letype de contenu. Ce champ aura également la possibilité d'insérer manuellement les données que vous souhaitez apparaître sur les axes du graphique. Nous pouvons également télécharger ces données à partir d'un fichier CSV en utilisant l'option de téléchargement.
La quatrième façon, qui est fournie par le module Charts Twig, est de générer un graphique utilisant le code PHP, Twig. Nous pouvons, dans un prétraitement, obtenir les données, par exemple, à partir de certaines API, les placer dans Twig, et les afficher sur le graphique.
De ces quatre façons, dans les Views, c'est-à-dire le module Views, et dans Charts Twig (c'est-à-dire PHP, données d'une API) nous pouvons montrer les données dynamiquement, et avec un bloc ou un champ - les données sont présentées statiquement, manuellement fournies. Et une fois fournies, elles "restent" là.
Configurer le module Charts dans Drupal
À quoi ressemble la configuration du module Charts ? Elle est simple. Nous allons à l'onglet Étendre. Si nous ne savons pas quel lien utiliser pour configurer un module particulier, dans ce cas, nous choisissons Charts, et voici un tel bouton Configurer.
Et ici, vous pouvez définir des valeurs par défaut ou avancées pour tous les graphiques nouvellement créés.
Disons que je veux que ce soit HighCharts et que les graphiques soient toujours linéaires. Il est important de noter que ces paramètres ne sont pas rigides. Chacune des méthodes d'affichage des graphiques, c’est-à-dire les Views, le Bloc, le Champ, ou Charts Twig mentionnés ci-dessus, peuvent bien sûr changer ces paramètres.
Comment créer un graphique avec le module Charts ?
Je vais maintenant montrer quatre moyens d'ajouter un graphique dans Drupal.
Méthode 1. Créer un graphique avec les prix des actions en utilisant Views
Je me suis préparé un type de contenu - Prix de l'action. Il n’a pas de reflet sur les prix des actions réels, mais l'idée est de voir comment le prix des actions change au fil du temps dans ce cas, et de le montrer sur un graphique.
À quoi ressemble ce type de contenu ? La structure du type de contenu est Prix de l'action. Allez dans la section Gérer les champs.
Ici, nous avons Date de l'action - la date s'affichera sur l'axe X, et Prix de l'action - le changement de ce prix apparaîtra sur l'axe Y. Tout cela créera un graphique cool du prix au fil du temps. Comment faire de la manière la plus simple ? Juste en utilisant la vue.
Structure -> Vues -> Ajouter une nouvelle vue
J'ajoute une nouvelle vue. Je vais l'appeler Prix de l'action. Elle créera certaines pages avec l'adresse Prix de l'action. Je sauvegarde et modifie les paramètres pour moi-même afin que, par exemple, elle me montre des champs. Pour l'instant, elle ajoute un Titre standard.
Je vais vouloir afficher le prix et la date, ce qui signifie que j'ajoute ces deux champs qui se trouvent juste dans ce type de contenu.
Et à ce stade, tout le contenu s'est affiché pour moi. Je dois ajouter un filtre - Type de contenu. Je choisis Prix de l'action et clique sur Appliquer. Tous les prix d'actions sont apparus ici. Je ne veux pas le titre, parce que je ne le veux pas sur le graphique, alors j'ai juste supprimé ce champ. Et avec cela, j'ai toutes les données dont j'ai besoin, c'est-à-dire la date et le prix.
Je vais encore le paramétrer par date. Dans le critère de tri, j'ajoute la Date de l'action, je sélectionne Trier par Descendant, et clique sur Appliquer. L'autre filtre, c'est-à-dire la date d'ajout, je vais le supprimer, je n'en ai pas besoin dans ce cas. Je vais enregistrer ces données.
Je vois qu'il y a une date du plus récent au plus ancien, avec le prix des actions en question.
Et maintenant, comment l'afficher sur un graphique ? Très simplement. Je change le format de Liste non formatée en Graphique, je donne Appliquer, et j'ai ensuite tous les paramètres visibles ci-dessus dans les paramètres généraux, c’est-à-dire, Highcharts, Line, etc.
Je définis quel champ doit fournir les données - Prix de l'action. Ensuite, j'ai des paramètres liés aux axes X et Y et aux étiquettes. Je laisse tel quel en standard, applique et un graphique montre la date et le prix de cette action. Vous pouvez également voir comment cela change dans le temps - il y a une tendance à la baisse.
À quoi ressemblent les autres graphiques ? Vous pouvez les tester dans les paramètres. Vous pouvez encore choisir un Bar, par exemple, qui est un graphique en barres.
C'est moins visible quand il s'agit des actions, mais vous pouvez expérimenter avec différents types de graphiques. Dans le cas de Charts.js, la ligne est un peu plus épaisse. Vous pouvez générer un tel graphique très rapidement.
Méthode 2. Afficher le graphique dans Drupal en utilisant le bloc
La deuxième méthode pour afficher les graphiques est avec le Bloc. Comment faire ? De manière très simple. Vous devez créer le bloc approprié.
Structure -> Disposition des blocs
Dans cette section, par exemple, nous devons sélectionner quelque chose comme Bloc de graphiques dans le contenu de Placer un bloc.
C'est le type de bloc qui est fourni juste par le module Charts. Il suffit de faire Placer un bloc et plus loin, nous trouvons les mêmes paramètres, c'est-à-dire, le type de données des graphiques (disons linéaire), et nous pouvons entrer manuellement ce qui est sur l'axe X et ce qui est sur l'axe Y.
J'entre les données 5, 3, 8, 4, 13 de sorte qu'elles soient ascendantes. Je vais également me restreindre à un bloc donné afin qu'il apparaisse uniquement sur la page principale, je sauvegarde et il est dans le contenu. Je le déplace au sommet - le bloc s'affiche correctement. Vous pouvez voir l'axe X et l'axe Y avec les valeurs - ascendantes, ce qui est la façon que nous le voulions.
Méthode 3. Générer des graphiques dans Drupal en utilisant les Champs
La troisième méthode est de créer un champ, par exemple, dans le type de contenu.
Comment faire ? Très simple. Tout d'abord, nous devons avoir un type de contenu pour lequel nous voulons ajouter le champ. Je vais l'ajouter à certains types de contenu existants. Ce sera un article.
Structure -> Types de contenu -> Article
Je vais dans l'opération Gérer les champs et je dois ajouter un nouveau champ qui affichera ce graphique pour moi. Je clique sur Créer un nouveau champ, sélectionne le graphique, puis clique sur Continuer. Je dois nommer moi-même ce graphique - field_charts - et j'enregistre les paramètres. Avec cela, ce champ est déjà ajouté et tout ce que je dois faire maintenant est d'ajouter un article.
Créer -> Article
Nous avons déjà le Champ du graphique.
De la même manière, qu'il était pour le bloc, nous sélectionnons également le type de graphique donné et insérons manuellement les données. Ici, (comme dans le bloc) il y a aussi une option pour importer un fichier CSV avec précision avec les données sur la base desquelles un graphique donné sera affiché.
Méthode 4. Créer un graphique dans Drupal avec Charts Twig
La quatrième méthode pour afficher un graphique est en utilisant Charts Twig. Pour cela, nous devons avoir le module Charts Twig installé. Je l'ai déjà.
J'ai également déjà créé un module personnalisé qui affichera le bloc pour moi. Je vais charger Charts Twig dans celui-ci avec des données ajoutées dynamiquement qui apparaîtront sur ce graphique.
Je vais maintenant passer à PhpStorm, où j'ai créé un module DCharts personnalisé. Vous pouvez générer ce genre de module avec Drush ou l'ajouter manuellement. C'est un module très simple qui crée pour moi uniquement un bloc.
Ici, il y a une classe pour le bloc et build, qui est une méthode qui détermine comment le bloc doit être construit. Elle indique ici simplement que tout le contenu se trouve dans le fichier Twig - sample_chart et transmet toujours les données personnalisées, la date et l'axe-x. Il y a des données d'exemple "10, 20, 30" de l'axe Y et des étiquettes qui seront sur l'axe X.
À quoi cela ressemble-t-il du côté de Charts Twig ? C'est très simple. Je définis le Titre, je définis la série, c’est-à-dire la variable qui sera chargée dans cette fonction Charts.
La fonction Charts est disponible dans Twig uniquement après l'installation du module Charts Twig.
La variable date est l'une des plus importantes parce qu'elle détermine les données très dynamiques qui peuvent être chargées depuis PHP. Elle provient de SampleChartBlock. Ici, elle est codée en dur "10, 20, 30," mais vous pouvez voir qu'il y a une option pour charger ces données dynamiquement en utilisant une API, par exemple. Téléchargez les données de l'API et affichez-les ici.
Dans Sample-chart.html.twig il y a déjà un déclenchement de cette fonction même. Vous pouvez voir le nom de ce graphique, son type, la série, et les données sur l'axe X et le titre.
En fait, cela suffit. Avec cela, il y a déjà un bloc disponible qui affichera ces données pour nous.
Pour afficher ce bloc, alors, bien sûr, vous devez vous rendre sur la page de disposition du bloc et placer le bloc quelque part dans le contenu. Il s'appelle SampleCharts. C'est le même nom qui a été utilisé dans PhpStorm dans le nom de ce bloc.
Je clique Placer un bloc. Il n'y a pas de configuration ici parce que les données proviennent de PHP. Je sauvegarde la configuration. Le graphique apparaîtra probablement partout maintenant parce que je n'ai donné aucune restriction.
Il y a SampleCharts - c'est le titre du bloc. Le titre du graphique est les données qui viennent juste de Twig. Sur l'axe X, nous avons les données "A, B, C", et sur l'axe Y, nous avons les données que j'ai mises là, qui sont "10, 20, et 30."
Exemples supplémentaires de graphiques
Je vais également présenter quelques graphiques qui sont reflétés dans la vie réelle, par exemple, sur des pages pour les éditeurs.
J'ai déjà préparé de telles vues qui présentent :
- Le nombre d'articles ajoutés par jour,
- Le nombre d'articles ajoutés par jour par catégorie,
- Le nombre d'articles ajoutés par jour par auteur.
Ces graphiques reflètent la réalité pour les éditeurs et les rédacteurs qui veulent savoir comment le progrès se déroule dans la création de contenu par des auteurs donnés ou dans des catégories données.
Vous pouvez également voir exactement comment et ce qui est ajouté. Par exemple, par catégorie - vous pouvez voir que le 24 juin était un coup fort en termes d'articles sur Drupal:
Bien entendu, vous pouvez également changer cette catégorie pour vous-même, par exemple, en Sécurité, et ensuite vous pouvez voir comment les articles ont été distribués dans cette catégorie.
Les graphiques affichés par auteur fonctionnent sur un principe similaire. Nous pouvons voir quels auteurs et quel genre de charge de travail ils ont en termes de création et de publication d'articles.
À quoi ressemblent ces vues ? Elles sont un peu plus compliquées que cette vue des prix des actions. Je vais la montrer en utilisant le premier graphique en exemple.
Sur l'axe X est, bien sûr, la date de création d'un article donné, c’est-à-dire, il y a Créé du contenu. La deuxième valeur, en revanche, compte le nombre d'articles un jour donné. Dans ce cas, le champ Contenu : ID est utilisé, mais vous pouvez également utiliser le champ Contenu : titre car ici c'est juste le champ qui est utilisé pour le compte.
Dans ce cas, la fonction Count, ou compter, est toujours utilisée, et à côté d'elle se trouvent les Paramètres d'agrégation. Le type d'agrégation a la traduction Numéro, mais c'est simplement un Compte.
Les fonctions d'agrégation sont disponibles lorsque le commutateur Agrégat est activé.
De cette façon, nous pouvons compter les quantités de contenu donné. Elles apparaissent simplement sur le graphique.
À quoi cela ressemblerait-il sans le graphique ? Je choisis Liste non formatée.
Ensuite, vous voyez simplement les chiffres qui comptent pour un article donné - le 2 juillet, il y avait un article, le 1er juillet - douze, et ainsi de suite. Ce comptage est possible lorsque l'agrégation est activée. Je vais maintenant revenir aux anciens paramètres avec le graphique.
Ici, vous pouvez voir quelles données vous voulez afficher sur l'axe Y - c'est le compte ID, qui est le nombre de ces articles.
Et ici, vous pouvez voir comment ce type de graphique a changé :
C'est donc moins convivial mais cela a également une certaine réflexion des données.
Les autres graphiques, à savoir le nombre d'articles par catégorie et le nombre d'articles écrits par un auteur particulier, sont faits de pratiquement la même manière. Avec cela, vous pouvez voir comment nous pouvons simplement montrer clairement les différentes données qui peuvent être appliquées aux sites Web réels.
Graphiques Drupal avec modules - résumé
Grâce à cet article, vous connaissez maintenant les quatre moyens possibles pour ajouter un graphique à votre site web sur Drupal - en utilisant le module Views, le bloc, le champ dans l'entité, et le module Charts Twig. Si vous avez besoin d'assistance pour configurer des graphiques ou tout autre type de travail technique, nous avons un service de développement CMS pour les éditeurs, et nous pouvons vous aider.
