NB : Faire une sauvegarde de votre thème, de votre fichier et/ou votre base de données avant d’ajouter ces fonctions tutoriels.
Publié le : 24 septembre 2022 - Modifié le : 26 janvier 2023
Temps de lecture : 8 minutes, 2 seconds - 407 mots
Partager la publication "Peity Charts – Graphiques de résultats"
Peity Charts est une magnifique librairie de graphiques qui peut nous montrer des résultats de nos requêtes WordPress.
Celle-ci est orientée surtout pour les graphiques circulaires, graphiques linéaires et graphiques à barres.
Nous allons dans ce tutoriel se donner la possibilité d’inclure la librairie dans notre site web. Donc, nous allons inclure dans notre pied de page la librairie JS en mode CDN.
Les graphiques les plus populaires
Avant de vous partager la façon d’inclure Peity Charts, il est vrai qu’il y a de plus en plus de besoins graphiques à travers les applications ou sites web.
Les utilisateurs comprennent mieux, par ces graphiques les différents résultats dynamiques. Ensuite les entreprises peuvent s’adapter à leurs clients par exemple.
Ce qui est intéressant, c’est que vous n’avez pas de limites dans les résultats, peu importe le type de résultats.
Ces graphiques peuvent très bien être pour des résultats de ventes, des résultats d’inscriptions utilisateurs, pour des résultats factures Woocommerce ….
En voici quelques librairies JS
- Flot Charts
- Morris.js Charts
- Rickshaw Charts
- Chart.js
- Peity Charts
- Sparkline Charts
- C3 Chart
- Google Charts
Quelques exemples de graphiques Peity
Donc, nous avons, dans nos exemples, ajouté nos fichiers JS dans le pied de page, et les graphiques fonctionnent très bien.
Ajouter les fichiers JS dans votre pied de page
Finalement, revenons à notre tutoriel. Nous allons, ainsi, inclure dans notre pied de page nos librairies JS dont nous avons besoin.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/peity/3.3.0/jquery.peity.min.js" integrity="sha512-L5mXjK4YbZPFEuunivJM+SKJG5qxqElc8RlaLDRd1Z5TtDACmugfzIRyFnYSGD4jPYoEMJbXhUJFZsBWDV8yLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
!function($) {
"use strict";
var Components = function() {};
/* -------------
* small charts related widgets
*/
//peity charts
Components.prototype.initPeityCharts = function() {
$('[data-plugin="peity-pie"]').each(function(idx, obj) {
var colors = $(this).attr('data-colors')?$(this).attr('data-colors').split(","):[];
var width = $(this).attr('data-width')?$(this).attr('data-width'):20; //default is 20
var height = $(this).attr('data-height')?$(this).attr('data-height'):20; //default is 20
$(this).peity("pie", {
fill: colors,
width: width,
height: height
});
});
//donut
$('[data-plugin="peity-donut"]').each(function(idx, obj) {
var colors = $(this).attr('data-colors')?$(this).attr('data-colors').split(","):[];
var width = $(this).attr('data-width')?$(this).attr('data-width'):20; //default is 20
var height = $(this).attr('data-height')?$(this).attr('data-height'):20; //default is 20
$(this).peity("donut", {
fill: colors,
width: width,
height: height
});
});
$('[data-plugin="peity-donut-alt"]').each(function(idx, obj) {
$(this).peity("donut");
});
// line
$('[data-plugin="peity-line"]').each(function(idx, obj) {
$(this).peity("line", $(this).data());
});
// bar
$('[data-plugin="peity-bar"]').each(function(idx, obj) {
var colors = $(this).attr('data-colors')?$(this).attr('data-colors').split(","):[];
var width = $(this).attr('data-width')?$(this).attr('data-width'):20; //default is 20
var height = $(this).attr('data-height')?$(this).attr('data-height'):20; //default is 20
$(this).peity("bar", {
fill: colors,
width: width,
height: height
});
});
},
//initilizing
Components.prototype.init = function() {
var $this = this;
this.initPeityCharts()
}
$.Components = new Components, $.Components.Constructor = Components
}(window.jQuery),
//initializing main application module
function($) {
"use strict";
$.Components.init();
}(window.jQuery);
</script>Vous pouvez les ajouter dans une balise script comme dans notre exemple, soit avec une fonction wp_enqueue_script
L'affichage du graphique en HTML
Voici le genre d’exemple d’un graphique en HTML
<span data-plugin="peity-line" data-fill="#6e8cd7" data-stroke="#6e8cd7" data-width="200" data-height="40">5,3,9,6,5,9,7,3,5,2</span>
Afficher des résultats dans les graphiques Peity Charts
Nous allons interagir des résultats dynamiques WordPress dans notre graphique.
Créons une fonction qui nous permet d’aller afficher le nombre des vues à chaque jour par exemple. On pourrait aussi l’adapter par mois, année.
(NB: Cette méta-key est personnalisée à nos besoins)
function woocl_get_product_views_products_bydate_peitycharts($date) {
global $wpdb;
$meta_key = $date.'_woocommerce_classement_product_count';
$totalviews = $wpdb->get_var($wpdb->prepare("
SELECT sum(meta_value)
FROM $wpdb->postmeta
WHERE meta_key = %s", $meta_key)
);
return number_format_i18n( $totalviews );
}Ici on affiche le compte d’une méta-key correspondant à une date. Nous souhaitions afficher les comptes de vues totales pour aujourd’hui, hier, avant-hier, et ce pendant les 7 derniers jours.
Ensuite nous l’affichons comme ceci dans notre Peity Chart.
<?php
$valudaysviews = wp_cache_get( 'products_days_views_mini' );
if ( false === $valudaysviews ) {
//create array variable
$valudaysviews = [];
$today = date('Ymd');
$yesterday = date('Ymd',strtotime("-1 days"));
$yesterdayone = date('Ymd',strtotime("-2 days"));
$yesterdaytwo = date('Ymd',strtotime("-3 days"));
$yesterdaythree = date('Ymd',strtotime("-4 days"));
$yesterdayfour = date('Ymd',strtotime("-5 days"));
$yesterdayfive = date('Ymd',strtotime("-6 days"));
$yesterdaysix = date('Ymd',strtotime("-7 days"));
$yesterdayseven = date('Ymd',strtotime("-8 days"));
$todayviews = woocl_get_product_views_products_bydate_peitycharts($today);
$yesterdayviews = woocl_get_product_views_products_bydate_peitycharts($yesterday);
$yesterdayoneviews = woocl_get_product_views_products_bydate_peitycharts($yesterdayone);
$yesterdaytwoviews = woocl_get_product_views_products_bydate_peitycharts($yesterdaytwo);
$yesterdaythreeviews = woocl_get_product_views_products_bydate_peitycharts($yesterdaythree);
$yesterdayfourviews = woocl_get_product_views_products_bydate_peitycharts($yesterdayfour);
$yesterdayfiveviews = woocl_get_product_views_products_bydate_peitycharts($yesterdayfive);
$yesterdaysixviews = woocl_get_product_views_products_bydate_peitycharts($yesterdaysix);
//pushing some variables to the array so we can output something in this example.
array_push($valudaysviews, array("days" => $todayviews));
array_push($valudaysviews, array("days" => $yesterdayviews));
array_push($valudaysviews, array("days" => $yesterdayoneviews));
array_push($valudaysviews, array("days" => $yesterdaytwoviews));
array_push($valudaysviews, array("days" => $yesterdaythreeviews));
array_push($valudaysviews, array("days" => $yesterdayfourviews));
array_push($valudaysviews, array("days" => $yesterdayfiveviews));
array_push($valudaysviews, array("days" => $yesterdaysixviews));
wp_cache_set( 'products_days_views_mini', $valudaysviews );
}
//counting the length of the array
$countArrayLengthdaysviews = count($valudaysviews);
?>
<span data-plugin="peity-bar" data-colors="#6e8cd7,#ebeff2" data-width="200" data-height="40">
<?php
for($i=0;$i<$countArrayLengthdaysviews;$i++){
$resultssalesdaysviews .= $valudaysviews[$i]['days'] . ",";
}
echo rtrim($resultssalesdaysviews, ', ');
?>
</span>Finalement, vous pouvez adapter notre code à votre contenu ou requête dynamique. Notre exemple montre définitivement la façon de faire et n’est pas une solution.