Drag-able Charts > Overview

The drag-able charts are a special set of charts that allow you to visually manipulate the data on the chart and then submit it back. These charts can be intensively used for simulations, financial planning etc. Currently, there are three drag-able charts available:

  1. Drag-able Column 2D Chart
  2. Drag-able Line 2D Chart
  3. Drag-able Area 2D Chart

The chart derive their basic features from FusionCharts v3 Multi-Series Column, Multi-Series Line and Multi-series area charts respectively. But, in these charts, you can visually morph the data to update the figures on the chart.

Once you're done with the visual updation of data, you can submit the data:

  1. Either back to server as form (like HTML Forms) data.
  2. Or to JavaScript functions present on the same page as chart. These JavaScript functions can then process the data and do the needful.

Shown below is a simple "Revenue/Profit Simulation" drag-column 2D Chart:

As you can see above (see the Profit Column of Quarter 3), the user can visually drag the columns to accept new values.

You can opt to make all the columns drag-able or just a select few as shown in the chart below. In the chart below, the first two sets of columns are actual values and hence have been made non-drag-able. The rest of the columns are predictive values, which can be dragged and adjusted. Hence, they've been displayed as dashed columns.

 
Shown below is a column from "Revenue/Profit Simulation Chart" being dragged. In this image, the revenue column of second quarter is being adjusted to assume a higher value.

In this image, we're extending a already-positive column to another positive value itself. If you do not want this positive column to be able to extend to a negative zone, the drag charts provide you with an option to set which positive columns can extend into negative zone. For example, in the above chart, none of the Revenue columns can go into negative zone, as revenue cannot be negative. The profit columns, though, can extend to negative zone.

 
The chart, by default, calculates y-axis upper and lower limits based on the data provided to it. If you want any column to assume a value not covered within this axis range, you can increase or decrease the limits using the context menu. Shown below is an example where we're trying to increase the chart upper limit by selecting "Increase Upper Limit" item from the context menu.
 
Once selected, you'll see that the chart has increased its upper limit from $4.4 Million to $5.5 Million. Your columns can now assume upper limit values upto $5.5 Million.
 
Similarly, you can decrease the lower limit values.
 
Lower limit value decreased from $-1.1M to $-2.2M.
 
If you want to set manual values for the limits, you can just click on the limits and edit them directly.
 
Similarly, you can edit upper limit directly.
 
If you enter a limit value which cannot be accepted by the chart, it will show an intuitive error message.
 

For ease of dragging and data setting, the drag charts offer three snapping options for the columns/anchors:

  • Snap to Div - This option generates a kind of stickiness during dragging. That is, when the users now drag and leave their columns near any divisional lines on the chart, the columns will stick to them and attain their values. You can control this stickiness factor in pixels.
  • Snap to Div Only - Using this option, the columns will always stick to one of the divisonal lines on the chart. It cannot be adjusted to a value between any two divisional lines. It will stick to a divisional line when released, whichever is closer to it.
  • Do not Snap - If you do not want the columns to snap to any divisional lines, this option can be selected.