Multiple Dynamic Line Charts With Chart.js | Js And Html

I'd like to create an html page using Javascript (in particular using chart.js library) and to display dynamic line charts. I'd also like to add a new chart every time the 'Add Cha

Solution 1:

You can create canvas after addChart event call, I just update your newChart() function and run in my computer and it's work what you want. Example:

function newChart(){
    document.getElementById('test').insertAdjacentHTML("afterend","<div><canvas id='canvas"+cont+"'></canvas></div>");
    var can_id="canvas"+cont;
    var ctx2 = document.getElementById(can_id).getContext('2d');
    window.can_id = new Chart(ctx2, config);

    window.can_id.update();
    //alert(config.options.id);
    configSet();
    //alert(config.options.id);
    alert(cont);
    return cont = cont +1;
}

Edit: I edit for use 'table'. In your html I add only 'table' and in JS I add all 'tr' when call this function. Link:

HTML: <table id="test"> </table>

JS:

function newChart(){
    document.getElementById('test').insertAdjacentHTML("afterend","<tr><td><canvas id='canvas"+cont+"'></canvas></td></tr>");
    var can_id="canvas"+cont;
    var ctx2 = document.getElementById(can_id).getContext('2d');
    window.can_id = new Chart(ctx2, config);

    window.can_id.update();
    //alert(config.options.id);
    configSet();
    //alert(config.options.id);
    alert(cont);
    return cont = cont +1;
}