Reputation: 33
Heatmap chart was not shown up in my PDF Laravel....I set enable javascript as true and some other options in my controller as code below
public function genReportPDF(Request $request)
{
$pdf = \PDF::loadView('report.ReportPDF');
$pdf->setOption('images', true);
$pdf->setOption('enable-javascript', true);
$pdf->setOption('enable-smart-shrinking', true);
return $pdf->download('ReportPDF.pdf');
}
This is my blade file named ReportPDF.blade.php . I use amchart package for my heatmap chart .
<script type="text/javascript" >
am4core.ready(function() {
// Themes begin
// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.width = am4core.percent(50);
chart.height = am4core.percent(50);
chart.maskBullets = true;
var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
yAxis.title.text = "Likelyhood of occurrence";
xAxis.title.text = "Magnitude of Impact";
yAxis.title.fontWeight = "bold";
xAxis.title.fontWeight = "bold";
xAxis.dataFields.category = "x";
yAxis.dataFields.category = "y";
xAxis.renderer.grid.template.disabled = true;
xAxis.renderer.minGridDistance = 40;
yAxis.renderer.grid.template.disabled = true;
yAxis.renderer.inversed = true;
yAxis.renderer.minGridDistance = 30;
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "x";
series.dataFields.categoryY = "y";
series.dataFields.value = "value";
series.sequencedInterpolation = true;
//series.defaultState.transitionDuration = 3000;
// Set up column appearance
var column = series.columns.template;
column.strokeWidth = 2;
column.strokeOpacity = 1;
column.stroke = am4core.color("#ffffff");
column.tooltipText = "{x}, {y}: {value.workingValue.formatNumber('#.')}";
column.width = am4core.percent(100);
column.height = am4core.percent(100);
column.column.cornerRadius(6, 6, 6, 6);
column.propertyFields.fill = "color";
var bullet2 = series.bullets.push(new am4charts.LabelBullet());
bullet2.label.text = "{value}";
bullet2.label.fill = am4core.color("#000000");
bullet2.zIndex = 1;
bullet2.fontSize = 13;
bullet2.interactionsEnabled = false;
var legend = new am4charts.Legend();
legend.parent = chart.chartContainer;
legend.data = [{
"name": "Very High",
"fill": am4core.color("#ca0101")
}, {
"name": "High",
"fill": am4core.color("#F6BE11")
}, {
"name": "Medium",
"fill": am4core.color("#F4FF00")
}, {
"name": "Low",
"fill": am4core.color("#2B97BE")
}, {
"name": "Very Low",
"fill": am4core.color("#0CAD23")
}];
chart.data = [{
"y": "5 - Almost Certain",
"x": "1 - Insignificant",
"color": "#F4FF00",
"value": 20
}, {
"y": "4 - Likely",
"x": "1 - Insignificant",
"color": "#F4FF00",
"value": 15
}, {
"y": "3 - Moderate",
"x": "1 - Insignificant",
"color": "#2B97BE",
"value": 25
}, {
"y": "2 - Unlikely",
"x": "1 - Insignificant",
"color": "#0CAD23",
"value": 15
}, {
"y": "1 - Rare",
"x": "1 - Insignificant",
"color": "#0CAD23",
"value": 12
}
];
// define colors
var colors = {
"critical": "#ca0101",
"bad": "#e17a2d",
"medium": "#e1d92d",
"good": "#5dbe24",
"verygood": "#0b7d03",
};
var baseWidth = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight);
var maxRadius = baseWidth / Math.sqrt(chart.data.length) / 2 - 2; // 2 is jast a margin
chart.plotContainer.events.on("maxsizechanged", function() {
var side = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight);
})
});
</script>
<div id="chartdiv"></div>
I use laravel 5.8 version.Previously I use domPDF but seems that package does not support javascript . Sorry if my explaination not clear. Hope its helped.
Upvotes: 1
Views: 264