Created
March 23, 2017 09:16
-
-
Save patchypt/60cd3c0c723c2a3cf2921a276691bfd2 to your computer and use it in GitHub Desktop.
geochart query from googlesheet with clickable url on regions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type='text/javascript' src='http://www.google.com/jsapi'></script> | |
<script type='text/javascript'>google.load('visualization', '1', {'packages': ['geochart']}); | |
google.setOnLoadCallback(drawVisualization); | |
function drawVisualization() | |
{ | |
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1dTfxVvfDKn6iXn4W_m7HJ_86JOGNDsxYSSaXipEo0vM/edit#gid=0'); | |
// query.setQuery('select A,B,C'); | |
query.send(handleQueryResponseTR); | |
} | |
function handleQueryResponseTR(response) { | |
if (response.isError()) { | |
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); | |
return; | |
} | |
var options = { | |
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, | |
colorAxis: {colors: ['#D95F0E','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FFF7BC','#FFF7BC','#FFF7BC','#FFF7BC',]}, | |
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, | |
datalessRegionColor: '#F5F0E7', | |
displayMode: 'regions', | |
enableRegionInteractivity: 'true', | |
resolution: 'countries', | |
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10}, | |
region:'world', | |
keepAspectRatio: true, | |
width:800, | |
height:600, | |
tooltip: {isHtml:'true',textStyle: {color: '#444444'}, } | |
}; | |
var data = response.getDataTable(); | |
var view = new google.visualization.DataView(data); | |
view.setColumns([0,{ | |
type:'string', | |
label : 'dataname', | |
calc: function (dt, row) { | |
var dt1 = dt.getFormattedValue(row, 1) | |
var dt2 = dt.getFormattedValue(row, 2) | |
var url = dt.getFormattedValue(row, 4) | |
var image = dt.getFormattedValue(row, 5) | |
return dt1 + ' : ' + dt2 + ' : ' + url + ' - ' + image | |
}, | |
role: 'tooltip', | |
p: {html: true} | |
}]); | |
var chart = new google.visualization.GeoChart(document.getElementById('visualization')); | |
google.visualization.events.addListener(chart, 'select', function () { | |
var selection = chart.getSelection(); | |
if (selection.length > 0) { | |
//console.log(data.getValue(selection[0].row, 4)); | |
window.open(data.getValue(selection[0].row, 4)); | |
} | |
}); | |
chart.draw(view, options); | |
} | |
</script> | |
<div id='visualization'></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment