How to insert array data into chart of ng2-google-chart in angular 7

Question

I use an angular development environment 7 And I'm trying to run a pie chart of ng2 google chart Via API - and angular service.

Attached is a picture of my TS file

Question: How do I enter the values ​​that come from my array to the DataTable of the chart?

Thanks

constructor(private _getIncomeService: getIncomeService) { }
    _GetAveragesModel: GetAveragesModel[];

    ngOnInit() {
        this.fnGetAverages();
    }
    fnGetAverages() {
        this._getIncomeService.GetAverages(279).subscribe(x => {
            this._GetAveragesModel = x;
        });
    }       
    public pieChart = {
        chartType: 'PieChart',
        dataTable: [
            ['Task', 'Hours per Day'],
            ['ss', 11],
            ['Eat', 2],
            ['Commute', 2],
            ['Watch TV', 2],
            ['Sleep', 7]
        ],
        options: {
            title: 'Tasks',
            slices: {
                0: { offset: 0.3 },
                1: { offset: 0.2 },
            },
            width: '100%', height: '100%',
            is3D: true,
            chartArea: {left: "3%",top: "3%",height: "94%",width: "94%"}
        }
    };
```[enter image description here][1]


  [1]: https://i.sstatic.net/1RMwk.png

Answer 1

Don't use ng2-google-chart, instead use angular-google-charts (npm i angular-google-charts).

this is the HTML code You have a tag like [data] and Value "dataichange" => this value you can change the name in ts file

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="dataichange"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

this is the .ts file with data hardcoded

title = 'Browser market shares at a specific website, 2014';
   type = 'PieChart';
   dataichange = [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7] 
   ];
   columnNames = ['Browser', 'Percentage'];
   options = {    
   };
   width = 550;
   height = 400;

To solve your issue - replace the data with your own New Array.

You need a new array because the array that come from service is too big.

So you need to create a new array just for the columns to need for a specific chart.

To do that I used "map" to get the array columns and "push" to create them in the new array with the order I set.

Datachart: any[];
	fnGetAverages() {
		this._getIncomeService.GetAverages(279).subscribe(Res => {
			this._GetAveragesModel = Res;
			Res.map(item => {
				this.Datachart.push([item.OrderTypeName, item.AveragePerDiner]);
			})
		});
	}	
  

and now replace in HTML the [data]="Datachart" the DataChart is your filtered new array

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="Datachart" // Here I changed to the new array name "Datachart"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

Answer 2

Map the dataTable property to _GetAveragesModel and use pieChart as getter. If it changes the value of the pie chart property will also change.

get pieChart():any {
    return {
      chartType: 'PieChart',
      dataTable: this.__GetAveragesModel.map(e => {
  if (e.hasOwnProperty('OrderTypeName') && e.hasOwnProperty('AveragePerDinner')) {
    return [e.OrderTypeName,e.AveragePerDinner]
  }
      }),
      options: {
            title: 'Tasks',
            slices: {
                0: { offset: 0.3 },
                1: { offset: 0.2 },
            },
            width: '100%', height: '100%',
            is3D: true,
            chartArea: {left: "3%",top: "3%",height: "94%",width: "94%"}
        }
    }
}