CODEWITHSUNDEEP
highchartswkhtmltopdfrotativa
Chris Harrington
Chris Harrington

Reputation: 1652

Using wkhtmltopdf with highcharts shows blank chart

I'm attempting to use wkhtmltopdf via Rotativa to convert a basic html page which uses jquery and highcharts to render a demo chart. The chart renders correctly when displayed in a browser. Can anyone tell me what I'm doing wrong? This code results in a blank PDF.

My view:

<!DOCTYPE html>

<html>
  <head>
    <title>Highcharts Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        #chart { float:left; width:300px; height:300px; }
    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script>
        $(function() {
            $('#chart').highcharts({
                chart: {
                    backgroundColor: "red"  
                },
                title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: WorldClimate.com',
                    x: -20
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '°C'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: 'Tokyo',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: 'New York',
                    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                }, {
                    name: 'Berlin',
                    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                }, {
                    name: 'London',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }]
            });
        });
    </script>
</head>

<body>
    <div id="chart"></div>
</body>
</html>

And here's my controller:

using System.Web.Mvc;
using Rotativa;

namespace Completions.MvcApplication.Controllers.Pages
{
public class ReportsController : BasePageController
{
    public ActionResult Systems()
    {
        return new ViewAsPdf();
    } 
}
}

Thanks!
Chris

Upvotes: 2

Views: 4910

Answers (2)

William Alexandre
William Alexandre

Reputation: 31

To me it seemed to me that the graph would stop rendering midway through. So what worked for me was setting the animation off: 

plotOptions: {
    series: {
        animation: false
    }
}

This way the chart is ready once the pdf is generated.

Upvotes: 2

Michael
Michael

Reputation: 12806

I had this issue and the cause was JavaScript errors. You can confirm this by running wkhtmltopdf with the --debug-javascript flag. For more detailed debugging (e.g. line numbers) you'll have to download the QtWeb browser.

Specifically in my case the two issues were that Object.values(obj) is an undefined function and $('a:not(.ignore)') is a syntax error (when jQuery 3.1.1 tried to use the selector). The fix was to use Object.keys(obj).map(function (key) { return obj[key] }) and $('a').not('.ignore').

Upvotes: 3

Related Questions