javascript - How to get a geo google chart of a specific country only -


i'm trying map of south africa, should display south africa , not other countries , ocean surrounding in google charts.

is possible? i've scoured net in trying find solution failing.

this code of google chart needed display south africa: 

<script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type='text/javascript'>     google.load('visualization', '1', { 'packages': ['geochart'] });     google.setonloadcallback(drawmarkersmap);      function drawmarkersmap() {         var data = google.visualization.arraytodatatable([           ['province', 'successful deliveries'],           @html.raw(rows6)]);          var options = {             region: 'za',             displaymode: 'auto',             //coloraxis: { colors: ['#cccccc', '#c01e24'] },             resolution: 'provinces',             height: '390'          };          var chart = new google.visualization.geochart(document.getelementbyid('chart_div'));         chart.draw(data, options);     }; </script>

this how displays:

enter image description here

how display south africa this, without ocean , surrounding countries (for example)

enter image description here

if needs additional information, please let me know , add question.

possible approach(requires datatable contains data provinces in particular country , no data other countries):

define datalessregioncolor-option(it doesn't matter color, should unique in map, take unusual color).

the api use color set fill-color-attributes unused regions. what's purpose of color you? when know attribute of element, able define selector element.

the simple css-solution be:

path[fill='#123456']{display:none !important;}

demo:

google.setonloadcallback(drawregionsmap);    function drawregionsmap() {      var data = google.visualization.arraytodatatable([      ['province', 'successful deliveries'],      ['za-ec', null],      ['za-fs', null],      ['za-gt', 500],      ['za-nl', null],      ['za-lp', null],      ['za-mp', null],      ['za-nc', null],      ['za-nw', null],      ['za-wc', 100]    ]);      var options = {      datalessregioncolor: '#123456',      region: 'za',      resolution: 'provinces',      defaultcolor: '#ffffff',      keepaspectratio: true    };      var chart = new google.visualization.geochart(document.getelementbyid('regions_div'));      chart.draw(data, options);  }
html,  body,  #regions_div {    margin: 0;    padding: 0;    height: 100%;  }  #regions_div {    margin: 0;    padding: 0;    height: 90%;    width: 90%;  }  path[fill='#123456'] {    display: none !important  }
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>  <div id="regions_div" "></div>

demo related comments:

google.setonloadcallback(drawregionsmap);    function drawregionsmap() {      var data = google.visualization.arraytodatatable([      ['province', 'successful deliveries'],      ['za-ec', null],      ['za-fs', null],      ['za-gt', 500],      ['za-nl', null],      ['za-lp', null],      ['za-mp', null],      ['za-nc', null],      ['za-nw', null],      ['za-wc', 100]    ]);      var options = {      datalessregioncolor: '#123456',      region: 'za',      resolution: 'provinces',      defaultcolor: '#ffffff',      keepaspectratio: true,      tooltip:{trigger:'selection'},      width:1000,height:600    };      var chart = new google.visualization.geochart(document.getelementbyid('regions_div'));    chart.draw(data, options);  }
#regions_div{    position:relative;    width:310px;    height:270px;    overflow:hidden;    border:1px solid silver;  }  #regions_div svg{    position:absolute;    left:-300px;    top:-20px;  }  path[fill='#123456'] {    display: none !important  }
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>  <div id="regions_div" "></div>


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more