Hi all,



I have the following javascript to display an adjustable (via sliders) chart below. I'm trying to capture the final slider value of the red variable.



However, no matter where I put "Qualtrics.SurveyEngine.setEmbeddedData("R_LR_HR_10_50adjusted", finalposition)" it just saves the original position, or nothing at all in the output csv.



Any help would be very much appreciated!



Best,

Chris



Qualtrics.SurveyEngine.addOnload(function()

{



Chart.defaults.global = {

animation: true,

animationSteps: 60,

animationEasing: "easeOutQuart",

showScale: true,

scaleOverride: false,

scaleSteps: null,

scaleStepWidth: null,

scaleStartValue: null,

scaleLineColor: "rgba(0,0,0,.1)",

scaleLineWidth: 1,

scaleShowLabels: true,

scaleLabel: "<%=value%>",

scaleIntegersOnly: true,

scaleBeginAtZero: false,

scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

scaleFontSize: 12,

scaleFontStyle: "normal",

scaleFontColor: "#666",

responsive: false,

maintainAspectRatio: true,

showTooltips: true,

customTooltips: false,

tooltipEvents: ["mousemove", "touchstart", "touchmove"],

tooltipFillColor: "rgba(0,0,0,0.8)",

tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

tooltipFontSize: 14,

tooltipFontStyle: "normal",

tooltipFontColor: "#fff",

tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

tooltipTitleFontSize: 14,

tooltipTitleFontStyle: "bold",

tooltipTitleFontColor: "#fff",

tooltipYPadding: 6,

tooltipXPadding: 6,

tooltipCaretSize: 8,

tooltipCornerRadius: 6,

tooltipXOffset: 10,

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> %",

multiTooltipTemplate: "<%= value %>",

onAnimationProgress: function() {},

onAnimationComplete: function() {}

}

Chart.defaults.global.responsive = false;

Chart.types.Doughnut.extend({

name: "DoughnutTextInside",

showTooltip: function() {

this.chart.ctx.save();

Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);

this.chart.ctx.restore();

},

draw: function() {

Chart.types.Doughnut.prototype.draw.apply(this, arguments);



var width = this.chart.width,

height = this.chart.height;



var fontSize = (height / 140).toFixed(2);

this.chart.ctx.font = fontSize + "em Verdana";

this.chart.ctx.textBaseline = "middle";



var red = jQuery("#red").slider("value"),

blue = jQuery("#blue").slider("value");

var total = (red + blue)

var text = (red + blue + "%");

var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2);

var textY = height / 2;

if (total == 100) {

this.chart.ctx.fillStyle = '#00ff00',

jQuery("#NextButton").show();

}else{

this.chart.ctx.fillStyle = '#ff0000',

jQuery("#NextButton").hide();

}

this.chart.ctx.fillText(text, textX, textY);

}

});



var data = [{

value: 30,

color: "#729fcf",

highlight: "#5AD3D1",

label: "Global Bonds Funds"

}, {

value: 70,

color: "#F7464A",

highlight: "#FF5A5E",

label: "Global Stocks Funds"

}]



function hexFromRGB(r, g, b) {

var hex = [

r.toString(16),

g.toString(16),

b.toString(16)

];

jQuery.each(hex, function(nr, val) {

if (val.length === 1) {

hex[nr] = "0" + val;

}

});

return hex.join("").toUpperCase();

}



function refreshSwatch() {

var red = jQuery("#red").slider("option", "value"),

blue = jQuery("#blue").slider("option", "value");

if (red < 2) {

jQuery("#red").slider("option", "value", 2);

return false;

}

if (blue < 2) {

jQuery("#blue").slider("option", "value", 2);

return false;

}

myDoughnutChart.segments[0].value = blue;

myDoughnutChart.segments[1].value = red;

myDoughnutChart.update();

}

jQuery(function() {

jQuery("#red").slider({

orientation: "horizontal",

range: "min",

min: 0,

max: 100,

value: 70,

slide: refreshSwatch,

change: refreshSwatch

});

});

jQuery(function() {

jQuery("#blue").slider({

orientation: "horizontal",

range: "min",

min: 0,

max: 100,

value: 30,

slide: refreshSwatch,

change: refreshSwatch

});

});



var ctx = jQuery("#myChart").get(0).getContext("2d");

var myDoughnutChart = new Chart(ctx).DoughnutTextInside(data, {

responsive: false

});

jQuery(document).on('change',function(){

var finalposition=parseInt(jQuery("#red").slider("option", "value"));

});



Qualtrics.SurveyEngine.setEmbeddedData("R_LR_HR_10_50adjusted", finalposition)

});