I need to develop a new function that will allow me to input data to update my line chart. Here is the current state of my function:
function updateChart(label, xp1, yp1, xp2, yp2) {
chart.data.labels.push(label);
chart.data.datasets.data.push({x: xp1, y: yp1}, {x: xp2, y: yp2});
chart.update();
}
label is always a string
xp1, xp2, yp1, yp2 are decimal values
When I try to run the function in a loop, it doesn't update the chart and remains blank.
I referred to the Chart.js documentation but couldn't find a solution to my problem, and noticed some errors in their sample code.
This is the initial code for my chart:
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [''],
datasets: [{}]
},
options: {}
});
Here is the expected code after adding data:
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['a', 'b', 'c'],
datasets: [{
label: 'a',
fill: false,
data: [
{
x: 0,
y: 9
}, {
x: 3,
y: 9
}
]
},
{
label: 'a',
fill: false,
data: [
{
x: 3,
y: 7
}, {
x: 5,
y: 7
}
]
},
{
label: 'c',
fill: false,
data: [
{
x: 5,
y: 5
}, {
x: 10,
y: 5
}
]
}]
},
options: {}
});