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:

A stacked chart that shows how many characters per gender orientation there are per country
A stacked chart

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.

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: