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>
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
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