{"id":6552,"date":"2022-09-24T10:23:51","date_gmt":"2022-09-24T14:23:51","guid":{"rendered":"https:\/\/themespress.ca\/?p=6552"},"modified":"2022-09-24T13:23:58","modified_gmt":"2022-09-24T17:23:58","slug":"peity-charts-charts-library","status":"publish","type":"post","link":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/","title":{"rendered":"Peity Charts: Charts Library"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p><a href=\"https:\/\/benpickles.github.io\/peity\/\" target=\"_blank\" rel=\"noopener\"><strong>Peity Charts<\/strong><\/a> is a library of charts allowing users to display results with <a href=\"\/en\/wordpress-query-display-post-type-results-with-two-date-fields\/\" target=\"_blank\" rel=\"noopener\">WordPress queries<\/a>. This tool focuses on circular, linear and bar charts. <\/p>\n<p>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.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Most popular charts<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>Before showing you how to include Peity Charts, there is more and more need to for <strong>charts in websites or applications<\/strong>. Users can understand better with dynamic charts and businesses can tailor them to their clients&#8217; image. The sky is the limit when it comes to display all type of results.<\/p>\n<p>These charts can be used for sales, user subscription resultss, <a href=\"https:\/\/woocommerce.com\/\" target=\"_blank\" rel=\"noopener\">Woocommerce<\/a> invoices; just to name a few possibilities.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid vc_row-o-content-middle vc_row-flex\"><div class=\"wpb_column vc_column_container vc_col-sm-6\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p><strong>Here are a few examples of JS libraries<\/strong>:<\/p>\n<ul>\n<li>Flot Charts<\/li>\n<li>Morris.js Charts<\/li>\n<li>Rickshaw Charts<\/li>\n<li>Chart.js<\/li>\n<li>Peity Charts<\/li>\n<li>Sparkline Charts<\/li>\n<li>C3 Chart<\/li>\n<li>Google Charts<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-6\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div  class=\"wpb_single_image wpb_content_element vc_align_left wpb_content_element\">\n\t\t\n\t\t<figure class=\"wpb_wrapper vc_figure\">\n\t\t\t<div class=\"vc_single_image-wrapper   vc_box_border_grey\"><img decoding=\"async\" width=\"1000\" height=\"1000\" src=\"https:\/\/themespress.ca\/wp-content\/uploads\/2022\/09\/Peity-Charts-Graphiques-de-resultats.jpg\" class=\"vc_single_image-img attachment-full\" alt=\"Peity Charts - Graphiques de r\u00e9sultats\" title=\"Peity Charts - Graphiques de r\u00e9sultats\" srcset=\"https:\/\/themespress.ca\/wp-content\/uploads\/2022\/09\/Peity-Charts-Graphiques-de-resultats.jpg 1000w, https:\/\/themespress.ca\/wp-content\/uploads\/2022\/09\/Peity-Charts-Graphiques-de-resultats-100x100.jpg 100w, https:\/\/themespress.ca\/wp-content\/uploads\/2022\/09\/Peity-Charts-Graphiques-de-resultats-600x600.jpg 600w, https:\/\/themespress.ca\/wp-content\/uploads\/2022\/09\/Peity-Charts-Graphiques-de-resultats-300x300.jpg 300w, https:\/\/themespress.ca\/wp-content\/uploads\/2022\/09\/Peity-Charts-Graphiques-de-resultats-150x150.jpg 150w, https:\/\/themespress.ca\/wp-content\/uploads\/2022\/09\/Peity-Charts-Graphiques-de-resultats-768x768.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Here are a few examples of Peity charts<\/h2><div class=\"vc_empty_space\"   style=\"height: 32px\"><span class=\"vc_empty_space_inner\"><\/span><\/div><div class=\"vc_row wpb_row vc_inner vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-6\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<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>\n\t\t<\/div>\n\t<\/div>\n\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<span data-plugin=\"peity-pie\" data-colors=\"#6e8cd7,#ebeff2\" data-width=\"200\" data-height=\"50\">226,134<\/span>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-6\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<span class=\"peity-bar\" data-plugin=\"peity-bar\" data-colors=\"#6e8cd7,#ebeff2\" data-width=\"200\" data-height=\"40\">5,3,9,6,5,9,7,3,5,2<\/span>\n\t\t<\/div>\n\t<\/div>\n\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<span data-plugin=\"peity-donut-alt\" data-peity='{ \"fill\": [\"#4c5667\", \"#ebeff2\"], \"innerRadius\": 24, \"radius\": 30 }'\">6\/7<\/span> \n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>So for our example, we added the JS files in our footer and the charts work as intended.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Adding JavaScript files in your footer<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>Here&#8217;s how we can inject the necessary JavaScript files in our footer.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<div id=\"ts-enlighterjs-container-3565191\" class=\"ts-enlighterjs-container-single-enabled  \" style=\"width: 100%;  margin-top: 0px; margin-bottom: 0px;\" data-enlighter-doubleclick=\"true\" data-enlighter-windowbutton=\"true\" data-enlighter-windowtext=\"New Window\" data-enlighter-rawbutton=\"true\" data-enlighter-rawtext=\"RAW Code\" data-enlighter-infobutton=\"false\" data-enlighter-infotext=\"EnlighterJS\" data-enlighter-indent=\"2\"><pre id=\"ts-enlighterjs-pre-3565191\" class=\"\" style=\"white-space: pre-wrap; height: 100%; margin: 0; padding: 0;\" data-enlighter-language=\"jquery\" data-enlighter-theme=\"enlighter\" data-enlighter-group=\"\" data-enlighter-title=\"\" data-enlighter-linenumbers=\"true\" data-enlighter-lineoffset=\"1\" data-enlighter-highlight=\"\">&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.1\/jquery.min.js&quot; integrity=&quot;sha512-aVKKRRi\/Q\/YV+4mjoKBsE4x3H+BkegoM\/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/peity\/3.3.0\/jquery.peity.min.js&quot; integrity=&quot;sha512-L5mXjK4YbZPFEuunivJM+SKJG5qxqElc8RlaLDRd1Z5TtDACmugfzIRyFnYSGD4jPYoEMJbXhUJFZsBWDV8yLQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;\/script&gt;\n\n&lt;script&gt;\n    !function($) {\n        &quot;use strict&quot;;\n        var Components = function() {};\n         \/* -------------\n         * small charts related widgets\n         *\/\n         \/\/peity charts\n         Components.prototype.initPeityCharts = function() {\n            $(&#039;[data-plugin=&quot;peity-pie&quot;]&#039;).each(function(idx, obj) {\n                var colors = $(this).attr(&#039;data-colors&#039;)?$(this).attr(&#039;data-colors&#039;).split(&quot;,&quot;):[];\n                var width = $(this).attr(&#039;data-width&#039;)?$(this).attr(&#039;data-width&#039;):20; \/\/default is 20\n                var height = $(this).attr(&#039;data-height&#039;)?$(this).attr(&#039;data-height&#039;):20; \/\/default is 20\n                $(this).peity(&quot;pie&quot;, {\n                    fill: colors,\n                    width: width,\n                    height: height\n                });\n            });\n            \/\/donut\n             $(&#039;[data-plugin=&quot;peity-donut&quot;]&#039;).each(function(idx, obj) {\n                var colors = $(this).attr(&#039;data-colors&#039;)?$(this).attr(&#039;data-colors&#039;).split(&quot;,&quot;):[];\n                var width = $(this).attr(&#039;data-width&#039;)?$(this).attr(&#039;data-width&#039;):20; \/\/default is 20\n                var height = $(this).attr(&#039;data-height&#039;)?$(this).attr(&#039;data-height&#039;):20; \/\/default is 20\n                $(this).peity(&quot;donut&quot;, {\n                    fill: colors,\n                    width: width,\n                    height: height\n                });\n            });\n             $(&#039;[data-plugin=&quot;peity-donut-alt&quot;]&#039;).each(function(idx, obj) {\n                $(this).peity(&quot;donut&quot;);\n            });\n             \/\/ line\n             $(&#039;[data-plugin=&quot;peity-line&quot;]&#039;).each(function(idx, obj) {\n                $(this).peity(&quot;line&quot;, $(this).data());\n             });\n             \/\/ bar\n             $(&#039;[data-plugin=&quot;peity-bar&quot;]&#039;).each(function(idx, obj) {\n                var colors = $(this).attr(&#039;data-colors&#039;)?$(this).attr(&#039;data-colors&#039;).split(&quot;,&quot;):[];\n                var width = $(this).attr(&#039;data-width&#039;)?$(this).attr(&#039;data-width&#039;):20; \/\/default is 20\n                var height = $(this).attr(&#039;data-height&#039;)?$(this).attr(&#039;data-height&#039;):20; \/\/default is 20\n                $(this).peity(&quot;bar&quot;, {\n                    fill: colors,\n                    width: width,\n                    height: height\n                });\n             });\n         },\n        \/\/initilizing\n        Components.prototype.init = function() {\n            var $this = this;\n            this.initPeityCharts()\n        }\n        $.Components = new Components, $.Components.Constructor = Components\n    }(window.jQuery),\n        \/\/initializing main application module\n    function($) {\n        &quot;use strict&quot;;\n        $.Components.init();\n    }(window.jQuery);\n&lt;\/script&gt;<\/pre><\/div>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p> Like in our example, you can inject it inside a script tag with the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/\" target=\"_blank\" rel=\"noopener\"><strong>wp_enqueue_script<\/strong><\/a> function.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Displaying charts with HTML<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>Here&#8217;s an example of an HTML chart:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<div id=\"ts-enlighterjs-container-1260214\" class=\"ts-enlighterjs-container-single-enabled  \" style=\"width: 100%;  margin-top: 0px; margin-bottom: 0px;\" data-enlighter-doubleclick=\"true\" data-enlighter-windowbutton=\"true\" data-enlighter-windowtext=\"New Window\" data-enlighter-rawbutton=\"true\" data-enlighter-rawtext=\"RAW Code\" data-enlighter-infobutton=\"false\" data-enlighter-infotext=\"EnlighterJS\" data-enlighter-indent=\"2\"><pre id=\"ts-enlighterjs-pre-1260214\" class=\"\" style=\"white-space: pre-wrap; height: 100%; margin: 0; padding: 0;\" data-enlighter-language=\"html\" data-enlighter-theme=\"enlighter\" data-enlighter-group=\"\" data-enlighter-title=\"\" data-enlighter-linenumbers=\"true\" data-enlighter-lineoffset=\"1\" data-enlighter-highlight=\"\">&lt;span data-plugin=&quot;peity-line&quot; data-fill=&quot;#6e8cd7&quot; data-stroke=&quot;#6e8cd7&quot; data-width=&quot;200&quot; data-height=&quot;40&quot;&gt;5,3,9,6,5,9,7,3,5,2&lt;\/span&gt;<\/pre><\/div><h2 style=\"text-align: left\" class=\"vc_custom_heading vc_do_custom_heading\" >Displaying your results with Peity Charts<\/h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>We are going to display WordPress dynamic results with our charts.<\/p>\n<p>For example, l&#8217;ets create a function that will fetch the <strong>number of daily views<\/strong>. We could also tailor it by month or year.<\/p>\n<p><strong>(NB: This meta key is customized based on our requirements)<\/strong><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<div id=\"ts-enlighterjs-container-5431148\" class=\"ts-enlighterjs-container-single-enabled  \" style=\"width: 100%;  margin-top: 0px; margin-bottom: 0px;\" data-enlighter-doubleclick=\"true\" data-enlighter-windowbutton=\"true\" data-enlighter-windowtext=\"New Window\" data-enlighter-rawbutton=\"true\" data-enlighter-rawtext=\"RAW Code\" data-enlighter-infobutton=\"false\" data-enlighter-infotext=\"EnlighterJS\" data-enlighter-indent=\"2\"><pre id=\"ts-enlighterjs-pre-5431148\" class=\"\" style=\"white-space: pre-wrap; height: 100%; margin: 0; padding: 0;\" data-enlighter-language=\"php\" data-enlighter-theme=\"enlighter\" data-enlighter-group=\"\" data-enlighter-title=\"\" data-enlighter-linenumbers=\"true\" data-enlighter-lineoffset=\"1\" data-enlighter-highlight=\"\">function woocl_get_product_views_products_bydate_peitycharts($date) {\n\tglobal $wpdb;\n\t$meta_key = $date.&#039;_woocommerce_classement_product_count&#039;;\n\t$totalviews = $wpdb-&gt;get_var($wpdb-&gt;prepare(&quot;\n\tSELECT sum(meta_value) \n\tFROM $wpdb-&gt;postmeta \n\tWHERE meta_key = %s&quot;, $meta_key)\n\t);\n    return number_format_i18n( $totalviews );\t\n}<\/pre><\/div>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>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.<\/p>\n<p>And then we display it this way in our Peity Chart.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<div id=\"ts-enlighterjs-container-6719275\" class=\"ts-enlighterjs-container-single-enabled  \" style=\"width: 100%;  margin-top: 0px; margin-bottom: 0px;\" data-enlighter-doubleclick=\"true\" data-enlighter-windowbutton=\"true\" data-enlighter-windowtext=\"New Window\" data-enlighter-rawbutton=\"true\" data-enlighter-rawtext=\"RAW Code\" data-enlighter-infobutton=\"false\" data-enlighter-infotext=\"EnlighterJS\" data-enlighter-indent=\"2\"><pre id=\"ts-enlighterjs-pre-6719275\" class=\"\" style=\"white-space: pre-wrap; height: 100%; margin: 0; padding: 0;\" data-enlighter-language=\"php\" data-enlighter-theme=\"enlighter\" data-enlighter-group=\"\" data-enlighter-title=\"\" data-enlighter-linenumbers=\"true\" data-enlighter-lineoffset=\"1\" data-enlighter-highlight=\"\">&lt;?php\n$valudaysviews = wp_cache_get( &#039;products_days_views_mini&#039; );\nif ( false === $valudaysviews ) {\n\t\/\/create array variable\n\t$valudaysviews = [];\n\t\n\t$today = date(&#039;Ymd&#039;);\n\t$yesterday = date(&#039;Ymd&#039;,strtotime(&quot;-1 days&quot;));\n\t$yesterdayone = date(&#039;Ymd&#039;,strtotime(&quot;-2 days&quot;));\n\t$yesterdaytwo = date(&#039;Ymd&#039;,strtotime(&quot;-3 days&quot;));\n\t$yesterdaythree = date(&#039;Ymd&#039;,strtotime(&quot;-4 days&quot;));\n\t$yesterdayfour = date(&#039;Ymd&#039;,strtotime(&quot;-5 days&quot;));\n\t$yesterdayfive = date(&#039;Ymd&#039;,strtotime(&quot;-6 days&quot;));\n\t$yesterdaysix = date(&#039;Ymd&#039;,strtotime(&quot;-7 days&quot;));\n\t$yesterdayseven = date(&#039;Ymd&#039;,strtotime(&quot;-8 days&quot;));\n\t\n\t$todayviews = woocl_get_product_views_products_bydate_peitycharts($today);\n\t$yesterdayviews = woocl_get_product_views_products_bydate_peitycharts($yesterday);\n\t$yesterdayoneviews = woocl_get_product_views_products_bydate_peitycharts($yesterdayone);\n\t$yesterdaytwoviews = woocl_get_product_views_products_bydate_peitycharts($yesterdaytwo);\n\t$yesterdaythreeviews = woocl_get_product_views_products_bydate_peitycharts($yesterdaythree);\n\t$yesterdayfourviews = woocl_get_product_views_products_bydate_peitycharts($yesterdayfour);\n\t$yesterdayfiveviews = woocl_get_product_views_products_bydate_peitycharts($yesterdayfive);\n\t$yesterdaysixviews = woocl_get_product_views_products_bydate_peitycharts($yesterdaysix);\n\n\t\/\/pushing some variables to the array so we can output something in this example.\n\tarray_push($valudaysviews, array(&quot;days&quot; =&gt; $todayviews));\n\tarray_push($valudaysviews, array(&quot;days&quot; =&gt; $yesterdayviews));\n\tarray_push($valudaysviews, array(&quot;days&quot; =&gt; $yesterdayoneviews));\n\tarray_push($valudaysviews, array(&quot;days&quot; =&gt; $yesterdaytwoviews));\n\tarray_push($valudaysviews, array(&quot;days&quot; =&gt; $yesterdaythreeviews));\n\tarray_push($valudaysviews, array(&quot;days&quot; =&gt; $yesterdayfourviews));\n\tarray_push($valudaysviews, array(&quot;days&quot; =&gt; $yesterdayfiveviews));\n\tarray_push($valudaysviews, array(&quot;days&quot; =&gt; $yesterdaysixviews));\n\twp_cache_set( &#039;products_days_views_mini&#039;, $valudaysviews );\n} \n\n\/\/counting the length of the array\n$countArrayLengthdaysviews = count($valudaysviews);\n\n?&gt;\n\n&lt;span data-plugin=&quot;peity-bar&quot; data-colors=&quot;#6e8cd7,#ebeff2&quot; data-width=&quot;200&quot; data-height=&quot;40&quot;&gt;\n&lt;?php\n\tfor($i=0;$i&lt;$countArrayLengthdaysviews;$i++){\n\t$resultssalesdaysviews .= $valudaysviews[$i][&#039;days&#039;] . &quot;,&quot;;\n\t}\n\techo rtrim($resultssalesdaysviews, &#039;, &#039;);\n\t?&gt;\n&lt;\/span&gt;<\/pre><\/div>\n\t<div class=\"wpb_text_column wpb_content_element wpb_animate_when_almost_visible wpb_fadeIn fadeIn\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p><strong>You can adapt our code or dynamic requests based on your requirements<\/strong>. Our example only shows how to do it, but <strong>is not necessarily a solution<\/strong>.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"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<div class=\"read-more\"><a class=\"btn button-secondary\" href=\"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/\">Read More<\/a><\/div>","protected":false},"author":81,"featured_media":6488,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[283],"tags":[],"class_list":["post-6552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"With this tutorial, we will explain how to display beautiful charts thanks to a javascript library called Peity Charts\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Daniel\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Themespress - Des tutoriels et ressources WordPress\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Peity Charts: Charts Library - Themespress\" \/>\n\t\t<meta property=\"og:description\" content=\"With this tutorial, we will explain how to display beautiful charts thanks to a javascript library called Peity Charts\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2022-09-24T14:23:51-04:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2022-09-24T17:23:58-04:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Peity Charts: Charts Library - Themespress\" \/>\n\t\t<meta name=\"twitter:description\" content=\"With this tutorial, we will explain how to display beautiful charts thanks to a javascript library called Peity Charts\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#blogposting\",\"name\":\"Peity Charts: Charts Library - Themespress\",\"headline\":\"Peity Charts: Charts Library\",\"author\":{\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/author\\\/daniel\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/themespress.ca\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Peity-Charts-\\u2013-Graphiques-de-resultats.jpg\",\"width\":2000,\"height\":1221,\"caption\":\"Office workers analyzing and researching business data vector illustration. Marketing analysts developing strategy. Business people studying infographics and diagrams on dashboard\"},\"datePublished\":\"2022-09-24T10:23:51-04:00\",\"dateModified\":\"2022-09-24T13:23:58-04:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#webpage\"},\"articleSection\":\"Tutorials, Optional\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/themespress.ca\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/categorie\\\/tutorials\\\/#listItem\",\"name\":\"Tutorials\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/categorie\\\/tutorials\\\/#listItem\",\"position\":2,\"name\":\"Tutorials\",\"item\":\"https:\\\/\\\/themespress.ca\\\/en\\\/categorie\\\/tutorials\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#listItem\",\"name\":\"Peity Charts: Charts Library\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/#listItem\",\"name\":\"Accueil\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#listItem\",\"position\":3,\"name\":\"Peity Charts: Charts Library\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/categorie\\\/tutorials\\\/#listItem\",\"name\":\"Tutorials\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/#organization\",\"name\":\"Themespress\",\"description\":\"Des tutoriels et ressources WordPress\",\"url\":\"https:\\\/\\\/themespress.ca\\\/en\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/author\\\/daniel\\\/#author\",\"url\":\"https:\\\/\\\/themespress.ca\\\/en\\\/author\\\/daniel\\\/\",\"name\":\"Daniel\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93cd2188e40b3289d305e88acb676eb8b84078e50e06f4eb38a0152903b34c9d?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Daniel\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#webpage\",\"url\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/\",\"name\":\"Peity Charts: Charts Library - Themespress\",\"description\":\"With this tutorial, we will explain how to display beautiful charts thanks to a javascript library called Peity Charts\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/author\\\/daniel\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/author\\\/daniel\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/themespress.ca\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Peity-Charts-\\u2013-Graphiques-de-resultats.jpg\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#mainImage\",\"width\":2000,\"height\":1221,\"caption\":\"Office workers analyzing and researching business data vector illustration. Marketing analysts developing strategy. Business people studying infographics and diagrams on dashboard\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/peity-charts-charts-library\\\/#mainImage\"},\"datePublished\":\"2022-09-24T10:23:51-04:00\",\"dateModified\":\"2022-09-24T13:23:58-04:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/themespress.ca\\\/en\\\/\",\"name\":\"Themespress\",\"description\":\"Des tutoriels et ressources WordPress\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/themespress.ca\\\/en\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Peity Charts: Charts Library - Themespress","description":"With this tutorial, we will explain how to display beautiful charts thanks to a javascript library called Peity Charts","canonical_url":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#blogposting","name":"Peity Charts: Charts Library - Themespress","headline":"Peity Charts: Charts Library","author":{"@id":"https:\/\/themespress.ca\/en\/author\/daniel\/#author"},"publisher":{"@id":"https:\/\/themespress.ca\/en\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/themespress.ca\/wp-content\/uploads\/2022\/09\/Peity-Charts-\u2013-Graphiques-de-resultats.jpg","width":2000,"height":1221,"caption":"Office workers analyzing and researching business data vector illustration. Marketing analysts developing strategy. Business people studying infographics and diagrams on dashboard"},"datePublished":"2022-09-24T10:23:51-04:00","dateModified":"2022-09-24T13:23:58-04:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#webpage"},"isPartOf":{"@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#webpage"},"articleSection":"Tutorials, Optional"},{"@type":"BreadcrumbList","@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/themespress.ca\/en\/#listItem","position":1,"name":"Accueil","item":"https:\/\/themespress.ca\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/themespress.ca\/en\/categorie\/tutorials\/#listItem","name":"Tutorials"}},{"@type":"ListItem","@id":"https:\/\/themespress.ca\/en\/categorie\/tutorials\/#listItem","position":2,"name":"Tutorials","item":"https:\/\/themespress.ca\/en\/categorie\/tutorials\/","nextItem":{"@type":"ListItem","@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#listItem","name":"Peity Charts: Charts Library"},"previousItem":{"@type":"ListItem","@id":"https:\/\/themespress.ca\/en\/#listItem","name":"Accueil"}},{"@type":"ListItem","@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#listItem","position":3,"name":"Peity Charts: Charts Library","previousItem":{"@type":"ListItem","@id":"https:\/\/themespress.ca\/en\/categorie\/tutorials\/#listItem","name":"Tutorials"}}]},{"@type":"Organization","@id":"https:\/\/themespress.ca\/en\/#organization","name":"Themespress","description":"Des tutoriels et ressources WordPress","url":"https:\/\/themespress.ca\/en\/"},{"@type":"Person","@id":"https:\/\/themespress.ca\/en\/author\/daniel\/#author","url":"https:\/\/themespress.ca\/en\/author\/daniel\/","name":"Daniel","image":{"@type":"ImageObject","@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/93cd2188e40b3289d305e88acb676eb8b84078e50e06f4eb38a0152903b34c9d?s=96&d=mm&r=g","width":96,"height":96,"caption":"Daniel"}},{"@type":"WebPage","@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#webpage","url":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/","name":"Peity Charts: Charts Library - Themespress","description":"With this tutorial, we will explain how to display beautiful charts thanks to a javascript library called Peity Charts","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/themespress.ca\/en\/#website"},"breadcrumb":{"@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#breadcrumblist"},"author":{"@id":"https:\/\/themespress.ca\/en\/author\/daniel\/#author"},"creator":{"@id":"https:\/\/themespress.ca\/en\/author\/daniel\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/themespress.ca\/wp-content\/uploads\/2022\/09\/Peity-Charts-\u2013-Graphiques-de-resultats.jpg","@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#mainImage","width":2000,"height":1221,"caption":"Office workers analyzing and researching business data vector illustration. Marketing analysts developing strategy. Business people studying infographics and diagrams on dashboard"},"primaryImageOfPage":{"@id":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/#mainImage"},"datePublished":"2022-09-24T10:23:51-04:00","dateModified":"2022-09-24T13:23:58-04:00"},{"@type":"WebSite","@id":"https:\/\/themespress.ca\/en\/#website","url":"https:\/\/themespress.ca\/en\/","name":"Themespress","description":"Des tutoriels et ressources WordPress","inLanguage":"en-US","publisher":{"@id":"https:\/\/themespress.ca\/en\/#organization"}}]},"og:locale":"en_US","og:site_name":"Themespress - Des tutoriels et ressources WordPress","og:type":"article","og:title":"Peity Charts: Charts Library - Themespress","og:description":"With this tutorial, we will explain how to display beautiful charts thanks to a javascript library called Peity Charts","og:url":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/","article:published_time":"2022-09-24T14:23:51-04:00","article:modified_time":"2022-09-24T17:23:58-04:00","twitter:card":"summary","twitter:title":"Peity Charts: Charts Library - Themespress","twitter:description":"With this tutorial, we will explain how to display beautiful charts thanks to a javascript library called Peity Charts"},"aioseo_meta_data":{"post_id":"6552","title":null,"description":"With this tutorial, we will explain how to display beautiful charts thanks to a javascript library called Peity Charts","keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-09-24 17:01:51","updated":"2025-06-08 02:22:06","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/themespress.ca\/en\/\" title=\"Accueil\">Accueil<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/themespress.ca\/en\/categorie\/tutorials\/\" title=\"Tutorials\">Tutorials<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tPeity Charts: Charts Library\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Accueil","link":"https:\/\/themespress.ca\/en\/"},{"label":"Tutorials","link":"https:\/\/themespress.ca\/en\/categorie\/tutorials\/"},{"label":"Peity Charts: Charts Library","link":"https:\/\/themespress.ca\/en\/peity-charts-charts-library\/"}],"_links":{"self":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts\/6552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/comments?post=6552"}],"version-history":[{"count":0,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts\/6552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/media\/6488"}],"wp:attachment":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/media?parent=6552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/categories?post=6552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/tags?post=6552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}