Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add click event in geochart? #55

Open
gvorster opened this issue Jul 31, 2017 · 1 comment
Open

How to add click event in geochart? #55

gvorster opened this issue Jul 31, 2017 · 1 comment

Comments

@gvorster
Copy link

gvorster commented Jul 31, 2017

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
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants