0👍
✅
I use this solution, it works very fine for this project and condition
onDragEnd: function(e, datasetIndex, index, value) {
if (datasetIndex === 0) {
switch (index) {
//case for 1 chart axis
case 0:
if (value >= 0 && value <= 33) {
if ($('#value-level3').is(':checked')) {
} else {
$('#value-level3').prop('checked', 'checked');
var changeAnswer = $('#value-level3')
.next('label')
.text();
answerData.splice(0, 1, changeAnswer);
}
chartData.splice(0, 1, '33');
reloadChart();
} else if (value >= 34 && value <= 67) {
if ($('#value-level2').is(':checked')) {
} else {
$('#value-level2').prop('checked', 'checked');
var changeAnswer = $('#value-level2')
.next('label')
.text();
answerData.splice(0, 1, changeAnswer);
}
chartData.splice(0, 1, '67');
reloadChart();
} else {
if ($('#value-level1').is(':checked')) {
} else {
$('#value-level1').prop('checked', 'checked');
var changeAnswer = $('#value-level1')
.next('label')
.text();
answerData.splice(0, 1, changeAnswer);
}
chartData.splice(0, 1, '100');
reloadChart();
}
break;
//case for 2 chart axis
case 1:
if (value >= 0 && value <= 20) {
if ($('#value-level5-2').is(':checked')) {
} else {
$('#value-level5-2').prop('checked', 'checked');
var changeAnswer = $('#value-level5-2')
.next('label')
.text();
answerData.splice(1, 1, changeAnswer);
}
chartData.splice(1, 1, '20');
reloadChart();
} else if (value >= 21 && value <= 40) {
if ($('#value-level4-2').is(':checked')) {
} else {
$('#value-level4-2').prop('checked', 'checked');
var changeAnswer = $('#value-level4-2')
.next('label')
.text();
answerData.splice(1, 1, changeAnswer);
}
chartData.splice(1, 1, '40');
reloadChart();
} else if (value >= 41 && value <= 60) {
if ($('#value-level3-2').is(':checked')) {
} else {
$('#value-level3-2').prop('checked', 'checked');
var changeAnswer = $('#value-level3-2')
.next('label')
.text();
answerData.splice(1, 1, changeAnswer);
}
chartData.splice(1, 1, '60');
reloadChart();
} else if (value >= 61 && value <= 80) {
if ($('#value-level2-2').is(':checked')) {
} else {
$('#value-level2-2').prop('checked', 'checked');
var changeAnswer = $('#value-level2-2')
.next('label')
.text();
answerData.splice(1, 1, changeAnswer);
}
chartData.splice(1, 1, '80');
reloadChart();
} else {
if ($('#value-level1-2').is(':checked')) {
} else {
$('#value-level1-2').prop('checked', 'checked');
var changeAnswer = $('#value-level1-2')
.next('label')
.text();
answerData.splice(1, 1, changeAnswer);
}
chartData.splice(1, 1, '100');
reloadChart();
}
break;
//case for 3 chart axis
case 2:
if (value >= 0 && value <= 25) {
if ($('#value-level4-3').is(':checked')) {
} else {
$('#value-level4-3').prop('checked', 'checked');
var changeAnswer = $('#value-level4-3')
.next('label')
.text();
answerData.splice(2, 1, changeAnswer);
}
chartData.splice(2, 1, '25');
reloadChart();
} else if (value >= 25 && value <= 50) {
if ($('#value-level3-3').is(':checked')) {
} else {
$('#value-level3-3').prop('checked', 'checked');
var changeAnswer = $('#value-level3-3')
.next('label')
.text();
answerData.splice(2, 1, changeAnswer);
}
chartData.splice(2, 1, '50');
reloadChart();
} else if (value >= 51 && value <= 75) {
if ($('#value-level2-3').is(':checked')) {
} else {
$('#value-level2-3').prop('checked', 'checked');
var changeAnswer = $('#value-level2-3')
.next('label')
.text();
answerData.splice(2, 1, changeAnswer);
}
chartData.splice(2, 1, '75');
reloadChart();
} else {
if ($('#value-level1-3').is(':checked')) {
} else {
$('#value-level1-3').prop('checked', 'checked');
var changeAnswer = $('#value-level1-3')
.next('label')
.text();
answerData.splice(2, 1, changeAnswer);
}
chartData.splice(2, 1, '100');
reloadChart();
}
break;
//case for 4 chart axis
case 3:
if (value >= 0 && value <= 33) {
if ($('#value-level3-4').is(':checked')) {
} else {
$('#value-level3-4').prop('checked', 'checked');
var changeAnswer = $('#value-level3-4')
.next('label')
.text();
answerData.splice(3, 1, changeAnswer);
}
chartData.splice(3, 1, '33');
reloadChart();
} else if (value >= 34 && value <= 67) {
if ($('#value-level2-4').is(':checked')) {
} else {
$('#value-level2-4').prop('checked', 'checked');
var changeAnswer = $('#value-level2-4')
.next('label')
.text();
answerData.splice(3, 1, changeAnswer);
}
chartData.splice(3, 1, '67');
reloadChart();
} else {
if ($('#value-level1-4').is(':checked')) {
} else {
$('#value-level1-4').prop('checked', 'checked');
var changeAnswer = $('#value-level1-4')
.next('label')
.text();
answerData.splice(3, 1, changeAnswer);
}
chartData.splice(3, 1, '100');
reloadChart();
}
break;
//case for 5 chart axis
case 4:
if (value >= 0 && value <= 25) {
if ($('#value-level4-5').is(':checked')) {
} else {
$('#value-level4-5').prop('checked', 'checked');
var changeAnswer = $('#value-level4-5')
.next('label')
.text();
answerData.splice(4, 1, changeAnswer);
}
chartData.splice(4, 1, '25');
reloadChart();
} else if (value >= 25 && value <= 50) {
if ($('#value-level3-5').is(':checked')) {
} else {
$('#value-level3-5').prop('checked', 'checked');
var changeAnswer = $('#value-level3-5')
.next('label')
.text();
answerData.splice(4, 1, changeAnswer);
}
chartData.splice(4, 1, '50');
reloadChart();
} else if (value >= 51 && value <= 75) {
if ($('#value-level2-5').is(':checked')) {
} else {
$('#value-level2-5').prop('checked', 'checked');
var changeAnswer = $('#value-level2-5')
.next('label')
.text();
answerData.splice(4, 1, changeAnswer);
}
chartData.splice(4, 1, '75');
reloadChart();
} else {
if ($('#value-level1-5').is(':checked')) {
} else {
$('#value-level1-5').prop('checked', 'checked');
var changeAnswer = $('#value-level1-5')
.next('label')
.text();
answerData.splice(4, 1, changeAnswer);
}
chartData.splice(4, 1, '100');
reloadChart();
}
break;
//case for 6 chart axis
case 5:
if (value >= 0 && value <= 25) {
if ($('#value-level4-6').is(':checked')) {
} else {
$('#value-level4-6').prop('checked', 'checked');
var changeAnswer = $('#value-level4-6')
.next('label')
.text();
answerData.splice(5, 1, changeAnswer);
}
chartData.splice(5, 1, '25');
reloadChart();
} else if (value >= 25 && value <= 50) {
if ($('#value-level3-6').is(':checked')) {
} else {
$('#value-level3-6').prop('checked', 'checked');
var changeAnswer = $('#value-level3-6')
.next('label')
.text();
answerData.splice(5, 1, changeAnswer);
}
chartData.splice(5, 1, '50');
reloadChart();
} else if (value >= 51 && value <= 75) {
if ($('#value-level2-6').is(':checked')) {
} else {
$('#value-level2-6').prop('checked', 'checked');
var changeAnswer = $('#value-level2-6')
.next('label')
.text();
answerData.splice(5, 1, changeAnswer);
}
chartData.splice(5, 1, '75');
reloadChart();
} else {
if ($('#value-level1-6').is(':checked')) {
} else {
$('#value-level1-6').prop('checked', 'checked');
var changeAnswer = $('#value-level1-6')
.next('label')
.text();
answerData.splice(5, 1, changeAnswer);
}
chartData.splice(5, 1, '100');
reloadChart();
}
break;
//case for 7 chart axis
case 6:
if (value >= 0 && value <= 12) {
if ($('#value-level8-7').is(':checked')) {
} else {
$('#value-level8-7').prop('checked', 'checked');
var changeAnswer = $('#value-level8-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '12');
reloadChart();
} else if (value >= 13 && value <= 25) {
if ($('#value-level7-7').is(':checked')) {
} else {
$('#value-level7-7').prop('checked', 'checked');
var changeAnswer = $('#value-level7-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '25');
reloadChart();
} else if (value >= 26 && value <= 37) {
if ($('#value-level6-7').is(':checked')) {
} else {
$('#value-level6-7').prop('checked', 'checked');
var changeAnswer = $('#value-level6-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '37');
reloadChart();
} else if (value >= 38 && value <= 50) {
if ($('#value-level5-7').is(':checked')) {
} else {
$('#value-level5-7').prop('checked', 'checked');
var changeAnswer = $('#value-level5-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '50');
reloadChart();
} else if (value >= 51 && value <= 62) {
if ($('#value-level4-7').is(':checked')) {
} else {
$('#value-level4-7').prop('checked', 'checked');
var changeAnswer = $('#value-level4-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '62');
reloadChart();
} else if (value >= 63 && value <= 75) {
if ($('#value-level3-7').is(':checked')) {
} else {
$('#value-level3-7').prop('checked', 'checked');
var changeAnswer = $('#value-level3-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '75');
reloadChart();
} else if (value >= 76 && value <= 88) {
if ($('#value-level2-7').is(':checked')) {
} else {
$('#value-level2-7').prop('checked', 'checked');
var changeAnswer = $('#value-level2-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '88');
reloadChart();
} else {
if ($('#value-level1-7').is(':checked')) {
} else {
$('#value-level1-7').prop('checked', 'checked');
var changeAnswer = $('#value-level1-7')
.next('label')
.text();
answerData.splice(6, 1, changeAnswer);
}
chartData.splice(6, 1, '100');
reloadChart();
}
break;
}
}
},
Source:stackexchange.com