Chartjs-Updating chart.js based on selections from dropdown

by

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>

Leave a comment