Charts for Nashville economic history article

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_NashvillePopulation"></div>

CSS

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

JavaScript

,$(document).ready(function(){ 

	var iframeWidth_NashvilleCharts = $('.economyMattersChart').width();
	var iframeHeight_NashvilleCharts = $('.economyMattersChart').height();

	var sourceLine_NashvillePopulation = 'Source: U.S. Census Bureau';
	setChartDefaults(iframeWidth_NashvilleCharts,iframeHeight_NashvilleCharts,sourceLine_NashvillePopulation,50);
	var chartOptions_NashvillePopulation = {
	  chart: { marginBottom: 100, marginRight: 20, renderTo: 'container_NashvillePopulation', type: 'line' },
	  exporting: {
		chartOptions: {
		  legend: { enabled: true }
		},
		filename: 'atlanta-fed_economy-matters_the-nashville-century'
	  },
		legend: { floating: false, x: -15, itemWidth: iframeWidth_NashvilleCharts * 0.2, width: iframeWidth_NashvilleCharts * 0.8 },
	  subtitle: { text: 'Since 2000, the Nashville metro area population has outgrown its Southern peers', width: iframeWidth_NashvilleCharts * 0.8 },
	  title: { text: 'The Nashville Century', width: iframeWidth_NashvilleCharts * 0.8 },
	  tooltip: {
		formatter: function () {
		  var s = '<span style="font-size: 14px;">' + this.x + ' population</span>';
		  $.each(this.points, function (i, point) {
			s += '<br /><span style="color: ' + point.series.color + '; font-weight: bold;">' + point.series.name + '</span>: ' + Highcharts.numberFormat(point.y, 0);
		  });
		  return s;
		},
		shared: true
	  },
	  xAxis: {
		  categories: ['1940','1950','1960','1970','1980','1990','2000','2010','2018'], 
		  labels: { y: 20 }
	  },
	  yAxis: { 
		plotLines:[{ value: 0, color: '#666', width: 2, zIndex: 3 }],
		title: { text: '' }, tickInterval: 500000, max: 2000000,
		labels: {
			formatter: function () {
				return Highcharts.numberFormat(this.value,0);
			}
		}
	  },
	  series: [
		{ name: 'Nashville', data: [257267,321700,597000,699000,850500,985026,1312000,1671000,1931000] },
		{ name: 'New Orleans', data: [552244,686700,907123,1046500,1190000,1238816,1317000,1190000,1270000] },
		{ name: 'Birmingham', data:...