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...
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Charts</title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
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>
<table align="center" width="900">
<tr>
<td align="right" WIDTH="10%"><input type="image" src="./previous.png"
onclick="javascript: drawPrevious()" height="60px" width="50px"></td>
<td align="center" WIDTH="80%"><div id='visualization'></div></td>
<td align="left" WIDTH="10%"><input type="image" src="./next.png"
onclick="javascript: drawNext()" height="60px" width="50px"><td>
</body>
</html>
</code>
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
On Wednesday, June 6, 2012 1:50:06 PM UTC+1, mrishadali wrote:
>
> 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 !!!
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/MN-WM6Q-NVEJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
