2
Fork 0

Take advantage of Chartjs new update function

This commit is contained in:
Ruben Hartenstein (PEA4-Fe) 2021-01-18 13:39:50 +01:00
parent 80664740a8
commit dc1bc3b4a2
1 changed files with 10 additions and 9 deletions

View File

@ -48,7 +48,9 @@ export class HomeComponent implements OnInit {
this.keys = temp; // invoke update in rb-multiselect
this.initChart();
this.calcFieldSelectKeys();
// only neccesary if keys get preselected
//this.calcFieldSelectKeys();
// fetch all samples populated with according group
this.getSamples();
}
@ -77,8 +79,7 @@ export class HomeComponent implements OnInit {
}
});
}
this.myChart.destroy();
this.initChart();
const datasets = this.updateGraph();
}
// preset select
@ -99,7 +100,7 @@ export class HomeComponent implements OnInit {
}
// get data for graph based on active keys
async getData() {
updateGraph() {
let nameList: string[] = [];
let dataList: number[] = [];
@ -109,20 +110,20 @@ export class HomeComponent implements OnInit {
dataList.push(key.count);
}
})
return { names: nameList, count: dataList };
this.myChart.data.labels = nameList;
this.myChart.data.datasets[0].data = dataList;
this.myChart.update();
}
// draw graph
async initChart() {
const data = await this.getData();
this.myChart = new Chart("myChart", {
type: 'bar',
data: {
labels: data.names,
labels: [],
datasets: [{
label: 'Number of samples per group',
data: data.count,
data: [],
backgroundColor: 'rgba(0, 86, 145, 1)',
pointRadius: 4,
pointHoverRadius: 7