how to create slideshow of the geoMap and geoCharts

mrishadali

unread,

Jun 6, 2012, 8:50:06 AM6/6/12

to google-visua...@googlegroups.com

Hi,

I am using geoMaps and geoCharts to show intensity of something within particular areas and I want to show these maps and charts in a slide show. Like we show some images in a slideshow.

Is it possible to create a slide show of the div tags in html? Or is there any other way??

GeoMap and geoCharts are in div tags.

Please help !!!

asgallant

unread,

Jun 6, 2012, 10:00:04 AM6/6/12

to google-visua...@googlegroups.com

Yes, you can do this. There are a number of ways to do so, but the simplest would be something like this:

/*  assumes:
*   charts is an array of ChartWrappers, containing all of the charts in the slideshow
*   nextSlide is a DOM element that, when clicked, advances to the next slide
*
*  hide all but the first chart
*/
for (var i = 1; i < charts.length; i++) {
  google.visualization.events.addListener(charts[i], 'ready', (function(x) {
  return function() {
  var id = charts[x].getContainerId();
  document.getElementById(id).style.display = 'none';
  }
  })(i));
  charts[i].draw();
}

var currentSlide = 0;
nextSlide.onclick = function() {
  if (currentSlide < charts.length - 1) {
  var id = charts[currentSlide].getContainerId();
  document.getElementById(id).style.display = 'none';
  currentSlide++;
  var id = charts[currentSlide].getContainerId();
  document.getElementById(id).style.display = 'block';
  }
  else {
  alert('End of slide show');

Message has been deleted

mrishadali

unread,

Jun 7, 2012, 7:06:50 AM6/7/12

to google-visua...@googlegroups.com

Hi asgallant,

Thanks again for the reply. ChartWrapper array was very useful. I've managed to do it with chart wrapper, I wanted to add the next and the previous buttons and the slide show automatically so I did this...

<!DOCTYPE html>

<head>

<title>Charts</title>

<!--

body {

color:#000000;

background-color:#FFFFFF;

}

a { color:#0000FF; }

a:visited { color:#800080; }

a:hover { color:#008000; }

a:active { color:#FF0000; }

-->

</style>

google.load('visualization', '1', {'packages': ['geomap','geochart']});

google.setOnLoadCallback(drawVisualization);

var charts = new Array();

var currentSlide=0;

var changeTime = 10000;

function drawVisualization() {

//Create a dataTable to be drawn on the Chart

var data = google.visualization.arrayToDataTable([

['City', 'Values'],

['Leicester', 25.9],

['Rudheath', 17.6],

['London', 48.2],

['Northwich', 51.3],

['Derby', 21.8],

['Croydon', 18.9]

]);

//Set another dataTable to be drawn on the Chart

var data1 = google.visualization.arrayToDataTable([

['Country', 'Popularity'],

['Germany', 200],

['United States', 300],

['Brazil', 400],

['Canada', 500],

['France', 600],

['RU', 700]

]);

//Create a geoMap into chartWrapper object

charts[0] = new google.visualization.ChartWrapper({

chartType: 'GeoMap',

dataTable: data1,

options: {

showLegend: true,

width: 800,

height: 400,

backgroundColor: '#E0F2F7',

dataMode: 'regions'

},

containerId: 'visualization'

});

//Create a geoChart into chartWrapper object

charts[1] = new google.visualization.ChartWrapper({

chartType: 'GeoChart',

dataTable: data,

options: {

showLegend: true,

region: 'GB',

displayMode: 'markers',

width: 800,

height: 400,

backgroundColor: '#E0F2F7',

colorAxis: {colors: ['green','yellow','red']}

},

containerId: 'visualization'

});

//Create a geoChart into chartWrapper object

charts[2] = new google.visualization.ChartWrapper({

chartType: 'GeoChart',

dataTable: data1,

options: {

showLegend: true,

width: 800,

height: 400,

backgroundColor: '#E0F2F7',

},

containerId: 'visualization'

});

//Create a geoMap into chartWrapper object

charts[3] = new google.visualization.ChartWrapper({

chartType: 'GeoMap',

dataTable: data,

options: {

showLegend: true,

region: 'GB',

width: 800,

height: 400,

backgroundColor: '#E0F2F7',

colors: [0xFFFFFF,0x000000],

dataMode: 'markers'

},

containerId: 'visualization'

});

//Draw the first slide

drawNext();

}

//Draws the next slide of the geoChart

function drawNext()

{

//Check the current slide is less then total length of the array

//if yes then increament the currentslide.

if(currentSlide<(charts.length-1)){currentSlide++;}

//set current slide = 0 otherwise

else{currentSlide=0;}

//Draw the slide

charts[currentSlide].draw();

//Set timeout to change outmetically

setTimeout("drawNext()",changeTime);

}

//Draws the previous slide of the geoChart

function drawPrevious()

{

//Check if the current slide is greater than zero

//If yes then decreament the currentSlide

if(currentSlide>0){currentSlide--;}

//otherwise set it to the maximum

else{currentSlide=(charts.length-1);}

//Draw the slide

charts[currentSlide].draw();

//Set timeout to change outmetically

setTimeout("drawNext()",changeTime);

}

</script>

</head>

<body>

<tr>

</body>

</html>

This is working fine when you do not click the buttons but when you click the button it multiplies its speed to change the slide.

drawNext() is the recursive function which works fine when you do not click the buttons but I don't understand what is the reason and how to fix it.

Thanks in advance

mrishadali

unread,

Jun 7, 2012, 7:25:09 AM6/7/12

to google-visua...@googlegroups.com

And also is there any way to show the country/city names and on the geoMap/geoChart. The tooltip is fine but I wanted the names of places on the geomap/geochart as well.

Thanks

asgallant

unread,

Jun 7, 2012, 10:44:39 AM6/7/12

to google-visua...@googlegroups.com

To answer your second question first, no you can't add names to the map.

To answer the first, what is happening is that every time you click a button, a new wave of "drawNext" recursive calls is generated. If you click a button once, 5 seconds after the charts change, the first instance of the "drawNext" recursive function continues, and the chart redraws 5 seconds later (and again, 5 seconds after that). You'll have to clear the old setTimeout call before making a new one; something like this: http://jsfiddle.net/gZ3t8/1/

Note that the code I gave probably has a bug, where it fails to clear some chains if the user clicks a button a second time within the changeTime period. Also, there appears to be a memory leak (or something similar) when the GeoMaps get drawn; as the loop iterates multiple times, the loading times of the GeoMaps get longer and longer. You may need to switch to a different approach (either change the GeoMaps to GeoCharts [generally recommended, as GeoMaps are deprecated] or draw all the charts once, hiding and showing them instead of redrawing).

mrishadali

unread,

Jun 7, 2012, 11:40:38 AM6/7/12

to google-visua...@googlegroups.com

That is great...

You solved the problem.

Thanks a million again :)

On Wednesday, June 6, 2012 1:50:06 PM UTC+1, mrishadali wrote:

Reply all

Reply to author

Forward