var ctx = document.getElementById("canvas");
var Param1Data = {
label: "Param1",
yAxisID: 'A',
data: chartParam1Value,
lineTension: 0.5,
fill: false,
borderColor: 'red'
};
var Param2Data = {
label: "Param2",
yAxisID: 'B',
data: chartParam2Value,
lineTension: 0.5,
fill: false,
borderColor: 'blue'
};
var MainDataSet = {
labels: chartDataValue,
datasets: [Param1Data, Param2Data]
};
var chartOptions = {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'black'
}
},
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
ticks: {
max: 10000,
min: 0
}
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 10000,
min: 0
}
}]
}
};
chart = new Chart(ctx, { type: 'line', data: MainDataSet,options: chartOptions});
// chart = new Chart(ctx, config); // call for canvas
}
When I try to update those 2 data lines using this function, It don't update lines.
addData()
{
chart.data.labels.push(chartDataValue);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(chartParam1Value);
});
chart.data.datasets.forEach((dataset) => {
dataset.data.push(chartParam2Value);
});
chart.update(); //Updating the chart
}
setInterval(addData, 3000); // calling update method for new datapoint
I have 2 dataset for 2 lines in CharJS graphs, First data insert draw is perfect in graph but when I try to update the datasets, Its not updating the data through addData() function. can someone show how to update the 2 lines through update function in CharJS graph?
According to the documentation ( https://www.chartjs.org/docs/latest/developers/updates.html#adding-or-removing-data ) after you add your data to the array you will have to call the update method on your chart to update it like this:
updateChart = (dataset) =>{
chart.data.datasets.forEach((dataset) => {
dataset.data.push(chartParam1Value);
});
chart.data.datasets.forEach((dataset) => {
dataset.data.push(chartParam2Value);
});
chart.update()
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.