charts for EM Mobile Banking: A Story in Charts

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="economyMattersChart" id="container_MobileBankingChart1"></div>
<div class="economyMattersChart" id="container_MobileBankingChart2"></div>
<div class="economyMattersChart" id="container_MobileBankingChart3"></div>
<div class="economyMattersChartTall" id="container_MobileBankingChart4"></div>
<div class="economyMattersChart" id="container_MobileBankingChart5"></div>
<div class="economyMattersChart" id="container_MobileBankingChart6"></div>
<div class="economyMattersChart" id="container_MobileBankingChart7"></div>

CSS

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

JavaScript

$(document).ready(function() {

    var iframeWidth_economyMattersChart = $('.economyMattersChart').width();
    var iframeHeight_economyMattersChart = $('.economyMattersChart').height();
    var iframeHeight_economyMattersChartTall = $('.economyMattersChartTall').height();

    /* chart 1: mobile remote deposit capture gaining ground  */
	var sourceLine_EconomicIndicatorComparisons = 'Source: 2019 Mobile Financial Services Survey';
	setChartDefaults(iframeWidth_economyMattersChart, iframeHeight_economyMattersChart, sourceLine_EconomicIndicatorComparisons, 50);
	var chartOptions_EconomicIndicatorComparisons = {
		chart: { marginBottom: 100, marginRight: 20, type: 'bar', renderTo: 'container_MobileBankingChart1' },
		exporting: {
			chartOptions: {
				legend: { enabled: true }
			},
			filename: 'atlanta-fed_economy-matters_economic-indicator-comparisons-2013-to-2017'
		},
		legend: { floating: false, x: -15, itemWidth: iframeWidth_economyMattersChart * 0.3, width: iframeWidth_economyMattersChart * 0.6 },
		subtitle: { text: 'Do you currently offer or plan to offer mobile remote deposit capture (RDC)?', width: iframeWidth_economyMattersChart * 0.8 },
		title: { text: 'Chart 1: Mobile Remote Deposit Capture Gaining Ground', width: iframeWidth_economyMattersChart * 0.8 },
		plotOptions: {
			bar: { borderWidth: 0, groupPadding: 0.1 },
			series: {
				dataLabels: {
					enabled: true, align: 'left', x: 0, y: 0,
					style: { fontFamily: 'Arial, sans-serif', fontSize: '14px', textOutline: 'none' },
					formatter: function() {
						return '<span style="color: ' + this.series.color + ';">' + Highcharts.numberFormat(this.y, 0) + '%</span>';
					}
				}
			}
		},
		tooltip: { enabled: false },
		xAxis: {
			categories: ['Currently offer', 'Plan to offer within two years', 'Do not plan to offer'],
			type: 'category', labels: { y: 5 }
		},
		yAxis: {
			title: { text: '' }, tickInterval: 20, minorTickInterval: 10, max: 100,
			labels: {
				formatter: function() {...