CODEWITHSUNDEEP
javascriptangularjsgoogle-visualization
Иван Рудь
Иван Рудь

Reputation: 47

Base url and google geochart

I use <base href="/"> on my site. It is the angular project with using google geo chart. But I have the problem with legend's gradient. It's empty without colors. I'm trying to use code on callback:

    $(element).find('svg').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))
             }
        });
    });

It's work, but when I hover on something on the map, the legend is broken again. I can't remove base url because it's need for pretty urls on the angular. You can see this problem there: http://jsfiddle.net/w5DYt/47/

Any solutions ?

Upvotes: 3

Views: 185

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

the problem is: you assign the url to particular elements, but when you take a look at the console you'll see that these elements will be removed when you hover a region and a new legend will be created.

Possible solution:

Use global styles to override the fill-attributes:

function fixGoogleCharts(element){
    return function () {               
    var  rules=[],
         pre=element+' svg ';
      $('svg defs>*[id]',$(element)).each(function(){
        switch(this.tagName.toLowerCase()){
          case 'lineargradient':
            rules.push(pre + '[fill^="url(#"]{fill:url('+location.href+'#'+this.id+') !important;}');
              break;
          default:break;

        }
      });
      $('head').append('<style>'+rules.join('')+'</style>');

    }
}

Fiddle: http://jsfiddle.net/w5DYt/57/

(Note: it's just a quick and dirty way to set global css, but for me it works in all tested browsers...Chrome,FF,Opera,IE,Safari ....for the correct way take a look at insertRule)

Upvotes: 1

Related Questions