vimalavinisha / angular2-google-chart

Angular 2 google chart
MIT License
59 stars 45 forks source link

How to add click event in geochart? #55

Open gvorster opened 6 years ago

gvorster commented 6 years ago

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)
officialdharam commented 6 years ago

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?