Charts for June 2019 ViewPoint

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="ViewPointChart" id="container_ViewPointChart1"></div><br />
<div class="ViewPointChartTall" id="container_ViewPointChart2"></div><br />
<div class="ViewPointChartTall" id="container_ViewPointChart3"></div><br />
<div class="ViewPointChartTall" id="container_ViewPointChart4"></div>

CSS

.ViewPointChart { height: 450px; width: 100%; margin: 0 auto; }
.ViewPointChartTall { height: 550px; width: 100%; margin: 0 auto; }

JavaScript

$(document).ready(function(){

    var iframeWidth_ViewPointChart = $('.ViewPointChart').width();
    var iframeHeight_ViewPointChart = $('.ViewPointChart').height();
    var iframeWidth_ViewPointChartTall = $('.ViewPointChartTall').width();
    var iframeHeight_ViewPointChartTall = $('.ViewPointChartTall').height();

	/* chart 1: population growth in the sixth district */
	var sourceLine_ViewPointChart1 = 'Source: Moody\' Analytics, Risk Analysis Unit';
	setChartDefaults(iframeWidth_ViewPointChart,iframeHeight_ViewPointChart,sourceLine_ViewPointChart1,50);
	var chartOptions_ViewPointChart1 = {
		chart: { marginBottom: 110, marginRight: 20, renderTo: 'container_ViewPointChart1', type: 'line' },
		exporting: {
			chartOptions: {
				legend: { enabled: true }
			},
			filename: 'atlanta-fed_viewpoint_population-growth-in-the-sixth-district'
		},
		legend: { floating: false, x: -15, itemWidth: iframeWidth_ViewPointChart * 0.26, width: iframeWidth_ViewPointChart * 0.8 },
		subtitle: { text: '', width: iframeWidth_ViewPointChart * 0.8 },
		title: { text: 'Population Growth in the Sixth District', width: iframeWidth_ViewPointChart * 0.8 },
		tooltip: {
			formatter: function () {
				var s = '<span style="font-size: 14px;">' + this.x + '</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, 2) + '%';
				});
				return s;
			},
			shared: true
		},
		xAxis: {
			type: 'category', categories: ['2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018'], labels: { y: 20 }
		},
		yAxis: { 
			title: { text: 'Percent change in population' }, tickInterval: 1, labels: { format: '{value:,.0f}' },
			plotBands: [ { color: '#EFEFEF', from: -10, to: 0 } ], plotLines: [{ value: 0, width: 2, zIndex: 10, label: { y: 16, text: 'Population decline', style: {...