Getting value from an input and converting it into a percentage value for use in a plotly pie chart

Question

I'm creating a budget calculator and would like to convert user inputs into a pie chart. Once I understand how to do this I can create graphs for the other sections.

For testing purposes let's take a look at user inputs for income:

Bank Account, 
Savings Account, 
Cash-on-Hand
= TOTAL CURRENT ACCOUNTS

So I have 3 input fields that already add up to the TOTAL CURRENT ACCOUNTS.

Now I want to get the following percentages and plot them:

Bank Account / Total Current Accounts * 100 = var
Savings Account / Total Current Accounts * 100 = var
Cash-on-Hand / Total Current Accounts * 100 = var

Here is the basic plotly Pie Chart code I will be working from, HTML:

And the basic chart, JavaScript:

var data = [{
  values: [50, 40, 10], /* THIS IS WHERE THE VAR %'s SHOULD BE */
  labels: ['Bank Account', 'Savings Account', 'Cash-on-Hand'],
  type: 'pie'
}];

var layout = {
  height: 400,
  width: 500
};

Plotly.newPlot('incomePieChart', data, layout);

So there are 2 things I want to achieve.

First I need to read the value from the DOM, not sure if I should use HTML/DOM method:

var accountBankValuePer = document.getElementById("accountBankValue").value;
var totalAccountsValuePer = document.getElementById("totalAccountsValue").value;
var A = (Math.floor((accountBankValuePer / totalAccountsValuePer) * 100));

or jQuery method to create a Javascript object:

var accountBankValuePer = $("accountBankValue").value;
var totalAccountsValuePer = $("totalAccountsValue").value;
Var A = (Math.floor((accountBankValuePer / totalAccountsValuePer) * 100));

And then once I have the value of A, how do I plug it into the chart. Would this work?:

var data = [{
  values: [A, B, C],
  labels: ['Bank Account', 'Savings Account', 'Cash-on-Hand'],
  type: 'pie'
}];

var layout = {
  height: 400,
  width: 500
};

Plotly.newPlot('incomePieChart', data, layout);

Any help will be greatly appreciated!

I will try to keep my gitpod preview running for the next few hours, click on Net Worth Overview in the sidebar lower down to get the fields I'm working with: https://8000-abfef542-7b26-46e9-b8f8-6fc9a35d5d77.ws-eu01.gitpod.io/

See screenshot for reference: Fields to be used for Plotly calculation

THANK YOU! :)

user_14043257 · Answer

I have been able to answer this question with tutor support from my course.

Writing this information into the chart also works, I needed to empty the array, and since plotly uses an array called values inside an array called data I could target the array and populate it with my output.

The function also needs to called after the variables otherwise the function wouldn't work:

var data = [{
  values: [],
  labels: ['Bank Accounts', 'Savings Accounts', 'Cash-on-Hand'],
  type: 'pie'
}];

var layout = {
  height: 400,
  width: 500
};

function testPER() {
    var netSalaryPER =
        Number($("input#netSalary").val()) / 
        Number($("input#totalIncomeValue").val()) 
        * 100;
    var bonusSalaryPER =
        Number($("input#bonusSalary").val()) / 
        Number($("input#totalIncomeValue").val()) 
        * 100;
    var gigSalaryPER =
        Number($("input#gigSalary").val()) / 
        Number($("input#totalIncomeValue").val()) 
        * 100;
    data[0].values[0] = netSalaryPER;
    data[0].values[1] = bonusSalaryPER
    data[0].values[2] = gigSalaryPER
    /* TESTING PURPOSES $("input#netSalaryPER").val(netSalaryPER); */
    Plotly.newPlot('incomePieChart', data, layout);
}

Getting value from an input and converting it into a percentage value for use in a plotly pie chart

1 Answers