CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Brian Sherwood
Brian Sherwood

Reputation: 53

save google Chart as image when using the visualization ChartEditor;

I wish to be able to offer my users an Edit Chart, then the ability to get an Img (as PNG via getImageURI) so they can easily drag and drop into presentation/emails.

This is an example: https://jsfiddle.net/BSherwood/98obbjh2/ 

  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',
       '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'}
    });
    chart2Object = chart2Wrap.draw(chart2EditorDiv);
  }

  // User clicked 'ok' to save chart
  function chart2Save(){
  	var sT = chart2Ed.getChartWrapper();
    chart2Object = sT.draw(chart2EditorDiv);
    document.getElementById('image2Print').innerHTML = '<img src=' + sT.getChart().getImageURI() + '>'
  }

  // Onclick handler, opens the editor
  function chart2LoadEditor() {
    chart2Ed.openDialog(chart2Wrap, {});
  }
  function chart2PNG(){
  	var chIMG = chart2Ed.getChartWrapper().getChart().getImageURI();
    document.getElementById('image2Print').innerHTML = '<img src=' + chIMG + '>'
  }
  google.setOnLoadCallback(chart2Draw);
<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>

So you can see Column1 (under Edit me!) allows change of the chart format, but, and this is the issue, the button [PNG - only does original chart] sadly only does what it says on the tin, renders the original (by using .getImageURI()) NOT the chart it is changed to.

The second column I have tried to do this and have partial success. The [Edit - also gets render of new chart!] allows change of the chart, then instantly renders the image (of the new chart). But how is this done on demand (after they have highlighted a column on the chart)? Why is the 'chart2Ed' not available to the function chart2PNG() ?

Indeed this may be a javascript variable scope issue but then .. help

(Please note - normally load google charts by: google.charts.load('current', {packages:['charteditor']}); and include the https://www.gstatic.com/charts/loader.js but this fails to load as sandboxed, oh and current does not work in I.E 10, as this is 45.1 not 45 [sigh])

Upvotes: 1

Views: 733

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

change chartSave as follows, to correct Column1... 

function chartSave(){
  chartWrap = chartEd.getChartWrapper();
  chartWrap.draw();
}

see following working snippet... 

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(){
    chartWrap = chartEd.getChartWrapper();
    chartWrap.draw();
  }

  // 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',
       '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'}
    });
    chart2Object = chart2Wrap.draw(chart2EditorDiv);
  }

  // User clicked 'ok' to save chart
  function chart2Save(){
    var sT = chart2Ed.getChartWrapper();
    chart2Object = sT.draw(chart2EditorDiv);
    document.getElementById('image2Print').innerHTML = '<img src=' + sT.getChart().getImageURI() + '>'
  }

  // Onclick handler, opens the editor
  function chart2LoadEditor() {
    chart2Ed.openDialog(chart2Wrap, {});
  }
  function chart2PNG(){
    var chIMG = chart2Ed.getChartWrapper().getChart().getImageURI();
    document.getElementById('image2Print').innerHTML = '<img src=' + chIMG + '>'
  }
  google.setOnLoadCallback(chart2Draw);
<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>

Upvotes: 0

Related Questions