I was running some pdf reports with Google charts until recently, when suddenly Google charts won't appear. Rest of the report works fine. I was using razor view engine to run a template file that had the javascript to load google charts.
The template file has a initCharts() function that is triggered by <body onload=initCharts()>. This function loads Google charts as below:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
function initChart() {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawCharts);
}
other functions to load various charts
This template file is then loaded by razor view engine as below:
public async Task<string> RenderToStringAsync(string viewName, object model, string logoUrl)
{
Dictionary<object, object> dictionary = new Dictionary<object, object>();
dictionary.Add("LogoUrl", logoUrl);
var httpContext = new DefaultHttpContext { RequestServices = _serviceProvider, Items = dictionary };
var actionContext = new ActionContext(httpContext, new RouteData(), new ActionDescriptor());
using (var sw = new StringWriter())
{
var viewResult = _razorViewEngine.FindView(actionContext, viewName, false);
if (viewResult.View == null)
{
throw new ArgumentNullException($"{viewName} does not match any available view");
}
var viewDictionary = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary())
{
Model = model
};
var viewContext = new ViewContext(
actionContext,
viewResult.View,
viewDictionary,
new TempDataDictionary(actionContext.HttpContext, _tempDataProvider),
sw,
new HtmlHelperOptions()
);
await viewResult.View.RenderAsync(viewContext);
return sw.ToString();
}
}
The output of the razorview engine (from RenderToStringAsync function) is given to DinkToPdf library to convert to pdf.
The problem I have is, when google.charts.load line executes, it fails or before it could load the javascript the razorview returns html. The javascript is not executed in razorview hence the charts do not get rendered. But if I copy the output to a HTML file and open that with a browser the charts work as expected. The javascript doesn't seem to get executed inside razorview engine after the google.charts.loadline.
Is there anyway I can see the result of executing javascript in razorview engine? Can I see the errors if there are any? Can I load a third-party script like google and execute it in razorview engine?
I have spent quite a lot of time to no avail. Your help will be much appreciated!
The problem was resolved by replacing DinkToPdf with PhantomJS to create PDFs. DinkToPdf fails to load Google charts. This may have been caused by Google redirecting requests to jsapi to their newer loader.js, which DinkToPdf could not handle for some reason.
Running wkhtmltopdf, which DinkToPdf uses, on commandline showed some errors when accessing https as below:
Since we could not resolve this issue, we decided to use PhantomJS and it works fine to create PDFs.