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

The graph of cliches about queer women on TV

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

Reader Interactions

%d bloggers like this: