Export Google Chart to image and save in a javascript variable;

Question

I’m trying to extract the image of a Google Hart that I already generated and I want to export it to pdf, but for this I need to extract the image from the page, and I’m not getting it, I’m using the jsPDF to generate the pdf.

JS:

//----------------------------------------Gerando Chart de Relatório Bolsa Por Ano

    $scope.gerarGraficoBolsaPorOrientador =  function gerarGraficoBolsaPorProfessor(ano_inicial,ano_final,departamento){

        //busca dados
        var rows = [];
        var data = { ano_inicial: ano_inicial ,
                     ano_final: ano_final,
                     departamento: departamento };
        $http.post('get_chart_relatorio_bolsa_por_orientador', data).then(function(resposta){
            if (resposta.data.status === "error"){
                toastr["error"]('', resposta.data.message);
            }

            for (var i in resposta.data){
                rows.push({
                    c: [resposta.data[i]]
                });
        }

        //desenha Chart
        $scope.chartRelatorioProjetoPorOrientador = {};

        $scope.chartRelatorioProjetoPorOrientador.type = "BarChart";

        $scope.chartRelatorioProjetoPorOrientador.options = {
            'title': 'Gráfico de barra: Bolsas por orientador',
            colors: ['#ff0000', 'red blue gabriel'],
            legend:{position: 'bottom'},
            chartArea: {width: '50%'},
            hAxis: {
                title: 'Quantidade de bolsas por orientador',
                minValue: 0,
                textStyle: {
                    bold: true,
                    fontSize: 12,
                    color: '#4d4d4d'
                },
                titleTextStyle: {
                    bold: true,
                    fontSize: 18,
                    color: '#4d4d4d'
                }
            },
            vAxis: {
                textStyle: {
                    fontSize: 12,
                    bold: true,
                    color: '#848484'
                }
            },
            width: $(window).width()*0.75,
            height: $(window).height()*1
        };

        var chartGerado = new google.visualization.DataTable();

        chartGerado.addColumn({id: "t", label: "Topping", type: "string"});
        chartGerado.addColumn({id: "s", label: "Bolsas", type: "number"});
        chartGerado.addColumn({id: "l", label: "Label", type: "number", role:"annotation"});
        chartGerado.addColumn({id: "x", label: "Cor", type:"string", role:"style"});
        chartGerado.addRows(rows.length);
        for(var i = 0; i < rows.length; i++){
            chartGerado.setCell(
                i,0,rows[i].c["0"].orientador
            );
            chartGerado.setCell(
                i,1,rows[i].c["0"].bolsas
            );
            chartGerado.setCell(
                i,2,rows[i].c["0"].bolsas
            );
            chartGerado.setCell(
                i,3,'color: #ff0000'
            );
        }

        $scope.chartRelatorioProjetoPorOrientador.data = chartGerado;

    });

};

//-----------------------Exportando para pdf 
$scope.gerarPDFBolsaporOrientador = function () {

    var my_div = document.getElementById('chartRelatorioProjetoPorOrientador');
    var chart = new google.visualization.ColumnChart(my_div);
    var doc = new jsPDF();

    doc.text('Hello world!', 10, 10);
    doc.addImage(chart.getImageURI(), 0, 0);
    doc.save('relatoriobolsapororientador.pdf');

}

Console error:

HTML

<div id="chartRelatorioProjetoPorOrientador" google-chart chart="chartRelatorioProjetoPorOrientador" style="height:100%; width:100%; left: 10; top: 20; overflow:scroll;"></div>

Answer 1

• First save the Chart was generated in the view from the div:

  var chart_div = Document.getElementById('chartRelatorioProjetoPorOrientator'); var Chart = new google.visualization.Barchart(chart_div);

• Before calling the getImageURI() method it is checked whether Chart has finished drawing:

  // Wait for the Chart to Finish Drawing before Calling the getImageURI() method. google.visualization.Events.addListener(Chart, 'ready', Function() { $Scope.url_grafico = Chart.getImageURI(); });

• and finally draw the Chart

  Chart.draw(chartGerado, $Scope.chartRelatorioProjetoPorOrientador.options);

• your image will be stored in url_grafico in Base64

add this code snippet at the end of your javascript method that generates Chart in the line below $Scope.chartRelatoryProjectsPorOrientador.data = chartGenerated;

            var chart_div = document.getElementById('chartRelatorioProjetoPorOrientador');
            var chart = new google.visualization.BarChart(chart_div);

            // Wait for the chart to finish drawing before calling the getImageURI() method.
            google.visualization.events.addListener(chart, 'ready', function () {
                $scope.url_grafico  =  chart.getImageURI();
            });

            chart.draw(chartGerado, $scope.chartRelatorioProjetoPorOrientador.options);