Chartjs-Chartjs with the plugin chartjs-plugin-dragdata can i set fix dropdown values

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

Leave a comment