How to get data event click in angular google chart-angular 2+

Question

I used the google charts in my angular project dashboard.

By reading the document: https://github.com/FERNman/angular-google-charts , I used the below code for getting the event(which should contain the elements of the chart which I selected)

As per the document, the select event is emitted when an element in the chart gets selected.

<google-chart (select)="onSelect($event)"></google-chart>

I used the same in my code.

Html:`

      <google-chart #chart [title]="Bartitle" [type]="Bartype" [data]="Bardata" [columnNames]="BarcolumnNames"
        [options]="Baroptions" [width]="Barwidth" [height]="Barheight" 
        (select)="onSelect($event)">
      </google-chart>`

Component.Ts

this.Bartitle = 'Current and Target';
this.Bartype = 'BarChart';
this.Bardata = [
  ["2012", 900, 390],
  ["2013", 1000, 400],
  ["2014", 1170, 440],
  ["2015", 1250, 480],
  ["2016", 1530, 540]
];
this.BarcolumnNames = ["Year", "Current", "Target"];
this.Baroptions = {
  hAxis: {
    title: 'Maturity'
  },
  vAxis: {
    title: 'Month'
  },
};
this.Barwidth = 200;
this.Barheight = 200;

onSelect(event) {
   console.log(event);
}

But I dont get the values which I selected..

I need the values of maturity and the year... How i get that?? Did I made any changes??

can anybody give me an idea?? – Angel Reji Apr 13 '20 at 07:26 — Angel Reji, Apr 13 '20 at 07:26

Sayooj V R · Accepted Answer · 2020-04-14T06:25:41.213

1

Select The select event is emitted when an element in the chart gets selected.

<google-chart (select)="onSelect($event)"></google-chart>

The event of type ChartSelectionChangedEvent containing an array of selected values.

in component

EDIT : Based on comments

     onSelect(event) {
           const { row, column } = event[0];
           const year = this.Bardata[row][0];
           let selectedItem;
           if (column === 1) {
                selectedItem = "current";
           }
           if (column === 2) {
                selectedItem = "target";
           }
           console.log("year", year, "SelectedItem" ,selectedItem, this.Bardata[row][column]);
     }

for more info read the documentation : https://github.com/FERNman/angular-google-charts

edited Apr 14 '20 at 06:25

answered Apr 14 '20 at 05:00

Sayooj V R

2,255
2
11
23

thank you @sayooj... Again facing some problem.. I edited and again posted the issue.. Can you help me?? – Angel Reji Apr 14 '20 at 05:39
1

gone through the documentation again. But didn't find any use ful api for your requirement.for the time being you can use this simple hack. it is working.onSelect(event) { const { row, column } = event[0]; const year = this.Bardata[row][0] console.log("year", year, this.Bardata[row][column]); } – Sayooj V R Apr 14 '20 at 06:01
If you see the screenshot of my chart, I am using two datas such as current and target. Red bar showing "current" and blue bar showing "target". I need that data is that current or target... Is there any way for that?? – Angel Reji Apr 14 '20 at 06:15
yes we can. if column = 1 it is current value and if column =2 it is target value. – Sayooj V R Apr 14 '20 at 06:21

How to get data event click in angular google chart-angular 2+

1 Answers1