I use Qualtrics to administer assessments to people across multiple time-points. I'm interested in providing participants with individual-level feedback on their scores for each time point in a line graph. How would I go about this using Qualtrics? I can retrieve and display scores for each time point using embedded data, but the graphing is stumping me. Ideally, I would like to display the graph at the end of the survey as well as in an email triggered after completion. Any advice would be much appreciated!
Page 1 / 1
Hi @boosterh ,
you could create your line charts using Google charts. I have already implemented another type of chart in Qualtrrics like this, so I know Qulatricsis is OK with this.
Few notes:
1) Put the HMTL script tag containing "src" into the header of your survey.
2) You can append your chart to the end of a text question for example like this:
` var Q = this;`
`jQuery(Q.getQuestionTextContainer()).append(<div id ="id_of_your_chart_div" >);`
you could create your line charts using Google charts. I have already implemented another type of chart in Qualtrrics like this, so I know Qulatricsis is OK with this.
Few notes:
1) Put the HMTL script tag containing "src" into the header of your survey.
2) You can append your chart to the end of a text question for example like this:
` var Q = this;`
`jQuery(Q.getQuestionTextContainer()).append(<div id ="id_of_your_chart_div" >);`
Thanks so much for the help. I'm only a little familiar with JS coding and I have a huge favor to ask - would you be willing to share the full JS code you used for your graph (the code that goes in the JS add on for the descriptive text)? I keep encountering an error and I'm unsure where it is. I think I can pinpoint it if I can see some working code.
Thank you!
Thank you!
Hello @boosterh ,
We can also use ChartJS.
Step 1: For ChartJS paste the below code in the header(edit) -> <>(source) view
`<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" integrity="sha256-rjYnB0Bull7k2XkbJ03UNGqMuMieR769uQVGSSlsi6A=" crossorigin="anonymous"></script>`
Step 2: Create a Descriptive text question and add following code in the HTML view of question:
`<canvas height="400" id="myChart" width="400"> </canvas>`
Step 3: Paste the below code in the JS(OnReady) of the descriptive question
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["d1", "d2", "d3"],
datasets: [{
label: '# of Votes',
data: ["12","20","5"],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
Step 4: Please go through the documentation for more features.
Attached is the reference QSF and survey link is here
We can also use ChartJS.
Step 1: For ChartJS paste the below code in the header(edit) -> <>(source) view
`<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" integrity="sha256-rjYnB0Bull7k2XkbJ03UNGqMuMieR769uQVGSSlsi6A=" crossorigin="anonymous"></script>`
Step 2: Create a Descriptive text question and add following code in the HTML view of question:
`<canvas height="400" id="myChart" width="400"> </canvas>`
Step 3: Paste the below code in the JS(OnReady) of the descriptive question
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["d1", "d2", "d3"],
datasets: [{
label: '# of Votes',
data: ["12","20","5"],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
Step 4: Please go through the documentation for more features.
Attached is the reference QSF and survey link is here
This is great! I'm almost there. The last thing I'm grappling with is adding in the scored variable I created in qualtrics. When I replace the data value with piped text referencing the scored value I want, I receive this error: "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token {". I'm sure that I am just doing something wrong, but any advice?
> @boosterh said:
> This is great! I'm almost there. The last thing I'm grappling with is adding in the scored variable I created in qualtrics. When I replace the data value with piped text referencing the scored value I want, I receive this error: "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token {". I'm sure that I am just doing something wrong, but any advice?
>
Please paste here the data:.... line to look in to this further
Example for pipe:
`data:["${q://QID1/ChoiceTextEntryValue/1}","${q://QID1/ChoiceTextEntryValue/2}","${q://QID1/ChoiceTextEntryValue/3}"],`
> This is great! I'm almost there. The last thing I'm grappling with is adding in the scored variable I created in qualtrics. When I replace the data value with piped text referencing the scored value I want, I receive this error: "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token {". I'm sure that I am just doing something wrong, but any advice?
>
Please paste here the data:.... line to look in to this further
Example for pipe:
`data:["${q://QID1/ChoiceTextEntryValue/1}","${q://QID1/ChoiceTextEntryValue/2}","${q://QID1/ChoiceTextEntryValue/3}"],`
You are the hero I needed. This worked perfectly. Thank you!
Brilliant! I may need to hire someone who can help me with this... I'm a methodologist and designer, not a programmer!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.