Edit Chart tester

Google Chart updated to edit chart

by Brian Sherwood

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['table, charteditor']}]}"></script>
<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
  <table class="columns" width="100%">
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    <tr>
      <td>
          <input type="submit" name="loadcharteditor" id="chartLoadeditor" value="Edit me!" onClick="chartLoadEditor()" style="font-size:18px;">
      </td>
      <td>
        <input type="submit" name="loadcharteditor2" id="chart2Loadeditor" value="Edit - also gets render of new chart!" onClick="chart2LoadEditor()" style="font-size:18px;">
      </td>
    </tr>
    <tr>
      <td>
        <div id="chartEditorDiv"></div>
      </td>
      <td>
        <div id="chart2EditorDiv"></div>
      </td>
    </tr>
        <tr>
      <td>
          <input type="submit" name="PNGChart" value="PNG - only does original chart" onClick="chartPNG()" style="font-size:18px;">
      </td>
      <td>
        <input type="submit" name="PNGChart2" value="PNG 2. Any ideas?" onClick="chart2PNG()" style="font-size:18px;">
      </td>
    </tr>
    <tr>
      <td>
        IMG1:<div id=imagePrint></div>
       </td>
      <td>
        IMG:<div id=image2Print></div>
      </td>
    </tr>
  </table>
  
</div>

JavaScript

var chartEd = null;
  var chartWrap = null;
  var chartEditorDiv = null;
  // Populates the chart div on startup and initiates global vars. Called on page load.
  function chartDraw(){
    // Initialize Chart editor handle
    chartEd = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chartEd, 'ok', chartSave);
    chartEditorDiv = document.getElementById('chartEditorDiv');

    // Add the chart to the page
    chartWrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
    });
    chartWrap.draw(chartEditorDiv);
  }

  // User clicked 'ok' to save chart
  function chartSave(){
    chartEd.getChartWrapper().draw(chartEditorDiv);
  }

  // Onclick handler, opens the editor
  function chartLoadEditor() {
    chartEd.openDialog(chartWrap, {});
  }
	function chartPNG(){
  	var sIMG = chartWrap.getChart().getImageURI();
    //var sIMG = chartEd.getChartWrapper().getChart().getImageURI(); // this way not working.
    document.getElementById('imagePrint').innerHTML = '<img src=' + sIMG + '>'
  }
  google.setOnLoadCallback(chartDraw);
  
  // Chart 2
  var chart2Ed;
  var chart2Wrap = null;
  var chart2EditorDiv = null;
  var chart2Object = null;
  // Populates the chart div on startup and initiates global vars. Called on page load.
  function chart2Draw(){
    // Initialize Chart editor handle
    chart2Ed = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chart2Ed, 'ok', chart2Save);
    google.visualization.events.addListener(chart2Ed, 'print', chart2PNG);
    chart2EditorDiv = document.getElementById('chart2EditorDiv');

    // Add the chart to the page
    chart2Wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
      ...