Finally!
We have our data in a properly consumable array. It’s formatted the way we need. Now we just need to script the java.
Take a deep breath.
What We Want
What we want is simple. A stacked bar chart that shows the values of all possible permutations. It looks like this:
That shows how many characters there are per gender orientation, and stacks it for a total count (which is why we needed that count you see).
Send In The Clowns
Since I’m already using Chart.js, I just need to have a function to output the javascript. But. Since I also have to loop through the arrays to get the collective data, I need a bit of PHP:
/*
* Statistics Display Barcharts
*
* Output the list of data usually from functions like self::meta_array
* It loops through the arrays and outputs data as needed
*
* This relies on ChartJS existing
*
* @param string $subject The content subject (shows, characters)
* @param string $data The data - used to generate the URLs
* @param array $array The array of data
*
* @return Content
*/
static function stacked_barcharts( $subject, $data, $array ) {
// Defaults
$data = ( $data == 'nations' )? 'nations' : substr( $data, 8 );
$title = ucfirst( substr($subject, 0, -1) ) . ' ' . ucfirst( $data );
$height = '550';
// Define our settings
switch ( $data ) {
case 'gender':
case 'sexuality':
case 'romantic':
$title = 'Character per Nation by ' . ucfirst( $data );
$datasets = array();
$terms = get_terms( 'lez_' . $data, array( 'orderby' => 'count', 'order' => 'DESC', 'hide_empty' => 0 ) );
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) {
foreach ( $terms as $term ) $datasets[] = $term->slug;
}
$counter = 'characters';
$height = '400';
break;
}
?>
<h3><?php echo $title; ?></h3>
<div id="container" style="width: 100%;">
<canvas id="barStacked<?php echo ucfirst( $subject ) . ucfirst( $data ); ?>" width="700" height="<?php echo $height; ?>"></canvas>
</div>
<script>
// Defaults
Chart.defaults.global.responsive = true;
Chart.defaults.global.legend.display = false;
// Bar Chart
var barStacked<?php echo ucfirst( $subject ) . ucfirst( $data ); ?>Data = {
labels : [
<?php
foreach ( $array as $item ) {
if ( $item[$counter] !== 0 ) {
$name = esc_html( $item['name'] );
}
echo '"'. $name .' ('.$item[$counter].')", ';
}
?>
],
datasets: [
<?php
foreach ( $datasets as $label ) {
$color = ( $label == 'undefined' )? 'nundefined' : str_replace( ["-", "–","-"], "", $label );
?>
{
borderWidth: 1,
backgroundColor: window.chartColors.<?php echo $color; ?>,
label: '<?php echo ucfirst( $label ); ?>',
stack: 'Stack',
data : [<?php
foreach ( $array as $item ) {
echo $item[ 'dataset' ][ $label ] . ',';
}
?>],
},
<?php
}
?>
]
};
var ctx = document.getElementById("barStacked<?php echo ucfirst( $subject ) . ucfirst( $data ); ?>").getContext("2d");
var barStacked<?php echo ucfirst( $subject ) . ucfirst( $data ); ?> = new Chart(ctx, {
type: 'horizontalBar',
data: barStacked<?php echo ucfirst( $subject ) . ucfirst( $data ); ?>Data,
options: {
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
},
tooltips: {
mode: 'index',
intersect: false
},
}
});
</script>
<?php
}
The Color
You may have noticed a strange variable:
$color = ( $label == 'undefined' )? 'nundefined' : str_replace( ["-", "–","-"], "", $label );
Which was then called in the javascript here:
backgroundColor: window.chartColors.<?php echo $color; ?>,
I have this in a javascript file that is loaded on that page:
// Color Defines
window.chartColors = {
// Gender
agender: 'rgba(255, 99, 132, 0.6)', // 'red'
cisgender: 'rgba(75, 192, 192, 0.6)', // 'aqua'
demigender: 'rgba(255, 205, 86, 0.6)', // 'goldenrod'
genderfluid: 'rgba(54, 162, 235, 0.6)', // 'light blue'
genderqueer: 'rgba(255, 159, 64, 0.6)', // 'orange'
nonbinary: 'rgba(201, 203, 207, 0.6)', // 'grey'
transman: 'rgba(0, 169, 80, 0.6)', // 'green'
transwoman: 'rgba(153, 102, 255, 0.6)', // 'purple'
// Sexuality
asexual: 'rgba(255, 99, 132, 0.6)', // 'red'
bisexual: 'rgba(75, 192, 192, 0.6)', // 'aqua'
heterosexual: 'rgba(255, 205, 86, 0.6)', // 'goldenrod'
homosexual: 'rgba(54, 162, 235, 0.6)', // 'light blue'
pansexual: 'rgba(255, 159, 64, 0.6)', // 'orange'
nundefined: 'rgba(201, 203, 207, 0.6)', // 'grey'
queer: 'rgba(0, 169, 80, 0.6)', // 'green'
demisexual: 'rgba(153, 102, 255, 0.6)', // 'purple'
}
The reason it’s ‘undefined’ is that things got weird when I had a variable with a name of undefined.
