Javascript 使用谷歌图表api：图表编辑器

我正在使用谷歌图表API和图表编辑器。我看到很少有示例能够将其添加到我的网页中，但是，数据url是硬编码的，我希望用户提供数据url，我尝试了一些方法，但似乎都不起作用

HTML代码片段

所以这里我希望datasourceurl由$（'#googleURL'）.val（）设置
但是看起来init函数是在页面加载时被google.setOnLoadCallback（init）调用的
还有什么我可以更改的吗。
在这段代码中，我没有做任何更改，因为我想给出一个工作代码，我想调用init（）不仅可以使用GoogleAPI加载，而且可以在一个必需的事件上进行

<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>

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);