angular2-google-chart icon indicating copy to clipboard operation
angular2-google-chart copied to clipboard

How to add click event in geochart?

Open gvorster opened this issue 8 years ago • 1 comments

Using Angular 4.3.1 I can show province map of Netherlands using:

  public map_ChartData = [
    ['Provinces',   'Popularity'],
         [{ v: 'NL-DR', f: 'Drenthe' },  5],
         [{ v: 'NL-NH', f: 'Noord-Holland' },  1000],
         [{ v: 'NL-UT', f: 'Utrecht' },  800],
         [{ v: 'NL-FL', f: 'Flevoland' },  200],
         [{ v: 'NL-FR', f: 'Friesland' },  350],
         [{ v: 'NL-GE', f: 'Gelderland' },  450],
         [{ v: 'NL-GR', f: 'Groningen' },  788],
         [{ v: 'NL-LI', f: 'Limburg' },  244],
         [{ v: 'NL-NB', f: 'Noord-Brabant' },  750],
         [{ v: 'NL-OV', f: 'Overijssel' },  620],
         [{ v: 'NL-ZE', f: 'Zeeland' },  50],
         [{ v: 'NL-ZH', f: 'Zuid-Holland' },  890]
      ]; 

  public map_ChartOptions = {
    region: 'NL', resolution: 'provinces',
    enableRegionInteractivity: true,
    colorAxis: {
      minValue: 0,
      maxValue: 1000,      
      colors: ['grey', 'yellow', 'orange', 'blue', 'green']
    }};

  itemSelected(evt) {
    console.log(evt);
  }

<div id="map_chart" 
(itemSelect)="itemSelected($event)" 
(itemDeselect)="itemDeselected($event)" 
[chartData]="map_ChartData"
[chartOptions]="map_ChartOptions" 
chartType="GeoChart" 
GoogleChart></div>

When I click on a province I get an error in Chrome console:

core.es5.js:1020 ERROR Error: Invalid column index null. Should be an integer in the range [0-1].
    at gvjs_en (jsapi_compiled_default_module.js:75)
    at gvjs_P.gvjs_.getValue (jsapi_compiled_default_module.js:89)
    at angular2-google-chart.directive.ts:52
    at gvjs_Zn.<anonymous> (jsapi_compiled_default_module.js:179)
    at gvjs__n (jsapi_compiled_default_module.js:129)
    at gvjs_Zn.gvjs_.dispatchEvent (jsapi_compiled_default_module.js:127)
    at gvjs_U (jsapi_compiled_default_module.js:178)
    at jsapi_compiled_default_module.js:252
    at gvjs_Zn.<anonymous> (jsapi_compiled_default_module.js:179)
    at gvjs__n (jsapi_compiled_default_module.js:129)

gvorster avatar Jul 31 '17 09:07 gvorster

I guess this is a bug. I had the same issue.

Need to understand how does the selected item chooses column. Seems like it has to be supplied, but where. The author of the library has not included it in the examples.

@vimalavinisha any thoughts on this?

officialdharam avatar Aug 24 '17 10:08 officialdharam