How to change Highcharts graph with HTML radio button input (JS/jQuery)

Question

I'm stuck trying to update a graph in Highcharts, with float data associated with radio buttons. The radio buttons are on the page, they are associated with float values in the HTML, these values should be added together and then graphed. Not sure how much code to add but I'd imagine any real guidance would be made in the final section, the separate JS/jQuery section below.

HTML

<div class="col-lg-7 col-md-7 col-sm-7 ind-quizBox" id="mobilityBox">
                        <div id="navLink1"></div>
                        <div class="" id="meansTransport" >
                            <ul>
                                <p id="boxTitle">Means of transport</p>
                                <input type="radio" id="question-means-A" name="test" value="0" />
                                <label for="question-means-A"> I almost always go by public transport, cycle or walk</label><br>
                                <input type="radio" id="question-means-B" name="test" value="1.4"  />
                                <label for="question-means-B"> I use the car and public transport about the same amount</label><br>
                                <input type="radio" id="question-means-C" name="test" value="0.4" />
                                <label for="question-means-C"> I almost always drive by car</label><br>
                            </ul>
                        </div>

JAVASCRIPT / HIGHCHARTS

document.addEventListener('DOMContentLoaded', function () {
var graphMobility = Highcharts.chart('graphMobility', {
chart: {
    type: 'column',
    backgroundColor: "#fafafa", 
},

credits: { 
    enabled: false, 
},


navigation: {
    buttonOptions: {
        enabled: false,
    }
},

title: {
    text: ''
},
xAxis: {
    categories: [
        'Ireland',
        'UK',
        'EU', 
        'OECD', 
    ]
},
yAxis: [{
    min: 0,
    title: {
        text: 'CO2 Emissions in metric tons'
    }
}, {
    title: {
        text: ''
    },
    opposite: true
}],
legend: {
    enabled: false, 
    shadow: false
},
tooltip: {
    shared: true, 
    valueSuffix: 't'
},
plotOptions: {
    column: {
        grouping: false,
        shadow: false,
        borderWidth: 0
    }
},
series: [{
    name: 'Per capita CO2 emissions',
    color: 'rgba(165,170,217,1)',
    data: [2.5, 3.1, 2.2, 1.6],
    pointPadding: -0.2,
    pointPlacement: 0.0
}, {
    name: 'Personal CO2 footprint', 
    opacity: 0.9,
    borderWidth: 3, 
    borderColor:'white',
    dashStyle: 'ShortDot', 
    data: [0.8],
    pointPadding: -0.2,
    pointPlacement: 0.0
    }]
});

});

JS / jQUERY

(document).ready(function($) {
var sum = 0;

$("input:radio").click(function() {
   sum = 0;

    $("input:radio:checked").each(function(idx, elm) {
        sum += parseFloat(elm.value, 10);
    });
    var mobilityTotal = sum;

    chart.series['Personal CO2 footprint', 0].setData(sum, true);

  });
});

Answer 1

You need to correctly refer to the series:

$("input:radio").click(function() {
    sum = 0;

    $("input:radio:checked").each(function(idx, elm) {
        sum += parseFloat(elm.value, 10);
    });
    var mobilityTotal = sum;

    graphMobility.series[1].setData([sum], true);
});

---

Live demo: http://jsfiddle.net/BlackLabel/jtuhg31o/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData