getImageURI() not work from orgchart by google

Question

I created this fiddle but when try getImageURI() from chart (orgchart google charts) one error is generated.

ERROR: "Uncaught TypeError: chart.getImageURI is not a function"

I need to generate an image or a PDF from orgchart created. Is it possible?

google.charts.load('current', {packages:["corechart","orgchart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');

    // For each orgchart box, provide the name, manager, and tooltip to show.
    data.addRows([
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
       '', 'The President'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
       'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
    ]);

    // Create the chart.
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function () {
        $( "#chart_div2" ).append( '<img src="' + chart.getImageURI() + '">' );
    });
    // Draw the chart, setting the allowHtml option to true for the tooltips.
    chart.draw(data, {allowHtml:true});
}

score 3 · Accepted Answer · edited May 23 '17 at 11:46

3

similar to Table Charts, Org charts produce HTML <table> elements, rather than SVG

which is why getImageURI isn't listed in the Methods section for either chart

recommend using library to convert the HTML to Canvas (html2canvas.js),
which can then be saved as base64 string,
similar to getImageURI

see this answer, for a little more info on the topic...
Rendering HTML elements to canvas

edited May 23 '17 at 11:46

Community

1
1

answered Jul 28 '16 at 12:02

WhiteHat

59,912
7
51
133

1

hope this helps, found this fiddle as well [div to image](http://jsfiddle.net/8ypxW/3/)... – WhiteHat Jul 28 '16 at 12:02

score 1 · Answer 2 · answered Feb 27 '19 at 11:30

try this code:

    function printImg() {
        html2canvas($('#chart_div').get(0)).then( function (canvas) {
            var image = convertCanvasToImage(canvas);
            var htmlToPrint = image.outerHTML ;
            newWin = window.open("");
            newWin.document.write(htmlToPrint);
            newWin.print();
            newWin.close();
        });
    }

Don't forget to include html2canvas.js

getImageURI() not work from orgchart by google

2 Answers2