Chart for EM Opportunity Occupations and Automation story

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>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,400italic,500,700,700italic,900" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700,300" rel="stylesheet" type="text/css">

<!-- 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_SmallBusinessSnapshotEmployees"></div>

CSS

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

JavaScript

$(document).ready(function(){

    var iframeWidth_economyMattersChart = $('.economyMattersChart').width();
    var iframeHeight_economyMattersChart = $('.economyMattersChart').height();

	/* chart 1: small business snapshot: small business employees  */
	var sourceLine_SmallBusinessSnapshotEmployees = 'Source: Atlanta Fed calculations based on data from Burning Glass Technologies';
	setChartDefaults(iframeWidth_economyMattersChart,iframeHeight_economyMattersChart,sourceLine_SmallBusinessSnapshotEmployees,50);
	var chartOptions_SmallBusinessSnapshotEmployees = {
		chart: { marginLeft: 15, marginBottom: 80, marginRight: 20, renderTo: 'container_SmallBusinessSnapshotEmployees', type: 'bar' },
		exporting: {
			chartOptions: {
				legend: { enabled: false }
			},
			filename: 'atlanta-fed_economy-matters_small-business-snapshot-small-business-employees'
		},
		legend: { enabled: false },
		subtitle: { text: 'Share of online job ads that list a bachelors degree requirement (2017)', width: iframeWidth_economyMattersChart * 0.8 },
		title: { text: 'No Degree, No Problem For Many Jobs', width: iframeWidth_economyMattersChart * 0.8 },
		plotOptions: {
			bar: {
				borderWidth: 0, groupPadding: 0.01
			},
			series: { 
				dataLabels: {
					enabled: true, align: 'center', x: -35, y: 0,
					style: { fontFamily: 'Roboto, Arial, sans-serif', fontSize: '20px', textOutline: 'none' },
					formatter: function() {
						//return '<span style="color: ' + this.series.color + ';">' + Highcharts.numberFormat(this.y, 1) + '%</span>';
            return '<span style="color: white;">' + Highcharts.numberFormat(this.y, 1) + '%</span>';
					}
				}
			}
		},
		tooltip: {
			enabled: false
		},
		xAxis: {
			categories: ['United&nbsp;States','Alabama','Florida','Georgia','Louisiana','Mississippi','Tennessee'], 
      type: 'category', 
      lineColor: 'white',
      labels: { 
      		align: 'left',
					style: { color: 'white', font: '20px Roboto, Arial, sans-serif', textOutline:...