amancolab
wrote on 2014-05-12:
Hi,
Ours is a complex web application with use of high charts and slickgrid. We are trying to generate PDF out of our report. High charts come out as blank in the generated PDF.
I tried with highchart samples provided at http://www.highcharts.com/download. Result is the same, blank space in place of high chart.
Any pointers will be helpful.
Thanks,
Aman
rohits@surveyanalytics.com
wrote on 2014-08-06:
Hello,
I have tried generating pdf from html source code for my web application. The html source code contains the high charts, The charts can sometimes gets rendered correctly but when I change the series data most of the times it gets crashed in crash case charts appear but they are not fully rendered i.e. they are broken from in between the chart area,
Can you please resolve this as soon as possible I want this fix on urgent basis.
please find below URLs of generated charts the sample codes are from http://www.highcharts.com/demo.
1] HTML Code used for pdf generation
<html>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 0,
max:217,
startOnTick: false,
endOnTick:false
},
series: [{
data: [40, 71.5, 106.4, 0, 144.0, 176.0, 0, 148.5, 216.4, 120, 95.6, 54.4]
}]
});
});
</script>
<div id="container" style="height: 300px; padding : 30px;"></div>
</html>
Screenshot of the generated pdf for above code :
https://nimbus.everhelper.me/client/notes/share/54265/nAaDkkJy3vyQNZm7cWpFHRLrBFw16nME/
2] Another HTML Code
<html>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 0,
max:217,
startOnTick: false,
endOnTick:false
},
series: [{
data: [40, 120, 131, 120, 90, 176.0, 30, 40, 65, 140, 75, 84.4]
}]
});
});
</script>
<div id="container" style="height: 300px; padding : 30px;"></div>
</html>
Screenshot for the above code :
https://nimbus.everhelper.me/client/notes/share/54267/aGGJU8346ySRhbKMmnTnih0y26AeBmBN/
Thanks.