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