cann't make Chart when convertting View MVC to PDF - model-view-controller

Question

I am trying to convert the output of MVC view to PDF. I could do that by Rotativa pretty good by using this video
https://www.youtube.com/watch?v=VkHcG24nM8U
but there is still a problem. in the view I am creating a radar chart dynamically. which when the pdf is created it is missing. is it possible to make chart when converting view to PDF file?
This is the code for making Rotativa viewTo PDF
public async Task<IActionResult> PrintPDF(long wId, long cId, long pId, long aId, short no)
{
var result = await _accessmentFacad.GetAssessmentResultForUserByIdService.Execute(wId, cId, pId, aId, no);
return new ViewAsPdf("PrintPDF", result)
{
FileName ="sample.pdf",
PageOrientation = Rotativa.AspNetCore.Options.Orientation.Portrait,
PageSize = Rotativa.AspNetCore.Options.Size.A4,
};
}
and using this jquery radarchart code for creating the chart
<script>
var BeforeWorkshop = []; //these are javascript array variables
var AfterWorkshop = [];
#if(Model.ResultCategoriesDtos.Count>0)
{
foreach(var item in Model.ResultCategoriesDtos)
{
#:BeforeWorkshop.push(#item.Answer3_1);
#:AfterWorkshop.push(#item.Answer3_2);
}
}
var RadarChart = document.getElementById('radarchart').getContext('2d');
var chart = new Chart(RadarChart, {
type: 'radar',
data: {
labels: ["1Lesson", "2Lesson","3Lesson", "4Lesson", "5Lesson"],//x axis labels
datasets: [{
label: "First",
data: BeforeWorkshop,
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 255)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)',
}
, {
label: "Second",
data: AfterWorkshop,
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}
]
},
// Configuration options
options: {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ": " + tooltipItem.yLabel;
}
}
}
}
});
</script>