Could not make Highcharts display in pdf

Question

I am trying to export a html page to pdf in ruby on rails application. The html page has highcharts, tables and images. I am using wkhtmltopdf and highcharts.

Gemfile

gem "highcharts-rails"
gem 'wicked_pdf'
gem 'wkhtmltopdf-binary'
gem 'wkhtmltopdf-binary-edge'

export_pdf.html.erb

<div id="container"></div>


<script type="text/javascript">

 Highcharts.chart('container', {

   title: {
       text: 'Solar Employment Growth by Sector, 2010-2016'
   },

   subtitle: {
       text: 'Source: thesolarfoundation.com'
   },

   yAxis: {
       title: {
           text: 'Number of Employees'
       }
   },
   legend: {
       layout: 'vertical',
       align: 'right',
       verticalAlign: 'middle'
   },
plotOptions: {
                 line: {
                   marker: {
                     enabled: false
                   },
                   dashStyle: 'ShortDash'
                 },
                 series: { enableMouseTracking: false, shadow: false, animation: false } 
               },

   series: [{
       name: 'Installation',
       data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
   }, {
       name: 'Manufacturing',
       data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
   }, {
       name: 'Sales & Distribution',
       data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
   }, {
       name: 'Project Development',
       data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
   }, {
       name: 'Other',
       data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
   }],

   responsive: {
       rules: [{
           condition: {
               maxWidth: 500
           },
           chartOptions: {
               legend: {
                   layout: 'horizontal',
                   align: 'center',
                   verticalAlign: 'bottom'
               }
           }
       }]
   }

});
</script>

app/views/layouts/pdf.html.erb

<html>
<head>
<title>PDF</title>
<%= wicked_pdf_stylesheet_link_tag "application" -%>
</head>
<body> <div class='container'>
<%= yield %>
</div></body>
</html>

reports_controller.rb

def export_pdf
  respond_to do |format|
    format.html
    format.pdf do
      render pdf: "your_assessment_printout.pdf",
      disposition: "inline",
      template: "reports/export_pdf.html.erb",
      layout: "pdf.html.erb",
      :disable_javascript   => false,
      javascript_delay: 1000
    end
    format.html
  end
end

Am using,

ruby 2.3.0
rails 5.1.1

Charts display well in html page, but in pdf it is not displaying. Other contents like tables and images are displaying in pdf. Please comment if need to post more details on this.

Hi @poombavai, Have you tried to disable chart and series animation? — ppotaczek, Aug 27 '19 at 08:32
yes. Disabled series animation. But how to disable chart and why should we need that? @ppotaczek — poombavai, Aug 27 '19 at 08:45
I mean chart animation and series animation. We need that to prevent asynch chart loading. — ppotaczek, Aug 27 '19 at 08:48
Please also check these two threads: https://stackoverflow.com/questions/14160340/wkhtmltopdf-fails-to-printing-svg-path-highchart, https://stackoverflow.com/questions/19106434/using-wkhtmltopdf-with-highcharts-shows-blank-chart — ppotaczek, Aug 27 '19 at 10:13

score 1 · Answer 1 · answered Aug 27 '19 at 11:12

1

You didn't include highcharts js in the PDF layout. Add highcharts js to PDF layout.

# app/views/layouts/pdf.html.erb
<head>
  ..
  <%= wicked_pdf_javascript_include_tag 'highcharts' %>
  ..
</head>

answered Aug 27 '19 at 11:12

demir

4,591
2
22
30

score 0 · Answer 2 · answered Aug 27 '19 at 07:34

So We are using WickedPdf's pdf_from_string() on an HTML page generated with render_to_string() with a javascript delay to ensure that the charts have been rendered.

def export_pdf
    format.pdf do
      pdf = WickedPdf.new.pdf_from_string(
        render_to_string('reports/export_pdf.html.erb',
          :layout => 'layouts/pdf.html',
          :javascript_delay => 5000),
      )
      send_data pdf, filename: "#{@report.name}.pdf",
            type: 'application/pdf',
            disposition: 'inline'
end

Could not make Highcharts display in pdf

2 Answers2