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="ViewPointChart" id="container_ViewPointChart2"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart3"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart4"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart5"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart6" style="display: none;"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart7" style="display: none;"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart8"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart9"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart10"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart11"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart12"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart13"></div>

CSS

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

JavaScript

$(document).ready(function(){

    /* define recession bands for charts that will use them */
    var recessionBands = [
      { color: '#EFEFEF', from: Date.UTC(1923,4,1), to: Date.UTC(1924,5,1) },
      { color: '#EFEFEF', from: Date.UTC(1926,9,1), to: Date.UTC(1927,10,1) },
      { color: '#EFEFEF', from: Date.UTC(1929,7,1), to: Date.UTC(1933,2,1) },
      { color: '#EFEFEF', from: Date.UTC(1937,4,1), to: Date.UTC(1938,5,1) },
      { color: '#EFEFEF', from: Date.UTC(1945,1,1), to: Date.UTC(1945,9,1) },
      { color: '#EFEFEF', from: Date.UTC(1948,10,1), to: Date.UTC(1949,9,1) },
      { color: '#EFEFEF', from: Date.UTC(1953,6,1), to: Date.UTC(1954,4,1) },
      { color: '#EFEFEF', from: Date.UTC(1957,7,1), to: Date.UTC(1958,3,1) },
      { color: '#EFEFEF', from: Date.UTC(1960,3,1), to: Date.UTC(1961,1,1) },
      { color: '#EFEFEF', from: Date.UTC(1969,11,1), to: Date.UTC(1970,10,1) },
      { color: '#EFEFEF', from: Date.UTC(1973,10,1), to: Date.UTC(1975,2,1) },
      { color: '#EFEFEF', from: Date.UTC(1980,0,1), to: Date.UTC(1980,6,1) },
      { color: '#EFEFEF', from: Date.UTC(1981,6,1), to: Date.UTC(1982,10,1) },
      { color: '#EFEFEF', from: Date.UTC(1990,6,1), to: Date.UTC(1991,2,1) },
      { color: '#EFEFEF', from: Date.UTC(2001,2,1), to: Date.UTC(2001,10,1) },
      { color: '#EFEFEF', from: Date.UTC(2007,11,1), to: Date.UTC(2009,5,1) }	
    ];

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

	/* chart 1: asset quality trends */
	var sourceLine_ViewPointChart1 = 'Note: TDR means troubled debt restructuring. Data through 2018Q4.<br />Source: Bank Call Reports';
	setChartDefaults(iframeWidth_ViewPointChart,iframeHeight_ViewPointChart,sourceLine_ViewPointChart1,65);
	var chartOptions_ViewPointChart1 = {
		chart: { marginBottom: 110, marginRight: 20, renderTo: 'container_ViewPointChart1' },
		exporting: {
			chartOptions: {
				legend: { enabled: true...