Need help adjusting ChartJS opacity based on survey responses | XM Community
Solved

Need help adjusting ChartJS opacity based on survey responses

  • 12 January 2021
  • 5 replies
  • 173 views
U
Rank
Userlevel 6
Badge +5

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: ["Aggression","Disruption","Noncompliance","Hyperactivity","Inattention","Impulsivity","Anxiety","Feeling sad","Irritability"],
        datasets: [{
            label: 'Ratings',
data: ["${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,
                }
            }]
        }
    }
});




});

icon

Best answer by ahmedA 21 January 2021, 22:09

View original

5 replies

A
Rank
Userlevel 7
Badge +21

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(([,a],[,b]) => a-b)
.reduce((r, [k, v]) => ({ ...r, [k]: v }), {});


// Values for the chart
sorted_labs = Object.keys(sorted);
sorted_vals = [];
sorted_labs.forEach(label => sorted_vals.push(x[label]));
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.


U
Rank
Userlevel 6
Badge +5

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.

A
Rank
Userlevel 7
Badge +21

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_vals[i]));


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

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

    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: "horizontalBar",
        data: {
            labels: sorted_labs,
            datasets: [
                {
                    label: "Ratings",
                    data: sorted_vals,
                    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,
                        },
                    },
                ],
            },
        },
    });
});

U
Rank
Userlevel 6
Badge +5

works great ahmedA Thanks!

J
Badge

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

Leave a Reply


Terms & Conditions