Charts for 2018 Diary of Consumer Payment Choice

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="dataChart" id="container_NumberOfDiarists"></div>
<div style="text-align: center;">
<select name="PaymentType" id="PaymentType">
<option value="all">All payment types</option>
<option value="bills">Bills</option>
<option value="purchases">Purchases</option>
<option value="inperson">In-person</option>
<option value="notinperson">Not in-person</option>
</select>
</div>
<div class="dataChart" id="container_PercentOfTransactions"></div>
<div class="dataChart" id="container_TransactionScatterPlot"></div>

CSS

.dataChart { height: 450px; width: 98%; margin: 0 auto; }

JavaScript

$(document).ready(function(){

	function draw2017DCPCChart1() {

		var iframeWidth_DataChart = $('.dataChart').width();
		var iframeHeight_DataChart = $('.dataChart').height();

		var sourceLine_NumberOfDiarists = 'Source: 2018 Diary of Consumer Payment Choice';
		setChartDefaults(iframeWidth_DataChart,iframeHeight_DataChart,sourceLine_NumberOfDiarists,50);
		var chartOptions_NumberOfDiarists = {
			chart: { marginBottom: 135, marginRight: 20, renderTo: 'container_NumberOfDiarists', type: 'column' },
			exporting: {
				chartOptions: {
					legend: { enabled: false }
				},
				filename: 'atlanta-fed_number-of-diarists-participating-each-day'
			},
			legend: { floating: false, x: -15, width: iframeWidth_DataChart * 0.6, itemWidth: iframeWidth_DataChart * 0.15, reversed: true },
			subtitle: { enabled: false },
			title: { text: 'Number of diarists participating each day, by day of diary', width: iframeWidth_DataChart * 0.8 },
			tooltip: {
				formatter: function () {
					var s = '<span style="font-size: 14px;">' + this.points[0].key + '</span>';
					$.each(this.points, function (i, point) {
			  console.log(point);
						s += '<br /><span style="color: ' + point.series.color + '; font-weight: bold;">' + point.series.name + '</span>: ' + Highcharts.numberFormat(point.y, 0);
					});
					return s;
				},
				shared: true
			},
			plotOptions: {
				series: { borderWidth: 0, shadow: false, stacking: 'normal' }
			},
			xAxis: {
				type: 'category', labels: { y: 20 }, categories: ['9/28/2018','9/29/2018','9/30/2018','10/1/2018','10/2/2018','10/3/2018','10/4/2018','10/5/2018','10/6/2018','10/7/2018','10/8/2018','10/9/2018','10/10/2018','10/11/2018','10/12/2018','10/13/2018','10/14/2018','10/15/2018','10/16/2018','10/17/2018','10/18/2018','10/19/2018','10/20/2018','10/21/2018','10/22/2018','10/23/2018','10/24/2018','10/25/2018','10/26/2018','10/27/2018','10/28/2018','10/29/2018','10/30/2018','10/31/2018','11/1/2018','11/2/2018']
			},
			yAxis: { 
				min: 0,...