NB: Make sure you do a back up of your theme, files and database before attempting the tutorials

Peity Charts – Graphiques de résultats
Expert

---- Last modified : Sep 24 2022

Estimated reading time : 7 minutes, 43 seconds - 360 words

Peity Charts is a library of charts allowing users to display results with WordPress queries. This tool focuses on circular, linear and bar charts.

With this tutorial we will show you how to include this library of charts in your website. We will the JS libray in our footer with the CDN.

Most popular charts

Before showing you how to include Peity Charts, there is more and more need to for charts in websites or applications. Users can understand better with dynamic charts and businesses can tailor them to their clients’ image. The sky is the limit when it comes to display all type of results.

These charts can be used for sales, user subscription resultss, Woocommerce invoices; just to name a few possibilities.

Here are a few examples of JS libraries:

  • Flot Charts
  • Morris.js Charts
  • Rickshaw Charts
  • Chart.js
  • Peity Charts
  • Sparkline Charts
  • C3 Chart
  • Google Charts
Peity Charts - Graphiques de résultats

Here are a few examples of Peity charts

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

So for our example, we added the JS files in our footer and the charts work as intended.

Adding JavaScript files in your footer

Here’s how we can inject the necessary JavaScript files in our footer.

<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>

Like in our example, you can inject it inside a script tag with the wp_enqueue_script function.

Displaying charts with HTML

Here’s an example of an HTML chart:

<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>

Displaying your results with Peity Charts

We are going to display WordPress dynamic results with our charts.

For example, l’ets create a function that will fetch the number of daily views. We could also tailor it by month or year.

(NB: This meta key is customized based on our requirements)

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 );	
}

Here we display our results matching a specific date. We want to display the number of views for today, yesterday, before yesterday and the last 7 days.

And then we display it this way in our 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>

You can adapt our code or dynamic requests based on your requirements. Our example only shows how to do it, but is not necessarily a solution.

Leave a Reply

Your email address will not be published. Required fields are marked *

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>