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,
}
}]
}
}
});
});
Need help adjusting ChartJS opacity based on survey responses
Best answer by ahmedA
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,
},
},
],
},
},
});
});
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_labsand
sorted_vals:
labels: sorted_labsand
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_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,
},
},
],
},
},
});
});
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.