patchypt/ColorGmap.html

## ColorGmap.html
<!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>
	<!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>