mr kobeng
mr kobeng

Reputation: 33

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

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

Answers (0)

Related Questions