Generate a PDF of a Morris Chart

1

I'm developing an application that generates a report using the Morris graphics ( link )

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

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

Follows:

Index.cshtml containing the div of the chart

 <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:

I do not know much about javascript / html. Can someone guide me how to proceed? I've tried a lot, tried several, but still I could not.

Thank you

    
asked by anonymous 20.03.2017 / 20:46

0 answers