0 votes
in SoSci Survey (English) by s093053 (175 points)
edited by s093053

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

1 Answer

0 votes
by SoSci Survey (316k points)
selected by s093053
 
Best answer

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.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...