I have created a chart successfully but I don't know how to render this chart in pdf. I have tried many things but it's not working. I have created charts using the 'Laravel charts' library and using the 'DOMpdf' library for generating pdf. Also, I have tried to convert Canvas to Image but it's not working. Please help me. I'm new to Laravel.
Thank You for your assist
chart.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<canvas id="myChart" height="100px"></canvas>
</div>
<button id="convertButton">pdf</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
<script type="text/javascript">
var labels = {{ Js::from($labels) }};
var users = {{ Js::from($data) }};
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: users,
}]
};
const config = {
type: 'line',
data: data,
options: {}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
<script>
const canvas = document.getElementById('myChart');
const convertButton = document.getElementById('convertButton');
convertButton.addEventListener('click', () => {
const canvasData = canvas.toDataURL(); // Convert canvas content to data URL
// Send the canvas data to the server using fetch
fetch('/pdf', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `imageData=${encodeURIComponent(canvasData)}`
})
.then(response => response.json())
.then(result => {
console.log(result.message);
});
});
</script>
</body>
</html>
/pdf(route) function:
public function generatePDF(Request $request)
{
$users = User::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
->whereYear('created_at', date('Y'))
->groupBy(DB::raw("month_name"))
->orderBy('id','ASC')
->pluck('count', 'month_name');
$labels = $users->keys();
$data = $users->values();
$imageData = $request->input('imageData');
// Remove the data URL prefix to get the actual base64-encoded image data
$imageData = str_replace('data:image/png;base64,', '', $imageData);
$decodedImageData = base64_decode($imageData);
echo "<pre>";
print_r($decodedImageData);echo "<br>";
// Generate a unique filename for the image
$filename = 'canvas.png';
$filepath = public_path($filename);
// Save the image in the storage directory
Storage::disk('public')->put($filename, $decodedImageData);
$chartHtml = view('pdf', compact('filepath'))->render();
$pdf = PDF::loadHTML($chartHtml);
return $pdf->stream('chart.pdf');
}
pdf.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="{{$filepath}}" alt="charts">
</div>
</div>
</div>
</body>
</html>