3👍
✅
Just like Edwin Chua mentioned in one of his comments, the problem was that I wasn’t including a new label for each dataset, for this reason my chart was updated, but didn’t have a ‘place’ to show the information.
Final code for the function, if anyone needs it for future reference:
function updateChart1(data, sigla){
if(data != null){
var medias = [];
var meses = [];
jQuery.each(JSON.parse(data), function(index, val){
medias.push((val.soma_duracao/val.count_prot)/3600);
if(jQuery.inArray(val.mes, meses) == -1){
meses.push(getMes(val.mes));
}
});
var dtst = {
label: sigla,
data: medias,
backgroundColor: (pallete[0].rgba),
borderColor: (pallete[0].rgba.replace('0.7', '1')),
borderWidth: 2
}
chart1.data.labels = meses;
chart1.data.datasets.push(dtst);
if(chart1.data.datasets.length == 1){
chart1.options.title.text = "foo bar";
chart1.options.title.display = true;
chart1.options.legend = true;
chart1.options.tooltips.callbacks.label = function(tooltipItems, data) {
return tooltipItems.yLabel.toFixed(2) + " hours";
}
}
}
chart1.update();
}
3👍
I need the second update of the chart after printing (I use another background colors in black and white print). Ordinary .update method didn’t help update chart. I used setTimeout with 0.
setTimeout(function(){
myChart.data.datasets[0].backgroundColor = ['#f2d13a', '#c9deeb', '#cacaca'];
myChart.update();
}, 0);
2👍
@urukh Turns out I made a mistake in my answer. You do need to add borderColor and backgroundColor for bar charts. Did a small working example of adding data to a chart (see index.html far below).
The necessary script for adding data into a chart (setInterval is a timer. Ignore in favour of your code logic):
<script>
var i = 0;
setInterval(function()
{
console.log(myChart.data); // use this to examine the chart object for yourself
//directly pushing into the arrays
myChart.data.datasets[0].data.push(21);
myChart.data.datasets[0].backgroundColor.push('rgba(255,0,0,0.2)');
myChart.data.datasets[0].borderColor.push('rgba(255,0,0,1)');
myChart.data.datasets[1].data.push(21);
myChart.data.datasets[1].backgroundColor.push('rgba(255,255,0,0.2)');
myChart.data.datasets[1].borderColor.push('rgba(255,255,0,1)');
myChart.data.labels.push('hi' + i++);
//if chart dataset > 10, trim the array from the 1st element
if (myChart.data.datasets[0].data.length > 10)
{
myChart.data.datasets[0].data.shift();
myChart.data.datasets[1].data.shift();
myChart.data.datasets[0].backgroundColor.shift();
myChart.data.datasets[0].borderColor.shift();
myChart.data.datasets[1].backgroundColor.shift();
myChart.data.datasets[1].borderColor.shift();
myChart.data.labels.shift();
}
myChart.update();
}, 1000);
</script>
Run this page as index.html to see the chart in action.
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
<div style="width:300px;height: 300px">
<canvas id="myChart" width="100px" height="100px"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
{
label: '# of Votes 2',
data: [12, 5, 30, 5, 12, 23],
backgroundColor: [
'rgba(255, 0, 132, 0.2)',
'rgba(54, 0, 235, 0.2)',
'rgba(255, 0, 86, 0.2)',
'rgba(75, 0, 192, 0.2)',
'rgba(153, 0, 255, 0.2)',
'rgba(255, 0, 64, 0.2)'
],
borderColor: [
'rgba(255,0,132,1)',
'rgba(54, 0, 235, 1)',
'rgba(255, 0, 86, 1)',
'rgba(75, 0, 192, 1)',
'rgba(153, 0, 255, 1)',
'rgba(255, 0, 64, 1)'
],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
<script>
var i = 0;
setInterval(function()
{
console.log(myChart.data);
myChart.data.datasets[0].data.push(21);
myChart.data.datasets[0].backgroundColor.push('rgba(255,0,0,0.2)');
myChart.data.datasets[0].borderColor.push('rgba(255,0,0,1)');
myChart.data.datasets[1].data.push(21);
myChart.data.datasets[1].backgroundColor.push('rgba(255,255,0,0.2)');
myChart.data.datasets[1].borderColor.push('rgba(255,255,0,1)');
myChart.data.labels.push('hi' + i++);
if (myChart.data.datasets[0].data.length > 10)
{
myChart.data.datasets[0].data.shift();
myChart.data.datasets[1].data.shift();
myChart.data.datasets[0].backgroundColor.shift();
myChart.data.datasets[0].borderColor.shift();
myChart.data.datasets[1].backgroundColor.shift();
myChart.data.datasets[1].borderColor.shift();
myChart.data.labels.shift();
}
myChart.update();
}, 1000);
</script>
Source:stackexchange.com