Google Chart Tools: tooltip/line not shown on firefox using base tag

[orwant]

What steps will reproduce the problem? Please provide a link to a
demonstration page if at all possible, or attach code.

1. create a page with a base tag that differs from the page location (example: page
at http://www.google.com/test/ with <base href="http://www.google.com/" />), test here:
http://carlo.tnx.it/googlechartstools/
2. use one of the Area Chart, Bar Chart, Candlestick Chart, Column Chart, Combo Chart,
Line Chart or Scatter Chart demo codes (I've used this mainly: http://code.google.com/intl/it/apis/chart/interactive/docs/gallery/linechart.html)
3. visit the page with firefox 4.0 or 3.6 and rollover the chart

What component is this issue related to (PieChart, LineChart, DataTable,
Query, etc)?
Area Chart, Bar Chart, Candlestick Chart, Column Chart, Combo Chart, Line Chart, Scatter
Chart didn't works.
Tooltip works correctly on Geochart and Pie Chart. Rollover works on Treemap (missing
style) and Table .

Are you using the test environment (version 1.1)?
(If you are not sure, answer NO)
NO

What operating system and browser are you using?
With Line Chart example:
- on Firefox 4.0.1 (win & mac) I miss only the tooltip
- on Firefox 3.6.17 I miss the chart line too
- any version of ie, chrome, opera seems to work

*********************************************************
For developers viewing this issue: please click the 'star' icon to be
notified of future changes, and to let us know how many of you are
interested in seeing it resolved.
*********************************************************

Original issue reported on code.google.com by moreeasy on 2011-05-24 11:32:30

[orwant]

also 1.1 ver fail

Original issue reported on code.google.com by mceccarellitnx on 2011-05-24 12:26:28

[orwant]

(No text was entered with this change)

Original issue reported on code.google.com by yinnon@google.com on 2011-05-25 09:28:02

[orwant]

I think I have the same problem. In Firefox 3.6.17 (windows 7) I can't see the bars
if I have a <base> tag in the header. Tooltips and other elements show up ok. In all
other browsers everything seems to be fine.

Original issue reported on code.google.com by sedat095 on 2011-05-25 17:21:16

---

• Attachment: firefox-test.jpg

[orwant]

I've written a quick hack to work around this issue (using jQuery). It's not the most
elegant code, but it works...

<script>

    function fixGoogleCharts()
    {
        $( 'iframe[id*=Drawing_Frame_]' ).each( function()
        {
            $( $( this ).get( 0 ).contentDocument ).find( "g" ).each( function()
            {
                if ( !$( this ).attr( 'clip-path' ) ) return;
                if ( $( this ).attr( 'clip-path' ).indexOf( 'url(#') == -1 ) return;
                $( this ).attr( 'clip-path', 'url(' + document.location + $( this ).attr(
'clip-path' ).substring( 4 ) )
            })
        });
    }

    google.setOnLoadCallback( function ()
    {
        // Build your DataTable here...

        // Create and draw the chart
        var lineChart = new google.visualization.LineChart( el.get( 0 ) );
        lineChart.draw( data, {});

        // Add a listener to the fixGoogleCharts
        google.visualization.events.addListener( lineChart, 'ready', fixGoogleCharts
);
    });

</script>

Original issue reported on code.google.com by molivierster on 2011-06-05 13:06:03

[orwant]

For me it worked with setTimeout
function fixGoogleCharts()
   setTimeout(function() {
      ....
   }, 0);
}

Original issue reported on code.google.com by mati.andreas on 2011-08-01 12:05:03

[orwant]

in firefox 6 works.

?!?!

Original issue reported on code.google.com by moreeasy on 2011-09-06 14:48:24

[orwant]

I noticed a change to the Google Charts implementation: The drawing is now based on
inline SVG and no longer a Drawing_Frame iframe element.

This means I had luck with this event handler:

function fixGoogleCharts(strChartContainer) {
    return function () {
        $( 'svg', "#"+strChartContainer ).each( function() {
            $( this ).find( "g" ).each( function() {
                if ( !$( this ).attr( 'clip-path' ) ) return;
                if ( $( this ).attr( 'clip-path' ).indexOf( 'url(#') == -1 ) return;
                $( this ).attr( 'clip-path', 'url(' + document.location + $( this ).attr(
'clip-path' ).substring( 4 ) )
            });
        });
    }
}

... which is now a closure function and should thus be called like this:

google.visualization.events.addListener(chartElm, 'ready', fixGoogleCharts('chart_div"'));

Original issue reported on code.google.com by johannes@hejslet.dk on 2012-10-29 14:01:43

[orwant]

(No text was entered with this change)

Original issue reported on code.google.com by dlaliberte@google.com on 2013-01-13 04:13:33

[orwant]

I notice that tooltips are OK for PieChart on Firefox, but not for GeoChart, BarChart
or ColumnChart.

Original issue reported on code.google.com by jean.jordaan on 2013-02-21 10:08:26

[orwant]

In my case it was an extra # added in top url that was disturbing the tooltips to appear.
Yet that bug appeared only in the mentioned Charts and only in Firefox. The hasthtag
was added after clicking a button so I just added preventDefault() on the click event
and managed to solve it!

Original issue reported on code.google.com by mariza.metaxa on 2013-06-05 12:33:49

[orwant]

In the case of GeoChart, it wasn't enough fixing the g element: some rect have the attr
fill with an url value.
So I've extend the fixGoogleCharts with rect's fill attribute

function fixGoogleCharts(divId){
    return function (){
        $( 'svg', "#"+divId ).each( function() {
            $( this ).find( "g" ).each( function() {
                if ($( this ).attr( 'clip-path' )){
                    if ( $( this ).attr( 'clip-path' ).indexOf( 'url(#') == -1) return;
                    $( this ).attr( 'clip-path', 'url(' + document.location + $( this
).attr( 'clip-path' ).substring( 4 ) )
                }
            });
            $( this ).find( "rect" ).each( function() {
                if($( this ).attr( 'fill' )){
                    if ( $( this ).attr( 'fill' ).indexOf( 'url(#') == -1) return;
                    $( this ).attr( 'fill', 'url(' + document.location + $( this ).attr(
'fill' ).substring( 4 ) )
                }
            });
        });
    }
}

Original issue reported on code.google.com by francesc.garcia.robert on 2014-01-30 10:21:39

[orwant]

For Firefox, we now use full URLs (starting with 'http') rather than just the fragment
(starting with '#').  This should apply to all the chart types.  As far as I know,
this is fixed.  If anyone has particular cases where this strategy is not working,
please provide example code, or better, an actual web page that demonstrates the problem.

Original issue reported on code.google.com by dlaliberte@google.com on 2014-01-31 18:33:42

[g3852477]

Hi there, Unfortunately, your solution doesn't work for the case, when I place mouse over the map. The issue is reproducible in Chrome 42.0.2311.152 and Firefox 38.0.5 (latest) in Windows 7

Below is a short example (full HTML file) to reproduce. GitHub escaped special characters in HTML below so please replace &quot; with " &#39; with ' &lt; with < &gt; with >

Any comments and helps regarding the issue is appreciated? PS Would be nice, if google fixes such bugs in their code, so we don't need any strange work-around.

<!DOCTYPE html><html><head> <base href="http://www.google.com/bugs&quot; /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js&quot;&gt;&lt;/script&gt; <script type="text/javascript" src='https://www.google.com/jsapi?autoload={&quot;modules&quot;:[{&quot;name&quot;:&quot;visualization&quot;,&quot;version&quot;:&quot;1&quot;,&quot;packages&quot;:[&quot;geochart&quot;]}]}&#39;&gt;&lt;/script&gt; <script type="text/javascript"> google.setOnLoadCallback(function() { data = google.visualization.arrayToDataTable([ [ "Code", "Location", "Votes" ], [ "NL-DR", "Drenthe", 790 ], [ "NL-FL", "Flevoland", 196 ], [ "NL-FR", "Fryslan", 632 ], [ "NL-GE", "Gelderland", 776 ], [ "NL-GR", "Groningen", 609 ], [ "NL-LI", "Limburg", 919 ], [ "NL-NB", "Noord-Brabant", 726 ], [ "NL-NH", "Noord-Holland", 56 ], [ "NL-OV", "Overijssel", 890 ], [ "NL-UT", "Utrecht", 712 ], [ "NL-ZE", "Zeeland", 888 ], [ "NL-ZH", "Zuid-Holland", 465 ], ]);

var options = {
    width : 500,
    height : 500,
    region : "NL",
    dataMode : "regions",
    resolution : "provinces",
};

function fixGoogleCharts(divId)
{
    return function()
    {
        $("svg", "#" + divId).each(function()
        {
            $(this).find("g").each(function()
            {
                if ($(this).attr("clip-path"))
                {
                    if ($(this).attr("clip-path").indexOf("url(#") == -1)
                        return;
                    $(this).attr("clip-path", "url(" + document.location + $(this).attr("clip-path").substring(4))
                }
            });
            $(this).find("rect").each(function()
            {
                if ($(this).attr("fill"))
                {
                    if ($(this).attr("fill").indexOf("url(#") == -1)
                        return;
                    $(this).attr("fill", "url(" + document.location + $(this).attr("fill").substring(4))
                }
            });
        });
    }
}

var divName = "regions_div";
var chart = new google.visualization.GeoChart(document.getElementById(divName));
google.visualization.events.addListener(chart, "ready", fixGoogleCharts(divName));
chart.draw(data, options);

}); </script> </head> <body><div id="regions_div"></div></body></html>