Hello members,
Is it possible to render graphs directly in the prototyping of report templates. How do I achieve something like this:
{# How do I create a HTML element to hold the chart the one below does not display the graph#}
<div id="averageScoresChart" style="height: 400px; width: 100%;"></div>
{# Provide a script block with the necessary data for rendering the chart #}
<script>
// 'assessments' is an array of assessment names from your Twig logic
var assessments = {{ allAssessments|json_encode|raw }};
var courseCounts = {{ courseCounts|json_encode|raw }};
var totalArray = {{ totalArray|json_encode|raw }};
var labels = [];
var data = [];
// labels and data for the chart
assessments.forEach(function(assessment) {
if (assessment.attainmentActive === 'Y') {
labels.push(assessment.name);
var averageValue = courseCounts[assessment.name] > 0 ? (totalArray[assessment.name] / courseCounts[assessment.name]) : 0;
data.push(averageValue > 0 ? Math.round(averageValue * 100) / 100 : 0); // rounding to 2 decimal places
}
});
// container for the chart
var ctx = document.getElementById('averageScoresChart').getContext('2d');
// Render the chart using Chart.js
var myChart = new Chart(ctx, {
type: 'line', // or 'bar' for a bar chart
data: {
labels: labels,
datasets: [{
label: 'Average Score',
backgroundColor: 'rgba(0, 123, 255, 0.5)',
borderColor: 'rgba(0, 123, 255, 1)',
data: data
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
responsive: true,
maintainAspectRatio: false
}
});
</script>
{# How to include the Chart.js library or allow render of the above because including cdn like this does not work#}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Assuming my template has all correct data to render the graph.