Take advantage of Chartjs new update function
This commit is contained in:
		@@ -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
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user