NB : Faire une sauvegarde de votre thème, de votre fichier et/ou votre base de données avant d’ajouter ces fonctions tutoriels.

Peity Charts – Graphiques de résultats
Expert

---- Cet article a été modifié : 1 octobre 2022

Temps de lecture : 8 minutes, 2 seconds - 407 mots

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
Peity Charts - Graphiques de résultats

Quelques exemples de graphiques Peity

5,3,9,6,5,9,7,3,5,2
226,134
5,3,9,6,5,9,7,3,5,2
6/7

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.

Laissez un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>