how to save graphic in pdf without showing it in a div? -Google chart

Viewed 148

I am making a graph with google chart, which displays me perfectly, what I want is to send it to save in pdf. I found a library that converts the image of the graph and later use the library that converts it into pdf, which it does, but it saves the image according to the size that was assigned, I show 4 graphics in 4 boxes and when I send it to save in pdf it comes out of the problem as it is being shown in the div, my question is can a second function without showing it on the page and sending it directly to save the pdf with the desired size?

when saved it comes out of size,

width: 400;
height: 200;

I want it to be saved with a size of

width: 800;
height: 400;

this is my codepen

google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 400,
        height: 200,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  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(view, options);
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="save-pdf" type="button" value="Save as PDF" disabled />
<div id="chart_div"></div>

0 Answers
Related