2

I have a few google-donutpie charts on my page which initialized dynamically. I can with help of "on-select" to know whict slice was clicked.

But I need to make selection of slice from code. How to do it?

PS: I don't use google.visualization and want skip using this way

package.json : "angular-google-charts": "^0.1.6"

HTML

<google-chart
                  id="chart_{{ i }}"
                  on-select="company.selectChartHandler($event)"
                  (click)="($event.target)"
                  [title]="company.chart.title"
                  [type]="company.chart.type"
                  [data]="company.chart.data"
                  [columnNames]="company.chart.columnNames"
                  [options]="company.chart.options"
                  [width]="company.chart.width"
                  [height]="company.chart.height"
                >
  </google-chart>

TypeScript

export class CompanyRecord {
  chart;

selectChartHandler(selectedItem) {
    let selectedItemIndex;
    if (selectedItem[0]) {
      selectedItemIndex = selectedItem[0].row;
    }
  }

private _configureChart() {
    this.isShowChart = true;
    this.colors = this._googleChartsService.getColorPalette();
    const chartsSlicesColorPalette = this._googleChartsService.getColoredSlicesConfig(this.colors);
    this.chart = new Object({
      title: '',
       type: 'PieChart',
       data: this.PercentageData,
       columnNames: ['Data1', 'Value'],
       options: {
        pieHole: 0.6,
        tooltip: { trigger: 'none' },
        legend: 'none',
        slices: chartsSlicesColorPalette,
        pieSliceText: 'none',
        chartArea: {
           width: '100%',
           height: '90%'
         }
       },
        width: 300,
        height: 300
      });
   }
}
Zelena
  • 63
  • 8

1 Answers1

0

to make a selection on the chart, you will need a reference to the chart object.
which you can get from the chart wrapper interface.

this.chart.getChart()

then you can use the setSelection method.

which accepts and array of objects.
for a pie chart, each object should have a row property,
with the row index to select.

// select first row
this.chart.getChart().setSelection([{row: 0}]);

if you want the chart to have a selection when initially drawn,
you need to wait for the 'ready' event to file,
before making the selection.

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • hope this helps, although not angular, here is an [example](https://stackoverflow.com/a/56740924/5090771)... – WhiteHat Jul 22 '19 at 14:03