use my calculator data as variables in chart

Question

I have a calculator built in Jquery, I would like to pass these numbers to my chart js program and have the chart dynamically adjust as new results show in the calculations,

how would I do this with my code bellow ?

** Calculator (jquery) **

 jQuery(function($){
    // Function that formats a raw price amount
    function formatPrice( rawPrice ) {
        return rawPrice.toLocaleString("en-US", {
            style: "currency",
            currency: "USD"
        });
    }

    $('form#roi').on('click', '.calculate-roi', function() {
        const cost_by_industry = parseInt($("#cost_by_ind").val()),
            cost_by_employee_count = parseInt($("#cost_by_employee_c").val()),
            no_empoyees = parseInt($("#no_emp").val()),
            month_invest = parseInt($("#month_inv").val()),
            expected_a_grow = 0.05,
            aas = 120000,
            fpr = 0.75,
            avr = 0.75,
            //managed risk year 1
            mr_result1 = ((0.3 * (cost_by_industry + cost_by_employee_count)) / 2) * 0.2,
            //managed risk year 2
            mr_result2 = mr_result1 * (1 + expected_a_grow),
            //managed risk year 3
            mr_result3 = mr_result2 * (1 + expected_a_grow),
            //managed risk total
            mr_results_total = mr_result1 + mr_result2 + mr_result3,
            //Empower Analysts year 1
            ea_result1 = (no_empoyees / 2000) * aas,
            //Empower Analysts year 2
            ea_result2 = ea_result1 * (1 + expected_a_grow),
            //Empower Analysts year 3
            ea_result3 = ea_result2 * (1 + expected_a_grow),
            //Empower Analysts total
            ea_results_total = ea_result1 + ea_result2 + ea_result3,
            //TP year 1
            tp1_results = month_invest * (1 - fpr) * 3 * 2 * (aas / 2080) * 12,
            //fp year 1
            fp1_results = month_invest * fpr * 3 * 1 * (aas / 2080) * 12,
            //TP year 2
            tp2_results = month_invest * (1 - avr) * (1 - fpr) * 3 * 1 * (aas / 2080) * 12,
            //fp year 2
            fp2_results = month_invest * (1 - avr) * fpr * 3 * 0.5 * (aas / 2080) * 12,
            //reduce aleart vol year 1
            rav_results_1 = tp2_results + fp2_results + tp1_results + fp1_results,
            //reduce aleart vol year 2
            rav_results_2 = rav_results_1 * (1 + expected_a_grow),
            //reduce aleart vol year 3
            rav_results_3 = rav_results_2 * (1 + expected_a_grow),
            //reduce aleart vol total
            rav_results_total = rav_results_1 + rav_results_2 + rav_results_3;

        $("#output").show();
        $(".manage_risk_1").text(formatPrice(mr_result1));
        $(".manage_risk_2").text(formatPrice(mr_result2));
        $(".manage_risk_3").text(formatPrice(mr_result3));
        $(".results_total").text(formatPrice(mr_results_total));
        $(".emp_results_1").text(formatPrice(ea_result1));
        $(".emp_results_2").text(formatPrice(ea_result2));
        $(".emp_results_3").text(formatPrice(ea_result3));
        $(".emp_results_total").text(formatPrice(ea_results_total));
        // $(".tp1_results").text(tp1_results);
        // $(".tp2_results").text(tp2_results);
        // $(".fp1_results").text(fp1_results);
        // $(".fp2_results").text(fp2_results);
        $(".rav_results_1").text(formatPrice(rav_results_1));
        $(".rav_results_2").text(formatPrice(rav_results_2));
        $(".rav_results_3").text(formatPrice(rav_results_3));
        $(".rav_results_total").text(formatPrice(rav_results_total));
    });
});

Chart JS

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = "75%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});

var chart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true,
    legend: {
      display: true
    }
  }
});

what I have tried

at the end of my jquery

label text in chart js

 var text = total,
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;



window.total = rav_results_total;

Answer 1

After you have calculated and got a result back you need to update the chart with the new numbers.

What you can do is after you have calculated, you call a function to update the chart. It can look something like this:

function updateData(chart, newData) {
   // or use chart.datasets[0].data.push(...newData) if you want to append
    chart.data.datasets.pop();
    chart.data.datasets.push({
      data: data
    });

   // this is important, we have to call update so 
   // ChartJS can make its magic with the new data
   chart.update();
}

This is more like a pseudo code to hopefully put you on the right path. As mentioned the most important thing would be to have something that calls chart.update() with your new data.

The doc also provides different examples on how to do this: https://www.chartjs.org/docs/latest/developers/updates.html