Export Google visualization as picture

Question

I'm trying to convert a wordtree Google visualization to an image. The current code below runs the wordtree so I can see the visual, but I can't figure out the last section to convert to an image or export as an image. (var my_div = section to end)

I have tried changing code from link below, but can't get it to save as an image. https://developers.google.com/chart/interactive/docs/printing

I'm also doing this inside of jsfiddle.net to try and make this work.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "mywordtree",
         "dataSourceUrl": "https://docs.google.com/spreadsheets/d/1vi-YzV7s7eZ25938Q57DbZvT0iqggiCqRvDgxeZtP6c/edit?usp=sharing",
         "query":"SELECT A",
         "chartType": "WordTree",
         "options": {
                wordtree: {
            format: 'implicit',
            //alt type is 'suffix', 'prefix'
            type: 'suffix',
            word: 'prescription'
            }
         }
       });
      }

    var my_div = document.getElementById('chart_div');
    var my_chart = new google.visualization.ChartType(mywordtree);

    google.visualization.events.addListener(my_chart, 'ready', function () {
      mywordtree.innerHTML = '<img src="' + my_chart.getImageURI() + '">';
    });

    my_chart.draw(data);

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="mywordtree" style="width: 1000px; height: 1000px;"></div>
  </body>
</html>

score 1 · Accepted Answer · answered Sep 04 '19 at 12:31

first, in order to generate an image of the chart,
you need to wait for the chart's 'ready' event.

in order to wait for the 'ready' event,
you need access to the chart object.

you will not be able to use the google.visualization.drawChart method,
because it does not return a handle to the chart.

next, the WordTree chart, does not have a method for getImageURI,
so you will need to create the image manually, from a blob.

see following working snippet...

google.charts.load('current').then(function () {
  // get chart container
  var container = document.getElementById('mywordtree');

  // create chart
  var chart = new google.visualization.ChartWrapper({
    chartType: 'WordTree',
    containerId: container.id,
    dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1vi-YzV7s7eZ25938Q57DbZvT0iqggiCqRvDgxeZtP6c/edit?usp=sharing',
    options: {
      wordtree: {
        format: 'implicit',
        //alt type is 'suffix', 'prefix'
        type: 'suffix',
        word: 'prescription'
      }
    }
  });

  // listen for ready event
  google.visualization.events.addListener(chart, 'ready', function () {
    var domUrl;    // object url
    var image;     // chart image
    var imageUrl;  // chart image url
    var svg;       // svg element

    // add svg namespace to chart
    svg = container.getElementsByTagName('svg')[0];
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

    // create image url from svg
    domUrl = window.URL || window.webkitURL || window;
    imageUrl = domUrl.createObjectURL(new Blob([svg.outerHTML], {type: 'image/svg+xml'}));

    // create chart image
    image = new Image();
    image.onload = function() {
      // replace chart with image
      container.innerHTML = image.outerHTML;
    }
    image.src = imageUrl;
  });

  // draw chart
  chart.draw();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="mywordtree"></div>

hope this helps. note: the above code to get the image will not work in IE, you can use `html2canvas` instead, see [this answer](https://stackoverflow.com/a/48686220/5090771) for an example... — WhiteHat, Sep 04 '19 at 12:32
Thanks for the help. I had been reading some things about some of the visualizations not working with the getImageURI, so this is helpful to see how to resolve the issues. Thanks again. — gsheppard, Sep 04 '19 at 15:07

Export Google visualization as picture

1 Answers1