5

I have basic geo chart from react geocharts

<Chart
    width={calculateMapHeight()}
    height={'575px'}
    chartType="GeoChart"
    data={user.details}
    getSelection={(e) => console.log('test')}
    select={console.log('test')}
    enableRegionInteractivity={true}
    regionClick={(e) => console.log('test')}
    onClick={(e) => console.log('test')}
    mapsApiKey="apikey"
    rootProps={{ 'data-testid': '1' }}
    options={{
        backgroundColor: 'transparent',
        defaultColor: red,
        animation: {
            startup: true,
            duration: 2500,
        },
    }}
/>

but I can't work out what I need to do to call an event when a user click on a country? I've tried to log stuff from all the methods above but nothing is working

also as a side note, it only seems to show the country on hover when that country has been passed into my map. is it possible to turn it on for all countries?

Red Baron
  • 7,181
  • 10
  • 39
  • 86

2 Answers2

1

There is an example of handling select event.

With your code:

const chartEvents = [
  {
    eventName: "select",
    callback({ chartWrapper }) {
      console.log("Selected ", chartWrapper.getChart().getSelection());
    }
  }
];

<Chart
    width={calculateMapHeight()}
    height={'575px'}
    chartType="GeoChart"
    data={user.details}
    chartEvents={chartEvents}
    enableRegionInteractivity={true}
    mapsApiKey="apikey"
    rootProps={{ 'data-testid': '1' }}
    options={{
        backgroundColor: 'transparent',
        defaultColor: red,
        animation: {
            startup: true,
            duration: 2500,
        },
    }}
/>

NOTE: if you use some old version < 3.0 then chartEvents prop isn't available, instead you can use events prop.

koorosh
  • 414
  • 4
  • 7
  • I tried this but it didn’t seem to work as I wanted. I need to know the country name like when I hover rather than the column. Is it possible? – Red Baron Jun 03 '20 at 18:45
  • hi is there any way to stop the hover-over effect on the map, Can you please help me on this – Mujahidh Dec 01 '20 at 15:17
1

Define an array of chartEvents. In your case use select as eventName. Use chartEvents prop and supply the chartEvents array to it.

The callback receives the selected array using which you can figure out the index of your chart data array. Upon country selection, simply use your orignial whole data and find the selected country.

Use ready event and make an api call and fetch all countries and put them in a state and use it as data to chart. This way, you can dynamically have all countries are populated in the chart

Working demo with sample data - codesandbox

const options = {
  title: "Population of Largest U.S. Cities",
  chartArea: { width: "30%" },
  hAxis: {
    title: "Total Population",
    minValue: 0
  },
  vAxis: {
    title: "City"
  }
};

export default function App() {
  const [allCountries, setAllCountries] = useState([["Country"]]);
  const chartEvents = [
    {
      eventName: "select",
      callback({ chartWrapper }) {
        const selectedId = chartWrapper.getChart().getSelection();
        if (selectedId.length) {
          // console.log("Selected Country", data[selectedId[0].row + 1]);
          console.log("Selected Country", allCountries[selectedId[0].row + 1]);
        } else {
          console.log("No Country to show ");
        }
      }
    },
    {
      eventName: "ready",
      callback: ({ chartWrapper, google }) => {
        fetch("https://restcountries.eu/rest/v2/all").then(res =>
          res.json().then(res => {
            const allCountries = res.map(c => [c.name]);
            console.log("allCountries", allCountries);
            setAllCountries(prev => [...prev, ...allCountries]);
          })
        );
      }
    }
  ];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Chart
        // width={calculateMapHeight()}
        height={"575px"}
        width={"575px"}
        chartType="GeoChart"
        // data={user.details}
        chartEvents={chartEvents}
        // data={data}
        data={allCountries}
        getSelection={e => console.log("test")}
        // select={() => console.log("test")}
        enableRegionInteractivity={true}
        regionClick={e => console.log("test")}
        onClick={e => console.log("test")}
        mapsApiKey="apikey"
        rootProps={{ "data-testid": "1" }}
        options={{
          backgroundColor: "transparent",
          defaultColor: "red",
          animation: {
            startup: true,
            duration: 2500
          }
        }}
      />
    </div>
  );
}
gdh
  • 13,114
  • 2
  • 16
  • 28
  • hey thanks for this answer. I have seen this before somewhere the problem is I need EVERY country in the world to be clickable. does this mean I need to add ALL countries to my array of data to do this? seems overkill when the geo map could make it so simple :( – Red Baron Jun 04 '20 at 05:56
  • hi - you can use `ready` event and make an api call and fetch all countries and put them in state and use it as data to chart. This way, you can dynamically have all countries populated in the chart. I have used a [public free api](https://restcountries.eu/) ... feel free to use any other api .. There seems to be no straight option in react-google-charts to simply turn on and show all countries.... i have updated my answer as well as codesandbox (use same link - just refresh the page) – gdh Jun 04 '20 at 12:54
  • fantastic. will look at this tonight and get back to you but will probs mark it as correct :) – Red Baron Jun 04 '20 at 12:57
  • ok all good, works for me! will accept answer. upvote the question if you get a chance too as it helps me out. thanks mate! – Red Baron Jun 04 '20 at 14:40
  • 1
    yes ... your question indeed deserves an upvote ... learnt something new today with your question..thanks. – gdh Jun 04 '20 at 14:41
  • hi is there any way to stop the hover-over effect on the map, Can you please help me on this – Mujahidh Dec 01 '20 at 15:17