Highchart render in pdf generated using PHP mPdf

Asked
Active3 hr before
Viewed126 times

5 Answers

usingrender
90%

I'm using Mpdf to make some values I've saved in SESSIONS in php become a report, so that's fine, but the page I want to turn into report has Highcharts Js graphics, I do not know how to export those graphics directly for the report that will be in pdf. , If graphics are empty, try disabling highcharts animations. , Send the result by ajax to php, and then include it in your mpdf: , To generate PDF tries to use a library called wkhtmltopdf, it is an interesting project that transforms into PDF the page rendered by the webkit, Google rendering engine.

An example of this would be:

var hightchart = $('#container').highcharts().getSVG(); // Pega o highcharts e transforma em SVG.
load more v
88%

I am using Yii and have highcharts located in the extensions folder which contains everything I need. I had to download and place batik in that directory.,I am using yii framework 1.14 with php on centos 5. I have designed a view that contains 4 graphs created using highcharts. i want to export this page to pdf from my controller/action method. The following is what I have so far. the html gets produced fine but when i try to export to pdf i only get the headers in the view and no graphs.,If i put on the view and use my pdf printer to create pdf. it creates the x and y axis of the graphs but no columns.,I am trying to do the following which shoudl create the image and place in temp dir. I have set up highcharts to use local exporting server.

view

<head>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-2.1.0.js"></script> 
<script
    type="text/javascript"
    src="<?php echo Yii::app()->request->baseUrl; ?>/js/highcharts/highstock.js"></script>

<script
    type="text/javascript"
    src="<?php echo Yii::app()->request->baseUrl; ?>/js/highcharts/highcharts-more.js"></script>
<script
    type="text/javascript"
    src="<?php echo Yii::app()->request->baseUrl; ?>/js/highcharts/modules/exporting.js"></script> 

<script>
function redyellowgreen(x){
    //console.log($(x).parent());
    $(x).attr('fill','url(#MyGradient)');
}

function createGradient(svg,id,stops){
      var svgNS = svg.namespaceURI;
      var grad  = document.createElementNS(svgNS,'linearGradient');
      grad.setAttribute('id',id);
      for (var i=0;i<stops.length;i++){
        var attrs = stops[i];
        var stop = document.createElementNS(svgNS,'stop');
        for (var attr in attrs){
          if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr,attrs[attr]);
        }
        grad.appendChild(stop);
      }

      var defs = svg.querySelector('defs') || svg.insertBefore( document.createElementNS(svgNS,'defs'), svg.firstChild );
      return defs.appendChild(grad);
    }
</script>
</head>

<body>
<h1>Multiclient Projects</h1>
<?php foreach ($arr as $key=>$value){?>
<?php if($key==3)
    echo "<h1>Propiertary Projects</h1>";
?>
<div id="weekly_status_graph<?=$key?>" style="height:600px;width: 900px;">

    <?php $this->renderPartial('weekly_status_graph_template',$value);?>
    </div>
<?php }?>

</body>

view2

<script>
$(document).ready(function(){
//function buildColumnGraph(data){  
    var projects_title = <? echo json_encode($title);?>;

    $('#weekly_status_graph<?=$key?>').highcharts({


    //var chart = new Highcharts.Chart({
        chart:{
            type:'column',
            //inverted:true,
            //renderTo: 'container'
        },      
        title:{
            text:projects_title
            },
        xAxis:{
            categories:<? echo json_encode($cat); ?>,
            //min: data.scroll,
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis:{
            min:0,
            max:100,
            title: {
                text: '% COMPLETE'
            },
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        tooltip:{
            formatter: function(){              
                if(this.series.name == "Actual"){
                    return "Actual POC " + this.y + "%";
                }else if(this.series.name == "Planned"){
                    return "Planned POC " + this.y + "%";
                }
            }  
        },
        legend:{
            enabled:true,
            verticalAlign:'top',
            align:'right',
            floating: true,
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false,
        },
        series:[
                    {
                    'name':'Planned',
                    'data':<? echo json_encode($planned); ?>,
                    'color': "rgb(91,155,213)"  
                    },
                    {
                    name:'Actual',
                    data:<? echo json_encode($complete); ?>,
                    color: 'rgb(237,125,49)'    
                    }
                ]

    }); // end of columngraph      


    // create linear gradient for legend in 2 graph
    createGradient($('svg')[0],'MyGradient',[
        {offset:'3%', 'stop-color':'red'},
        {offset:'95%','stop-color':'#10f200'}
    ]);

//}
});


</script>

I am trying to do the following which shoudl create the image and place in temp dir. I have set up highcharts to use local exporting server.

var data = "filename=" + < ? = $key ? > +"&type=image/png&width=900px&scale=2&svg=" + $("#weekly_status_graph<?=$key?>").children("div").contents("svg");
$.ajax({
   type: "POST",
   url: '<?php echo Yii::app()->request->baseUrl;?>/protected/extensions/highcharts/exporting-server/php/php-batik/index.php',
   data: data,
   success: function(data) {}
});

The jquery result i get is

<pre>About to transcode 1 SVG file(s)

Converting 5ea8ca9b4530955b6076e033627b1f49.svg to temp/5ea8ca9b4530955b6076e033627b1f49.png ... ... error (SVGConverter.error.while.rasterizing.file)
</pre>Error while converting SVG.
<h4>Debug steps</h4>
<ol>
   <li>Copy the SVG:<br /><textarea rows=5>[object Object]</textarea></li>
   <li>Go to <a href='http://validator.w3.org/#validate_by_input' target='_blank'>validator.w3.org/#validate_by_input</a></li>
   <li>Paste the SVG</li>
   <li>Click More Options and select SVG 1.1 for Use Doctype</li>
   <li>Click the Check button</li>
</ol>
load more v
72%

Let's see bellow tutorial step by step:,When you work with big laravel application at time you may need to generate pdf file with chart in laravel. you might used google chart, chart js, highcharts etc with laravel. here i will show you step by step tutorial of how to generate pdf file with chart.,you can easily generate pdf file with laravel 6 and laravel 7 too.,you can easily create pdf file with image in laravel 6, laravel 7 and laravel 8.

sudo apt install wkhtmltopdf
load more v
65%

generate pdf file in php code,generate pdf in php example 1. TCPDF ,PHP Generate HTML file into PDF ,PHP How-to create Dynamic PDF Files using FPDF

< ? php
require('fpdf/fpdf.php');

$pdf = new FPDF();
$pdf - > AddPage();
$pdf - > SetFont('Arial', 'B', 20);
$pdf - > Cell(50, 10, 'Pakainfo.com!');
$pdf - > Output(); ?
>
load more v
75%

Note, this is just an example on how to use the FPDI class. Since the object is written for PHP5 you need to use the TCPDF class or you need to change the code first for PHP4.,The following classes are written to generate PDF files “from the scratch” by using native PHP functions:,FPDI is a great class extension for the FPDF and the TCPDF class script. It’s easy: The PHP code opens a file, keeps it in the web server’s memory and you can add text and images. The following example will show how it works.,Thanks Nick for this links and the information. I’m sure the people using PHP libs for PDF creation like to try the POPPHP framework ;)

FPDI is a great class extension for the FPDF and the TCPDF class script. It’s easy: The PHP code opens a file, keeps it in the web server’s memory and you can add text and images. The following example will show how it works.

class myExtension fpdi {
   public
   function addContent($pdffile) {
      $this - > setSourceFile($pdffile);
      $page = $this - > ImportPage(1);
      $this - > AddPage();
      $this - > useTemplate($page);
      $this - > $this - > Image('someimage.png', 150, 5, 40, 20, 'PNG');
      $this - > createTextField($string, 25, 50, 40);
   }
   public
   function createTextField($string, $x, $y, $width, $height = 2) {
      $this - > SetXY($x, $y);
      $this - > Setfont("Arial", "", 10);
      $this - > Cell($width, $height, $string, 0, 0, "");
   }
}
$pdf = new myExtension();
$pdf - > addContent('origpdffile.php');
$pdf - > Output('newpdffile.pdf', 'I');

Other "using-render" queries related to "Highchart render in pdf generated using PHP mPdf"