I am facing a peculiar issue with my Angular.js application that uses Highcharts for graph rendering. The application needs to support PDF printing, which is achieved through our company's Phantomjs PDF service.
Graphs are generated using a custom directive. Here is a simplified version of the code:
app.directive('metricsChartMulti', [
function () {
return {
...
link: function postLink(scope, element, attrs) {
...
// Plot data after loading
scope.$on('DATA_LOAD_SUCCESS', function() {
var chartOptions = {
series: scope.series
...
};
var chart = new Highcharts.Chart(chartOptions);
});
}
}
}
]);
The series data (scope.series) are prepared in the controller and added to the scope. Everything works perfectly in the browser without any errors. However, when I use the Phantomjs2-based PDF creation service, the graphs do not render in the resulting PDF file.
I have checked the code thoroughly but couldn't find any issues. I followed common best practices for Angular framework while developing the app. After extensive debugging, I discovered that replacing scope.series with static mock data results in correct PDF plot generation.
This change is not visually noticeable in browsers like Chrome and Firefox.
I also tested generating PDFs directly from the Highcharts website, and they were created correctly. This indicates that there might not be an issue with our company's PDF service.
Any suggestions on how to resolve this unusual dilemma? Thank you.