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

Question

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

Navigation

#1 by (0 votes)

0

I'm trying to extract the image from a google chart that I've 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 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

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

google-charts

asked by anonymous 13.03.2018 / 18:01

1 answer

Recyrcleview dynamic android Criteria to filter a string array list

score 0 · Answer 1

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

var chart_div = document.getElementById ('chartRelatoryProjectForOrientator'); var chart = new google.visualization.BarChart (chart_div);
Before calling the getImageURI () method it is checked if the chart has already 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 I draw the Chart

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

Your database will be stored in url_grafico base64

add this code snippet at the end of your javascript method that generates the chart on the line below $ scope.chartReportProjectForRenderer.data = chartGerado;

            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);