1

i want to get the value for the node which is selected by the user in graph. I have tried with this solution but not getting the values.

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


<Chart chartType="TreeMap" data={data} graphID="TreeMap" options={options} width="100%" height="400px" chartEvents={ChartEvents} />

codesandbox code

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
Ashish Kumbhare
  • 23
  • 3

1 Answers1

0

you need to use the 'ready' event on the chartwrapper,
then assign the 'select' event on the chart,
as follows...

const ChartEvents = [
  {
    eventName: "ready",
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();
      const data = chartWrapper.getDataTable();
      google.visualization.events.addListener(chart, "select", function () {
        var selection = chart.getSelection();
        console.log("Selected ", selection);
        if (selection.length > 0) {
          console.log("Market trade volume (size) ", data.getValue(selection[0].row, 2));
          console.log("Market increase/decrease (color) ", data.getValue(selection[0].row, 3));
        }
      });
    }    
  }
];
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • hope this helps -- [https://codesandbox.io/s/modern-shadow-t0p1t7](https://codesandbox.io/s/modern-shadow-t0p1t7) – WhiteHat May 09 '22 at 12:40
  • Hi Thankyou for the solution , checked but it is not returning the value of node in console. – Ashish Kumbhare May 09 '22 at 13:41
  • see edit above, need to use selection to pull value from the data table... – WhiteHat May 09 '22 at 18:34
  • Thankyou verymuch was stuck on this one for a while . – Ashish Kumbhare May 10 '22 at 04:49
  • Hi @Whitehat i am facing the issue while getting the value from iterated graph. On first graph rendering it is returning value but while i move toward inside graph (which in my code example is EUR" ) then the new graph doesnt return the node value. Your take on this one would be very helpful. codesandbox -[link](https://codesandbox.io/s/ecstatic-northcutt-8j22zj) – Ashish Kumbhare May 12 '22 at 05:53
  • not sure but for the tree map, the select event is fired when the user drills down, or rolls up a node. once you get to the last node, it no longer fires. – WhiteHat May 12 '22 at 13:04
  • Would you be able to suggest any alternate solution for my case actually kind of stuck on the particular issue, any suggestion would be great help. [codesandbox link] (https://codesandbox.io/s/ecstatic-northcutt-8j22zj) – Ashish Kumbhare May 13 '22 at 18:12
  • you might try one of the other [events](https://developers.google.com/chart/interactive/docs/gallery/treemap#events) for the tree map, there are more than just select event – WhiteHat May 13 '22 at 19:48
  • Yes but the requirement of my operation is to get the selected node so that i can call api with same node value ,for which i am not getting the alternative events @WhiteHat – Ashish Kumbhare May 15 '22 at 06:03