How to integrate ChartJS with library()

Question

Hello,

I want to learn how to integrate JavaScript into the survey. In particular, I want to add a Radar Chart from the library ChartJS. To test this, I copied example code from the ChartJS site and tried to implement it via HTML Code into the survey. So First, in a PHP Code element I inititialized the ChartJS library

load('ChartJS')

And then In a HTML Code Element the example script, taken from here:

<div>
<canvas id="chart" style="width: 100%; height: 200px"></canvas>
</div>

<script type="text/javascript">
<!--
void library(string 'ChartJS');
 
const data = {
  labels: [
    'Eating',
    'Drinking',
    'Sleeping',
    'Designing',
    'Coding',
    'Cycling',
    'Running'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  }, {
    label: 'My Second Dataset',
    data: [28, 48, 40, 19, 96, 27, 100],
    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)'
  }]
};
// Initialise chart 
var chart = new Chart(
    document.getElementById('chart'),
    {
        type: 'radar',
        data: data,
        options: {
            elements: {
                line: {
                    borderWidth: 3
                }
            }
        }
    }
);

// -->

But it doesnt work. How do I integrate JavaScript libraries properly? I am not proficient in JavaScript, so I would be glad for some help. My next question would be if it is possible to integrate arrays that were constructed in PHP code from the answers to the questionnaire in this JS code, so the radar plot will display data that is constructed from the answers. Thank you

Answer 1

How do I integrate JavaScript libraries properly?

Try this PHP code on the questionnaire page, please:

library('ChartJS');

Of course, you can also download the librarie's JS files, upload them to your project, and include them with the <script src="..."> tag.

I would not recomend including them from external Internet URLs, as this can cause privacy issues.