Geochart : take color value from sheet and assign different color to each countries

[patchypt]

I'm trying to make interactive google geochart for my website by query from google spreadsheet

I found the code to assign color to each countries from some forum(stackoverflow) and adapted to mine but I got an error (maybe it's simple but pls correct my code for me because I'm new for all of this coding)


Uncaught ReferenceError: row is not defined at Function.handleQueryResponseTR (testGmap2.html:71) at gvjs_Cn.gvjs_.HC (format+th,default+th,ui+th,geochart+th.I.js:377) at Function.gvjs_Jn [as setResponse] (format+th,default+th,ui+th,geochart+th.I.js:369) at tq?tqx=reqId%3A0:2

and my data in google sheet look like this







This is my code (I want to take values from google sheet[colors column in pic above] and define color in if condition)

<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 = {
	//color
 colorAxis:  {colors: colorNames,
      values: colorValues},
	  
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },	
 datalessRegionColor: '#F5F0E7',
 displayMode: 'regions', 
 enableRegionInteractivity: 'true', 
 resolution: 'countries',
  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);
	
	//get data to show on 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)
					
       			 return dt1 + ' : ' + dt2
        },
    role: 'tooltip',
	p: {html: true}
	
    }]);
	
	
  	var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
	
	 //clickable url
	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));
      }
    });
	
	
	
	// color values
  var colorValues = data.getValue(row,6);
      
  


  // build color names
  var colorNames = [];
  colorValues.forEach(function(value) {
    if (value = 1) {
      colorNames.push('red');
    } else if ((value > 1) && (value <= 4)) {
      colorNames.push('yellow');
    } else {
      colorNames.push('green');
    }
  });

	
 		chart.draw(view, options);
 }
 </script>
 <div id='visualization'></div>

anyone can help? thanks

[DarrylBurke]

Javascript is not Java. Moving from New to Java to Forum Lobby.

db