Charts for EM Frailty Index 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>

<p>View data for: <a data-chart="selfReported" class="chartLink" href="#">Self-Reported Health Distribution by Age</a> | <a data-chart="frailtyDistribution" class="chartLink" href="#">Frailty Distribution by Age</a></p>

<div class="economyMattersChart" id="container_FrailtyIndex"></div>

CSS

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

JavaScript

$(document).ready(function(){ 

	var iframeWidth_FrailtyIndex = $('.economyMattersChart').width();
	var iframeHeight_FrailtyIndex = $('.economyMattersChart').height();

	/* chart options */
	var sourceLine_FrailtyIndex = 'Source: Researchers\' calculations using Panel Study of Income Dynamics ';
	setChartDefaults(iframeWidth_FrailtyIndex,iframeHeight_FrailtyIndex,sourceLine_FrailtyIndex,50);
	var chartOptions_FrailtyIndex = {
		chart: { marginBottom: 100, marginRight: 20, renderTo: 'container_FrailtyIndex', type: 'area' },
		exporting: {
			chartOptions: {
				legend: { enabled: false }
			},
			filename: 'atlanta-fed_economy-matters_frailty-index'
		},
		legend: { floating: false, x: -15, itemWidth: iframeWidth_FrailtyIndex * 0.15, width: iframeWidth_FrailtyIndex * 0.8 },
		subtitle: { text: '', width: iframeWidth_FrailtyIndex * 0.8 },
		title: { text: '', width: iframeWidth_FrailtyIndex * 0.8 },
		plotOptions: {
			area: { stacking: 'normal' }
		},
		tooltip: {
			formatter: function () {
				var s = '<span style="font-size: 14px;">' + Highcharts.dateFormat('%B %Y', 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: {
			categories: ['25-29','30-34','35-39','40-44','45-49','50-54','55-59','60-64','65-69','70-74','75-79','80-84','85-89','90-94'], 
			labels: { y: 20 }
		},
		yAxis: { 
			max: 100,
			plotLines:[{ value: 0, color: '#666', width: 2, zIndex: 3 }],
			title: { text: '' }, tickInterval: 20,
			labels: {
				formatter: function () {
					return Highcharts.numberFormat(this.value,0) + '%';
				}
			}
		},
		series: []
	};

	function drawFrailtyIndexChart(whichChart) {
		chartOptions_FrailtyIndex.series.length = 0;
		switch(whichChart) {
			case 'selfReported':
				chartOptions_FrailtyIndex.title.text = 'Self-Reported...