I am currently working on some charts in google charts but even though I can print the chart in pdf I cannot do it in the real dimensions of the chart, if someone can guide me how I can change the size of the pdf so that the chart looks complete, I leave the functional code so they can copy it and use it for their needs.
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(dibujarGrafico);
function dibujarGrafico() {
// Tabla de datos: valores y etiquetas de la gráfica
var data = google.visualization.arrayToDataTable([
['Mes', 'Enviado'],
['Ene', 20.21],
['Feb', 4.28],
['Mar', 17.26],
['Abr', 11.25],
['Mayo', 14.25],
['Jun', 5.25],
['Jul', 8.15],
['Ago', 15.22],
['Sept', 4.67],
['Oct', 9.24],
['Nov', 10.05],
['Dic', 6.75]
]);
var options = {
title: 'Envios durante el año en curso',
colors: ['green'],
};
// Dibujar el gráfico
var container = document.getElementById('GraficoGoogleChart-ejemplo-1');
var chart = new google.visualization.ColumnChart(container);
//codigo para exportar a PDF
var btnSave = document.getElementById('save-pdf');
google.visualization.events.addListener(chart, 'ready', function () {
btnSave.disabled = false;
});
btnSave.addEventListener('click', function () {
var doc = new jsPDF();
doc.addImage(chart.getImageURI(), 0, 0);
doc.save('chart.pdf');
}, false);
//
chart.draw(data, options);
}
</script>
</head>
<input id="save-pdf" type="button" value="Exportar a PDF" disabled />
<i aria-hidden="true"></i>
<div id="GraficoGoogleChart-ejemplo-1" style="width: 1000px; height: 200px">
You can assign the size of the pdf page you want in the options when creating the jsPDF object:
For example:
Being the first parameter l from 'landscape' or 'portrait', the second parameter the unit of measurement 'mm' for millimeters or 'in' for inches, and the third parameter the height and width.