Chart 1 for 2018 Survey of Consumer Payment Choice - stacked columns

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_SurveyChart1"></div><br />

<div id="datasetPickerPanel">
	<div id="datasetPickerSet_payment" class="datasetPickerSet">
		<p class="datasetPickerHead mtn mbm">Payment type</p>
		<label for="datasetPickerCheckbox_payment_cash" class="datasetPickerCheckboxLabel"><input type="checkbox" data-datasetid="Cash" id="datasetPickerCheckbox_payment_cash" class="datasetPickerCheckbox datasetPickerCheckbox_payment"> Cash</label>
		<label for="datasetPickerCheckbox_payment_check" class="datasetPickerCheckboxLabel"><input type="checkbox" data-datasetid="Check" id="datasetPickerCheckbox_payment_check" class="datasetPickerCheckbox datasetPickerCheckbox_payment"> Check</label>
		<label for="datasetPickerCheckbox_payment_moneyOrder" class="datasetPickerCheckboxLabel"><input type="checkbox" data-datasetid="Money order" id="datasetPickerCheckbox_payment_moneyOrder" class="datasetPickerCheckbox datasetPickerCheckbox_payment"> Money order</label>
		<label for="datasetPickerCheckbox_payment_debit" class="datasetPickerCheckboxLabel"><input type="checkbox" data-datasetid="Debit card" id="datasetPickerCheckbox_payment_debit" class="datasetPickerCheckbox datasetPickerCheckbox_payment"> Debit card</label>
		<label for="datasetPickerCheckbox_payment_credit" class="datasetPickerCheckboxLabel"><input type="checkbox" data-datasetid="Credit card" id="datasetPickerCheckbox_payment_credit" class="datasetPickerCheckbox datasetPickerCheckbox_payment"> Credit card</label>
		<label for="datasetPickerCheckbox_payment_prepaid"...

CSS

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

#datasetPickerPanel {
    max-width: 100%;
    padding: 10px;
    border: 1px solid #CDCDCD;
    overflow: auto;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  div.datasetPickerSet {
    float: left;
    max-width: 50%;
    width: 50%;
}
.datasetPickerHead {
    font-weight: bolder;
}
.chart-color-box, .chart-color-box-all {

    height: 4px;
    width: 14px;
    float: left;
    margin: 7px 5px 7px 0px;

}
.datasetPickerCheckboxLabel {

    display: block;

}

JavaScript

$(document).ready(function(){ 

	var PaymentsArray_chart1 = [
	  {
		"payment_method": "All payment methods",
		"income_category": "Less than $40K",
		"number_of_payments": [54.70966269,58.80511609,60.1625592,61.98382551]
	  },
	  {
		"payment_method": "Cash",
		"income_category": "Less than $40K",
		"number_of_payments": [21.0589502,21.56805023,21.89407482,20.01646638]
	  },
	  {
		"payment_method": "Check",
		"income_category": "Less than $40K",
		"number_of_payments": [4.180028937,3.998466748,3.515144274,3.17785046]
	  },
	  {
		"payment_method": "Money order",
		"income_category": "Less than $40K",
		"number_of_payments": [0.844044572,0.816173845,0.877688898,1.070538794]
	  },
	  {
		"payment_method": "Debit card",
		"income_category": "Less than $40K",
		"number_of_payments": [16.60621873,19.69453341,19.39948957,21.88866235]
	  },
	  {
		"payment_method": "Credit card",
		"income_category": "Less than $40K",
		"number_of_payments": [6.056670599,6.117716999,7.476191652,7.390056554]
	  },
	  {
		"payment_method": "Prepaid card",
		"income_category": "Less than $40K",
		"number_of_payments": [1.510609737,2.131039101,2.3975035,2.642180834]
	  },
	  {
		"payment_method": "Bank account number payment",
		"income_category": "Less than $40K",
		"number_of_payments": [2.942164676,2.563240586,2.516216378,3.959640815]
	  },
	  {
		"payment_method": "Online banking bill payment",
		"income_category": "Less than $40K",
		"number_of_payments": [1.05401191,1.271755782,1.556192944,1.181861378]
	  },
	  {
		"payment_method": "Direct from income",
		"income_category": "Less than $40K",
		"number_of_payments": [0.456963336,0.644139396,0.530057163,0.656567946]
	  },
	  {
		"payment_method": "All payment methods",
		"income_category": "$40K to $75K",
		"number_of_payments": [78.21123181,66.39774994,66.65071149,72.52333059]
	  },
	  {
		"payment_method": "Cash",
		"income_category": "$40K to $75K",
		"number_of_payments": [18.61679426,15.45115226,17.90223503,16.7487992]
	  },
	 ...