Home / Questions / 383365
Accepted
DAD
Asked: 2020-08-21 03:05:56 +0800 CST 2020-08-21 03:05:56 +0800 CST

How can I display chartsjs in DomPDF and Laravel?

  • 772

I am generating ones PDFwith DomPDFand Laravel, all good to generate.

The drawback is that you need to display graphics in the PDF, and I had never used that library, and I find the novelty that it does not "accept" javascriptso everything got out of hand.

I have been trying to use some configurations that I have seen on the Internet, but they do not work for me, so I resort to this medium, hoping that someone has had the same problem and was able to solve it.

I use Charjs for graphics.

use"barryvdh/laravel-dompdf": "^0.8.6",

I know that there are other libraries but I would like to continue using DomPDF, since I am generating many pdfand adapting to another that may ask for changes, it would be very heavy for me due to the number of things that I would have to modify, if there is one that allows me to do what I need (graficos)and suits the way you work dompdfI would appreciate help with a name.

javascript

1 Answers

  1. Best Answer

    You can use Quickchart . Dompdf can render images, and Quickchart gives you that, images and works with Chartjs.

    If in Chartjs you have a chart like this (Example from the documentation):

    {
  type: 'bar',                                // Show a bar chart
  data: {
    labels: [2012, 2013, 2014, 2015, 2016],   // Set X-axis labels
    datasets: [{
      label: 'Users',                         // Create the 'Users' dataset
      data: [120, 60, 50, 180, 120]           // Add data to the chart
    }]
  }
}

    To get the image with quickchart, you simply have to do:

    https://quickchart.io/chart?c={type:'bar',data:{labels:[2012,2013,2014,2015,2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}

    Later, in your blade template, you only attach the image with the path that quickchart gives you.

    <img src="https://quickchart.io/chart?c={type:'bar',data:{labels:[2012,2013,2014,2015,2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}">

    • 5