Skip to content

Instantly share code, notes, and snippets.

@patchypt
Created March 23, 2017 09:16
Show Gist options
  • Save patchypt/60cd3c0c723c2a3cf2921a276691bfd2 to your computer and use it in GitHub Desktop.
Save patchypt/60cd3c0c723c2a3cf2921a276691bfd2 to your computer and use it in GitHub Desktop.
geochart query from googlesheet with clickable url on regions
<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