chart.js Chart does not show up in pdf

[martinval]

This has been mentioned a few times already (#145 / #73) and I've tried all the given possibilities, but just can't get the chart in my view to print to the PDF snappy generates. I'm on Laravel 5.4 and would appreciate some help from anyone who's got this working.

Here's my code: In my controller, I pull in data from an API call and the chart is generated with the Fx3costa\LaravelChartJs package:

`$chartjs = app()->chartjs ->name('lineChartTest') ->type('line') ->labels(['January', 'February', 'March', 'April', 'May', 'June', 'July']) ->datasets([ [ "label" => "My First dataset", 'backgroundColor' => "rgba(38, 185, 154, 0.31)", 'borderColor' => "rgba(38, 185, 154, 0.7)", "pointBorderColor" => "rgba(38, 185, 154, 0.7)", "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)", "pointHoverBackgroundColor" => "#fff", "pointHoverBorderColor" => "rgba(220,220,220,1)", 'data' => $pageViews, ]

    ])
    ->options([]);`

I then try to generate the PDF like this:

` $data = array('chartjs'=> $chartjs, 'user'=> $user, 'pageViews'=> $pageViews);

    return $pdf = PDF::loadHTML(view('admin.analytics.show', $data))
                        ->setOption('enable-javascript', true)
                        ->setOption('images', true)
                        ->setOption('javascript-delay', 13000)
                        ->setOption('enable-smart-shrinking', true)
                        ->setOption('no-stop-slow-scripts', true)
                        ->download('test.pdf');`

In my view, I call the Chartjs script via cdn in the header and render the chart in a div: <div style = "width: 600px; height: 400px;"> {!! $chartjs->render() !!} </div>

Thanks in advance.

[barryvdh]

Can you check your output in HTML, does that render correctly? Make sure you use absolute paths.

[martinval]

Hi Barryvdh, thanks for your response. I am not entirely sure what you mean, but when I render the chart normally in the view, the source code comes out as follows:

When you say 'use absolute paths', what do you mean exactly ? In my controller I basically use the same code I use to show the view but instead of returning the view I do return $pdf = PDF::loadView......

[barryvdh]

I mean for the external scripts and assets, like the charts library.

[martinval]

The chart library is CDN script tag inside the head tag. I was thinking that this could be an issue. I will try to load the library into my project and reference it with an absolute path.

[martinval]

I only seem to be able to get the chart into the view with a script in the head tag like this

- and when I then try to generate a pdf I get an exit status code '1' With an absolute path the chart is empty. - I know too little about what's exactly going on behind the scenes to get any further at this stage. Anyone out there who's got a working code example for getting a chart into a laravel-snappy pdf ?

[martincarlin87]

I'm experiencing the same issue, didn't realise about the options that were available but unfortunately the dynamic sections of my page are still blank in the resulting pdf.

I read another issue that was resolved after realising it was a cross domain request but that's not the case here.

$pdf = PDF::loadView('view-name.pdf', ['myModel' => $myModel]);

$pdf->setOption('enable-javascript', true);
$pdf->setOption('images', true);
$pdf->setOption('javascript-delay', 13000); // page load is quick but even a high number doesn't help
$pdf->setOption('enable-smart-shrinking', true);
$pdf->setOption('no-stop-slow-scripts', true);

return $pdf->download('My Model ' . $id . '.pdf');

Would be very grateful for any pointers.

[martinval]

Still getting a blank pdf after doing the following:

• Copy Chart.js file into public js folder
• Use the following script tag in the view to render the chart normally:

I get the following warning in he console, which isn't the issue as far as I understand: Resource interpreted as Document but transferred with MIME type application/pdf

[inazeem]

I am having the same issue. All of my data is showing correctly but charts are rendering as blank. here is my code.

return $pdf = PDF::loadView('reports.pdf', array('chartjs' => $chartjs )) ->setPaper('a4') ->setOrientation('landscape') ->setOption('enable-javascript', true) ->setOption('javascript-delay', 13000) ->setOption('images', true) ->setOption('enable-smart-shrinking', true) ->setOption('no-stop-slow-scripts', true) ->save(storage_path()."/$filename.pdf") ->download('test.pdf');

If i return the view, it renders charts just fine. Any Help would be appreciated.

[greenwood360]

I found this answer: "By introducing a parent div tag width dimensions in the canvas tag it made the graph render in the page."

[inazeem]

I am using this already but it is coming as blank.

  <!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="application/pdf; charset=utf-8"/>

  <script type="text/javascript" src="{{ URL::asset('/js/Chart.bundle.min.js')}}"></script>
  <style>
    #wrapper{
        width:800px;height:400px; background-color: #2a62bc
     }

  </style>

  </head>
  <body>
  <div id="wrapper">
    {!! $chartjs->render() !!}

   </div>

  </body> 
  </html>`

[maxdmo]

Someone has solved this problem? I have the same issue and can't find a solution yet :(.

[maxdmo]

Hi. I come here to share my solution to this problem with laravel-snappy and Chart.js.

In my case, the problem was:

When i pass a view to the PDF generator with $snappy->generateFromHtml(... this view isn't able to render the javascript path using the elixir('js/someJs.js). So to solve this problem (the same thing was valid to CSS), i have to use the full path using public_path(elixir(... and voila... it's working.

Obs: the fixed width and height in a div that hold the canvas, and the canvas itself was necessary to.

Ty everyone and sorry for the bad english :).

[admicaa]

Yup I had solved this problem try to use Chartjs 1 not new chart js because laravel snappy uses wkhtmltopdf which doesn't support css animation and new chartjs uses css animation #4767 show that and the solution i found is to use google chart which uses svg so you can get high resolution chart

[ArturGrigio]

There is one more gatcha for rendering any js through wkhtmltopdf... You can't write any ES6 javascript:

Things like the spread operator (...), or even the let keyword will break the js render

[admicaa]

You can see this working example right here https://github.com/admicaa/larabook or you can see this article https://medium.com/@almestaadmicadiab/laravel-snappy-for-pdf-with-charts-e5c9b757d6dd

[bhaveshevolve]

Chartjs 1

Can you give proper version of chart.js i tried all version 1.x

[admicaa]

Chartjs 1

Can you give proper version of chart.js i tried all version 1.x

@bhaveshevolve , I do recommend google charts as I mentioned in my article ( because it gives you a vector results " SVG " ) but chart.js make it via javascript canvas and in the final pdf the result is not clear it has a great blur. But even if you consist on chartjs just use v 1.1.1 and don't call your script using https

[aparedesBB]

@admicaa so if I use google charts I can render the charts without a view and only place them in the PDF? I'm actually using Lavacharts http://lavacharts.com/ that are google charts based charts, they even have an option to convert them directly to .png image. But I can't render them directly in the snappy PDF.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Any issues with PDF rendering itself that are not directly related to this package, should be reported on https://github.com/KnpLabs/snappy instead. When having doubts, please try to reproduce the issue with just snappy. If you believe this is an actual issue with the latest version of laravel-snappy, please reply to this issue so we can investigate further. Thank you for your contribution! Apologies for any delayed response on our side.