4

The following question almost entirely describes what I'm trying to to...

Add custom text to Google Visualization tooltip

... basically to add extra information to google-viz tooltips. The accepted answer looked pretty good but I'm using the GWT API. From the look of the latest version (1.1) data table doesn't support this...

http://gwt-google-apis.googlecode.com/svn/javadoc/visualization/1.1/com/google/gwt/visualization/client/DataTable.html

...

is anyone aware of any fix or workaround for this?

Thanks.

Community
  • 1
  • 1
Jonathan
  • 1,327
  • 3
  • 15
  • 24

3 Answers3

10

Based on Ümit's answer I was able to do this very easily using JSNI, I thought I'd post some sample code for anyone else who comes across this.

To keep things ultra-simple instead of extending the DataTable class I added the following into my client side class which generates the chart:

private native void addTooltipColumn(DataTable data) /*-{
    data.addColumn({type:'string', role:'tooltip'});
}-*/;

Note this is JNSI, hence the commenting / brackets which seem odd to the un-initiated.

I can then call that on the data table:

    addTooltipColumn(dataTable);

And the tooltips can be added along with the data for each row like this:

    data.setValue(row, col, data);
    data.setValue(row, col, "Tool Tip Text");
Jonathan
  • 1,327
  • 3
  • 15
  • 24
  • 1
    Thanks for following up with your solution! – Riley Lark Dec 30 '11 at 17:32
  • @Jonathan - I tried exactly in the same way, but it didn't work for me. Is this code work for gwt-visualization-1.0.2 version. Could be please drive me regarding this. – Jagadeesh Oct 20 '14 at 08:08
8

Well the new features in the google charting tools haven't made their way into the the GWT visualization API and wrapper respectively.
I am actually not sure if the GWT API's will be updated at all. However you can always implement these features yourself.

Depending on how you create your DataTable (Programmatically or by the backend) you can:

  • Programmatically: you could extend the DataTable or AbstractDataTable class and implement the missing features and functions via JSNI (i.e. addColumn(type, role), etc. Checkout the source code for AbstractDataTable).
  • JSON from the backend: you could just create the appropriate DataTable JSON structure on the backend and then just call DataTable.create() and pass it to the draw() method without any code modifications. (I haven't tested it but it should work as DataTable is just a JavaScriptObject)

BTW: the latest version of the GWT Visualization API is actually (1.1.2)

Ümit
  • 17,379
  • 7
  • 55
  • 74
  • Excellent, thanks Ümit. With your direction I was able to add a few lines of JSNI to do this very easily. I'll answer below with exactly what I did. – Jonathan Dec 30 '11 at 16:59
  • @Ümit - It is not working for me. http://stackoverflow.com/questions/26529573/issue-in-customizing-default-tooltip-text-of-piechart-using-gwt-visualization-1 – Jagadeesh Oct 27 '14 at 09:17
6

You can also add more information to the tooltip using 

double value = 50.0;
data.setCell(row, col, value, Double.toString(value) + "\nExtra information\n On several rows",null);

instead of data.setValue(...).

GaryF
  • 103
  • 7