通过循环为图表js生成多个图表

Question

I am trying to only have table tag, but have js generate the entire table. So I use createElement for headers, but within tbody.innerHTML, I am string concatenating string interpolated html that contains tr including canvas inside of a td.

I am dynamically generating this and within the for loop, I try rendering a row, then have another function to create generic chart but fit to specific id of canvas. Ex: bar_1, bar_2, ... I am also using getElementById for new Chart(ctx)

So basically for each row, I want a chart in a td. The issue is, it only shows me 1 chart and it is for the last row only when it should show up for all rows. Which makes me suspect selection by getElementId, but I tried querySelectorAll() id specification, querySelector(#) as well but no luck.

----bar.js---- snippet

let body = ``;
for(var item of productList){

body+=`<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.date}</td>
<td><table>`;
for(var props of item.items){
    let currency = props.units==="USD"? "$":""; 
    body+=`<tr>
    <td>${props.item_number}) ${currency}${props.price}</td>
    </tr>`;
}
body+=`</table></td>
<td>
    <div style="border: 2px solid blue;">
    <canvas id="bar_${item.id}"></canvas>
    </div>
</td></tr>`;
tbody.innerHTML += body;

renderChart("bar_"+item.id, item.items, item.name);
body=``;
}
...
function renderChart(id,...){
let config = ... //generic chart config
new Chart(document.getElementById(id),config)
}

Answer 1

The issue is, it only shows me 1 chart and it is for the last row only when it should show up for all rows.

body=''; line 23

This line removes all charts created and searched by the renderChart function. You might want to either remove this line, otherwise the DOMElement you are trying to access will be removed by the time it's accessed, or use const element = document.createElement('DIV') and append your element to the body and then pass the reference to that object to renderChart(element) to avoid ID generation

Answer 2

I figured out issue was with async events I didn't know about were happening. Only time chart js won't let you create multiple charts is on the same canvas or if it is previously occupied until you destroy it.

let id = "bar_"+item.id;
setTimeout(()=>{renderChart(id, item.items, item.name);},100)

I did something like this within the above snippet. Issue was the extracting of string concat of id was slower than getElementById, which made getElementById get same one. However I was still getting diff canvas elements on console.log testing, so I don't 100% understand how solving one issue solved issue of the actual new Chart being created for each unique canvas.