Hi, I have been working with some code which I modifed from https://developers.google.com/fusiontables/docs/samples/adv_fusiontables
I've eliminated code which isn't needed. It functions as a "column chart", but when I change this to a "pie chart" the pie only displays the first column of data (I am using four columns of data) and reads it as 100%. My fusion table is located at: https://www.google.com/fusiontables/DataSource?docid=1EBnmpo78yOktZvEmYNJ8L-W0vwYzIWxtxsky7HM My modified html code is below: <html> <head> <meta charset="UTF-8"> <title>Fusion Tables API Example: Advanced Visualization</title> <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script type="text/javascript" src="http://maps.googleapis.com/maps/ api/js?v=3.7&sensor=false"></script> <link href="/apis/fusiontables/docs/samples/style/default.css" rel="stylesheet" type="text/css"> <style type="text/css"> #map-canvas { width: 100%; } #visualization { float: 100%; } #legend { background: #FFF; margin: 10px; padding: 5px; width: 150px; } #legend p { font-weight: bold; margin-top: 3px; } #legend div { clear: both; } .color { height: 12px; width: 12px; margin-right: 3px; float: left; display: block; } </style> <script type="text/javascript"> google.load('visualization', '1', { packages: ['corechart'] }); /** * Sector type mapped to a style rule. * @type {Object} * @const */ // This variable is not being called out anywhere in the code: //var LAYER_STYLES = { //'Total': { //'min': 0, //'max': 300, //'colors': [ //'#f4cccc', //'#ea9999', //'#e06666', //'#cc0000', //'#990000' //] //} //} function initialize() { var sector = 'Total'; var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(38.099983,-80.683594), zoom: 7, mapTypeId: google.maps.MapTypeId.TERRAIN, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE }, }); var layer = new google.maps.FusionTablesLayer(); updateLayerQuery(layer); layer.setMap(map); styleMap(map); drawVisualization('Bear Branch'); google.maps.event.addListener(layer, 'click', function(e) { var Site = e.row['Site'].value; drawVisualization(Site); }); google.maps.event.addDomListener(document.getElementById('Site'),'change', function() { var Site = this.value; updateLayerQuery(layer, Site); drawVisualization(Site); }); } // Update the query sent to the Fusion Table Layer based on // the user selection in the select menu function updateMap(layer, tableId, locationColumn) { var delivery = document.getElementById('delivery').value; if (delivery) { layer.setOptions({ query: { select: 'Site', from: '3235688', //where: "delivery = '" + delivery + "'" } }); } else { layer.setOptions({ query: { select: locationColumn, from: tableId } }); } } function updateLayerQuery(layer) { layer.setOptions({ query: { select: 'Site', from: '3235688', } }); } function styleMap(map) { var style = [{ featureType: 'all', stylers: [{ saturation: -99 }] }, { featureType: 'poi', stylers: [{ visibility: 'off' }] }, { featureType: 'road', 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'); } function drawVisualization(Site) { google.visualization.drawChart({ containerId: "visualization", dataSourceUrl: "http://www.google.com/fusiontables/gvizdata? tq=", query: "SELECT Site, BCDEP_95, + BCW_MAGIC, BCUP_AVG, NUP_AVG " + "FROM 3235688 WHERE Site = '" + Site + "'", chartType: "PieChart", options: { title: Site, height: 400, width: 400 } }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> <div id="map" style="width: 525px; height: 425px; float:left; border: 1px solid black;"></div> <div id="visualization"></div> <form> <option value="Total">Site</option> </select> <label>Name</label> <select id="Site"> <option value="Bear Branch">Bear Branch</option> <option value="Bearpen Branch">Bearpen Branch</option> <option value="Bearwallow Run">Bearwallow Run</option> <option value="Beech Lick Run">Beech Lick Run</option> <option value="Belfast Creek">Belfast Creek</option> <option value="Big Hellcat Creek">Big Hellcat Creek</option> <option value="Big Mack Creek">Big Mack Creek</option> <option value="Black Run (Lower)">Black Run (Lower)</option> <option value="Brokenback Run">Brokenback Run</option> <option value="Buffalo Creek">Buffalo Creek</option> <option value="Butler Branch">Butler Branch</option> <option value="Clubhouse Run (Lower)">Clubhouse Run (Lower)</option> <option value="Clubhouse Run (Upper)">Clubhouse Run (Upper)</option> <option value="Coal Run (SAMI)">Coal Run (SAMI)</option> <option value="Coal Run">Coal Run</option> <option value="Condon Run">Condon Run</option> <option value="Cove Branch (1)">Cove Branch (1)</option> <option value="Cove Branch (2)">Cove Branch (2)</option> <option value="Crawford Run">Crawford Run</option> <option value="Deep Run">Deep Run</option> <option value="Elk Run">Elk Run</option> <option value="Fernow - WS10">Fernow - WS10</option> <option value="Fernow - WS13">Fernow - WS13</option> <option value="Fernow - WS4">Fernow - WS4</option> <option value="Fisher Spring Run">Fisher Spring Run</option> <option value="Gauley">Gauley</option> <option value="German River (Upper)">German River (Upper)</option> <option value="Hateful Run">Hateful Run</option> <option value="Hazel Run">Hazel Run</option> <option value="Hedricks Creek">Hedricks Creek</option> <option value="Hipes Branch">Hipes Branch</option> <option value="Hogback Branch">Hogback Branch</option> <option value="Johnson Run">Johnson Run</option> <option value="Laurel Br of Stony Cr">Laurel Br of Stony Cr</option> <option value="Laurel Run (4)">Laurel Run (4)</option> <option value="Laurel Run (5)">Laurel Run (5)</option> <option value="Laurel Run">Laurel Run</option> <option value="Left Fork Clover Run">Left Fork Clover Run</option> <option value="Lewis Fork">Lewis Fork</option> <option value="Little Cove Creek">Little Cove Creek</option> <option value="Little Hellgate Creek">Little Hellgate Creek</option> <option value="Little Mill Creek">Little Mill Creek</option> <option value="Little Stonecoal Run">Little Stonecoal Run</option> <option value="Little Stony Cr (L)">Little Stony Cr (L)</option> <option value="Little Tumbling Creek">Little Tumbling Creek</option> <option value="Little Walker Cr">Little Walker Cr</option> <option value="Lost Run">Lost Run</option> <option value="Mare Run">Mare Run</option> <option value="Matts Creek">Matts Creek</option> <option value="Meadow Run">Meadow Run</option> <option value="Moss Run">Moss Run</option> <option value="NF Stony Creek">NF Stony Creek</option> <option value="NNT Glade Creek">NNT Glade Creek</option> <option value="No Business Creek">No Business Creek</option> <option value="NoName Trib Gap Cr">NoName Trib Gap Cr</option> <option value="NoName Trib SF Chry R">NoName Trib SF Chry R</option> <option value="NoName Trib Stny Cr 1">NoName Trib Stny Cr 1</option> <option value="Noname Trib Stny Cr 2">Noname Trib Stny Cr 2</option> <option value="North Fork Cherry (L)">North Fork Cherry (L)</option> <option value="North Fork Cherry (U)">North Fork Cherry (U)</option> <option value="North Fork Dry Run">North Fork Dry Run</option> <option value="North River">North River</option> <option value="NTN Laurel Run">NTN Laurel Run</option> <option value="Otter Creek (Upper)">Otter Creek (Upper)</option> <option value="Otter Creek">Otter Creek</option> <option value="Paine Run">Paine Run</option> <option value="Panther Run">Panther Run</option> <option value="Pine Swamp Branch">Pine Swamp Branch</option> <option value="Porters Creek">Porters Creek</option> <option value="Raccoon Branch">Raccoon Branch</option> <option value="Ragged Run">Ragged Run</option> <option value="Ramseys Draft">Ramseys Draft</option> <option value="Red Creek">Red Creek</option> <option value="Right Fork Clover Run">Right Fork Clover Run</option> <option value="Roaring Fork (Lower)">Roaring Fork (Lower)</option> <option value="Roaring Fork (Upper)">Roaring Fork (Upper)</option> <option value="Rose River">Rose River</option> <option value="Shawvers Run">Shawvers Run</option> <option value="St. Marys R (Lower)">St. Marys R (Lower)</option> <option value="St. Marys R (Middle)">St. Marys R (Middle)</option> <option value="Staunton River">Staunton River</option> <option value="Stonecoal Run (R Br)">Stonecoal Run (R Br)</option> <option value="Sugartree Branch SMR">Sugartree Branch SMR</option> <option value="Sulphur Spring Creek">Sulphur Spring Creek</option> <option value="Thunderstruck Creek">Thunderstruck Creek</option> <option value="Two Mile Run 2">Two Mile Run 2</option> <option value="Unnamed 1">Unnamed 1</option> <option value="Unnamed 2">Unnamed 2</option> <option value="White Oak Canyon R">White Oak Canyon R</option> <option value="White Oak Fork">White Oak Fork</option> <option value="White Oak Run">White Oak Run</option> <option value="Wolf Run">Wolf Run</option> </select> </form> </body> </html> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. 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.
