Why Google Charts are not being sent via ajax to print pdf

Question

I am using dompdf to create PDF and google charts for pie charts.

I have added google charts on a php page, these charts displays very well on same docuement, now my client want to generate google charts and save them as pdf with cron-job for all the users, so decided to use ajax so that page will load only once when cron -job will run.

Problem is its not displaying charts on pdf generated. if I manually click to generate it saves google charts on pdf but not on ajax, look like base64 image data not being sent with ajax

id "hidden_html" contains the charts and values

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() { 
  var data = new google.visualization.DataTable(<?=$jsonTable7;?>);
  var options = {
    title : 'Average Quality Score %',
    pointSize: 2,
    legend: {position: "top"},
    hAxis: {
      //title: 'Month',
      format: 'MMM-yy',
      slantedText: true,
      slantedTextAngle: 45},
      seriesType: 'line',
      height: 300,
    }
  };

  chart_area = document.getElementById('fifth_div_56');
  var chart = new google.visualization.ComboChart(chart_area);
  google.visualization.events.addListener(chart, 'ready', 
        function() {
         chart_area.innerHTML = '<img src="' + chart.getImageURI()+'" 
         class="img-responsive">';
  });
  chart.draw(data, options);
}
</script>

<form method="post" role='form' id="make_pdf" enctype="multipart/form-data" action="#">
  <input type="hidden" name="hidden_html" id="hidden_html" />
  <button type="button" name="create_pdf" id="create_pdf" class="btn btn-danger btn-xs">Make PDF</button>
</form>

<script type="text/javascript">
$('#hidden_html').val($('#testing').html());
var form_data = $('form').serialize();
var user_id  = '<?=$valuevb['user_id'];?>';
function subfunction() {
  $.ajax({
    type: "POST",
    url: "<?=SITE_URL;?>/ajax/actionplans.php",
    data: {
      form_data: form_data, company_id:'<?= $company_id;?>', 
      user_id: user_id, action:'addpdf' 
    }
  });
}
subfunction();
</script>

Answer 1

you need to wait until the chart's 'ready' event,
before calling the ajax function.

move the call to subfunction , see following snippet...

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() { 
    var data = new google.visualization.DataTable(<?=$jsonTable7;?>);
    var options = {
      title : 'Average Quality Score %',
      pointSize: 2,
      legend: {position: "top"},
      hAxis: {//title: 'Month',
      format: 'MMM-yy',
      slantedText: true,
      slantedTextAngle: 45},
      seriesType: 'line',
      height: 300,
    };

    var chart_area=document.getElementById('fifth_div_56');
    var chart = new google.visualization.ComboChart(chart_area);
    google.visualization.events.addListener(chart, 'ready', function(){
      chart_area.innerHTML = '<img src="' + chart.getImageURI()+'" class="img-responsive">';
      subfunction();  // <-- call ajax function here
    });
    chart.draw(data, options);
  }
</script>

<form method="post" role='form' id="make_pdf" enctype="multipart/form- 
  data" action="#" >
  <input type="hidden" name="hidden_html" id="hidden_html" />
  <button type="button" name="create_pdf" id="create_pdf" class="btn btn-danger btn-xs">Make PDF</button>
</form>

<script type="text/javascript">
  $('#hidden_html').val($('#testing').html());
  var form_data = $('form').serialize();
  var user_id  = '<?=$valuevb['user_id'];?>';
  function subfunction() {
    $.ajax({
      type: "POST",
      url: "<?=SITE_URL;?>/ajax/actionplans.php",
      data: {
        form_data:form_data,
        company_id:'<?= $company_id;?>', 
        user_id:user_id,
        action:'addpdf'
      }
    });
  }
  // remove from here...
</script>