Just Data

Using the Qualtrics JavaScript API to Create Visualizations

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”:

Screen Shot 2015-02-06 at 10.16.14 AM

Then click “Advanced”, “Header –> edit”. From this window, click “Source”

Screen Shot 2015-02-06 at 10.17.30 AMCDNJS, 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:

Screen Shot 2015-02-06 at 10.19.12 AMNow 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.

Screen Shot 2015-02-06 at 10.20.51 AMOur 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:

Screen Shot 2015-02-06 at 10.21.36 AMGrab “${q://QID1/SelectedChoicesRecode}”.

Now on the left click the configuration wheel and click “Add JavaScript”. You should now see this:

Screen Shot 2015-02-06 at 10.23.36 AMCool. Now grab that text you pasted earlier and make it look a bit like this:

Screen Shot 2015-02-06 at 10.24.38 AMNow 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:

Screen Shot 2015-02-06 at 10.27.36 AMOne 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”:

Screen Shot 2015-02-06 at 10.28.35 AMNow preview your survey. Enter in a choice and click “Next”. You should see a chart that looks like this:

Screen Shot 2015-02-06 at 10.29.59 AMAnd voila! You have charts in your Qualtrics results!

Oh, and there’s also a Qualtrics REST API. I’m a big fan.

Leave a Reply