CODEWITHSUNDEEP
regionregionsgoogle-visualization
El Kopyto
El Kopyto

Reputation: 1177

Hide US on google geochart when region is set to Canada

I need to hide US on geo chart, when region is set to Canada:

google.load('visualization', '1', {'packages': ['geochart']}); google.setOnLoadCallback(drawVisualization);

function drawVisualization() {var data = new google.visualization.DataTable();

 data.addColumn('string', 'Country');
 data.addColumn('number', 'Value'); 
 data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();

 data.addRows([[{v:'CA-BC',f:'CA-BC'},0,'Test']]);

 var options = {
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
 colorAxis:  {minValue: 0, maxValue: 0,  colors: ['#0000ff',]},
 legend: 'none',    
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },    
 datalessRegionColor: '#f5f5f5',
 displayMode: 'markers', 
 enableRegionInteractivity: 'true', 
 resolution: 'provinces',
 region:'CA',
 keepAspectRatio: true,
 width:700,
 height:500,
 tooltip: {textStyle: {color: '#444444'}, trigger:'focus'}    
 };
  var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
 chart.draw(data, options);
 }

http://jsfiddle.net/jk171505/VJtBR/

Upvotes: 0

Views: 2549

Answers (1)

CMoreira
CMoreira

Reputation: 1708

With the API options, you can't really do it. You can use advanced CSS selectors to hide the SVG shapes.

Add this CSS and it will hide the US shapes:

#visualization path:nth-child(237), #visualization path:nth-child(236) {
    display:none;    
}

http://jsfiddle.net/cmoreira/mMadX

I have built a page with some information on how to use this and other CSS techniques with the Google Geochart API. In case it helps, here's the link: http://cmoreira.net/interactive-world-maps-demo/advanced-customization/

Upvotes: 2

Related Questions