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 ();
?>