problem in displaying map and pie chart
107 views
Skip to first unread message
sk
Jun 22, 2012, 5:14:08 AM6/22/12
to google-visua...@googlegroups.com
hi i'm trying to display map as,when i click on state ,that state details should display in another window in chart format(pie and column )
the thing is i'm displaying map and chart individually,but i want to cal that chart file in map file,please help i'm new to this .my code is
code for charts:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>sezs in india</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(init);
function init() {
drawChart('Andhra Pradesh');
}
function drawChart(state) {
var queryP = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0ArFGfpB6duBGdFpSa2s0TEliUlVBVWdDbEs2N0ttNnc#gid=0');
queryP.setQuery('SELECT * WHERE A = "' + state + '"'); // column A is State
queryP.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var baseData = response.getDataTable();
var dataP = new google.visualization.DataTable();
dataP.addColumn('string', baseData.getColumnLabel(0));
dataP.addColumn('number', 'Value');
for (var i = 1; i < baseData.getNumberOfColumns(); i++) {
dataP.addRow([baseData.getColumnLabel(i), baseData.getValue(0, i)]);
}
var chart1 = new google.visualization.PieChart(document.getElementById('pie_div'));
chart1.draw(dataP, {
title: baseData.getValue(0, 0),'is3D': true
});
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataP, {'isStacked': true, 'legend': 'bottom'});
}
</script>
</head>
<body>
<table >
<tr>
<td>
<div id="chart_div" style="align: center; width: 700px; height: 400px;"></div>
</td>
<td>
<div id="pie_div" style="align: center; width: 700px; height: 300px;"></div>
</td>
</tr>
</table>
</body>
</html>
code for map:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:800px; height:800px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(21.7679,78.8718),
zoom: 5
});
var style = [
{
featureType: 'road.highway',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.arterial',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.local',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.country',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'administrative.locality',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'administrative.neighborhood',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'administrative.land_parcel',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'poi',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'transit',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: '4070871'
},
map: map
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'geometry'",
from: 4070871,
where: "'Type' = '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Sector</label>
<select id="search-string-l0" onchange="changeMapl0(this.value);">
<option value="">--Sector--</option>
<option value="Formally Approved">Formally Approved</option>
<option value="In-Principle Approved">In-Principle Approved</option>
<option value="Operational">Operational</option>
<option value="in-Principle Approved">in-Principle Approved</option>
</select>
</div>
</body>
</html>
the thing is i'm displaying map and chart individually,but i want to cal that chart file in map file,please help i'm new to this .my code is
code for charts:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>sezs in india</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(init);
function init() {
drawChart('Andhra Pradesh');
}
function drawChart(state) {
var queryP = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0ArFGfpB6duBGdFpSa2s0TEliUlVBVWdDbEs2N0ttNnc#gid=0');
queryP.setQuery('SELECT * WHERE A = "' + state + '"'); // column A is State
queryP.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var baseData = response.getDataTable();
var dataP = new google.visualization.DataTable();
dataP.addColumn('string', baseData.getColumnLabel(0));
dataP.addColumn('number', 'Value');
for (var i = 1; i < baseData.getNumberOfColumns(); i++) {
dataP.addRow([baseData.getColumnLabel(i), baseData.getValue(0, i)]);
}
var chart1 = new google.visualization.PieChart(document.getElementById('pie_div'));
chart1.draw(dataP, {
title: baseData.getValue(0, 0),'is3D': true
});
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataP, {'isStacked': true, 'legend': 'bottom'});
}
</script>
</head>
<body>
<table >
<tr>
<td>
<div id="chart_div" style="align: center; width: 700px; height: 400px;"></div>
</td>
<td>
<div id="pie_div" style="align: center; width: 700px; height: 300px;"></div>
</td>
</tr>
</table>
</body>
</html>
code for map:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:800px; height:800px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(21.7679,78.8718),
zoom: 5
});
var style = [
{
featureType: 'road.highway',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.arterial',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.local',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.country',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'administrative.locality',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'administrative.neighborhood',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'administrative.land_parcel',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'poi',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'transit',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: '4070871'
},
map: map
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'geometry'",
from: 4070871,
where: "'Type' = '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Sector</label>
<select id="search-string-l0" onchange="changeMapl0(this.value);">
<option value="">--Sector--</option>
<option value="Formally Approved">Formally Approved</option>
<option value="In-Principle Approved">In-Principle Approved</option>
<option value="Operational">Operational</option>
<option value="in-Principle Approved">in-Principle Approved</option>
</select>
</div>
</body>
</html>
asgallant
Jun 22, 2012, 10:28:30 AM6/22/12
to google-visua...@googlegroups.com
Copy all of the <script> tags (and the javascript they contain) from the chart page's code to the <head> of the map page's code. Then copy the two chart <div> tags (chart_div and pie_div) from the chart page to the <body> of the map page. That should get them displaying in the same page.
I'm not very familiar with the google maps API, but here's the results of a similar problem I helped someone else in the forum with: http://jsfiddle.net/asgallant/G5Bga/9/ (read the original thread here). The code is rather complicated there, but it is set up to allow interaction between the map and charts.
Reply all
Reply to author
Forward
0 new messages