I'm using a draggable highchart to portray some NBA payroll data. If the bar gets dragged I would like to change an input box with a new salary. I've been going at this for a while, and have not made much progress. I can get a draggable event to change an input box, but I cannot do the reverse. I need some help.
I originally, started going a state change route and this was my thinking. Basically, the chart can control a global, and the input can control the global. Then I just need to update the corresponding items in the DOM.
var state = {};
state.contractStructure = 'EQUAL'; // Could also be PROGRESSIVE, BACKEND, DIMINISHING
state.netIncome = <%= @team1_tax[:net_income] %>;
state.numYears = <%= @lookup_hash[:years]; %>;
state.incomeByYear = [];
function setNetIncome(value) {
state.netIncome = value;
if (state.contractStructure === 'EQUAL') {
var perYearIncome = state.netIncome / numYears;
for (var i = 0; i < state.numYears; i++) {
state.incomeByYear[i] = perYearIncome
}
} else if (state.contractStructure === PROGRESSIVE) {
}
// Once all data is computed.
// Loop through all input boxes and set input[i].value = state.incomeByYear[i]
}
Array.prototype.slice.call(document.getElementsByClassName('year-inputs')).forEach(element) {
element.addEventListener('change', function(e) {
var value = e.value; // this is the number typed intot he boxes
var i = ??? //
state.incomeByYear[i] = value
// Once all data computed
// Re-reneder the high chart with computed data
}
})
function onNewContractDrag(newValue, year) {
state.incomeByYear[year] = newValue
state.netIncome // somehow adjust according to newValue
// Need to update all boxes to reflect chagne in state
// Loop through each one. Each one's value get set to state.incomeByYear[i]
}
Then it seemed like overkill, so I started investigating other ways.
I've created a JsFiddle, but I can only go from dragging to and input box. Should I go the state change route? JsFiddle route.
My js fiddle is http://jsfiddle.net/AyUbx/3388/