I need to generate a radar chart in Charts.js and insert it in a pdf document (dompdf).

1,750 views
Skip to first unread message

Heron Loureiro Teixeira da Silva

unread,
Apr 2, 2020, 1:51:26 PM4/2/20
to dompdf
I need to generate a radar chart in Charts.js and insert it in a pdf document (dompdf).
I have a file called: Competencia_teste.php it has the code for creating the graph:
<html>

<head>
<title> Radar Chart - Example </title>
<script type = "text / javascript" src = "chartjs / Chart.js"> </script>

</head>

<body>






<canvas id = "myChart" width = "400" height = "400"> </canvas>

<script>
var data = {
labels: ["Dominance", "Influence", "Stability", "Compliance"],
datasets: [{
label: "My First dataset",
fillColor: "rgba (220,220,220,0.2)",
strokeColor: "rgba (220,220,220.1)",
pointColor: "rgba (220,220,220.1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba (220,220,220,1)",
date: [25,25,36,45]
}]
};

var options = {
// Boolean - Whether to show lines for each scale point
scaleShowLine: true,



// Boolean - Whether we show the angle lines out of the radar
angleShowLineOut: true,


// Boolean - Whether to show labels on the scale
scaleShowLabels: true,



// Boolean - Whether the scale should begin at zero
scaleBeginAtZero: true,

// String - Color of the angle line
angleLineColor: "rgba (0,0,0, .1)",

// Number - Pixel width of the angle line
angleLineWidth: 1,

// String - Point label font declaration
pointLabelFontFamily: "'Arial'",

// String - Point label font weight
pointLabelFontStyle: "normal",

// Number - Point label font size in pixels
pointLabelFontSize: 10,

// String - Point label font color
pointLabelFontColor: "# 666",

// Boolean - Whether to show a dot for each point
pointDot: true,

          
           
         


// Number - Radius of each point dot in pixels
pointDotRadius: 3,

// Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,

// Number - extra amount to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius: 20,

// Boolean - Whether to show a stroke for datasets
datasetStroke: true,

// Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,

// Boolean - Whether to fill the dataset with a color
datasetFill: true
};

var ctx = document.getElementById ('myChart'). getContext ('2d');
var myRadarChart = new Chart (ctx) .Radar (data, options);


   

</script>
</body>

</html>

I created the file rel_avaliacaoDISC_class_teste.php that will call the file Competencia_teste.php to open the pdf with the created graphic.
<? php

// Load DOMPDF

require_once '../dompdf/autoload.inc.php';
use Dompdf \ Dompdf;

$ html = file_get_contents ("http: //localhost/sistema/teste_pratico.html");

// $ html = file_get_contents ("http: //localhost/sistema/rel/rel_avaliacao_DC.php? id =". $ id);
// echo $ html;

// Initialize the DOMPDF class
$ pdf = new DOMPDF ();

// Set the paper size and page orientation
//Landscape
// $ pdf-> set_paper ('A4', 'landscape'); portrait


$ pdf-> set_option ('isHtml5ParserEnabled', true);


//Portrait
$ pdf-> set_paper ('A4', 'portrait');
// Load HTML content

$ pdf-> load_html ($ html);


// Render the PDF
$ pdf-> render ();

// Name the generated PDF
$ pdf-> stream ('DISC2 Assessment Report.pdf',
              array ("Attachment" => false));

// $ pdf-> stream ();
 ?>

BrianS

unread,
Jun 7, 2020, 9:33:43 PM6/7/20
to dompdf
Dompdf doesn't render JavaScript, so you'll have to either render in the browser and then send the content of the canvas back to the server (e.g. via AJAX call) or use a library that front ends a headless browser (e.g. wkhtmltopdf).
Reply all
Reply to author
Forward
0 new messages