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.
