Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I speed up the drawing of markers in region mode of a Google Geochart?

We have a scenario where we wish to plot a large number (possibly up to 100 or 200) of markers on a Google Geochart. When plotting markers the chart seems to plot these over a period of time which we feel takes too long for our users. We would like to either have them display instantly or at least quicker.

I don't seem to be any to find any documentation to indicate that this is configurable, so is there a way to speed this up at all?

I have included example code below to replicate this which can be run in the visualization playground.

    function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['City', 'Count'],
['London',245],
['Manchester',58],
['Birmingham',54],
['Stoke-on-trent',30],
['Leicester',26],
['Liverpool',25],
['Nottingham',19],
['Preston',18],
['Glasgow',15],
['Leeds',14],
['West Bromwich',13],
['Sheffield',11],
['Cardiff',8],
['Wigan',8],
['Wolverhampton',8],
['Bolton',7],
['Bradford',7],
['Edinburgh',7],
['Telford',7],
['Warrington',7],
['Romford',6],
['Stockport',6],
['Swansea',6],
['Burnley',5],
['Coventry',5],
['Dagenham',5],
['Ipswich',5],
['Milton Keynes',5],
['Newcastle Upon Tyne',5],
['Northampton',5],
['Birkenhead',4],
['Blackburn',4],
['Burton-on-trent',4],
['Croydon',4],
['Durham',4],
['Reading',4],
['Rotherham',4],
['Saint Helens',4],
['Stafford',4],
['Stevenage',4],
['Sunderland',4],
['Accrington',3],
['Ashford',3],
['Bangor',3],
['Barrow',3],
['Blackpool',3],
['Bristol',3],
['Bury',3],
['Cambridge',3],
['Chesterfield',3],
['Chorley',3],
['Dundee',3],
['Heywood',3],
['Ilford',3],
['Lancaster',3],
['Luton',3],
['Mansfield',3],
['Newport',3],
['Oldbury',3],
['Oldham',3],
['Plymouth',3],
['Sale',3],
['Slough',3],
['Southend-on-sea',3],
['Stratford-upon-avon',3],
['Aylesbury',2],
['Bedford',2],
['Brighton',2],
['Caerphilly',2],
['Cannock',2],
['Canterbury',2],
['Carshalton',2],
['Chatham',2],
['Chelmsford',2],
['Cheltenham',2],
['Chester',2],
['Corby',2],
['Crawley',2],
['Crumlin',2],
['Cwmbran',2],
['Exeter',2],
['Folkestone',2],
['Gravesend',2],
['Guildford',2],
['Halesowen',2],
['Harrow',2],
['Huddersfield',2],
['Isleworth',2],
['Lichfield',2],
['Lincoln',2],
['Mitcham',2],
['Oxford',2],
['Peterborough',2],
['Rawtenstall',2],
['Rochdale',2],
['Scunthorpe',2],
['Solihull',2],
['South Shields',2]

  ]);

  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, {width: 556, height: 347, region: 'GB', displayMode: 'markers', legend:'none'});
}
like image 738
rrrr-o Avatar asked Oct 02 '12 09:10

rrrr-o


2 Answers

This is because Google is performing quite slowly the conversion of your location into longitude/latitude ; you should resolve them once for all and use them directly (Markers mode format).

like image 147
Marc Polizzi Avatar answered Nov 20 '22 05:11

Marc Polizzi


Here's an example on how to use lat/long and place a info tooltip:

http://jsfiddle.net/cmoreira/njB6m/

 data.addColumn('number', 'Lat');                                
 data.addColumn('number', 'Long');
 data.addColumn('string','tooltip');
 data.addColumn('number','Example');                                 

data.addRows([[41.151636,-8.569336,'Portugal',{v:0,f:'test PT'}]]);
data.addRows([[ 39.059575,-98.789062,'USA',{v:1,f:'test US'}]]);
like image 45
CMoreira Avatar answered Nov 20 '22 05:11

CMoreira