私はグーグルチャートAPIを使用していて、その中でチャートエディタを使用しています。これをWebページに追加できる例はほとんどありませんでしたが、データURLはハードコーディングされているため、ユーザーにデータURLを指定してもらいたいので、いくつか試してみましたが、どれも機能していないようです。
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スクリプトコード
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);によって呼び出されるようです。
とにかく変更できますか?
このコードでは、機能するコードを提供したかったので、変更を加えていません。