PieChart's data format<https://developers.google.com/chart/interactive/docs/gallery/piechart#Data_Format>is different from ColumnChart's data format<https://developers.google.com/chart/interactive/docs/gallery/columnchart#Data_Format>. You'll need to either create a new DataTable, or use a DataView to adapt.
On Tue, May 29, 2012 at 11:10 PM, es <[email protected]> wrote: > 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. > > -- 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.
