Heatmap Chart not shown in pdf by using Laravel Snappy to render amchart on a PDF Laravel

228 Views Asked by At

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.

0

There are 0 best solutions below