Display multiple google chart regions in the same map -
i creating google geo chart includes cities in us, south korea, taiwan, china, , india. if use regions: 'world' tshe map big , city bubbles barely visible. using following options:
var options = { region: 'world', displaymode: 'markers', resolution: 'provinces' } would possible create map 2 or more regions?
for example, , asia. thinking setting regions using following:
var options = { region: '019','142', displaymode: 'markers', resolution: 'provinces' }
no, not possible create map of 2 regions on same map.
the reason google geocharts rely on svg images of whatever region showing, , there limited amount of svg maps exist within api (this why countries not work resolution: 'provinces').
however, possible create datatable data both regions, , use same datatable populate 2 separate maps (one of each area).
for instance:
<!-- free copy , use sample in accordance terms of apache license (http://www.apache.org/licenses/license-2.0.html) --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>google visualization api sample</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['geochart']}); function drawvisualization() { var data = google.visualization.arraytodatatable([ ['country', 'popularity'], ['germany', 200], ['united states', 300], ['brazil', 400], ['canada', 500], ['france', 600], ['ru', 700] ]); // draw first chart var geochart = new google.visualization.geochart( document.getelementbyid('visualization')); geochart.draw(data, {width: 556, height: 347, region: '019', resolution: 'countries'}); // draw second chart var geochart2 = new google.visualization.geochart( document.getelementbyid('visualization2')); geochart2.draw(data, {width: 556, height: 347, region: '150', resolution: 'countries'}); } google.setonloadcallback(drawvisualization); </script> </head> <body style="font-family: arial;border: 0 none;"> <div id="visualization"></div> <div id="visualization2"></div> </body> </html> also note "americas" region (019) tall world map, , won't save space on "world". suggest using north america or 'us' if there aren't markers in canada or mexico.
Comments
Post a Comment