Charts for September 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_ViewPointChart3"></div><br />

CSS

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

JavaScript

$(document).ready(function(){



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



	/* nbt1 chart 1: return on average assets */
	var sourceLine_ViewPointChart3 = 'Data through 2019Q4.<br />Source: Bank Call Reports';
	setChartDefaults(iframeWidth_ViewPointChart,iframeHeight_ViewPointChart,sourceLine_ViewPointChart3,65);
	var chartOptions_ViewPointChart3 = {
		chart: { marginBottom: 110, marginRight: 20, renderTo: 'container_ViewPointChart3' },
		exporting: {
			chartOptions: {
				legend: { enabled: true }
			},
			filename: 'atlanta-fed_viewpoint_annual-loan-growth'
		},
		legend: { floating: false, x: -15, itemWidth: iframeWidth_ViewPointChart * 0.4, width: iframeWidth_ViewPointChart * 0.8 },
		subtitle: { text: '', width: iframeWidth_ViewPointChart * 0.8 },
		title: { text: 'Return on Average Assets', width: iframeWidth_ViewPointChart * 0.8 },
		
		tooltip: {
			formatter: function () {
      	/* for this first line, we use only "this.x" since we want to show the exact 
           label in the x-axis, not a formatted date */
				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*100,1) + '%';
				});
				return s;
			},
			shared: true
		},
		xAxis: {
			type: 'category', categories: ['2019Q1','2019Q2','2019Q3','2019Q4','2020Q1','2020Q2','2020Q3','2020Q4','2021Q1'], labels: { y: 20 }
		},
		yAxis: { 
			plotLines:[{ value: 0, color: '#666', width: 2, zIndex: 3 }],
			title: { text: 'Percent' }, tickInterval: 0.005, 
      labels: { 
 				/* we want to show the numbers as whole percentages
           use the "formatter" function instead of "format"
           the Highcharts.numberFormat function has two values:
           1) the first is the value itself, which...