Chart.js Category Statistics

One of the sites I work on is using the Metro Theme by StudioPress Themes for WordPress. And on that site, I have a page dedicated to some odd stats based on the categories and tags and custom taxonomies.

What I have is a post type ‘shows’ and a custom taxonomy called ‘clichés’ and from that I was easily able to generate a percentage of how many shows use the cliché of queers in law enforcement (38%) or how many have the death of a queer (also 38% right now). But that wasn’t enough. We wanted ‘pretty graphs’ and for that I needed a tool like Chart.js and a little PHP magic.

How to Chart.js?

Chart.js is a super cool and super responsive and super flexible way to include a chart. And using it is incredibly easy once I figured out that I could just use inline script tags. A very basic chart that would show you how many days each month has looks like this:

<script src="Chart.js"></script>
<canvas id="barDays" width="600" height="400"></canvas>

<script>
var barDaysData = {
	labels : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "November", "December"],
	datasets : [
		{
			fillColor : "#7d3255",
			strokeColor : "#532138",
			data : ["31","28","31","30","31","30","31","31","30","31","31"]
		}
	]
}

var barDays = document.getElementById("barDays").getContext("2d");
new Chart(barDays).Bar(barDaysData);
</script>

If you’re using WordPress, you’ll want to use wp_enqueue_script to call it. Here’s what I did for my theme:

wp_enqueue_script( 'chart.js', get_bloginfo('stylesheet_directory').'/inc/js/Chart.min.js' , array( 'jquery' ), CHILD_THEME_VERSION );

But that’s the basics of it. Once I understood that, I was good to go.

The Code

Before I can do anything, I need to make sure I have the data I needed. What I wanted was a list of all the shows that were published and a list of all the cliches, ordered in the way I need them. The order is simply comma separated values, enclosed in quotes, enclosed in brackets:

labels : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "November", "December"],

And the data is similar:

data : ["31","28","31","30","31","30","31","31","30","31","31"]

Since I’m lazy, I checked that the array worked if it ended in a , and it did! That means my PHP looks like this:

$count_shows = wp_count_posts( 'post_type_shows' )->publish;
$cliches = get_terms('cliches');

$barshow_labels = '';
foreach ( $cliches as $cliche ) {
		$barshow_labels .= '"'.$cliche->name.'",';
}

$barshow_data = '';
foreach ( $cliches as $cliche ) {
		$barshow_data .= $cliche->count.',';
}

And my js looks like this:

<script>
var barShowsData = {
	labels : [<?php echo $barshow_labels; ?>],
	datasets : [
		{
			fillColor : "#7d3255",
			strokeColor : "#532138",
			data : [<?php echo $barshow_data; ?>]
		}
	]
}

var barShows = document.getElementById("barShows").getContext("2d");
new Chart(barShows).Bar(barShowsData);
</script>

You may notice the simple call of <?php echo $barshow_data; ?> in there? That’s where it outputs the data I sorted out in the PHP section. Done. I’m could put it more inline, but I liked to separate them as much as I could.

Putting it in the theme

This is a Genesis theme so while I am making use of the Genesis loop, the call to get_template_part can be used by anyone. I’ll explain in a moment. First, here’s the page template:

<?php
/**
* Template Name: Lezbian Stats Template
* Description: Used as a page template to show page contents, followed by a loop
* to show the stats of lezbians and what not.
*/

// Show Dead count below the content:
add_action( 'genesis_entry_footer', 'lez_stats_footer', 9 );

function lez_stats_footer() {
	get_template_part( 'stats' );
}

genesis();

This works like any other page template. You make a page, you select the template, and it loads this custom design.

The magic sauce is in get_template_part( 'stats' ); which calls the file stats.php and that file has all the code you saw above. This means I can edit my post with all the explanations I want, and then it always outputs the stats on the bottom. By calling the Genesis code in the bottom, I retain all of it’s magic while pulling in what I want.

The Result

Looks nice, doesn’t it? I’m quite fond of it.

Ipstenu (Mika Epstein)

I’m Mika (aka Ipstenu) and I’m complicated. I’ve been on the net since the days of dedicated terminals and Novation CAT modems and solved Missionaries and Cannibals (or Goats and Cabbages) before I was six, and blog about WordPress and technical/computer things at Half Elf on Tech.

See Full Bio