Toggle dragData to true/false

[krishRamalingam]

Hi Christoph,

I am looking for an option to toggle the dragging feature. I placed a button for toggle dragData property to true or false and updated the chart but it doesn't work.

By default, it considers the value set on page load. I can't change it afterwards.

Could you please provide me with a solution?

[chrispahm]

Hi @krishaws, What you‘re after sounds perfectly doable. However, could you set up a Fiddle/Plunker/etc. with what you got so far, then I can have a look. Best Christoph

[krishRamalingam]

Hi Christoph,

I couldn't make it in Fiddle, but I have placed the source files in my S3.

Demo: http://dbrestorefroms3.s3-website.eu-central-1.amazonaws.com/ Source: http://dbrestorefroms3.s3-website.eu-central-1.amazonaws.com/sourcecode.zip

Its a Angular project, once downloaded, you need to run "npm install".

You can find the code inside app.components.ts

I combined two plugins here, one for zoom and one for drag(yours). I have a use case of showing a long chart with scroll and the user need to select a particular range and drag data points within the same range at once.

see this link http://dbrestorefroms3.s3-website.eu-central-1.amazonaws.com/graph.gif - I need to mark a specific range and drag a single data point. But I need all the data points within this range to be dragged. This is my prime use case.

Feel free to ask me if anything is unclear. Your support would be highly appreciated.

[chrispahm]

Alrigth,

I'm sorry that I won't dig through the code, but the following should get you what you want: Instead of switching the dragData option to true and false and updating the chart (wich won't work due to the way the update function is working), you could simply return false when you want to disable the dragging in the onDragStart function.

  dragData: true,
  onDragStart: function (e) {
    if (dragDisabled) return false
    // other code in the onDragStart function
  },

Now you can set-up a button that controls the value of the dragDisabled variable. In very basic Vanilla-JS, it may look like this

var dragDisabled = false    
var button = document.getElementById("toggleDragButton");
button.onclick = function () {
  dragDisabled = dragDisabled ? false : true
  button.innerText = dragDisabled ? "Drag: Off" : "Drag: On"
};

and that's it. Obviously this is not production ready code, but I hope it shows how it can be done. Here's a fiddle of the above put together in one piece: https://jsfiddle.net/db8myruh/10/

Best, Christoph

[krishRamalingam]

Thanks for this. it helps me to toggle the drag feature on or off by clicking a button. Highly appreciated. However, it doesn't help fix my problem. Because the chartjs-plugin-zoom acts weird (drag selection is not working anymore i when I set dragData to true).

I know your plugin is an awesome tool. If you have any idea, please let me know. Thanks for your time.

[chrispahm]

Hey again @krishaws,

sorry for taking me so long. I had another look at it your issue today, mainly focusing on the compatibility of the plugin-zoom and the dragData one. As I was fiddling around, I realised that the toughest part of using these two plugins in combination actually lies in the UI design.

For instance, if a user wanted to zoom in on a particular part of the chart, and then drag one of the data points. At first, the user might want to drag the entire chart, so that the data point is in the center, and then pan to zoom. Now, imagine what happens if the user accidentally starts dragging right on the data point. How would you determine what the user intents to do? Dragging the data point? Or dragging the entire field of view? I realised that this has a lot of potential for bad UI design -> leading to frustrated users.

So, my current opinion on this is to EITHER allow panning/zooming OR dragging a specific data point. This way, a user clearly knows (or at least has the possibility to find out) which of the features is currently active, and what can be expected when interacting with the chart. To demonstrate this, I updated the previous fiddle,

https://jsfiddle.net/ehyz5vj9/3/

which allows toggling between the zooming and dragging features. However, I'm not a UI designer, and if you or anyone else has a better idea of how to combine these features it would definitely be interesting to hear about!

Anyways, as the fiddles demonstrated how to toggle dragData, and how to combine the two plugins, may I close this issue then?

[krishRamalingam]

Thanks a lot for your timely help. Although the use case is outside the scope of this plugin. this workaround helped me a lot. Appreciation for your effort.

[yoelz55]

I know that this ticket is closed, but if found another workaround for this issue, so i wanted to share it :). In the plugin "chartjs-plugin-zoom", you can add a function to 'mode' properties, so I used it like that:

pan: {
    enabled: true,
    mode: function({ chart }) {
        if(dragPointsEnable)
             return '';
        return 'xy';
        },
}

In this manner, I disable the panning when I want the user to drag points in my graph.