Draggable Bart Chart

Ali5Ali5 FlorenceCommunity Member Qubie ✭

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
    }
    }]
    }
    }
    });

});

Comments

Sign In to Comment