(Image at the bottom of the page)
I have this table, it is about light patterns and it is represented from 1 to 8, what I do is that by means of Charts function I fill the table with the fields that you see on the left (Cambio, Hora/%, Minutos, Dimado y Dimado entrada) The graph at this moment works well, if I modify the values on the left the table is modified. Now, what I try is that, not always the 8 fields will be active so I want to disappear from view the fields that are not active. for example: The select "1" of "cambio" is active, then it will be seen in the graph, but if the select "2" of " is inactive it will not be seen in the graph Any ideas what to do?
The code of the table is this:
<table border="0">
<tbody>
<tr>
<td><strong>Patrón 2</strong>(
<select name="TipoPatron2" id="TipoPatron2">
<option value="00">T desde el encendido</option>
<option value="01" selected="selected">T desde las 12:00</option>
<option value="10">T en % respecto día anterior</option>
</select>)</td>
<td><input type="button" onclick="changeP2();Campos2Mem()" value="Actualizar"> <label id="Error2" style="color: red"></label></td>
</tr>
<tr>
<td>
<table>
<thead>
<tr color="#ccff00">
<td>Cambio</td>
<td>Hora/%</td>
<td>Minutos</td>
<td>Dimado</td>
<td>Dimado Entrada</td>
<td>Color</td>
</tr>
</thead>
<tbody id="mytbody2">
</tbody>
<script language="javascript">
const tbody2 = document.getElementById("mytbody2");
var I = 1;
for (I = 1; I <= 8; I++) {
document.writeln("<tr align=center>");
document.writeln("<td>" + I + " <input type=\"checkbox\" checked id=\"AP2C" + I + "\"></td>");
document.writeln("<td><input type=\"text\" onpaste = \"alerta()\" value=\"0\" id=\"HP2C" + I + "\" maxlength=3 size=3></td>");
document.writeln("<td><input type=\"text\" value=\"0\" id=\"MP2C" + I + "\" maxlength=2 size=2></td>");
document.writeln("<td><select name=\"dimado\" id=\"DP2C" + I + "\"><option value =\"0\">0%</option><option value =\"1\">1%</option><option value =\"2\">2%</option><option value =\"3\">3%</option><option value =\"4\">4%</option><option value =\"5\">5%</option><option value =\"6\">6%</option><option value =\"7\">7%</option><option value =\"8\">8%</option><option value =\"9\">9%</option><option value=\"10\">10%</option><option value=\"11\">11%</option><option value=\"12\">12%</option><option value=\"13\">13%</option><option value=\"14\">14%</option><option value = \"15\">15%</option><option value=\"16\">16%</option><option value=\"17\">17%</option><option value=\"18\">18%</option><option value=\"19\">19%</option><option value = \"20\">20%</option><option value=\"21\">21%</option><option value=\"10\">10%</option><option value = \"22\">22%</option><option value = \"23\">23%</option><option value = \"24\">24%</option><option value = \"25\">25%</option><option value = \"26\">26%</option><option value = \"27\">27%</option><option value = \"28\">28%</option><option value = \"29\">29%</option><option value = \"30\">30%</option><option value = \"31\">100%</option></select></td>");
document.writeln("<td><select name=\"dimadoEntrada\" id=\"IP2C" + I + "\" ><option value =\"0\">0%</option><option value =\"1\">1%</option><option value =\"2\">2%</option><option value =\"3\">3%</option><option value =\"4\">4%</option><option value =\"5\">5%</option><option value =\"6\">6%</option><option value =\"7\">7%</option><option value =\"8\">8%</option><option value =\"9\">9%</option><option value=\"10\">10%</option><option value=\"11\">11%</option><option value=\"12\">12%</option><option value=\"13\">13%</option><option value=\"14\">14%</option><option value = \"15\">15%</option><option value=\"16\">16%</option><option value=\"17\">17%</option><option value=\"18\">18%</option><option value=\"19\">19%</option><option value = \"20\">20%</option><option value=\"21\">21%</option><option value=\"10\">10%</option><option value = \"22\">22%</option><option value = \"23\">23%</option><option value = \"24\">24%</option><option value = \"25\">25%</option><option value = \"26\">26%</option><option value = \"27\">27%</option><option value = \"28\">28%</option><option value = \"29\">29%</option><option value = \"30\">30%</option><option value = \"31\">100%</option></select></td>");
document.writeln("<td><input type=\"text\" value=\"0\" id=\"CP2C" + I + "\" maxlength=2 size=2 disabled></td>");
document.writeln("</tr>");
}
const HP2Cs = document.querySelectorAll("[id^=HP2C]")
document.getElementById("TipoPatron2").addEventListener("change", function () {
const dis = this.value === "10";
HP2Cs.forEach(hp2c => hp2c.disabled = dis)
})
const Hrs2 = document.querySelectorAll("[id^=HP2C]")
document.getElementById("TipoPatron2").addEventListener("change", function () {
const dis = this.value === "00" ;
Hrs2.forEach((hp2c, I) => {
if (dis) {
console.log("AXZC");
var new_element = document.createElement('td');
new_element.innerHTML = "<select name=\"Hrs2\" id=\"HP2C" + I + "\"><option value =\"0\">0</option><option value =\"1\">1</option><option value =\"2\">2</option><option value =\"3\">3</option><option value =\"4\">4</option><option value =\"5\">5</option><option value =\"6\">6</option><option value =\"7\">7</option><option value =\"8\">8</option><option value =\"9\">9</option><option value =\"10\">10</option><option value =\"11\">11</option><option value =\"12\">12</option><option value =\"13\">13</option><option value =\"14\">14</option><option value =\"15\">15</option><option value =\"16\">16</option><option value =\"17\">17</option><option value =\"18\">18</option><option value =\"19\">19</option><option value =\"20\">20</option><option value =\"21\">21</option><option value =\"22\">22</option><option value =\"23\">23</option>";
hp2c.replaceWith(new_element)
const HP2Cs = document.querySelectorAll("[id^=HP2C]")
document.getElementById("TipoPatron2").addEventListener("change", function () {
const dis = this.value === "10";
HP2Cs.forEach(hp2c => hp2c.disabled = dis)
})
}
})
})
</script><tr align="center">
</tbody>
</table>
</body>
</td>
The code that generates the chart is
var dailyChart2 = new FusionCharts({
id: 'p2chart',
type: 'MSStepLine',
renderAt: 'chart-container2',
width: '550',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Patrón lumínico 2",
"subcaption": "Personalizable",
"xaxisname": "Horario",
"yaxisname": "Nivel Dimado",
"showvalues": "0",
"bgalpha": "45",
"bgcolor": "A6CAF0",
"showalternatehgridcolor": "0",
"outcnvbasefont": "Verdana",
"outcnvbasefontsize": "12",
"canvasborderthickness": "2",
"canvasbordercolor": "73A8E1",
"anchorradius": "5",
"anchorsides": "15",
"anchorbgcolor": "FFFFFF",
"linethickness": "4",
"anchorborderthickness": "2",
"divlinealpha": "5",
"divlinecolor": "14C56E",
"canvasborderalpha": "40",
"outcnvbasefontcolor": "43302E",
"legendbordercolor": "93C995",
"legendborderalpha": "80",
"legendborderthickness": "2",
"bordercolor": "93C995",
"borderalpha": "50",
"useforwardsteps": "0",
"showBorder": "0"
},
"categories": [
{
"category": [
{
"label": ""
},
{
"label": "1"
},
{
"label": "2"
},
{
"label": "3"
},
{
"label": "4"
},
{
"label": "5"
},
{
"label": "6"
},
{
"label": "7"
},
{
"label": "8"
},
{
}
]
}
],
"dataset": [
{
"seriesname": "Patrón",
"anchorbordercolor": "D30000",
"color": "D30000",
"data": [
{
"value": "31"
},
{
"value": "31"
},
{
"value": document.getElementById("DP2C1").value
},
{
"value": document.getElementById("DP2C2").value
},
{
"value": document.getElementById("DP2C3").value
},
{
"value": document.getElementById("DP2C4").value
},
{
"value": document.getElementById("DP2C5").value
},
{
"value": document.getElementById("DP2C6").value
},
{
"value": document.getElementById("DP2C7").value
},
{
"value": document.getElementById("DP2C8").value
}
]
},
]
}
}).render();
What I was saying is that, for example, if box 2 is deactivated in "Cambio" then it is not represented in the graph and therefore neither are the following. That only the boxes that are activated are shown in the graph.
Image:
In the image you can see that the active fields are from 1 to 3, the others are not active so they represent a value of 0 in the graph, what I try is that they are not seen in this if they are not selected, Any ideas? I am somewhat stressed with this