Author: Ipstenu (Mika Epstein)

The statistics page on my TV database site is pretty fun. It’s the one I learned how to use Chart.js for in the first place.

I wanted to add in some pie charts, but first I upgraded the code to the 2.0-beta and refined the PHP on my stats. Originally I just had some pretty basic bar charts for category statistics. Now I have some pie charts to show characters by role (by which I mean are they a main character, a guest, or a recurring character).

Better Category Stats

Let’s talk about some better PHP first. The stuff I had before worked, but it could have been better. Here’s the better PHP:

$count_characters = wp_count_posts( 'post_type_characters' )->publish + wp_count_posts( 'post_type_characters' )->draft ;
$tropes = get_terms('chartags');

$trope_terms_array = array();
foreach ( $tropes as $trope ) {
	$trope_terms_array[$trope->slug] = array( 'count' => $trope->count, 'name'  => $trope->name, 'url' => get_term_link( $trope ) );
}

What I did here was take the data and make a single array for it which gives me the data structured as follows:

Array
(
    [addict] => Array
        (
            [count] => 2
            [name] => Addict
            [url] => http://example.com/tropes/addict/
        )

    [athlete] => Array
        (
            [count] => 3
            [name] => Athlete
            [url] => http://example.com/tropes/athlete/
        )
)

This makes my array much smaller and simpler to run through. Next I changed how I call the data in my javascript:

	labels : [<?php
		$unset = array('foo','bar','baz');
		foreach ( $unset as $item ) {
			unset($trope_terms_array[$item]);
		}

		foreach ( $trope_terms_array as $trope ) {
			echo '"'.$trope['name'].'", ';
		}
	?>],

The unsetting at the top is a quick run to remove the tropes I don’t need for this chart because I’m displaying them in the pie chart. See? It all comes together!

Pie No. 1 – Sexuality

There are two pie charts. One is checking how many characters are gay, straight, or bisexual. I’m sure eventually I’ll be add asexual, but that isn’t today. Anyway, that chart is surprisingly simple. Since I’d already improved the PHP call for category stats, and sexuality is saved as a character taxonomy, I was able to do this simply as follows:

<script>
// Piechart for sexuality stats
var pieSexdata = {
    labels: [
        "Gay",
        "Straight",
        "Bisexual"
    ],
    datasets: [
        {
            data: [ <?php echo '
	            "'.( $count_characters - $trope_terms_array['straight']['count'] - $trope_terms_array['bisexual']['count'] ).'",
	            "'.$trope_terms_array['straight']['count'].'",
	            "'.$trope_terms_array['bisexual']['count'].'"
	            '; ?>],
            backgroundColor: [
                "#7d3255",
                "#327A7D",
                "#32557D"
            ],
            hoverBackgroundColor: [
                "#B18499",
                "#BCD4D5",
                "#ABB9CA"
            ]
        }]
};

var ctx = document.getElementById("pieSex").getContext("2d");
var pieSex = new Chart(ctx,{
    type:'doughnut',
    data: pieSexdata,
    options: {}
});
</script>

The default assumption is that any character being added is a homosexual. The reason ‘straight’ is there is for a character who was presented as gay, but that turned out to be a fantasy sequence. Thanks, Roseanne. With that in mind, calculating the number of gay characters was a matter of subtracting the straight and bisexual. And yes, I named the chart pieSexdata on purpose.

Pie No. 2 – Character Role

The second pie chart was a lot harder. You see, I’d chosen to save the ‘role’ as a custom meta field in the post. There’s a dropdown for ‘Main’ or ‘Recurring’ or ‘Guest’ and it defaults to ‘None’ if you don’t fill it out. Right now everyone has a role but I coded in a failsafe.

This code took me a while to sort out, but as soon as I realized how simple it was, I made a loop so I didn’t have to repeat code:

$roles = array( 'regular', 'recurring', 'guest' );
$roles_array = array();
foreach ( $roles as $role ) {
	$args = array(
		'post_type'       => 'post_type_characters',
		'posts_per_page'  => -1,
		'post_status'     => array( 'publish', 'draft' ),
		'meta_query'      => array(
			array(
				'key'     => 'chars_type',
				'value'   => $role,
				'compare' => '=',
			),
		),
    );
	$thisrole = new WP_Query($args);
	$roles_array[$role] = $thisrole->post_count;
}

This produces a nice array:

Array
(
    [regular] => 147
    [recurring] => 37
    [guest] => 23
)

I wanted it to be an array since I can see this expanding sooner or later. The pie chart code looks very much the same as the one for sexuality, and all that’s really different is how I’m calling the data and doing the math for how many characters have no listed role.

    labels: [
        "Main Character",
        "Recurring Character",
        "Guest Character",
        "No Role"
    ],
    datasets: [
        {
            data: [ <?php echo '
	            "'.$roles_array['regular'].'",
	            "'.$roles_array['recurring'].'",
	            "'.$roles_array['guest'].'",
	            "'.( $count_characters - $roles_array['guest'] - $roles_array['recurring'] - $roles_array['regular'] ).'",
	            '; ?>],

What’s Next?

Things are shaping up nicely, but I want to add in better labels. I’d like if they show the percentage when you hover over them on pie charts, and if they could link to the taxonomy pages for the bar charts. But I haven’t quite sorted out how to do that yet.

I also have to blame Tracy for this, because she’s the one who wanted stats like that in the first place.