從融合表製作ColumnChart的問題

Question

我想創建一個基於點擊（使用我的google.maps.event.addListener（））從兩行（POTENTIAL_和TOTAL_ROOF）數據的柱形圖。

所以基本上一行數據將顯示在圖表上 - 基於用戶的點擊。

任何人都可以幫助我擺脫雜草嗎？ ....

我融合表是在這裏：https://www.google.com/fusiontables/DataSource?docid=1DGswslbC5ijqWHPJvOH1NH7vltkZIPURJun_L5I#rows:id=1

js函數1：

google.load('visualization', '1', {packages: ['corechart']}); 

function drawVisualization() { 
    var queryText = encodeURIComponent("SELECT POTENTIAL_, TOTAL_ROOF, BLDG_ID FROM 1DGswslbC5ijqWHPJvOH1NH7vltkZIPURJun_L5I"); 
    google.visualization.drawChart({ 
    "containerId" : "visualization_div", 
    "dataSourceUrl" : 'https://www.google.com/fusiontables/DataSource?docid=', 
    "query" : "SELECT POTENTIAL_, TOTAL_ROOF FROM 1DGswslbC5ijqWHPJvOH1NH7vltkZIPURJun_L5I", 
    "chartType" : "ColumnChart" 
    })}; 

JS功能2：

// Function call: Click Listener on layer using jquery 
      google.maps.event.addListener(layer, 'click', function(e, drawVisualization) { 
      $("#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>'); 
      }); 

     layer.setMap(map); 

HTML：

<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 id = "visualization_div"></div> 
</div> 

Answer 1

你的dataSourceUrl是使用錯誤的端點。

如果我使用'http://www.google.com/fusiontables/gvizdata?tq='（而不是'https://www.google.com/fusiontables/DataSource?docid='），我至少得到一個圖表。

Fusion Tables info on creating a chart from FusionTables data

Working example

Answer 2

真棒。謝謝！這就是答案：

js函數1：

function drawVisualization(e) { 

     var data = google.visualization.arrayToDataTable([ 
      ['Area', 'Potential', 'Total'], 
      ['Building', Math.round(e.row['POTENTIAL_'].value), Math.round(e.row['TOTAL_ROOF'].value)], 
     ]); 

     var options = { 
      title: 'Company Performance', 
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('visualization_div')); 
     chart.draw(data, options); 
    }; 

JS功能2：

   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>'); 
     drawVisualization(e); 
     }); 

    layer.setMap(map); 

} 

HTML

 <div id="overview" style:""> 
     <h3>Building Overview:</h3> 
    <p id ="roof-panel-area"></p> 
    <div id = "visualization_div" style="align: center; width: 230px; height: 260px;"></div> 
    </div>