'What I code do I add to change this bar chart in real-time in JavaScript?

I'm trying to automatically update this bar chart. I've looked on websites for what code to add, and I don't know how to apply it to what I have. Here is the page the bar chart is on: https://lifespringchurch.com/spiritual-gifts-survey/ (The bar chart is at the very bottom of the page.) After a person is done with the survey, their final tallies should be shown in the bar graph.

<html>
<head>
<script src="https://cdn.anychart.com/releases/8.0.0/js/anychart-base.min.js"></script>
</head>
<body>
<div id="container" style="width: 75%; height: 75%"></div>
<script>
anychart.onDocumentReady(function() {

// set the data
var data = {
header: ["Gift", "Value"],
rows: [
["Leadership", document.getElementById("ninja_forms_field_464").value],
["Administration", document.getElementById("ninja_forms_field_465").value],
["Teaching", document.getElementById("ninja_forms_field_467").value],
["Knowledge", document.getElementById("ninja_forms_field_468").value],
["Wisdom", document.getElementById("ninja_forms_field_469").value],
["Prophecy", document.getElementById("ninja_forms_field_470").value],
["Discernment", document.getElementById("ninja_forms_field_471").value],
["Exhortation", document.getElementById("ninja_forms_field_472").value],
["Shepherding", document.getElementById("ninja_forms_field_473").value],
["Faith", document.getElementById("ninja_forms_field_474").value],
["Evangelism", document.getElementById("ninja_forms_field_475").value],
["Apostleship", document.getElementById("ninja_forms_field_476").value],
["Service", document.getElementById("ninja_forms_field_477").value],
["Mercy", document.getElementById("ninja_forms_field_478").value],
["Giving", document.getElementById("ninja_forms_field_479").value],
["Hospitality", document.getElementById("ninja_forms_field_480").value]
]};


// create the chart
var chart = anychart.column();


// add the data
chart.data(data);

// draw
chart.container("giftgraph");
chart.draw();

});
</script>
</body>
</html>

javascript charts

Solution 1:^[1]

From what I understand I think this code might work. Any Chart does have some documentation on how to update a chart. Here is the link: https://docs.anychart.com/Working_with_Data/Data_Sets

    for(var i = 0; i < data.rows.length; i++){
        data.rows(i, [data.rows[i][0], data.rows[i][1]]);
    }

Cheers, Oliver

Solution 2:^[2]

I went back and there were a few errors with the code so I went back fixed them. So here is the final code: https://codepen.io/olifire/pen/rNpwpeP

    function update(){
        // Some code to check if the form is filled
        for(var i = 0; i < data.rows.length; i++){
        data.rows[i] = [data.rows[i][0], data.rows[i][1]];
        // Sets new data
        chart.data(data);
        // Redraws chart
        chart.draw();
        }
        }

Cheers, Oliver

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	olifire
Solution 2	olifire

'What I code do I add to change this bar chart in real-time in JavaScript?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]