Draggable bar graph using Chart.js

Ali5Ali5 FlorenceCommunity Member Qubie ✭

Draggable bar graph using Chart.js

Hi all, I posted this question before but it wasn't posted in a very read-friendly way, so here it goes again. I am trying to make a bar graph where you can drag the bars with the mouse. I am using Chart.js with its dragData pluggin, and I am using a source code of a demo provided in (https://www.npmjs.com/package/chartjs-plugin-dragdata, see Bar-Simple demo). I can see the graph perfectly, and the mouse becomes a hand when you put it in one of the bars (as it should be). However, it is weird, because I cannot move the bars. I think that the problem may be that I am not adapting the demo code to Qualtrics properly... But I don't know what else to try, so suggestions are appreciated. Thank you!
Here are the steps that I follow:

  1. Look and feel--> Hearder(html) :
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-dragdata.min.js"></script>

  1. In the question where the graph goes --> html
<canvas height="400" id="myChart" width="400">&nbsp;</canvas>

  1. In the question's JS:
Qualtrics.SurveyEngine.addOnReady(function()
{
var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            datasets: [
              {
                label: "Population (millions)",
                backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                data: [2478,5267,734,784,433]
              }
            ]
          },
          options: {
            responsive: false,
            dragData: true,
            dragX: false, 
            dragDataRound: 1,
            dragOptions: {
             showTooltip: true
            },
            onDragStart: function(e, element) {
            //console.log(e)
            },
            onDrag: function(e, datasetIndex, index, value) {
              e.target.style.cursor = 'grabbing'
            //console.log(datasetIndex, index, value)
            },
            onDragEnd: function(e, datasetIndex, index, value) {
            e.target.style.cursor = 'default' 
            //console.log(datasetIndex, index, value)
            },
            hover: {
              onHover: function(e) {
                var point = this.getElementAtEvent(e)
                if (point.length) e.target.style.cursor = 'grab'
                else e.target.style.cursor = 'default'
              }
            },
            scales: {
              yAxes: [{
                  ticks: {
                      max: 6000,
                      min: 0
                  }
              }]
            }
          }
        });
});

Sign In to Comment