Highcharts "jam session"

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>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600&display=swap" rel="stylesheet"> 

<div class="ViewPointChart" id="container_ViewPointChart1"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart2"></div><br />

<div class="ViewPointChart" id="container_HomePriceIndex"></div><br />

<div class="ViewPointChart" id="container_ViewPointChart3"></div><br />

<div class="ViewPointChart" id="container_ViewPointChart5"></div><br />
<div class="ViewPointChart" id="container_ViewPointChart6"></div><br />

<div class="ViewPointChart" id="container_ViewPointChart11"></div><br />
<div class="ViewPointChart" id="container_WorkforceEducation"></div><br />

<br />

CSS

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

JavaScript

$(document).ready(function(){



/* set values for recession bands used in datetime charts, if not previously defined */
if (typeof recessionBands == 'undefined') {
	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) },
		{ color: '#EFEFEF', from: Date.UTC(2020,2,1), to: Date.UTC(2099,0,1) } /* false "to" date to be modified when current recession is over */
	];
}

/* set global settings for all Highcharts visualizations */
function setChartDefaults(chartWidth,chartHeight,chartSourceLine,chartSourceLineOffset) {
	if (!chartWidth) chartWidth = 650;
	if (!chartHeight) chartHeight = 450;
	if (!chartSourceLine) chartSourceLine = 'Source: Atlanta Fed';
	if (!chartSourceLineOffset) chartSourceLineOffset = 50;
	Highcharts.setOptions({
		chart: { 
			borderColor: '#CDCDCD', borderWidth: 1, zoomType: 'x',
			style: { color:...