Graphing Individual-Level Feedback Over Time

boosterhboosterh Community Member Qubie ✭

Graphing 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!

Best Answers

  • flebfleb Czech Republic Sage ✭✭✭
    edited January 29 Accepted Answer

    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" >);

  • [Deleted User][Deleted User] Qubie ✭
    Accepted Answer

    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">&nbsp;</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

Answers

  • boosterhboosterh Community Member Qubie ✭

    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!

  • boosterhboosterh Community Member Qubie ✭

    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}"],

  • boosterhboosterh Community Member Qubie ✭

    You are the hero I needed. This worked perfectly. Thank you!

Sign In to Comment