Trendline Graphs in Reports Module

Developers
1

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.

2

Hi Kelvin, the reports use PDF rendering libraries, and the types of things that can be rendered with these libraries is quite limited. In the end, they’re not actually rendering HTML, they just convert it to their own internal format. They cannot support embedded javascript at any time. This is a limitation of PDFs, as well as the PHP libraries used to convert HTML into PDFs.

However, there is still a way to accomplish this, if you generate your graph during the report writing process and save the image URL as a text criteria for your templates to work with. Then, the template can receive this URL and render it as an image in the PDF using a plain tag. It’s a bit complex, and requires a custom module to hold your chart-generating code, however I have helped a couple schools set this up. If you’d like, I can share some example code to help point you in the right direction (just quite limited on time and capacity at the moment to write a full set of documentation).

3

Thanks for the response, a quick take there is that the rendering library can’t directly render the javascript graphs and so I would need further customization on: generating the graphs, temporarily storing the graphs as images and use their text URLs to render the graphs in the PDF reports.
kindly share the sample code that will act like pointers on how to go about it, I will explore and find the way then later give a shout out. Thank you so much