Need help adjusting ChartJS opacity based on survey responses

uhrxx005uhrxx005 Community Member, XMPN Member Guru ✭✭

Need help adjusting ChartJS opacity based on survey responses

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,
                }
            }]
        }
    }
});




});

Best Answer

  • ahmedAahmedA IndiaCommunity Member Superuser ✭✭✭✭
    Accepted Answer

    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,
                            },
                        },
                    ],
                },
            },
        });
    });
    

Answers

  • ahmedAahmedA IndiaCommunity Member Superuser ✭✭✭✭

    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.

  • uhrxx005uhrxx005 Community Member, XMPN Member Guru ✭✭

    @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.

  • uhrxx005uhrxx005 Community Member, XMPN Member Guru ✭✭

    works great @ahmedA Thanks!

Sign In to Comment