谷歌融合表的PieChart / Listener事件(PieChart / Listener event of a google fusion table)

 我有一个包含两列的融合表（'TOTAL_ROOF'和'POTENTIAL_'）。 'POTENTIAL_'是'TOTAL_ROOF'的子集。 
 
 现在我是： 
 
 1）显示由用户“点击”确定的格式化行数据 
 
 2）尝试绘制一个PieChart即：drawVisualization.PieChart（e.row ['TOTAL_ROOF'，“POTENTIAL _']。value）; 
 
 我已经获得了＃1的工作......然而，对于＃2我有点迷失了...我看到的所有例子都显示PieChart已经被用户点击任何东西之前已经创建了。 
 
 有没有办法在点击后创建PieChart？ 将空间留空（直到＃1）？ 
 
 另外，我没有看到如何在我的文本框中调用它（例如： http ： //jsfiddle.net/fG5a5/1/ ）。 
 
 这是我到目前为止的代码： 
 
 加载库： 
 
google.load('maps', '3.5', {other_params:'sensor=false'});
google.load('jquery', '1.6.0');
google.load('visualization', '1', {packages:["corechart"]});
google.load('jqueryui', '1.8.12');
 
 JS 
 
var tableid = 1DGswslbC5ijqWHPJvOH1NH7vltkZIPURJun_L5I;
var location_column = 'geometry'

  function drawVisualization() {
    google.visualization.drawChart({
    "chartType": "PieChart"

    })};
      // Draw Visualization of WHAT (the event listener has not been triggered??)

      function initialize() {

      google.maps.event.addListener(layer, 'click', function(e) {
      $("#roof-panel-area").html(
  '<p><strong>Total Roof Area (sqft)</strong>: ' + '&nbsp;&nbsp;' + 
      Math.round(e.row['TOTAL_ROOF'].value) + 
  '<br><strong> Potential Roof Area (sqft)</strong>:' + '&nbsp;&nbsp;' 
       +  Math.round(e.row['POTENTIAL_'].value) + 
  '<br><strong> Pitched or Flat Roof (?)</strong>:'+ '&nbsp;&nbsp;' +     
       e.row['PITCHED_OR'].value + 
  '<br><strong> # of Panels per Roof Area :</strong>' + '&nbsp;&nbsp;' + 
       Math.round(e.row['NUMBER_OF_'].value) + '</p>');
   });

   // Click Listener on layer using jquery  , searches for fields related to 
 // roof/panel, 

   google.maps.event.addListener(layer, 'click', function(e) {
  drawVisualization.PieChart(e.row['TOTAL_ROOF','POTENTIAL_'].value);
        });
   // Click Listener - updates graph        

    layer.setMap(map);
 }
 
 HTML： 
 
<div id="sidebarItem">
    <br>
    <h1> Hatfield Solar Map</h1>
    <!---Create a text box input for the user to enter the street address-->
    Address: <input type="text" id="inputTextAddress" style=" width:200px" title="Address to Geocode" />
    <!--Create a button input for the user to click to geocode the address-->
    <input type="button" onclick="codeAddress()" id="inputButtonGeocode" style="width:200px" title="Click to Find Address" value="Click to Find Address" />
    <h3>Select a building outline or search for an address to identify buildings that you'd like to select.</h3>
    <!---Content from Click-->
    <hr/>
    <div id="sidebar-content-area" style="padding:5px;">
        <div id="intro" style="text-align: center; margin-top: 20px; display: none;">
            <p><i>Buildings are symbolized according to roof size, and the possibility of increased panel placement.</i><p>
        </div>
    <div id="overview" style:"">
        <h3>Building Overview:</h3>
    <p id ="roof-panel-area"></p>
    </div>
</div>

I have a fusion table with two columns ('TOTAL_ROOF' & 'POTENTIAL_'). 'POTENTIAL_' is a subset of 'TOTAL_ROOF'.
 
Right now I am:
 
1) Showing formated row data determined by the users 'click'
 
2) trying to draw a PieChart i.e.: drawVisualization.PieChart(e.row['TOTAL_ROOF', "POTENTIAL_'].value);
 
I've gotten #1 to work... However, for #2 I am a bit lost on what to do...all the examples I see show the PieChart already being created BEFORE the user has clicked anything.
 
Is there a way to create the PieChart after the click? Leaving the space blank until (like it is for #1)?
 
Also I don't see how to call it in a into my text-box (ex: http://jsfiddle.net/fG5a5/1/).
 
Here is my code so far:
 
load libraries:
 
google.load('maps', '3.5', {other_params:'sensor=false'});
google.load('jquery', '1.6.0');
google.load('visualization', '1', {packages:["corechart"]});
google.load('jqueryui', '1.8.12');
 
js
 
var tableid = 1DGswslbC5ijqWHPJvOH1NH7vltkZIPURJun_L5I;
var location_column = 'geometry'

  function drawVisualization() {
    google.visualization.drawChart({
    "chartType": "PieChart"

    })};
      // Draw Visualization of WHAT (the event listener has not been triggered??)

      function initialize() {

      google.maps.event.addListener(layer, 'click', function(e) {
      $("#roof-panel-area").html(
  '<p><strong>Total Roof Area (sqft)</strong>: ' + '&nbsp;&nbsp;' + 
      Math.round(e.row['TOTAL_ROOF'].value) + 
  '<br><strong> Potential Roof Area (sqft)</strong>:' + '&nbsp;&nbsp;' 
       +  Math.round(e.row['POTENTIAL_'].value) + 
  '<br><strong> Pitched or Flat Roof (?)</strong>:'+ '&nbsp;&nbsp;' +     
       e.row['PITCHED_OR'].value + 
  '<br><strong> # of Panels per Roof Area :</strong>' + '&nbsp;&nbsp;' + 
       Math.round(e.row['NUMBER_OF_'].value) + '</p>');
   });

   // Click Listener on layer using jquery  , searches for fields related to 
 // roof/panel, 

   google.maps.event.addListener(layer, 'click', function(e) {
  drawVisualization.PieChart(e.row['TOTAL_ROOF','POTENTIAL_'].value);
        });
   // Click Listener - updates graph        

    layer.setMap(map);
 }
 
html:
 
<div id="sidebarItem">
    <br>
    <h1> Hatfield Solar Map</h1>
    <!---Create a text box input for the user to enter the street address-->
    Address: <input type="text" id="inputTextAddress" style=" width:200px" title="Address to Geocode" />
    <!--Create a button input for the user to click to geocode the address-->
    <input type="button" onclick="codeAddress()" id="inputButtonGeocode" style="width:200px" title="Click to Find Address" value="Click to Find Address" />
    <h3>Select a building outline or search for an address to identify buildings that you'd like to select.</h3>
    <!---Content from Click-->
    <hr/>
    <div id="sidebar-content-area" style="padding:5px;">
        <div id="intro" style="text-align: center; margin-top: 20px; display: none;">
            <p><i>Buildings are symbolized according to roof size, and the possibility of increased panel placement.</i><p>
        </div>
    <div id="overview" style:"">
        <h3>Building Overview:</h3>
    <p id ="roof-panel-area"></p>
    </div>
</div>

原文：https://stackoverflow.com/questions/16270726