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<https://groups.google.com/d/msg/google-visualization-api/g7Qors2iaJg/9ERKP0W1RhcJ>). The code is rather complicated there, but it is set up to allow interaction between the map and charts. On Friday, June 22, 2012 5:14:08 AM UTC-4, sk wrote: > > 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> > -- 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/-/9BK3DP2C1pIJ. 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.
