Chartwrapper, Map, infowindows and tooltips

[Simon Banton]

Hi,

The data format for a Chartwrapped Map visualization seems very constrained - lat, long, text.

The last of these is used both for the Infowindow content that shows when you click a marker and - it appears - it is also being used for the automatic yellow-backgrounded tooltip that appears when hovering over a marker.

I'm pulling the data for the map from a Google Spreadsheet which has many columns.

In the spreadsheet I'm generating the HTML text content for the Infowindow by concatenating several columns together.

In the visualization, I'm using an SQL query that selects just three of these columns: lat, long and this generated text.

My problem is that the yellow-background tooltip displays the HTML tags. These are necessary for the Infowindow, and a nuisance in the tooltip.

Is there any way to either:

a) suppress the display of the yellow tooltips entirely

or (better)

b) force the visualization to make use of a different column in the spreadsheet for the tooltip (obviously I can then select a fourth column which contains non-HTML text for use in the tooltip)

The example code is here: http://web.org.uk/tmp/barrowmap/v12.html

Try hovering over a marker to see the problem. Clicking a marker works as desired.

Many thanks for any help - trying to Google up a solution is proving somewhat difficult.

S.

[Sergey Grabkovsky]

Hi Simon,

When running your example, I the following error in the console: Missing query for request id: 0

Please either:

a) fix this issue and reply

or (better)

b) Distill your example into a simple jsfiddle that we can iterate on.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/17a13f23-6190-4b1d-b279-55e4db20d9db%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

	•	Sergey Grabkovsky
	•	Software Engineer
	•	Google, Inc
	•	gra...@google.com

[Simon Banton]

On Monday, March 14, 2016 at 1:55:23 PM UTC, Sergey wrote:

Hi Simon,

When running your example, I the following error in the console: Missing query for request id: 0

Googling for this particular error message, I find a thread that says it occurs when the data source does not respond with the reqid that was supplied in the tqx parameter of the query (the reqid being used to identify which response matches which request in the event of multiple requests).

Since my data source is a Google Spreadsheet, and the response returned is therefore outside my direct control, and given that the response returned actually contains:

/*O_o*/
google.visualization.Query.setResponse({"version":"0.6","reqId":"0","status":"ok","sig":"1840072697",...[snip]

... which appears to contains the correct request ID, I'm a little confused as to how I will be able to correct this problem. The same code works in Firefox and Safari (though I can confirm the error is reported in Chrome).

Thanks for the reply though - have you any insight into how I may proceed?

Regards
Simon

[Sergey Grabkovsky]

Hi Simon,

I would guess that this is because you use the 'old' spreadsheets URL. You should be able to use just a regular Sheets URL, copied from the address bar, like:

https://docs.google.com/spreadsheets/d/{key}/edit

Please change that in your example page, and I'll try again.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/01ecaf96-b631-48b0-a9b4-81dafd1dea75%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Simon Banton]

Hi Sergey,

OK, I've changed the data source URL as requested. Chrome still reports an error:

Uncaught Error: Missing query for request id: 0                                          VM185:308
Cr                                                                                                             @ VM185:308
(anonymous function) @ tq?tq=Select A%2CB%2CI&tqx=reqId%3A0:formatted:2

 In Chrome's console I can see the query response begins as follows:

/*O_o*/
google.visualization.Query.setResponse({
    "version": "0.6",
    "reqId": "0",
    "status": "ok",

    "sig": "1931638057",
    "table": {
        "cols": [{
            "id": "A",
            "label": "Latitude",
            "type": "number",
            "pattern": "General"
[snip]

The code continues to work as expected in Safari and Firefox (modulo my initial question regarding HTML tags appearing in yellow-backgrounded tooltip).

Thanks
Simon

[Simon Banton]

Further to this, I have eliminated the "req id" error in Chrome by replacing the jsapi autoload:

        <script type="text/javascript" src='https://www.google.com/jsapi?autoload={
            "modules":[{
                "name":"visualization",
                "version":"1"
            }]
        }'></script>
       
        <script type="text/javascript">
            google.charts.load("current", {packages:["map"]});
            google.setOnLoadCallback(drawVisualization);
            var wrap;

with the following:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
       
        <script type="text/javascript">
            google.load("visualization", "1");
            google.charts.load("current", {packages:["map"]});
            google.setOnLoadCallback(drawVisualization);
            var wrap;

However, this now causes the intermittent occurrence of the error : "You called the draw() method with the wrong type of data rather than a DataTable or DataView".

This seems to be entirely down to network response time - reloading (or shift reloading) will result in the map appearing rather than the error. This is completely reproducible.

Here is a link to the page using the new code that doesn't trigger the Chrome console warning about missing req id but instead has the intermittent new error:

http://web.org.uk/tmp/barrowmap/v13.html

From this I surmise that the Chrome "req id" error is related to the autoload mechanism for jsapi

So I have swapped one error (req id) for a different, intermittent, one (wrong type of data). Is there a way to correct this new error?

If there is, perhaps we can return to my original query :-)

Regards
Simon

[Daniel LaLiberte]

Simon,

Regarding how you load the Google Charts library, you must not mix the old google.load and google.setOnLoadCallback methods with the new google.charts.load and google.charts.setOnLoadCallback methods.  It is best to use only the new methods.  So you will have to load https://www.gstatic.com/charts/loader.js.

But, since you are doing a Map chart, you need to do one more thing, until we fix this limitation.  And that is, you ALSO need to load "https://www.google.com/jsapi", but don't do any autoloading.  This is because the Map chart still uses the old loader to load map data.  So, like this...

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">

            google.charts.load("current", {packages:["map"]});

            google.charts.setOnLoadCallback(drawVisualization);

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/84cebc91-b127-47f0-b7cf-d6d937d5bec8%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Simon Banton]

Many thanks Daniel, that's sorted out the wrinkles. The visualization documentation was somewhat confusing and the absence of a Map chart visualization example meant I didn't have a concrete basis on which to build.

So to return to my original issue - is there any means by which I can prevent the yellow-backgrounded tooltips that appear when a marker is hovered over from displaying the HTML tags that are there to format the content of the InfoWindow that appears when a marker is clicked?

The ideal solution would be one where these yellow tooltips contain data taken from a different column in the Google Spreadsheet datasource, as then I can avoid including HTML in the data in that column.

I'm using a visualization for the simplicity it provides in handling SQL queries to the datasource coupled with auto-scaling of the mapped results and the neat way it handles automatic marker creation. Trying to pick through the generated code that is actually creating these markers, looking for a way to overload the "title" attribute programmatically is somewhat daunting.

Regards
Simon

[Simon Banton]

Oh, and the reworked code that Chrome doesn't throw an error in is available at:

http://web.org.uk/tmp/barrowmap/v14.html

S.

[Daniel LaLiberte]

I am not sure what you mean about what the yellow-backgrounded tooltips are doing, and I am not seeing any, but assuming you are, I suspect they originate from the browser itself for any element has a 'title' or alt-text attribute.   The black-backgrounded tooltips that are displaying raw HTML tags appear to be due to using a 'tooltip' role.  If you don't want those tooltips, don't use role 'tooltip'.  If you want to keep the text in the datatable that is otherwise ignored by the chart, you might try making up your own role, e.g. role: 'myPopup'.  

I hope my series of hypotheticals will help you work out the solution you need. 

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/02473501-62dd-415a-9ee7-d7909f5ab5eb%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Simon Banton]

The screenshot above shows the type of tooltip I'm referring to, which appears in Chrome and other browsers when hovering over a marker. Yes, this is a browser-originated UI element that presents the content of the "title" attribute for any element in the HTML.

My own code is not explictly setting a role:tooltip, so the Google Charts visualization code must itself be inferring this role for the third column that is being returned from the Google Spreadsheet data source.

In a Map visualisation, the data format is tightly constrained to three columns (plus a fourth for choosing from predefined named marker styles) - according to the API docs:

"Data Format

Two alternative data formats are supported:

1. Lat-Long pairs - The first two columns should be numbers designating the latitude and longitude, respectively. An optional third column holds a string that describes the location specified in the first two columns."

and:

"To create an additional marker set, add an ID to the icons option and set your marker images. Then, add a column to your Data Table, and set the ID of the marker set you wish to use for each row in the Data Table"

I have previously tried to assign the role:tooltip to a fourth column returned by the JSON from the data source, but this had no effect.

Further clues would be most welcome.

Cheers
Simon

[Simon Banton]

OK, let me try this another way.

How can I, having successfully drawn the ChartWrapper map visualization, retrieve an array of the Markers presently being shown so that I can iterate over them in my own code and adjust their title attribute contents "by hand"?

They appear to be titled div elements, but trying to get hold of them with document.querySelectorAll(div[title]) gives me an empty nodelist.

Cheers
Simon

[Daniel LaLiberte]

Hi Simon,

So what I was seeing as black-background tooltips you were seeing as the yellow-background tooltips.  So the style can be affected, but I don't know if it can be made invisible.  Here is a stackoverflow question about this that might have an answer you can use:  http://stackoverflow.com/questions/15364063/is-it-possible-to-hide-the-title-from-a-link-with-css

This popup, which comes from the title attribute of the marker elements, has been a "feature" of the Maps api for a long time, and the Map chart has no control over it.  I would be surprised if the Maps folks are not aware of it, and maybe they have a solution that avoids creation of the title attribute, but you'll have to ask them.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/1051ee97-6376-4dbb-b103-9162f3ffda4d%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Simon Banton]

Thanks again Daniel,

Being new to using the Maps API I don't know how to get hold of the Maps folks - do they have an approved route?

The StackOverflow post I'd seen before, but doesn't do the trick unfortunately.

Cheers
Simon

[Daniel LaLiberte]

Looks like there are lots of choices:  https://developers.google.com/maps/support/

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/1926926e-d7f5-4cf9-b3fc-05f9a374e364%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Sergey Grabkovsky]

Hi Simon,

I looked into doing this. From a very short look into this, it appears that we do explicitly control generating titles for points on the map. I'll look into making this change, and hopefully you'll see it reflected in the next release.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMUiZiPo1fZ3qry%2BrmQ6uKZt8%2BiHGFX-ZvX-fqk-P%3DXNg%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

[Simon Banton]

Thanks - I appreciate all the guidance you and Sergey have provided.

S.

[Simon Banton]

Hi Sergey,

The simplicity of the Maps visualization approach re Spreadsheets integration is what convinced me to go this route instead of direct to the Maps API.

A means of overriding the default behaviour (ie using the third column in the datasource for both Infowindow and marker title content) that allowed direct control of the title attribute's content would be excellent.

Many thanks again
Simon

[Sergey Grabkovsky]

Simon,

I'm happy to inform you that I was able to make this change, and in the next release of Google Charts, you will be able to hide the tooltip while still showing the info window with HTML.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/18f7f1d6-d0ed-49f5-85da-39697bd7da7f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Simon Banton]

Wonderful, many thanks.

S.