Почему Google Charts не отправляются через ajax для печати в формате pdf - PullRequest
Новая
       12

Почему Google Charts не отправляются через ajax для печати в формате pdf

1 голос
/ 21 октября 2019

Я использую dompdf для создания PDF и Google-диаграммы для круговых диаграмм.

Я добавил Google-диаграммы на страницу php, эти диаграммы очень хорошо отображаются в том же документе, теперь мой клиент хочет создать Google-диаграммыи сохраните их как pdf с cron-job для всех пользователей, поэтому решили использовать ajax, чтобы страница загружалась только один раз при запуске cron -job.

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

id «hidden_html» содержит диаграммы и значения 

<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>

1 Ответ

0 голосов
/ 21 октября 2019

вам нужно дождаться события 'ready' графика,
, прежде чем вызывать функцию ajax.

переместить вызов на subfunction, см. Следующий фрагмент ... 

<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>
...