Draggable Bart Chart | XM Community
Skip to main content

Draggable Bart Chart


Hi all, I am trying to make a draggable bar chart using charts-plugin-dragdata. When I put the mouse in the bar, the mouse becomes a hand, but then, I can't drag the bar. I am following very closely the source code given in the webpage (https://github.com/chrispahm/chartjs-plugin-dragdata), and adapting it to Qualtrics using a past thread in the community about how to use Chart.js in Qualtrics. I don't get any error message, it is just that I cannot drag the bars. Here are the steps: 1. In the JS of the question I write: 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: { dragData: true, 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) { const 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 } }] } } }); });

2 replies

  • Author
  • 16 replies
  • March 27, 2020
2. In the header (html) I write: <script src=https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js></script> 3. In the question where the graph goes (html): <canvas height="400" id="myChart" width="400"> </canvas> Any suggestions what may be happening?

  • Author
  • 16 replies
  • March 27, 2020
1. In the header (html) I write: src = "https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js" 2. In the question where the graph goes (html): height="400" id="myChart" width="400">  (with canvas)

Leave a Reply