Chart 3 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_SurveyChart3"></div><br />
<div id="datasetPickerPanel">
<div id="datasetPickerSet_payment3" class="datasetPickerSet">
<p class="datasetPickerHead mtn mbm">Payment type</p>
<label for="datasetPickerCheckbox3_payment3_cash" class="datasetPickerCheckbox3Label"><input type="checkbox" data-datasetid="Cash" id="datasetPickerCheckbox3_payment3_cash" class="datasetPickerCheckbox3 datasetPickerCheckbox3_payment3"> Cash</label>
<label for="datasetPickerCheckbox3_payment3_check" class="datasetPickerCheckbox3Label"><input type="checkbox" data-datasetid="Check" id="datasetPickerCheckbox3_payment3_check" class="datasetPickerCheckbox3 datasetPickerCheckbox3_payment3"> Check</label>
<label for="datasetPickerCheckbox3_payment3_moneyOrder" class="datasetPickerCheckbox3Label"><input type="checkbox" data-datasetid="Money order" id="datasetPickerCheckbox3_payment3_moneyOrder" class="datasetPickerCheckbox3 datasetPickerCheckbox3_payment3"> Money order</label>
<label for="datasetPickerCheckbox3_payment3_debit" class="datasetPickerCheckbox3Label"><input type="checkbox" data-datasetid="Debit card" id="datasetPickerCheckbox3_payment3_debit" class="datasetPickerCheckbox3 datasetPickerCheckbox3_payment3"> Debit card</label>
<label for="datasetPickerCheckbox3_payment3_credit" class="datasetPickerCheckbox3Label"><input type="checkbox" data-datasetid="Credit card" id="datasetPickerCheckbox3_payment3_credit" class="datasetPickerCheckbox3 datasetPickerCheckbox3_payment3"> 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;
}
.datasetPickerCheckbox3Label {
display: block;
}JavaScript
$(document).ready(function(){
var PaymentsArray_chart3 = [
{
"payment_method": "All payment methods",
"transaction_type": "All payments",
"number_of_payments": [65.9,71.8,70.5,68.9,67.8,66.1,68.9,67.8,69.6,72.1]
},
{
"payment_method": "Cash",
"transaction_type": "All payments",
"number_of_payments": [20,20.7,19.6,18.5,17.9,16.9,18.7,18.4,19.1,17]
},
{
"payment_method": "Check",
"transaction_type": "All payments",
"number_of_payments": [8,7.2,6.8,6.5,5.6,5,4.5,4.5,3.9,3.4]
},
{
"payment_method": "Money order",
"transaction_type": "All payments",
"number_of_payments": [0.7,0.6,0.3,0.5,0.3,0.3,0.4,0.4,0.4,0.4]
},
{
"payment_method": "Debit card",
"transaction_type": "All payments",
"number_of_payments": [18.8,22.3,21.4,20.6,21.1,20.4,22.4,21.8,22.1,24.7]
},
{
"payment_method": "Credit card",
"transaction_type": "All payments",
"number_of_payments": [11.4,13.2,14.4,14.9,15.3,15.4,14.7,14.5,16.1,16.8]
},
{
"payment_method": "Prepaid card",
"transaction_type": "All payments",
"number_of_payments": [0.8,0.7,0.6,0.9,0.7,0.7,1.1,1.4,1.5,1.8]
},
{
"payment_method": "Bank account number payment",
"transaction_type": "All payments",
"number_of_payments": [2.7,3.3,3.4,3.3,3.3,3.5,3.8,3.5,3.4,5]
},
{
"payment_method": "Online banking bill payment",
"transaction_type": "All payments",
"number_of_payments": [3.1,3.1,3.3,3.2,3,3.4,2.8,2.7,2.4,2.5]
},
{
"payment_method": "Direct from income",
"transaction_type": "All payments",
"number_of_payments": [0.5,0.6,0.7,0.5,0.6,0.5,0.6,0.6,0.6,0.6]
},
{
"payment_method": "All payment methods",
"transaction_type": "Bill payments",
"number_of_payments": [18.2,21.3,22.7,22,22.2,22.1,20.5,19.9,21.3,21.8]
},
{
"payment_method": "Cash",
"transaction_type": "Bill payments",
"number_of_payments": [2.2,2.4,2.9,2.3,2.3,2.2,2.2,2.2,2.8,2.1]
},
{
"payment_method": "Check",
"transaction_type": "Bill...