javascript - Google Charts: information pop-ups do not work on floated div? -
if @ following jsfiddle
the chart on right not show pop ups. why that? how can solve it?
google.load('visualization', '1.0', { 'packages': ['corechart'] }); google.setonloadcallback(drawchart); function drawchart() { var data = new google.visualization.datatable(); data.addcolumn('string', 'user'); data.addcolumn('number', 'messages sent'); data.addrows([ ['amelia', 35], ['john', 1], ['ted', 3], ['pat', 1] ]); var data2 = new google.visualization.datatable(); data2.addcolumn('string', 'user'); data2.addcolumn('number', 'messages sent'); data2.addrows([ ['amelia', 35], ['john', 1], ['ted', 3], ['pat', 1] ]); var options = { 'title': 'ownership', 'width': 250, 'height': 250 }; var options2 = { 'title': 'ownership', 'width': 250, 'height': 250 }; var chart = new google.visualization.piechart(document.getelementbyid('chart_div')); var chart2 = new google.visualization.piechart(document.getelementbyid('chart_div_2')); chart.draw(data, options); chart2.draw(data2, options2); }
the problem layering issue.
if use dom inspector, see chart_div_2
overlays chart_div
. visualization api cancels mouse event propagation on container div's of chart element, hover events don't passed down chart_div
.
to fix this, need set widths of chart divs in css. see fiddle.
Comments
Post a Comment