Results 1 to 2 of 2
  1. #1
    patchypt is offline Member
    Join Date
    Mar 2017
    Posts
    1
    Rep Power
    0

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

    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

    Geochart : take color value from sheet and assign different color to each countries-unnamed.png





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

    Java Code:
    <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
    Last edited by patchypt; 03-26-2017 at 08:36 AM.

  2. #2
    DarrylBurke's Avatar
    DarrylBurke is offline Forum Police
    Join Date
    Sep 2008
    Location
    Madgaon, Goa, India
    Posts
    12,059
    Rep Power
    25

    Default Re: Geochart : take color value from sheet and assign different color to each countri

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

    db
    If you're forever cleaning cobwebs, it's time to get rid of the spiders.

Similar Threads

  1. color. help me
    By yehuda in forum Java Applets
    Replies: 2
    Last Post: 08-05-2011, 10:17 PM
  2. RGB to Color Name
    By zit1343 in forum Advanced Java
    Replies: 12
    Last Post: 04-24-2011, 06:02 PM
  3. [COLOR="Navy"]execute .bat file in mysql [/COLOR]
    By msankar.ravi in forum Networking
    Replies: 0
    Last Post: 02-24-2010, 04:27 AM
  4. A bit of color!
    By tim in forum Java 2D
    Replies: 8
    Last Post: 02-11-2008, 11:57 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •