Created
March 27, 2017 16:01
-
-
Save patchypt/cecb585a4334c7f1a1854cd66c379d8b to your computer and use it in GitHub Desktop.
Geochart : coloring each countries
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
| <html> | |
| <head> | |
| <title>Map</title> | |
| <style xmlns="http://www.w3.org/2000/svg"> | |
| /* #colormap path:hover { fill: #90db7c; } */ | |
| #colormap rect:hover {fill:transparent;} | |
| </style> | |
| <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> | |
| <script src="https://www.google.com/jsapi"></script> | |
| <script type='text/javascript'> | |
| // Load Charts and the corechart package. | |
| google.charts.load('current', {packages: ['geochart']}); | |
| // Callback that draws | |
| function drawRegionsMap() { | |
| 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 data = response.getDataTable(); | |
| var colorValues = []; | |
| var numRows = data.getNumberOfRows(); | |
| for (var i = 0; i < numRows; i++) { | |
| colorValues.push(parseInt(data.getValue(i, 6))); | |
| } | |
| var view = new google.visualization.DataView(data); | |
| /* | |
| //show data in tooltips | |
| 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) | |
| //colorValues.push(dt.getFormattedValue(row, 6)) | |
| return dt1 + " - " + dt2 | |
| }, | |
| role: 'tooltip', | |
| p: {html: true} | |
| }]); | |
| */ | |
| view.setColumns([0,6,{ | |
| 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) | |
| //colorValues.push(dt.getFormattedValue(row, 6)) | |
| return dt1 + " - " + dt2 | |
| }, | |
| role: 'tooltip', | |
| p: {html: true} | |
| }]); | |
| /* | |
| //color | |
| function color(dt, row){ | |
| var colorValues = dt.getValue(row, 6); | |
| return colorValues; | |
| } | |
| var colorValues = data.map(function(val){ | |
| return val.slice(-1); | |
| }); | |
| colorValues.splice(0, 1); | |
| colorValues.sort(function(a, b){return a-b}); | |
| */ | |
| //assign color to colorValues | |
| var colorNames = []; | |
| colorValues.forEach(function(value) { | |
| if (value <= 2) { | |
| colorNames.push('red'); | |
| //alert('red'); | |
| } else if ((value > 2) && (value <= 4)) { | |
| colorNames.push('yellow'); | |
| //alert('yellow'); | |
| } else { | |
| colorNames.push('green'); | |
| //alert('green'); | |
| } | |
| }); | |
| var chart = new google.visualization.GeoChart(document.getElementById('colormap')); | |
| 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)); | |
| } | |
| }); | |
| // Set options for the chart. | |
| var options = { | |
| title:'WEEE', | |
| colorAxis: { | |
| //values: [1, 2, 3, 4,5,6], | |
| //colors: ['green', 'yellow', 'orange' ,'red','purple','lightblue'] | |
| colors: colorNames, | |
| values: colorValues | |
| }, | |
| //colorAxis: {colors: ['#D95F0E','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FFF7BC','#FFF7BC','#FFF7BC','#FFF7BC',]}, | |
| //backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, | |
| backgroundColor: '#FFFFFF', | |
| 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'} } | |
| }; | |
| chart.draw(view, options); | |
| } | |
| // Draw the chart when Charts is loaded. | |
| google.charts.setOnLoadCallback(drawRegionsMap); | |
| </script> | |
| </head> | |
| <body> | |
| <div id='colormap'></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment