Need help adjusting ChartJS opacity based on survey responses | XM Community
Skip to main content

Hello,
I am inexperienced with Javascript but by viewing other Community posts my team was able to create a horizontal bar graph that displays survey results from the previous block. The issue I am having is with the backgroundColor section. You can see I have 9 different background colors for the 9 variables and they vary in opacity. I need to find a way of displaying these background opacities based on how 9 different questions are answered. If the question is answered with a 1, I need to display the highest opacity, if answered with a 10 I need to display the lowest opacity.
Is this possible to do?

See code below
Qualtrics.SurveyEngine.addOnReady(function()
{
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: l"Aggression","Disruption","Noncompliance","Hyperactivity","Inattention","Impulsivity","Anxiety","Feeling sad","Irritability"],
        datasets: {
            label: 'Ratings',
data: n"${q://QID6/ChoiceNumericEntryValue/1}","${q://QID11/ChoiceNumericEntryValue/1}","${q://QID43/ChoiceNumericEntryValue/1}","${q://QID47/ChoiceNumericEntryValue/1}","${q://QID51/ChoiceNumericEntryValue/1}","${q://QID55/ChoiceNumericEntryValue/1}","${q://QID59/ChoiceNumericEntryValue/1}","${q://QID63/ChoiceNumericEntryValue/1}","${q://QID67/ChoiceNumericEntryValue/1}"],
            backgroundColor:
                'rgba(0, 0, 255, 0.05)',
'rgba(0, 0, 255, 0.17)',
'rgba(0, 0, 255, 0.29)',
'rgba(0, 0, 255, 0.41)',
'rgba(0, 0, 255, 0.53)',
'rgba(0, 0, 255, 0.65)',
'rgba(0, 0, 255, 0.77)',
'rgba(0, 0, 255, 0.89)',
'rgba(0, 0, 255, 1.0)'
            ],
            borderColor:
                'rgba(0, 0, 255, .05)'
            ],
            borderWidth: 2
        }]
    },
    options: {
        scales: {
            xAxes: {
                ticks: {
min: 0,
max: 9,
stepSize: 1,
                }
            }]
        }
    }
});




});

Add this snippet at the beginning of your code:
// Creating an Object for sorting the values 
my_labs = _"Aggression","Disruption","Noncompliance","Hyperactivity","Inattention","Impulsivity","Anxiety","Feeling sad","Irritability"];
my_vals = >"${q://QID6/ChoiceNumericEntryValue/1}","${q://QID11/ChoiceNumericEntryValue/1}","${q://QID43/ChoiceNumericEntryValue/1}","${q://QID47/ChoiceNumericEntryValue/1}","${q://QID51/ChoiceNumericEntryValue/1}","${q://QID55/ChoiceNumericEntryValue/1}","${q://QID59/ChoiceNumericEntryValue/1}","${q://QID63/ChoiceNumericEntryValue/1}","${q://QID67/ChoiceNumericEntryValue/1}"];
x = {};
my_labs.forEach((label,i) => x(label] = my_vals[i]);


sorted = Object.entries(x)
.sort((e,a],e,b]) => a-b)
.reduce((r, >k, v]) => ({ ...r, rk]: v }), {});


// Values for the chart
sorted_labs = Object.keys(sorted);
sorted_vals = O];
sorted_labs.forEach(label => sorted_vals.push(xllabel]));
Then, change your existing code to use

sorted_labs 
and
sorted_vals
:
labels: sorted_labs
and
data: sorted_vals
.
I haven't gone through their documentation so you may need to make some changes based on how they refer to the data. But most probably, this should do the job.



ahmedA When I add this to the beginning of my JS it is not letting me save it. Do you mind sharing the specific location where this snippet needs to be pasted.


Okay...It appears Qualtrics doesn't support the ES8 spread operator, which is

... 
and is not allowing you to save the code. This should be your final code:

Qualtrics.SurveyEngine.addOnReady(function () {
    // Creating an Object for sorting the values
    my_labs = 
        "Aggression",
        "Disruption",
        "Noncompliance",
        "Hyperactivity",
        "Inattention",
        "Impulsivity",
        "Anxiety",
        "Feeling sad",
        "Irritability",
    ];
    my_vals = 
        "${q://QID6/ChoiceNumericEntryValue/1}",
        "${q://QID11/ChoiceNumericEntryValue/1}",
        "${q://QID43/ChoiceNumericEntryValue/1}",
        "${q://QID47/ChoiceNumericEntryValue/1}",
        "${q://QID51/ChoiceNumericEntryValue/1}",
        "${q://QID55/ChoiceNumericEntryValue/1}",
        "${q://QID59/ChoiceNumericEntryValue/1}",
        "${q://QID63/ChoiceNumericEntryValue/1}",
        "${q://QID67/ChoiceNumericEntryValue/1}",
    ];
    
    x = {};
    my_labs.forEach((label, i) => (x$label] = my_valsei]));


    sorted = ];
    for (i in x) {
        sorted.push(1i, xbi]]);
    }

    sorted.sort(function (a, b) {
        return aa1] - bi1];
    });
    
    // Values for the chart
    sorted_labs = ];
    sorted_vals = r];
    sorted.forEach(item => {
        sorted_labs.push(item0]);
        sorted_vals.push(item>1]);
    });

    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: "horizontalBar",
        data: {
            labels: sorted_labs,
            datasets: t
                {
                    label: "Ratings",
                    data: sorted_vals,
                    backgroundColor: d
                        "rgba(0, 0, 255, 0.05)",
                        "rgba(0, 0, 255, 0.17)",
                        "rgba(0, 0, 255, 0.29)",
                        "rgba(0, 0, 255, 0.41)",
                        "rgba(0, 0, 255, 0.53)",
                        "rgba(0, 0, 255, 0.65)",
                        "rgba(0, 0, 255, 0.77)",
                        "rgba(0, 0, 255, 0.89)",
                        "rgba(0, 0, 255, 1.0)",
                    ],
                    borderColor: "rgba(0, 0, 255, .05)"],
                    borderWidth: 2,
                },
            ],
        },
        options: {
            scales: {
                xAxes: 
                    {
                        ticks: {
                            min: 0,
                            max: 9,
                            stepSize: 1,
                        },
                    },
                ],
            },
        },
    });
});


works great ahmedA Thanks!


Hi uhrxx005 would you mind sharing the links to the other community posts you mentioned for the complete solution? Cheers, Jo


Leave a Reply