Generate a PDF of a Morris Graph

Asked

Viewed 140 times

1

I’m developing an application that generates a report using Morris charts (https://startbootstrap.com/template-overviews/sb-admin-2/)

The graphics are working properly, now I need to generate a PDF of this chart. However, I came across that to do this, when the graph is SVG is different.

The PDF file is generated, but without the chart (without the bars), only with subtitles.

Follows:

Index.cshtml containing the chart div

 <div class="panel-body" id="gerapdf">
     <div class="row">
         <b><span id="RelatorioItemContrato"></span></b>
         <br />
         <b><span id="RelatorioMes"></span></b>
         <br />
         <b><span id="RelatorioAno"></span></b>
         <br />
         <b><span id="RelatorioAtivo"></span></b>
     </div>
     <div id="RelatorioDesempenhoDataBarChart"></div> <!--Gráfico-->
     <div class="col-lg-12">
         <div class="panel panel-default">
             <div class="panel-heading">
                 Legenda
             </div>
             <div class="panel-body" id="legenda-fixa">

             </div>
             @*<div class="panel-footer">
             </div>*@
         </div>
     </div>
 </div>

.JS

 var cache_width = $("#gerapdf").width(); //Criado um cache do CSS
 var a4 = [595.28, 841.89]; // Widht e Height de uma folha a4

 function getPDF() {
     // Setar o width da div no formato a4
     $("#gerapdf").width((a4[0] * 1.33333) - 80).css('max-width', 'none');

     // Aqui ele cria a imagem e cria o pdf
     html2canvas($("#gerapdf"), {
         onrendered: function (canvas) {
             var img = canvas.toDataURL("image/png", 1.0);
             var doc = new jsPDF({ unit: 'px', format: 'a4' });
             doc.addImage(img, 'JPEG', 20, 20);
             doc.save('NOME-DO-PDF.pdf');
             //Retorna ao CSS normal
             $("#gerapdf").width(cache_width);
         }
     });
 }

For some reason, the graph is not generated:

PDF gerado sem o Gráfico

I don’t know much javascript/html. Can anyone tell me how to proceed? I’ve searched a lot, I’ve tried a lot, but I still can’t.

Thank you

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.