title: DOMPDF - Display google chart in the PDF where data obtained from database
body: <p>I am generating a chart using the Google Charts API and the data from my database, which means that there is a call to an external file and data is echoed back in a JSON format. I know that the chart can be converted to an image so I thought that this might work but unfortunately not I have tried the code below:</p>
  
  <pre><code>  google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
  
    function drawChart() {
      var jsonData = $.ajax({
    url: "getData.php?id=&lt;?php echo $user_id; ?&gt;';",
    dataType:"json",
    async: false
    }).responseText;
      var data = new google.visualization.DataTable(jsonData);
  
     var options = {
          hAxis: {
            title: 'Audit Number'
          },
          vAxis: {
            title: 'Gross Profit %'
          }
        };
      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  
     google.visualization.events.addListener(chart, 'ready', function () {
      var imgUri = chart.getImageURI();
      // do something with the image URI, like:
      document.getElementById('chartImg').src = imgUri;
  });
  
          chart.draw(data, options);
  
    }
  </code></pre>
  
  <p>I then call include the graph on the PDF report by </p>
  
  <pre><code>   $rep_table = " &lt;html&gt;&lt;img id='chartImg' /&gt;
  </code></pre>
  
  <p>When I load the page in HTML view, it displays the chart but it's still interactive so the first issue is definitely something to do with the conversion of the chart. </p>
  
  <p>The code for generating the report can be seen below</p>
  
  <pre><code>$total = db::c()-&gt;query("
          SELECT sum(value) FROM stocktake_allowances WHERE stocktake_id = '{$stocktake_id}' AND customer_id = '".$user_id."';")-&gt;fetchColumn(0);        
  
      $dep_qry = "SELECT
                       category_name AS category_name,allowance_date AS date, SUM(value) AS total_cost
                  FROM stocktake_allowances
                  ";
  
  
      $dep_qry .= " WHERE stocktake_id = '{$stocktake_id}' AND customer_id = '".$user_id."'
                    ";
  
      $dep_qry .= "
              GROUP BY TRIM(UPPER(category_name))
              ORDER BY category_name, allowance_date ASC";
  
      //echo $dep_qry;
  
      $dep_res = db::c()-&gt;query($dep_qry);
      $rep_table .= " &lt;html&gt;&lt;img id='chartImg' /&gt;&lt;img id='chart_div' /&gt;&lt;br/&gt;&lt;br/&gt;&lt;link rel='stylesheet' href='./index/style.css' type='text/css'&gt;  &lt;table class='st_det_rep' &gt;
                               &lt;tr&gt;
                                   &lt;td style='width:80%; text-align:center; font-size:30px;'&gt;
                                    &lt;img src='index/EasyCountio.png' alt='EasyCount.io' height='61' width='280'/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
                                       &lt;strong&gt;Wastage Summary&lt;/strong&gt;&lt;br/&gt;
  
                                   &lt;/td&gt;
  
                              &lt;/tr&gt;
                           &lt;/table&gt;";          
      $rep_table .= "
                   &lt;table id='stock_detail_report' cellspacing='0' style='margin-top:10px;'&gt;
                       &lt;tr&gt;
                           &lt;td class='top' style='width:30%;'&gt;&lt;div class='nosplit'&gt;Wastage Category&lt;/div&gt;&lt;/td&gt;
                           &lt;td class='top' style='width:15%;'&gt;&lt;div class='nosplit'&gt;Ref. No.&lt;/div&gt;&lt;/td&gt;
                           &lt;td class='top' style='width:15%;'&gt;&lt;div class='nosplit'&gt;Value&lt;/div&gt;&lt;/td&gt;
  
                       &lt;/tr&gt;";
      $sum_total_cost = 0;
      $sum_total_retail = 0;
      $sum_total_qty = 0;
      $counter = 1;
      $j=0;
  
       while ($row = $dep_res-&gt;fetch(PDO::FETCH_ASSOC))
      {        
          $total_cost = $row['total_cost'];//$row['unit_cost_price']*$row['qty'];
          $catName = $row['category_name'];
          $sum_total_cost += $total_cost;
  
          $date = date("d-M-y", strtotime($row['date']));
          $tc = number_format($total_cost, 2);
  
          if(!($j%2)) {
          $cssClass = 'odd';
           } else {
              $cssClass = 'even';
           }
           $j++;
  
  
          $rep_table .= "&lt;tr&gt;
                         &lt;td style='text-align:right;'&gt;&lt;div class='nosplit'&gt;".$catName."&lt;/div&gt;&lt;/td&gt;
                         &lt;td style='text-align:right;'&gt;&lt;div class='nosplit'&gt;".$counter."&lt;/div&gt;&lt;/td&gt;
                         &lt;td style='text-align:right;'&gt;&lt;div class='nosplit'&gt;&amp;#8364;".$total_cost."&lt;/div&gt;&lt;/td&gt;
  
  
                      &lt;/tr&gt;";                
          $counter++;
      }
  
      $stc = number_format($sum_total_cost, 2);
  
      $rep_table .= "&lt;tr&gt;
                      &lt;td class='bottom' colspan = '2'&gt;&lt;div class='nosplit'&gt;Total Wastage:&lt;/div&gt;&lt;/td&gt;
  
                      &lt;td class='bottom'&gt;&lt;div class='nosplit'&gt;&amp;#8364;".$stc."&lt;/div&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;";
  
       $dompdf = new Dompdf();
       $dompdf-&gt;loadHtml($rep_table);
  
      // // (Optional) Setup the paper size and orientation
       $dompdf-&gt;setPaper('A4', 'l');
  
      // // Render the HTML as PDF
       $dompdf-&gt;render();
  
      // // Output the generated PDF to Browser
       $dompdf-&gt;stream("Allowances Summary.pdf", array("Attachment" =&gt; false));
  </code></pre>
  
  <p>The bigger issue is with including the graph on the report. When I try to generate the PDF report I get an error saying that the headers have already been sent. I used one of the tips on SO to find out what the problem is and this is what I got back:</p>
  
  <pre><code>/home/arturl/public_html/platform/class/class_report.php
  21
  </code></pre>
  
  <p>Which corresponds to</p>
  
  <pre><code> url: "getData.php?id=&lt;?php echo $user_id; ?&gt;';",
  </code></pre>
  
  <p>This makes perfect sense as the json string is echoed back and DOMPDF sees it as a header. Is there any other way to get this done?</p>