There is an undefined appearing in the chart created by Chart.js v3.7.0 and v2.9.4 as well ass seen in the figure.
and the function generating the graph, div and canvas is (JS) as follows:
function arrangeForGraph(counts){
for(var i =0;i<counts.length;i++){
var divname = document.createElement("div");
divname.id="div"+i;
divname.class="chartAreaWrapper;chart";
var dataname = document.createElement("data");
var _canvas = document.createElement("canvas");
_canvas.id="canvas"+i;
_canvas.height="400";
_canvas.width="600";
_label_list = counts[i][4];
dataname.id=_label_list;
dataname.value= counts[i][0];
dataname.style="display:none;"
dataname.title="countchart";
dataname.text="countsch";
var ctx = _canvas.getContext("2d");
ctx.imageSmoothingEnabled = true;
Chart.plugins.register({id: 'pan', id:'zoom'});
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: _label_list,
datasets: [
{
label: "Upper Bound",
data: counts[i][3],
backgroundColor: ['rgba(150, 150, 150, 0.50)'],
borderColor: ['rgba(150, 150, 150, 0.50)'],
borderWidth: 0.5,
pointRadius: 1,
fill: 1,
},
{
label: "Lower Bound",
data: counts[i][1],
backgroundColor: ['rgba(150, 150, 150, 0.50)'],
borderColor: ['rgba(150, 150, 150, 0.50)'],
borderWidth: 0.5,
pointRadius: 1,
fill: false,
},
{
label: "Value",
order: 1,
data: counts[i][0],
backgroundColor: 'rgba(75, 192, 192, 0.85)',
borderColor: 'rgba(75, 192, 192, 0.85)',
borderWidth: 2,
pointRadius: 3,
fill: false,
},
{
label: "Prediction",
order: 1,
data: counts[i][2],
backgroundColor: 'rgba(100, 100, 100, 0.85)',
borderColor: 'rgba(100, 100, 100, 0.85)',
borderWidth: 2,
pointRadius: 3,
fill: false,
},
]
},
options: {
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
drag: true,
speed: 0.1,
threshold: 2,
mode: 'xy'
},
title:{
text: "Behaviours",
display: true,
fontSize: 15
},
legend: {
display: false},
elements: {center:{}},
responsive: true,
scales: {
xAxes: [{scaleLabel: {display: true, labelString: 'Date & Time'}}],
yAxes: [{scaleLabel: {display: true, labelString: 'Parameter Values'},ticks: {beginAtZero: true}}]
}
},
});console.log(myChart);
document.getElementById("main2").appendChild(divname);
document.getElementById(divname.id).appendChild(_canvas);
document.getElementById(_canvas.id).appendChild(dataname);
};
}
Does anybody point my mistake so I can remove that annoying undefined watermark?
The graph is generated with the array coming from serverside, and if more than 1 array is found in counts then counts.length amounts o graphs are generated without any erorrs except that undefined mark on each graph.
Pan and zoom is not working as well but I think I have to ask another question for that.
Thanks in advance