Click here to Skip to main content
14,265,888 members
Rate this:
Please Sign up or sign in to vote.
See more:
I am creating a line chart using Morris.js which the data are retrieved from mySQL database. I wanted to download it as PDF file that contains the entire chart.

Here's my code :

      $connect = mysqli_connect("localhost", "root", "", "testing");
      $query = "SELECT * FROM purchase";
      $result = mysqli_query($connect, $query);
      $chart_data = '';
      while($row = mysqli_fetch_array($result))
        $chart_data .= "{ year:'".$row["year"]."', profit:".$row["profit"].", purchase:".$row["purchase"].", sale:".$row["sale"]."}, ";
      $chart_data = substr($chart_data, 0, -2);

<div class="row">
       <div id="chart" style="width:800px;"></div>
       <canvas id="canvas" width="800px;"></canvas>
       <button onclick="save();">Download</button>  

     element : 'chart',
     data:[<?php echo $chart_data; ?>],
     ykeys:['profit', 'sale'],
     labels:['Profit', 'Sale'],

   function save() {
      html2canvas(document.getElementById('canvas'), {
      onrendered: function(canvas) {
      var img = canvas.toDataURL();
      var doc = new jsPDF();
      doc.addImage(img, 10, 10);'test.pdf');

What I have tried:

I've tried using html2canvas and jsPDF to generate the PDF. However, the PDF generated/downloaded does not contain any data on it.
Gerry Schmitz 7-May-19 11:32am
Try "printing"; select a PDF (or XPS, etc.) printer driver when it comes time to select a printer.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100