Generate an indefinite number of charts as images (chart.js)

I would like to generate several “line charts” as an image file. For this purpose, data is requested from a database. This data is transferred to the function for chart generation separately for each line chart. At the “console.log” output at the beginning of the function, the transferred data is correctly displayed. If I query the same output of the data under “animation: {onComplete: function () {console.log () …}}”, then I only get the data set last queried from the database returned.

In addition, the same string is always output for the image file (regardless of which data is transferred to the function).

var imgur = new Image();
var chart_cp=document.getElementById("chart");
var chart_ctxp=chart_cp.getContext("2d");
var width=400;
var height=150;

function create_trend_vsr(messstelle, date, ergeb, akl, wl, chart_cp, chart_ctxp, width, height){   
    var imagedataurltemp;
//output given data 
    console.log("Messstelle");
    console.log(messstelle);    //returns korrect data
    console.log("Datum");
    console.log(date);          //returns korrect data
    console.log("Ergebnis");
    console.log(ergeb);         //returns korrect data
    console.log("AKL");
    console.log(akl);           //returns korrect data
    console.log("WL");
    console.log(wl);            //returns korrect data
//create line-chart 
    var LineChart = new Chart(chart_cp, {
    type: 'line',   
            data: {
                    labels: date,
                datasets: [{
                    label: 'AKL',
                    data: akl,
                        borderColor: 'red',
                        borderWidth: 3,
                        lineTension: 0,
                        pointRadius:0,
                        fill: false
                    },{
                    label: 'WL',
                    data: wl,
                        borderColor: 'blue',
                        borderWidth: 3,
                        lineTension: 0,
                        pointRadius:0,
                        fill: false
                },{
                    label: 'Analysis',
                    data: ergeb,
                        borderColor: 'green',
                        borderWidth: 1,
                        lineTension: 0,
                        pointRadius:2,
                }]
            },
    options: {      
        animation: {
                      onComplete: function() {
                            chart_cp.width=width;   //set width of the Canvas 
                            chart_cp.height=height; //set width of the Canvas 
                            imagedataurltemp= chart_cp.toDataURL("image/png");
                            imgur.src=LineChart.toBase64Image();
                            imageliste.push(imgur.src);
                            
                                    console.log("Messstelle");
                                    console.log(messstelle);    //returns only the last given data
                                    console.log("Datum");
                                    console.log(date);          //returns only the last given data
                                    console.log("Ergebnis");
                                    console.log(ergeb);         //returns only the last given data
                                    console.log("AKL");
                                    console.log(akl);           //returns only the last given data
                                    console.log("WL");
                                    console.log(wl);            //returns only the last given data
                                    console.log(imageliste.length);     //returns the correct amount of charts to be created
                                    console.log(imgur.src);             //always the same output ---> "data:image/png;base64,iVBORw0K....."
                        }
                    }           
            }
    });
}

Where is my mistake? thx

Answer

I solved the problem by creating a separate canvas object for each chart.

Before the function for creating a chart is called, a new canvas object is created.

document.getElementById("chartcontent").innerHTML += "<canvas id='"+messstelle+"' height='150vw' width='400vw'></canvas>";

“chartcontent” in HTML:

<p id="chartcontent"></p>

Advertisement

Answer