NB: Make sure you do a back up of your theme, files and database before attempting the tutorials
Last modified : Sep 24 2022
Estimated reading time : 7 minutes, 43 seconds - 360 words
Share the post "Peity Charts: Charts Library"
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
Here are a few examples of Peity charts
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.