Creating Pie Chart Visualization For WordPress Categories

Hello, after reading and pay attention to the visualization of the Google Chart Tools with its pie chart, I then had an idea to use categories in WordPress installation. WordPress has provided some PHP functions that we can use with ease. Basically the process of making this chart is not so complicated, just needs a little PHP and WordPress built-in function, and a bit of copy-paste. Consider the following steps to visualize the categories in WordPress with Google Pie Chart.

1. Adding Google script to the theme

We need to enqueue the Google Loader jsapi script to the theme by using the wp_enqueue_script and add_action to the wp_head. This jsapi should be loaded first before our custom categories script.

Open your theme function.php and add the following code:

function my_google_script() {
    wp_enqueue_script( 'jsapi', 'https://www.google.com/jsapi', 1 );
}
add_action( 'wp_head', 'my_google_script', 1 );

2. Adding category script to the theme

With the get_categories function, we can get an array of category objects matching the query parameters. For this example, we only need to use the category taxonomy by default. You can use your own query parameters such as including or excluding some categories etc. The function will returns the category cat_name and category_count for each category. We then need to modify the categories data since Google Pie Chart need it with the formats ['Category Name', 13]. Add the following code in the theme function.php

function my_category_script() {
    $categories = get_categories();

    $cats = array();
    foreach( $categories as $category ) {
        $cats[] = '["' . $category->cat_name . '", ' . $category->category_count . ']';
    }

    echo '<script type="text/javascript">>
	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(drawChart);
	function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ["Category", "Category Count"], ' . implode(',', $cats) . '
            ]);

            var options = {
                title: "Tutorial Categories"
            };

            var chart = new google.visualization.PieChart(document.getElementById("mydiv"));
            chart.draw(data, options);
    }
</script>';
}
add_action( 'wp_head', 'my_category_script' );

We can use additional option to the The options variable at line 17, please refer to this Pie Chart Configuration Options for more details.

3. Adding HTML block

In the code above, we use the mydiv. The next step is adding the HTML block to the post content or in the template file:

    <div id="mydiv" style="width: 900px; height: 500px;"></div>

Set the width or height to the proper size. Please note, the chart position is absolute, it will cover another block if the size is bigger. Try to use width: 100% and height: auto for automatic size. Ok, that’s it, happy coding!

Create Comment

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=""> <strike> <strong>

Back to Top