Chart 2 for 2018 Survey of Consumer Payment Choice
author: 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_SurveyChart2"></div><br />
<div id="datasetPickerPanel">
<div id="datasetPickerSet_payment2" class="datasetPickerSet">
<p class="datasetPickerHead mtn mbm">Payment type</p>
<label for="datasetPickerCheckbox2_payment2_cash" class="datasetPickerCheckbox2Label"><input type="checkbox" data-datasetid="Cash" id="datasetPickerCheckbox2_payment2_cash" class="datasetPickerCheckbox2 datasetPickerCheckbox2_payment2"> Cash</label>
<label for="datasetPickerCheckbox2_payment2_check" class="datasetPickerCheckbox2Label"><input type="checkbox" data-datasetid="Check" id="datasetPickerCheckbox2_payment2_check" class="datasetPickerCheckbox2 datasetPickerCheckbox2_payment2"> Check</label>
<label for="datasetPickerCheckbox2_payment2_moneyOrder" class="datasetPickerCheckbox2Label"><input type="checkbox" data-datasetid="Money order" id="datasetPickerCheckbox2_payment2_moneyOrder" class="datasetPickerCheckbox2 datasetPickerCheckbox2_payment2"> Money order</label>
<label for="datasetPickerCheckbox2_payment2_debit" class="datasetPickerCheckbox2Label"><input type="checkbox" data-datasetid="Debit card" id="datasetPickerCheckbox2_payment2_debit" class="datasetPickerCheckbox2 datasetPickerCheckbox2_payment2"> Debit card</label>
<label for="datasetPickerCheckbox2_payment2_credit" class="datasetPickerCheckbox2Label"><input type="checkbox" data-datasetid="Credit card" id="datasetPickerCheckbox2_payment2_credit" class="datasetPickerCheckbox2 datasetPickerCheckbox2_payment2"> Credit card</label>
<label...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;
}
.datasetPickerCheckbox2Label {
display: block;
}JavaScript
$(document).ready(function(){
var PaymentsArray_chart2 = [
{
"payment_method": "All payment methods",
"age_category": "Ages 18-24",
"number_of_payments": [62.15936742,62.8694375,69.05396105,59.79194461]
},
{
"payment_method": "Cash",
"age_category": "Ages 18-24",
"number_of_payments": [20.7574543,24.95679094,22.95871422,20.63058953]
},
{
"payment_method": "Check",
"age_category": "Ages 18-24",
"number_of_payments": [1.117454549,1.518136055,1.341127554,0.726387805]
},
{
"payment_method": "Money order",
"age_category": "Ages 18-24",
"number_of_payments": [0.449218108,0.412999621,0.688574681,0.103835004]
},
{
"payment_method": "Debit card",
"age_category": "Ages 18-24",
"number_of_payments": [26.7140262,26.83654782,30.86564784,24.2019403]
},
{
"payment_method": "Credit card",
"age_category": "Ages 18-24",
"number_of_payments": [5.617523083,5.937120512,6.803647625,7.820093474]
},
{
"payment_method": "Prepaid card",
"age_category": "Ages 18-24",
"number_of_payments": [3.378103578,0.895965451,2.844870729,2.197685632]
},
{
"payment_method": "Bank account number payment",
"age_category": "Ages 18-24",
"number_of_payments": [2.506769765,1.414551953,2.460983892,2.539509914]
},
{
"payment_method": "Online banking bill payment",
"age_category": "Ages 18-24",
"number_of_payments": [1.035458074,0.751180862,0.818799892,1.197551717]
},
{
"payment_method": "Direct from income",
"age_category": "Ages 18-24",
"number_of_payments": [0.58335976,0.146144283,0.271594618,0.374351234]
},
{
"payment_method": "All payment methods",
"age_category": "Ages 25-34",
"number_of_payments": [68.58197781,67.75123422,67.02482082,72.6575997]
},
{
"payment_method": "Cash",
"age_category": "Ages 25-34",
"number_of_payments": [16.67138411,18.1947187,18.25785458,14.53770228]
},
{
"payment_method": "Check",
"age_category": "Ages...