JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="http://cdn.zingchart.com/modules/zingchart-api-rules.min.js"></script>
<div style="width:800px;">
<div id="myChartDiv"></div>
<table id="calc-table">
<tbody>
<tr>
<td>
<input type="text" id="cell_0_0" value="">
</td>
<td>
<input type="text" id="cell_0_1" value="">
</td>
<td>
<input type="text" id="cell_0_2" value="">
</td>
<td>
<input type="text" id="cell_0_3" value="">
</td>
<td>
<input type="text" id="cell_0_4" value="">
</td>
<td>
<input type="text" id="cell_0_5" value="">
</td>
<td>
<input type="text" id="cell_0_6" value="">
</td>
<td>
<input type="text" id="cell_0_7" value="">
</td>
<td>
<input type="text" id="cell_0_8" value="">
</td>
<td>
<input type="text" id="cell_0_9" value="">
</td>
<td>
<input type="text" id="cell_0_10" value="">
</td>
<td>
<input type="text" id="cell_0_11" value="">
</td>
<td>
<input type="text" id="cell_0_12" value="">
</td>
<td>
<input type="text" id="cell_0_13" value="">
</td>
<td>
<input type="text" id="cell_0_14" value="">
</td>
<td>
<input type="text" id="cell_0_15" value="">
</td>
</tr>
...
CSS
input {
width:30px;
}
#calc-table {
margin-left:50px;
}
td {
padding-right:3px;
}
JavaScript
var oData = {
"type": "bar",
"background-color": "none",
"plotarea": {
"margin-bottom": "12%"
},
"scale-x": {
"labels":["As","Ba","Cd","Cr","Cu","Hg","Mo","Ni","Pb","Sb","Se","Zn","Cl","F","SO4","TDS"],
"tick": {
"visible": false
},
"item": {
"visible": true
}
},
"tooltip": {
"text": "Inert: %data-inert"
},
"scale-y": {
"markers": [{
"type": "line",
"range": [50]
}],
"label": {
"text": "Percentage"
},
"values": "0:100:10",
},
"series": [{
"background-color": "#8EC449",
"values": [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
"data-inert": [0.5, 20, 0.04, 0.5, 2, 0.01, 0.5, 0.4, 0.5, 0.06, 0.1, 4, 800, 10, 1000, 4000],
"data-non-haz-l-f":[2,100,1,10,50,0.2,10,10,10,0.7,0.5,50,15000,150,20000,60000],
"data-haz-l-f":[25,300,5,70,100,2,30,40,50,5,7,200,25000,50,50000,100000]
}]
};
zingchart.render({
id: 'myChartDiv',
height: 400,
width: 800,
data: oData
});
var inert=[0.5, 20, 0.04, 0.5, 2, 0.01, 0.5, 0.4, 0.5, 0.06, 0.1, 4, 800, 10, 1000, 4000];
var nonHazLF=[2,100,1,10,50,0.2,10,10,10,0.7,0.5,50,15000,150,20000,60000];
var hazLF=[25,300,5,70,100,2,30,40,50,5,7,200,25000,50,50000,100000];
var valBoxRules=[];
function tableChanged(el) {
//Get modified cell index
nodeIdx = el.target.id.substring(7);
inputVal=el.target.value;
//Create array of rules to enable value-box only for bars at an index where the cell was modified
valBoxRules.push({
"rule":"%i=="+nodeIdx,
"visible":false
});
//Modify in new array of value-box rules
zingchart.exec("myChartDiv","modify",{
data:{
"plot":{
"value-box":{
...