how to get imageUri for google chart

Question

This is my sample material bar graph and i want the image uri for the plotted graph

Answer 1

you can use html2canvas

you'll need the following two files from the build

then on the chart's 'ready' event...

  google.visualization.events.addListener(chart, 'ready', function () {
    // add svg namespace to chart
    $(chartContainer).find('svg').attr('xmlns', 'http://www.w3.org/2000/svg');

    // get image uri
    html2canvas(chartContainer, {
      allowTaint: true,
      taintTest: false
    }).then(function(canvas) {
      console.log(canvas.toDataURL('image/png'));
    });
  });

---

UPDATE

another method is to convert the svg to an image and draw it on a canvas,
then pull the uri from the canvas...

google.charts.load('current', {
  packages:['bar']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Galaxy', 'Distance', 'Brightness'],
    ['Canis Major Dwarf', 8000, 23.3],
    ['Sagittarius Dwarf', 24000, 4.5],
    ['Ursa Major II Dwarf', 30000, 14.3],
    ['Lg. Magellanic Cloud', 50000, 0.9],
    ['Bootes I', 60000, 13.1]
  ]);

  var options = {
    width: 800,
    chart: {
      title: 'Nearby galaxies',
      subtitle: 'distance on the left, brightness on the right'
    },
    bars: 'vertical', // Required for Material Bar Charts.
    series: {
      0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
      1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
    },
    axes: {
      x: {
        distance: {label: 'parsecs'}, // Bottom x-axis.
        brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
      }
    }
  };

  var chartContainer = document.getElementById('dual_x_div');
  var chart = new google.charts.Bar(chartContainer);

  google.visualization.events.addListener(chart, 'ready', function () {
    var canvas;
    var domURL;
    var imageNode;
    var imageURL;
    var svgParent;

    // add svg namespace to chart
    domURL = window.URL || window.webkitURL || window;
    svgParent = chartContainer.getElementsByTagName('svg')[0];
    svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    imageNode = chartContainer.cloneNode(true);
    imageURL = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
    image = new Image();
    image.onload = function() {
      canvas = document.getElementById('canvas');
      canvas.setAttribute('width', parseFloat(svgParent.getAttribute('width')));
      canvas.setAttribute('height', parseFloat(svgParent.getAttribute('height')));
      canvas.getContext('2d').drawImage(image, 0, 0);
      console.log(canvas.toDataURL('image/png'));
    }
    image.src = imageURL;
  });

  chart.draw(data, options);
});

.hidden {
  display: none;
  visibility: hidden;
}