Tooltip dissapear when using geoChart

[Daniel D. / compojoom]

Hey guys,
I'm showing 3 small charts - pie, colum and geo on the same page. Here
is my code:

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


google.load("visualization", "1", {packages:["corechart", 'geochart',
'imagechart']});
google.setOnLoadCallback(drawPie);
google.setOnLoadCallback(drawColumn);
google.setOnLoadCallback(drawMap);

function drawPie() {
var age = [{"count":"2","age":"24"},{"count":"1","age":"30"},
{"count":"1","age":"40"}];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Age');
data.addColumn('number', 'Number of people');
data.addRows(age.length);
var i = 0;
age.each(function(user) {
data.setValue(i, 0, user.age.toString());
data.setValue(i, 1, user.count.toInt());
i++;
});

var chart = new
google.visualization.PieChart(document.getElementById('age'));
chart.draw(data, {width: 450, height: 300, title: 'Age'});
google.visualization.events.addListener(chart, 'select', function()
{
var selection = chart.getSelection();
var age = data.getValue(selection[0].row,0);
window.location = 'index.php?
option=com_rapleaf&view=users&search=age:' + age;
});

// var options = {cht: 'p', title: 'Age', chp: 0.628, chs:
'400x200'};
// var chart = new
google.visualization.ImageChart(document.getElementById('pie_div'));
// chart.draw(data, options);

}
function drawColumn() {
var gender = [{"age":24,"male":"1","female":"1"},{"age":
30,"male":"1","female":0},{"age":40,"male":0,"female":"1"}];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Age');
data.addColumn('number', 'Male');
data.addColumn('number', 'Female');
data.addRows(gender.length);
var i = 0;
gender.each(function(user) {
data.setValue(i, 0, user.age.toString());
data.setValue(i, 1, user.male.toInt());
data.setValue(i, 2, user.female.toInt());
i++;
});

var genderChart = new
google.visualization.ColumnChart(document.getElementById('gender'));
genderChart.draw(data, {width: 450, height: 300, title: 'Gender',
hAxis: {title: 'Age', titleTextStyle: {color: 'red'}}});
google.visualization.events.addListener(genderChart, 'select',
function() {
var selection = genderChart.getSelection();
var gender = data.getValue(selection[0].row,0);
window.location = 'index.php?
option=com_rapleaf&view=users&search=gender:' + gender;
});

}

function drawMap() {
var location = [{"count":"1","location":"Germany"},
{"count":"1","location":"Paris, France"},
{"count":"2","location":"Spain"}];
var mapData = new google.visualization.DataTable();
mapData.addColumn('string', 'Country');
mapData.addColumn('number', 'Users');
mapData.addRows(location.length);
var i = 0;
location.each(function(country) {
mapData.setValue(i, 0, country.location);
mapData.setValue(i, 1, country.count.toInt());
i++;
});

var options = {width: 556, height: 347};

var container = document.getElementById('map');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(mapData, options);

google.visualization.events.addListener(geochart, 'select',
function() {
// var selection = geochart.getSelection();
// var location = mapData.getValue(selection[0].row,0);
// window.location = 'index.php?
option=com_rapleaf&view=users&search=location:' + location;
});
}

</script>

The charts are displayed, but the pie and column one are missing the
tooltips. Moreover I have a listener for select, but it also doesn't
work.

When I remove the geoChart, then I get the expected result from the
pie and column charts...
Any ideas what am I doing wrong here?

[Viz Kid]

Try having a single callback which draws all three visualizations instead of calling setOnLoadCallback three times with different functions.

Best,

  Viz Kid

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Daniel D. / compojoom]

Hey Viz,
Thank you for the reply and sorry for the delay in my response.

I just tried that out and it is the same. When I have the geochart, the other charts on the page loose their tooltips.

Any other ideas?
Daniel

[Jinji]

Please provide the HTML code so we could have a look.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/rJPCHrcLe5UJ.

[Daniel D. / compojoom]

The html of the page is super simple:

<div id="pie_div"></div>
<div id="age"></div>

<div id="gender"></div>
<div id="map"></div>

In my first post you have the javascript? If you want, I'll build you static page with this and will give you a link.

Daniel

[Jinji]

Yes, a link to a static page would be very helpful.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/72Bfb65CRM8J.

[Daniel D. / compojoom]

http://jsfiddle.net/sHNn8/1/

I finally understood what is causing it, but not why...

Look at the css, when you remove the float:left, then it works as expected. Or if I float:left the #map tag then it also works, or if I do clear:both after the age and gender divs... I can't understand why the float:left of the div is rendering the chart unusable when we have 3 charts. If we use just age and gender everything works as expected...

Any ideas why this happen?
Daniel

[Jinji]

Open the Chrome Dev Tools/Firebug and see that the float:left is causing the div used by the map to cover the divs of the other charts. This blocks mouse events to get to the other charts. I'm not a CSS/layout expert, so I don't know why the divs behave they way they do...

Daniel

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/MRJyDbkRWK8J.

[Daniel D. / compojoom]

Yes, of course! That is the reason! I was always looking at the iframe in the div and it is always on the proper position...

But yea, this is the way floats work. The element is taken out of the normal flow and all other elements take the space around it...

Thank you for the help!
Daniel