Geek Answers Handbook

GeoChart: Tokens load very slowly

google.charts.load('current', {'packages':['geochart']}); google.charts.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var query = new google['visualization'].Query('https://docs.google.com/spreadsheets/d/____&headers=1&range=A1:B') query.send(handleQueryResponseTR); } function handleQueryResponseTR(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var options = { region: 'world', displayMode: 'markers', sizeAxis: { minValue: 0, maxValue: 5 }, colorAxis: { colors: ['#fff', '#000'] }, legend: 'none' }; var data = response.getDataTable(); var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors')); chart.draw(data, options); };

The spreadsheet has the format:

  Country Value XX XX XX XX

There are approximately 40 entries (40 different countries). Everything works, but the map loads the markers one by one, and it takes about 30 seconds to load them. Why is it so slow? It’s not a fact that he downloads them from Google Sheets, even when hardcoded, the download time is the same.

JSFIDDLE

+2
google-visualization
source share
1 answer

when in marker format format , using latitude and longitude seems to work best ...

loading instantly ...

use the data view to add a country name to the tooltip,

see the following working snippet ...

 google.charts.load('current', { callback: drawRegionsMap, packages: ['geochart'] }); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Lat','Lng','Value','Country'], [41.153332,20.168331,58,'Albania'], [-25.274398,133.775136,28,'Australia'], [40.143105,47.576927,47,'Azerbaijan'], [23.684994,90.356331,52,'Bangladesh'], [-3.373056,29.918886,76,'Burundi'], [12.565679,104.990963,28,'Cambodia'], [56.130366,-106.346771,79,'Canada'], [-35.675147,-71.542969,48,'Chile'], [26.820553,30.802498,7,'Egypt'], [-16.578193,179.414413,127,'Fiji'], [46.227638,2.213749,25,'France'], [51.165691,10.451526,29,'Germany'], [22.396428,114.109497,9,'Hong Kong'], [20.593684,78.96288,119,'India'], [-0.789275,113.921327,35,'Indonesia'], [31.046051,34.851612,41,'Israel'], [41.87194,12.56738,4,'Italy'], [30.585164,36.238414,102,'Jordan'], [-0.023559,37.906193,121,'Kenya'], [29.31166,47.481766,59,'Kuwait'], [33.854721,35.862285,127,'Lebanon'], [55.169438,23.881275,3,'Lithuania'], [23.634501,-102.552784,10,'Mexico'], [9.081999,8.675277,48,'Nigeria'], [30.375321,69.345116,91,'Pakistan'], [31.952162,35.233154,66,'Palestinian Territories'], [12.879721,121.774017,80,'Philippines'], [51.919438,19.145136,242,'Poland'], [25.354826,51.183884,86,'Qatar'], [45.943161,24.96676,35,'Romania'], [61.52401,105.318756,133,'Russia'], [23.885942,45.079162,15,'Saudi Arabia'], [1.352083,103.819836,2,'Singapore'], [48.669026,19.699024,9,'Slovakia'], [35.907757,127.766922,41,'South Korea'], [40.463667,-3.74922,111,'Spain'], [7.873054,80.771797,97,'Sri Lanka'], [-6.369028,34.888822,34,'Tanzania'], [13.443182,-15.310139,129,'Gambia'], [38.963745,35.243322,2,'Turkey'], [23.424076,53.847818,85,'United Arab Emirates'], [55.378051,-3.435973,56,'United Kingdom'], [48.379433,31.16558,97,'Ukraine'], [37.09024,-95.712891,130,'United States'], [6.42375,-66.58973,120,'Venezuela'], [45.1,15.2,20,'Croatia'] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2, { calc: function (dt, row) { return dt.getValue(row, 3) + ': ' + dt.getFormattedValue(row, 2); }, role: 'tooltip', type: 'string' }]); var options = { displayMode: 'markers', }; var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors')); chart.draw(view, options); } 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="geochart-colors"></div>

note: list of lat / lng countries found here → countries.csv

see the following snippet for comparing download times with just the country name ...

 google.charts.load('current', { callback: drawRegionsMap, packages: ['geochart'] }); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Value'], [{v: 'Albania'}, {v: 58}], [{v: 'Australia'}, {v: 28}], [{v: 'Azerbaijan'}, {v: 47}], [{v: 'Bangladesh'}, {v: 52}], [{v: 'Burundi'}, {v: 76}], [{v: 'Cambodia'}, {v: 28}], [{v: 'Canada'}, {v: 79}], [{v: 'Chile'}, {v: 48}], [{v: 'Egypt'}, {v: 7}], [{v: 'Fiji'}, {v: 127}], [{v: 'France'}, {v: 25}], [{v: 'Germany'}, {v: 29}], [{v: 'Hong Kong'}, {v: 9}], [{v: 'India'}, {v: 119}], [{v: 'Indonesia'}, {v: 35}], [{v: 'Israel'}, {v: 41}], [{v: 'Italy'}, {v: 4}], [{v: 'Jordan'}, {v: 102}], [{v: 'Kenya'}, {v: 121}], [{v: 'Kuwait'}, {v: 59}], [{v: 'Lebanon'}, {v: 127}], [{v: 'Lithuania'}, {v: 3}], [{v: 'Mexico'}, {v: 10}], [{v: 'Nigeria'}, {v: 48}], [{v: 'Pakistan'}, {v: 91}], [{v: 'Pakistan Balochistan'}, {v: 55}], [{v: 'Palestine, State of'}, {v: 66}], [{v: 'Philippines'}, {v: 80}], [{v: 'Poland'}, {v: 242}], [{v: 'Qatar'}, {v: 86}], [{v: 'Romania'}, {v: 35}], [{v: 'Russian Federation'}, {v: 133}], [{v: 'Saudi Arabia'}, {v: 15}], [{v: 'Singapore'}, {v: 2}], [{v: 'Slovakia'}, {v: 9}], [{v: 'Korea, Republic of'}, {v: 41}], [{v: 'Spain'}, {v: 111}], [{v: 'Sri Lanka'}, {v: 97}], [{v: 'Tanzania, United Republic of'}, {v: 34}], [{v: 'Gambia'}, {v: 129}], [{v: 'Turkey'}, {v: 2}], [{v: 'United Arab Emirates'}, {v: 85}], [{v: 'United Kingdom'}, {v: 56}], [{v: 'Ukraine'}, {v: 97}], [{v: 'United States'}, {v: 130}], [{v: 'Venezuela, Bolivarian Republic of'}, {v: 120}], [{v: 'Croatia'}, {v: 20}] ]); var options = { displayMode: 'markers', }; var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors')); chart.draw(data, options); } 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="geochart-colors"></div>

EDIT

remove coordinates from the tooltip using the option → tooltip.isHtml: true

 tooltip: { isHtml: true }

and the following css ...

 .google-visualization-tooltip-item:first-child { display: none; visibility: hidden; }

tooltip column should have property for → p: {html: true}

and for some reason column properties are not recognized
when using a data view to draw a chart

to fix, convert the view to a data table before drawing ...
view.toDataTable()

see the following working snippet ...

 google.charts.load('current', { callback: drawRegionsMap, packages: ['geochart'] }); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Lat','Lng','Value','Country'], [41.153332,20.168331,58,'Albania'], [-25.274398,133.775136,28,'Australia'], [40.143105,47.576927,47,'Azerbaijan'], [23.684994,90.356331,52,'Bangladesh'], [-3.373056,29.918886,76,'Burundi'], [12.565679,104.990963,28,'Cambodia'], [56.130366,-106.346771,79,'Canada'], [-35.675147,-71.542969,48,'Chile'], [26.820553,30.802498,7,'Egypt'], [-16.578193,179.414413,127,'Fiji'], [46.227638,2.213749,25,'France'], [51.165691,10.451526,29,'Germany'], [22.396428,114.109497,9,'Hong Kong'], [20.593684,78.96288,119,'India'], [-0.789275,113.921327,35,'Indonesia'], [31.046051,34.851612,41,'Israel'], [41.87194,12.56738,4,'Italy'], [30.585164,36.238414,102,'Jordan'], [-0.023559,37.906193,121,'Kenya'], [29.31166,47.481766,59,'Kuwait'], [33.854721,35.862285,127,'Lebanon'], [55.169438,23.881275,3,'Lithuania'], [23.634501,-102.552784,10,'Mexico'], [9.081999,8.675277,48,'Nigeria'], [30.375321,69.345116,91,'Pakistan'], [31.952162,35.233154,66,'Palestinian Territories'], [12.879721,121.774017,80,'Philippines'], [51.919438,19.145136,242,'Poland'], [25.354826,51.183884,86,'Qatar'], [45.943161,24.96676,35,'Romania'], [61.52401,105.318756,133,'Russia'], [23.885942,45.079162,15,'Saudi Arabia'], [1.352083,103.819836,2,'Singapore'], [48.669026,19.699024,9,'Slovakia'], [35.907757,127.766922,41,'South Korea'], [40.463667,-3.74922,111,'Spain'], [7.873054,80.771797,97,'Sri Lanka'], [-6.369028,34.888822,34,'Tanzania'], [13.443182,-15.310139,129,'Gambia'], [38.963745,35.243322,2,'Turkey'], [23.424076,53.847818,85,'United Arab Emirates'], [55.378051,-3.435973,56,'United Kingdom'], [48.379433,31.16558,97,'Ukraine'], [37.09024,-95.712891,130,'United States'], [6.42375,-66.58973,120,'Venezuela'], [45.1,15.2,20,'Croatia'] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2, { calc: function (dt, row) { return '<div><span>' + dt.getValue(row, 3) + '</span>: ' + dt.getFormattedValue(row, 2) + '</div>'; }, role: 'tooltip', type: 'string', p: {html: true} }]); var options = { displayMode: 'markers', tooltip: { isHtml: true } }; var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors')); chart.draw(view.toDataTable(), options); } 
 .google-visualization-tooltip-item:first-child { display: none; visibility: hidden; } .google-visualization-tooltip-item span { font-weight: bold; } 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="geochart-colors"></div>
+1
source share

More articles:


All Articles