Hello,
I installed ng2-google-charts.
I have In html
<google-chart [data]="pieChartData"></google-chart>
and in ts
public pieChartData: any = {
chartType: 'PieChart',
dataTable: [
['tic', 'tac'],
['a', 1],
['a', 1],
['a', 1],
['a', 1],
['a', 1]
],
options: {
//title: '',
legend: 'none',
width: 100,
height: 100,
backgroundColor: 'transparent',
pieStartAngle: 0,
is3D: false,
pieHole: 0,
sliceVisibilityThreshold: 0,
pieSliceText: 'label',
slices: {
0: { offset: 0.0, color: 'DarkGreen' },//transparent macht unsictbar
1: { offset: 0.0, color: 'DarkGreen' },
2: { offset: 0.0, color: 'DarkGreen' },
3: { offset: 0.0, color: 'transparent' },
4: { offset: 0.0, color: 'transparent' },
}
}
}
This works and render a pie, with 5 equal sized pie slices. 3 are darkgreen, 2 are something like semihidden. Looks good and I like it. On the demo page there is a example where the size of the pie silces (colums, are changing) but no the amount of columns.
Here I am struggling with my poor javascript knowledge.
I want equal sized pie slices, but with a @Input changing the amount of pie slices. For example Input = 3 then, 3 slices with 1/3 1/3 1/3 size.
Second an @Input with maybe 2, that makes the first 2 silces green, the rest transparent.
I played around with the example code from demopage
public changeData():void {
// forces a reference update (otherwise angular won't detect the change
this.columnChartData = Object.create(this.columnChartData);
for (let i = 1; i < 7; i++) {
this.columnChartData.dataTable[i][1] = Math.round(
Math.random() * 1000);
this.columnChartData.dataTable[i][2] = Math.round(
Math.random() * 1000);
}
}
but I didn’t found a working way, changeing the columns (in his example code 7).
Thanks in advance and best regards, anna-liebt.