Best answer by Anonymous
View originalGraphing Individual-Level Feedback Over Time
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!
+1
Brilliant! I may need to hire someone who can help me with this... I'm a methodologist and designer, not a programmer!
You are the hero I needed. This worked perfectly. Thank you!
A
> @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}"],`
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?
A
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
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!
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" >);`
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.