If you haven’t used Qualtrics for surveys before, I highly recommend it. The University of Minnesota maintains a contract with the company and we have access to use it for free. It’s by far the most robust survey software I’ve ever used.
Today I needed to do some visualizations within Qualtrics for a client, based on the results of an individual survey. Rather than visualizing them for a report, however, the client wanted to visualize them within the survey, so that survey users could see the results.
Luckily, Qualtrics let’s you embed JavaScript within questions and draw in external libraries. I’ve been using Chart.js recently, so I decided to use that. To import the library, open your survey editor and click “Look and Feel”:
Then click “Advanced”, “Header –> edit”. From this window, click “Source”
CDNJS, which is a CDN (content distribution network) for JavaScript libraries, hosts a current copy of the Chart.js library. Copy the script tag, paste it in and click save:
Now save and return to your survey. The library should load flawlessly.
Now create a basic question and then create a following question made out of text. Put a page break in between.
Our next step is to find out the ID of the question(s) we want to draw from. You can do this easily by (1) editing the question text, (2) clicking “Piped Text”, then clicking “Survey Question”, finding the question you want, then selecting “Selected Choices Recode”. It should create something that looks like this:
Grab “${q://QID1/SelectedChoicesRecode}”.
Now on the left click the configuration wheel and click “Add JavaScript”. You should now see this:
Cool. Now grab that text you pasted earlier and make it look a bit like this:
Now you are grabbing the piped text and turning it into a JS variable. We’re going to need to use parseInt() to convert the String into an Integer. But then we can use it to create a JavaScript chart, just like we did in this previous post.
Take a look at the final code:
One final step before we’re done. We need to add our HTML canvas to the results. Go back to editing the question text and click “Rich Text Editor” then “Source”:
Now preview your survey. Enter in a choice and click “Next”. You should see a chart that looks like this:
And voila! You have charts in your Qualtrics results!
Oh, and there’s also a Qualtrics REST API. I’m a big fan.