Google Timeline Chart to Image

Question

As of now, the current supported of function to convert the chart of Google which is

getImageURI()

is the corecharts and geo-chart. The others, including timeline chart is not included on the list. It took me a while to figure it out that getImageURI() is not supported. So what is the alternative on converting the Google Chart Timeline to Image. How do you get the image uri from the timeline chart? Any advice guys?

I tried using html2canvas but seems like the chart is not captured as expected. This is what I've used.

  var chartArea = document.getElementsByTagName('iframe')[0].
        contentDocument.getElementById('chartArea');
    var svg = chartArea.innerHTML;

    var canvas = doc.createElement('canvas');
    canvas.setAttribute('width', chartArea.offsetWidth);
    canvas.setAttribute('height', chartArea.offsetHeight);
    canvas.setAttribute(
      'style',
      'position: absolute; ' +
      'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
      'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
    doc.body.appendChild(canvas);

    canvg(canvas, svg);
    var imgData = canvas.toDataURL("image/png");

    return imgData;

Any help?

did you wait on the chart's 'ready' event before running the above code? — WhiteHat

Victor Luna Victor Luna · Accepted Answer · 2018-01-30T16:55:36

I know this is a late answer, but I struggled for a bit here and I thought on putting the answer for future reference.

Here is a fiddle I found that has the base to convert svg to png

I am using the timeline chart from google visualisation. Inside the div container it creates an svg for the graph. I grabbed that svg, added a few attributes that are needed and then convert to base64 png.

Here is the js code:

google.visualization.events.addListener(chart, 'ready', function () {
    var getSVG = container.getElementsByTagName("svg")[0]; // Gets the graph
    getSVG.setAttribute('xmlns', "http://www.w3.org/2000/svg"); // Add attr to svg
    getSVG.setAttribute('xmlns:svg', "http://www.w3.org/2000/svg"); // Add attr to svg

    // From Fiddle
    var myCanvas = document.getElementById("canvas");
    var ctxt = myCanvas.getContext("2d");


    drawInlineSVG(ctxt, getSVG.outerHTML, function() {
        console.log(canvas.toDataURL());  // -> PNG
    });
});

Google Timeline Chart to Image

1 Answers