Updating chart.js based on selections from dropdown - chart.js

Question

I have a calculator that takes values from two drop downs and runs them through an array to calculate odds in which a certain condition will end. I got it working and I show the results in a text format. My boss now wants me to show the results in a bar graph. I chose to use chart.js and can get the chart working with entering actual data into the chart, but need to have the data be pulled from the results of the selected drop downs.
For some reason the calculator in jsfiddle its not working correctly but does on my site. Not sure why.
Below I have the script that I use for the chart.js
<script src="js/Chart.js"></script>
<script src="js/Chart.HorizontalBar.js"></script>
<script src="js/Chart.StackedBar.js"></script>
<script>
var barData = {
labels : ["50% Probability","80% Probability","95% Probability","99% Probability"],
datasets : [
{
label: "Birth No Condition",
fillColor : "#137fc1",
strokeColor : "#137fc1",
data : [0,5,10,15]
},
{
label: "Current Age",
fillColor : "#ff0000",
strokeColor : "#ff0000",
data : [0,5,10,15]
}
]
}
var myChart = document.getElementById("myChart").getContext("2d");
new Chart(myChart).StackedBar(barData, {
scaleShowLabels: true,
responsive: true
});
</script>
I need to load in the data from the dropdowns into each of the datasets data so instead of it saying
datasets : [
{
label: "Birth No Condition",
fillColor : "#137fc1",
strokeColor : "#137fc1",
data : [0,5,10,15]
},
It would say
datasets : [
{
label: "Birth No Condition",
fillColor : "#137fc1",
strokeColor : "#137fc1",
data : colicWeeks
},
datasets : [
{
label: "Birth No Condition",
fillColor : "#137fc1",
strokeColor : "#137fc1",
data : finalAge50
},
I guess what I am trying to say is how do you push data from the results of each dropdown selection run it through the array and spit the results out into the chart.js bar graph?

Answer 1

Just update the latter part of your script (you should be able to locate where you need to paste it in based on the 1st line below)
...
if (colicWeeks >= 0) {
document.getElementById('totalWeeks').style.display = 'block';
var barData = {
labels: ["50% Probability", "80% Probability", "95% Probability", "99% Probability"],
datasets: [
{
label: "Birth No Condition",
fillColor: "#137fc1",
strokeColor: "#137fc1",
data: [c50F, c80F, c95F, c99F]
},
{
label: "Current Age",
fillColor: "#ff0000",
strokeColor: "#ff0000",
data: [
finalAge50,
finalAge80,
finalAge95,
finalAge99
]
}
]
}
document.getElementById('myChart').style.display = 'block';
var myChart = document.getElementById("myChart").getContext("2d");
if (myBarChart !== undefined)
myBarChart.destroy();
myBarChart = new Chart(myChart).StackedBar(barData, {
scaleShowLabels: true,
responsive: true
});
} else {
document.getElementById('myChart').style.display = 'none';
document.getElementById('totalWeeks').style.display = 'none';
}
divobj.innerHTML = "Your child has currently had colic for " + colicWeeks + " weeks. <br /><br />Their is a " + p50 + "% chance that your childs colic will end in " + c50F + " weeks at " + finalAge50 + " weeks of age. <br /><br />Their is a " + p80 + "% chance that your childs colic will end in " + c80F + " weeks at " + finalAge80 + " weeks of age. <br /><br />Their is a " + p95 + "% chance that your childs colic will end in " + c95F + " weeks at " + finalAge95 + " weeks of age. <br /><br />Their is a " + p99 + "% chance that your childs colic will end in " + c99F + " weeks at " + finalAge99 + " weeks of age.";
}
var myBarChart;
function hideTotal() {
var divobj = document.getElementById('totalWeeks');
divobj.style.display = 'none';
document.getElementById('myChart').style.display = 'none';
}
then add a canvas element, probably after the results block
<div id="totalWeeks"></div>
<canvas id="myChart"></canvas>