2

and have been using Google Charts to visualize my data. I have tried to search for the answer to this question but couldn't not find anyone having the same problem as mine, or maybe my problem is really basic. Appreciate if someone can give me a hand.

I built a sankey diagram by following the steps listed in Google Charts - Sankey Diagram. Here is my chart: http://kuangkeng.github.io/keng-data-journalism/procurement%20project/sankey/index.html

However I would like to add tooltip to each line/path/link so when users mouseover, they can see the value and other details of the line.

According to Google Charts (the link above), I can fire a mouseover event using 'onmouseover' and 'onmouseout', but Google Charts does not show how to do it for Sankey diagram.

I then came over an example of using 'onmouseover' and 'onmouseout' in a Google Bar Chart: https://developers.google.com/chart/interactive/docs/examples#mouseovertooltip

So I copied the code, modified and pasted into my code.

google.visualization.events.addListener(chart, 'onmouseover', barMouseOver);
google.visualization.events.addListener(chart, 'onmouseout', barMouseOut);

function barMouseOver(e) {
chart.setSelection([e]);
}

function barMouseOut(e) {
chart.setSelection([{'row': null, 'column': null}]);
}

When I mouseover, I got the error message "undefined is not a function". You can see the error message appears at the top of the chart when you mouseover the lines.

I tried to use another alternative showed by Google Charts documentation by adding a another column to my data and set its role as 'tooltip' but it didn't work for my chart because Google Sankey Diagram can only accept 3 columns.

Appreciate if someone can have a look or refer me to any solution available. Thanks.

user3591660
  • 33
  • 1
  • 6
  • 2
    The mouseover events don't pass any useful information, despite the documentation saying otherwise. The event object contains a single property (`Fb`) which refers to the row in the DataTable if and only if the user hovers over a link between two nodes. If the user hovers over a node, then it refers to something I haven't been able to determine, but it isn't the node index, the first row in the DataTable for a given node, or anything else I can determine. There is no way to tell the difference between when a user hovers over a link and when the user hovers over a node. (cont) – asgallant May 01 '14 at 15:00
  • I filed a [feature request](http://code.google.com/p/google-visualization-api-issues/issues/detail?id=1578) to add support for this. Incidentally, there is an existing [feature request](http://code.google.com/p/google-visualization-api-issues/issues/detail?id=1575) to add tooltip support. You can "star" these to get updates on progress. – asgallant May 01 '14 at 15:11
  • Thanks! I have built the same sankey diagram using d3 and able to insert tooltip. – user3591660 May 07 '14 at 05:16

0 Answers0