I want to add to my chart setTimeout function to updated data. Have code listed below but console is saying Uncaught TypeError: Cannot read property 'data' of undefined" how to acces data array? and put my mew values? error is logging at the end of this code. in var ChartLine. Or maybe if you have any other idea how to update dynamically data please share your answer
var ctx = document.getElementById('chart').getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
datasets: [{
label: "Data",
borderColor: gradientStroke,
pointBorderColor: gradientStroke,
pointBackgroundColor: gradientStroke,
pointHoverBackgroundColor: gradientStroke,
pointHoverBorderColor: gradientStroke,
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: true,
backgroundColor: gradientFill,
borderWidth: 2,
data: [50, 80, 130, 65, 100, 66, 86],
}]
},
options: {
legend: {
position: "top"
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(255,255,255,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}
}],
xAxes: [{
gridLines: {
zeroLineColor: "rgba(255,255,255,0.5)"
},
ticks: {
padding: 20,
fontColor: "rgba(255,255,255,0.5)",
fontStyle: "bold"
}
}]
}
}
});
setTimeout(function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push([45, 45, 45, 15, 3]);
});
chart.update();
}, 2000);
thanks you for any help
I want to add to my chart setTimeout function to updated data. Have code listed below but console is saying Uncaught TypeError: Cannot read property 'data' of undefined" how to acces data array? and put my mew values? error is logging at the end of this code. in var ChartLine. Or maybe if you have any other idea how to update dynamically data please share your answer
var ctx = document.getElementById('chart').getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
datasets: [{
label: "Data",
borderColor: gradientStroke,
pointBorderColor: gradientStroke,
pointBackgroundColor: gradientStroke,
pointHoverBackgroundColor: gradientStroke,
pointHoverBorderColor: gradientStroke,
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: true,
backgroundColor: gradientFill,
borderWidth: 2,
data: [50, 80, 130, 65, 100, 66, 86],
}]
},
options: {
legend: {
position: "top"
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(255,255,255,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}
}],
xAxes: [{
gridLines: {
zeroLineColor: "rgba(255,255,255,0.5)"
},
ticks: {
padding: 20,
fontColor: "rgba(255,255,255,0.5)",
fontStyle: "bold"
}
}]
}
}
});
setTimeout(function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push([45, 45, 45, 15, 3]);
});
chart.update();
}, 2000);
thanks you for any help
Share Improve this question edited Sep 6, 2017 at 13:17 Damien asked Sep 6, 2017 at 12:42 DamienDamien 2462 gold badges7 silver badges16 bronze badges1 Answer
Reset to default 7You should be updating the chart data as follows :
setTimeout(function() {
addData(myChart, [45, 50, 30, 34, 61, 53, 42], 0);
}, 2000);
function addData(chart, data, datasetIndex) {
chart.data.datasets[datasetIndex].data = data;
chart.update();
}
Working Example
var gradientStroke = 'rgba(0, 119, 220, 0.6)',
gradientFill = 'rgba(0, 119, 220, 0.4)';
var ctx = document.getElementById('chart').getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
datasets: [{
label: "Data",
borderColor: gradientStroke,
pointBorderColor: gradientStroke,
pointBackgroundColor: gradientStroke,
pointHoverBackgroundColor: gradientStroke,
pointHoverBorderColor: gradientStroke,
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: true,
backgroundColor: gradientFill,
borderWidth: 2,
data: [50, 80, 130, 65, 100, 66, 86],
}]
},
options: {
responsive: false,
legend: {
position: "top"
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(255,255,255,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}
}],
xAxes: [{
gridLines: {
zeroLineColor: "rgba(255,255,255,0.5)"
},
ticks: {
padding: 20,
fontColor: "rgba(255,255,255,0.5)",
fontStyle: "bold"
}
}]
}
}
});
setTimeout(function() {
addData(myChart, [45, 50, 30, 34, 61, 53, 42], 0);
}, 2000);
function addData(chart, data, datasetIndex) {
chart.data.datasets[datasetIndex].data = data;
chart.update();
}* { background: #111 }<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chart" width="350" height="200"></canvas>