Charts for Special Report: Workforce Development

author: Mike Zavarello

by Mike Zavarello

HTML

<!-- Atlanta Fed scripts -->
<script src="https://www.frbatlanta.org/~/media/javascript/system/UniversalGoogleAnalytics.js"></script>
<script src="https://www.frbatlanta.org/~/media/javascript/highcharts/highcharts-global-settings-min.js"></script>

<!-- standard Highcharts scripts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div class="economyMattersChart" id="container_LaborForceGrowth"></div>
<br />
<div class="economyMattersChart" id="container_MoreJobsFewerSeekers"></div>

CSS

.economyMattersChart { height: 400px; width: 100%; margin: 0 auto; }

JavaScript

$(document).ready(function(){ 

	var iframeWidth_SpecialReportCharts = $('.economyMattersChart').width();
	var iframeHeight_SpecialReportCharts = $('.economyMattersChart').height();

	/* chart 1: labor force growth in long-term decline */
	var sourceLine_LaborForceGrowth = 'Source: U.S. Bureau of Labor Statistics';
	setChartDefaults(iframeWidth_SpecialReportCharts,iframeHeight_SpecialReportCharts,sourceLine_LaborForceGrowth,50);
	var chartOptions_LaborForceGrowth = {
		chart: { marginBottom: 100, marginRight: 20, renderTo: 'container_LaborForceGrowth', type: 'column' },
		exporting: {
			chartOptions: {
				legend: { enabled: false }
			},
			filename: 'atlanta-fed_economy-matters_labor-force-growth-in-long-term-decline'
		},
		legend: { enabled: false },
		subtitle: { text: 'Percentage growth in civilian labor force by decade', width: iframeWidth_SpecialReportCharts * 0.8 },
		title: { text: 'Labor Force Growth In Long-term Decline', width: iframeWidth_SpecialReportCharts * 0.8 },
		tooltip: { enabled: false },
		plotOptions: {
			series: { 
				dataLabels: {
					enabled: true, align: 'center', x: 0, y: 0,
					style: { fontFamily: 'Arial, sans-serif', fontSize: '16px', textOutline: 'none' },
					formatter: function() {
						return '<span style="color: ' + this.series.color + ';">' + Highcharts.numberFormat(this.y, 1) + '%</span>';
					}
				}
			}
		},
		xAxis: {
			categories: ['1950s','1960s','1970s','1980s','1990s','2000s','2010-2018'], labels: { y: 20 }
		},
		yAxis: { 
			plotLines:[{ value: 0, color: '#666', width: 2, zIndex: 3 }],
			title: { text: '' }, tickInterval: 5,
			labels: {
				formatter: function () {
					return Highcharts.numberFormat(this.value,0) + '%';
				}
			}
		},
		series: [
			{ name: 'Labor Force Growth', data: [9.9,16.0,26.8,15.8,10.8,8.1,5.3] }
		]
	};
	var chart_LaborForceGrowth = new...