generate multiple charts via loop for chart 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)
}

This is not a generic issue, how to generate multiple charts in chart.js using foreach. — Dgloria
– Dgloria, Commented Jun 14, 2023 at 11:41

savageGoat · Accepted Answer · 2022-01-27 10:29:42Z

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

answered Jan 27, 2022 at 10:29

savageGoat

1,5461 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gaurav shinde · Accepted Answer · 2022-01-27 10:30:53Z

0

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.

answered Jan 27, 2022 at 10:30

gaurav shinde

316 bronze badges

Collectives™ on Stack Overflow

generate multiple charts via loop for chart js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related