Docs Back to Docs

Dragging Tool

This module will allow you to click and drag nodes on your chart to change their value. Because it's a module, it won't take up any KB on your page unless you are using it. Let's get to why you came here and tell you how it all works.

How To Include The Module

There are two ways to include the module:

  1. You must first point the MODULES directory path, in the zingchart global object, to the appropriate modules folder.
<script src="cdn.zingchart.com/zingchart.min.js"></script>  
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";</script>

Load the module using zingchart.loadModules([],fnc). The callback function will be executed upon the script request arriving.

// Load the selection-tool and render the chart once its loaded
zingchart.loadModules('dragging', function() {
  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: 400,
    width: '100%',
    modules: 'dragging'
  });
});
  1. The alternative is to include the script tag directly in the DOM
<script src= "cdn.zingchart.com/zingchart.min.js"></script>  
<script src= "cdn.zingchart.com/modules/zingchart-dragging.min.js"></script>

How To Use The Module

Once the module is loaded using one of the two methods described above, you must enable the dragging module for your plot. To do so, add dataDragging: true to your plot object (to apply it globally) or to your series object (to enable for an individual series). To change the precision of the values, add a global options object and use the decimals attribute to set the number of decimal places of precision you'd like to enable.

options: {
  decimals: 2
},
plot: {
  dataDragging: true,
  // ... 
}

That's it! Once your chart is rendered, any of the nodes can be clicked and dragged.

Summary

The dragging module is a great and simple way to allow your user to click and drag the nodes on the chart.

Don't forget, a comprehensive list of available attributes and objects can be found on our JSON Syntax page.