JsPDFDownload

by abhijeetkarve

HTML

<html>
    
    <head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<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>
    </head>
    <body>
    <img id="logoimg" src="https://core.makoinsight.com/TILogoIcons/Product/3_logo-small.png" alt="">
      <input id="save-pdf" onclick="test();" type="button" value="Save as PDF" />
      Before
      <div id="chart_div1" style="width:120%"></div>    
      After  chart 1 
      <div id="chart_div2"></div>    
      After Chart 2
      <div id="chart_div3"></div>    
      After Chart 3
      <div id="chart_div4"></div>    
      After Chart 4
      <div id="chart_div5"></div>    
      After Chart 5
      <div id="chart_div6"></div>    
      After Chart 6
      <div id="chart_div7"></div>    
      After Chart 7
      <div id="chart_div8"></div>    
      After Chart 8
      <div id="chart_div9"></div>    
      After Chart 8
    </body>
</html>

JavaScript

var chart1 ;
var chart2 ;
var chart3 ;
var chart4 ;
var chart5 ;
var chart6 ;
var chart7 ;
var chart8 ;
var chart9 ;

google.charts.load("current", {
  "packages": ["corechart", "bar"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.arrayToDataTable([
    ['Month', 'PPM', 'OTD', 'POC', 'LTAdh', 'SCARS', 'LTA', 'MD', 'CI'],
    ['Jan', 0, 20, 2, 0, 7, 0, 7, 0],    ['Feb', 0, 25, 3, 0, 7, 0, 7, 0],
    ['Mar', 0, 25, 3, 0, 7, 0, 7, 0],    ['Apr', 0, 25, 3, 0, 7, 0, 7, 0],
    ['May', 0, 20, 3, 0, 7, 0, 7, 0],    ['Jun', 0, 20, 2, 0, 7, 0, 7, 0],
    ['Jul', 0, 25, 2, 0, 7, 0, 7, 0],    ['Aug', 0, 20, 2, 0, 7, 0, 7, 0],
    ['Sep', 0, 25, 3, 0, 7, 0, 7, 0],    ['Oct', 0, 20, 2, 0, 7, 0, 7, 0],
    ['Nov', 0, 20, 0, 0, 7, 0, 7, 0]  ]);
  var options = {
    hAxis: {
      title: 'YTD Summary (by month)'
    },
    animation: {      duration: 1000,      easing: 'out',      startup: true    },
    height: 400,    legend: {      position: 'top',      maxLines: 3    },
    isStacked: true,  };
  chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
  chart2.draw(data, options);
}

google.charts.load("current", {
  "packages": ["corechart", "bar"]
});
google.charts.setOnLoadCallback(drawChart1);

function drawChart1() {
  var data = new google.visualization.arrayToDataTable([
    ['Month', 'Total'],
    ['Jan', 3428.661603],    ['Feb', 12802.290936],    ['Mar', 9031.809836],
    ['Apr', 1464.195317],    ['May', 8689.395617],    ['Jun', 30002.529051],
    ['Jul', 14650.301008],    ['Aug', 33728.115345],    ['Sep', 4768.197233],
    ['Oct', 16860.761726],    ['Nov', 3843.909805]  ]);
  var options = {
    title: 'PPM Summary (by month)',
    lineWidth: 3,    animation: {
      duration: 1000,      easing: 'out',      startup: true    },    height: 400,
    legend: {      position: 'top',      maxLines: 3
    },
  };
  chart1 = new...