Google Charts и Bootstrap в макет PDF

Question

Привет всем вам, у меня было много дней, пытаясь установить правильный макет PDF, который я генерирую, чтобы представить вас в контексте:

Успешно я генерирую диаграммы, генерирую PDF и отправка PDF по электронной почте в виде вложения.

Проблема заключается в макете, который я получаю в полученном PDF, диаграммы не помещаются в PDF, так как я вижу, что они вписываются в раздел, где я нарисовать PDF-файл, который я создаю.

function drawChart(title, information, divToDraw) {
// Load google charts
google.charts.load('current', {
    'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback();
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Rent');

$.each(information, function(i, information) {
    var year = information.Year;
    var rent = parseFloat($.trim(information.Rent));
    data.addRows([
        [year, rent]
    ]);
});

var options = {
    height: 500,
    width: 900,
    backgroundColor: 'transparent',
    colors: ['green'],
    fontName: 'Open Sans',
    title: title,
    format: 'currency',
    hAxis: {
        title: "Years"
    },
    vAxis: {
        title: "Rent"
    }
};
var chart = new google.visualization.ColumnChart(divToDraw);

google.visualization.events.addListener(chart, 'ready', function() {
    divToDraw.innerHTML = '<img src="' + chart.getImageURI() + '" class="img-responsive">';
});
chart.draw(data, options);

function resizeHandler() {
    //chart.draw(data, options);
}
if (window.addEventListener) {
    window.addEventListener('resize', resizeHandler, false);
} else if (window.attachEvent) {
    window.attachEvent('onresize', resizeHandler);
}

}

function YearChart () {var divToDraw = document.getElementById ('myChart'); var arreglo = ['Year 0', 'Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5', 'Year 6', 'Year 7', 'Year 8', ' Год 9 ',' Год 10 ']; var chartitle = 'Арендные ставки'; var porcentaje = 0,05; var today = document.getElementById ('marketvalue'). value; var number = Number (today.replace (/ [^ 0-9 .-] + / g, "")); var resultado = число;

var jsonArr = [];
for (i = 0; i < arreglo.length; i++) {
    resultado = (resultado * porcentaje) + resultado;

    jsonArr.push({
        Year: arreglo[i],
        Rent: resultado
    });
}
drawChart(chartitle, jsonArr, divToDraw);

}

Это HTML, который я использую для преобразования его в PDF

<section id="graphsview" class="content">
<div class="container-fluid">
<div class="invoice p-3 mb-3">
<div class="row">
    <div class="col-12">
      <h4>
        <div class="col-sm-4">
            <img src="bootstrap/dist/img/sidneyhomebuyerslogo.png" class="profile-user-img img-responsive">
            <div>
              <h1>Sidney Home Buyers - Report</h1>  
            </div>
        </div>           
        <small class="float-right">Date: 2/10/2014</small>
      </h4>
      <div>
        <a><i class="fa fa-user"></i> Rafael Sánchez</a>
        <a><i class="fa fa-envelope"></i> anyemaild@gmail.com</a> 
        <a><i class="fa fa-phone"></i></a>  
      </div>          
        <p style="font-size:10px;text-align: justify;"><h3>Terms: </h3>The generated report is not to be used as a legal aid.<br> The information resulting from this report is to be considered educated guidance only. <br>
         The report's generated and relevant information will be emailed to your stated address.
        </p>        
    </div>
        <div class="container">
            <div class="row">
                <!--<div class="col-12">-->
                    <!--<div class="card">-->
                        <div class="card-body">
                            <div id="myChart" class="chart" style="height: 100%; width: 100%;"></div>
                        </div>
                    <!--</div>-->
                <!--</div>-->
             </div>     
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div id="Chart2"></div>
                        </div>
                    </div>
                </div>
             </div>     
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div id="Chart3"></div>
                        </div>
                    </div>
                </div>
             </div>     
        </div> 
</div>   
</div>
</div>
</section>

Это PDF, который я получаю (скриншот двух страниц PDF) введите описание изображения здесь

Вот как я необходимо показать в PDF (изображение), диаграмма является справочной введите описание изображения здесь

Любая помощь будет оценена, спасибо.