Hide US on google geochart when region is set to Canada

0
votes

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/

1
regionregionsgoogle-visualization

1 Answers

3
votes

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/