2012-10-17 57 views
1

我正在使用google圖表API並使用圖表編輯器。我看到一些例子能夠將其添加到我的網頁中,但是,數據url是一種硬編碼,我希望用戶給出數據url,我嘗試了一些東西,但似乎沒有任何工作。使用Google chart api:圖表編輯器

HTML代碼片段

<div id="chartData" class="invisible"> 
    <div id="chartType"> 
     <div>Data</div> 
     <div>Google Spreadsheet Url (Public)</div> 
     <div> 
      <input type="url" id="googleURL"/> 
     </div> 
     <div class="alignCenter">Or</div> 
     <div>Enter your own data</div> 
    </div> 
</div> 
<div id="googleChart" class="invisible"> 
    <input type='button' onclick='openEditor()' value='Open Editor'/> 
    <div id='visualization' style="width:80%;height:50%;"> </div> 
</div> 

的Java Script代碼

var wrapper; 
function init() { 
    wrapper = new google.visualization.ChartWrapper({ 
     containerId: 'visualization', 
     dataSourceUrl: 'https://docs.google.com/spreadsheet/ccc?key=0AivgZyecjo7adDNOVTZEUWRoU1c2YXhuSXpEcVA1a3c#gid=0', 
     chartType: 'LineChart' 
    }); 
    wrapper.draw(); 
} 

function openEditor() { 
    closeAllDialogs(); 
    // Handler for the "Open Editor" button. 
    var editor = new google.visualization.ChartEditor(); 
    google.visualization.events.addListener(editor, 'ok', 
     function() { 
      wrapper = editor.getChartWrapper(); 
      wrapper.setDataSourceUrl($('googeUrl').val()); 
      wrapper.draw(document.getElementById('visualization')); 
      openGoogleChartDialog(); 
     }); 
    editor.openDialog(wrapper); 
} 
google.setOnLoadCallback(init); 

所以在這裏我想datasourceurl由$來設置( '#googleURL')。VAL ();
但它看起來像init函數在頁面加載時被google.setOnLoadCallback(init)調用;
有反正我可以改變它。
在這段代碼,因爲我想給一個工作代碼

回答

0

我不這樣想的onLoad使用谷歌API,但在需要的情況下幫助

調用的init()我沒有進行任何更改