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:
- You must first point the
MODULESdirectory 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'
});
});
- 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.