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.