CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Daniel ORTIZ
Daniel ORTIZ

Reputation: 2520

Google Charts With geohash

Hi im working with googleCharts https://developers.google.com/chart/interactive/docs/gallery/geochart And I need set GeoHash into columns to plot , but I try and at the moment doest work With latitude and longitude , its works

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="<?php echo  base_url();?>assets/js/script.js"></script>
  <script type="text/javascript">
  google.charts.load('upcoming', {'packages': ['geochart']});
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
        var data = new google.visualization.DataTable();
       data.addColumn('number', 'Latitude');
       data.addColumn('number', 'Longitude');
       data.addColumn('string', 'Label');
       data.addColumn('number', 'Value 1');
       data.addColumn('number', 'Value 2');

       data.addRows([
           [-22.764042, -43.39921, 'Foo', 2.86, 4],
           [-22.755635, -43.460325, 'Bar', 5, 2],
           [-22.912897, -43.200295, 'Baz', 0.50, 1],
           [-22.805776, -43.37292, 'Cad', 6.67, 2],
           [-23.532905, -46.63952, 'Qud', 33.33, 5]
       ]);
       var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  chart.draw(data, {
      width: 600,
      region: 'BR',//rgiomn
       colorAxis: {colors: ['green', 'blue']} //color de transicion


  });

    };
 </script>

But if I try with geohash , show me this error the console:

drawMarkersMap — cargamapa:72ReferenceError: Can't find variable: gbsuv

My vars

  data.addRows([
       ['gbsuv', 'Foo', 2.86, 4],
       ['gbsuv', 'Bar', 5, 2],
       ['gbtst' 'Baz', 0.50, 1],

   ]);

Upvotes: 1

Views: 476

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

please share the values of the varaibles... 

gbsuv, gbtst, gbtse

if they are arrays ([]), then try... 

data.addRows([
  [gbsuv[0], gbsuv[1], 'Foo', 2.86, 4],
  [gbsuv[0], gbsuv[1], 'Bar', 5, 2],
  [gbtst[0], gbtst[1], 'Baz', 0.50, 1],
  [gbtse[0], gbtse[1], 'Cad', 6.67, 2]
]);

EDIT

the data format for the map visualization does not support geohash

Two data formats are supported:

1. Lat-Long pairs - The first two columns should be numbers designating the latitude and longitude, respectively. An optional third column holds a string that describes the location specified in the first two columns.

2. String address - The first column should be a string that contains an address. This address should be as complete as you can make it. An optional second column holds a string that describes the location in the first column. String addresses load more slowly, especially when you have more than 10 addresses.

however, you could decode the geohash using a library such as...

latlon-geohash.js

calling the function --> Geohash.decode(geohash)
will return an object with properties for lat and lon 

var gbsuv = Geohash.decode('gbsuv');

data.addRows([
   [gbsuv.lat, gbsuv.lon, 'Foo', 2.86, 4],
   ...
]);

Upvotes: 2

Related Questions