title: Using Google chart api : chart editor
body: <p>I am using google chart API and using chart editor in it. I saw few examples was able to add this to my web page, however, the data url is kind of hard coded and I want user to give the data url, I tried a few things but none of it seems to be working.</p>
  
  <blockquote>
    <p>HTML code snippet</p>
  </blockquote>
  
  <pre><code>&lt;div id="chartData" class="invisible"&gt;
      &lt;div id="chartType"&gt;
          &lt;div&gt;Data&lt;/div&gt;
          &lt;div&gt;Google Spreadsheet Url (Public)&lt;/div&gt;
          &lt;div&gt;
              &lt;input type="url" id="googleURL"/&gt;
           &lt;/div&gt;
           &lt;div class="alignCenter"&gt;Or&lt;/div&gt;
           &lt;div&gt;Enter your own data&lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="googleChart" class="invisible"&gt;
     &lt;input type='button' onclick='openEditor()' value='Open Editor'/&gt;
      &lt;div id='visualization' style="width:80%;height:50%;"&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Java script Code</p>
  </blockquote>
  
  <pre><code>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);
  </code></pre>
  
  <p>So here I want datasourceurl to be set by $('#googleURL').val();<br/>
  but it looks like the init function is called at page load by google.setOnLoadCallback(init); <br/>
  Is there anyway I can change it.<br/>
  In this code I have not made any changes as I wanted to give a working code</p>