Reputation: 67
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
Upvotes: 2
Views: 2000
Reputation: 76
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>
Upvotes: 1
Reputation: 269
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%"}
}
}
}
Upvotes: 1