Visually Editable Charts

Editable charts are a special set of charts that allow you to visually manipulate the data on the chart and then submit it back to the server. They are very useful in planning and estimation scenarios, where users can visually set expected targets or baseline performance from existing data points without having to go back to the spreadsheet at all.


Change the data in the chart as required and click the button to see the modified data

In this example, we are comparing the revenues from three different divisions of a company - products, services and consulting for the year 2012-2016. The data for 2012 & 2013 represents actual sales for the period and hence cannot be adjusted. However, the data for 2014, 2015 & 2016 shown using dashed lines can be dragged and adjusted. You can also adjust the axis upper and lower limits using the context menu or by clicking on them.

After editing the data, you can submit it:

  • Back to server as form data (like HTML Forms)
  • Or to JavaScript functions present on the same page for further processing

There are 3 types of editable charts (drag-able charts) that you can use:

  • Drag-able Column 2D Chart
  • Drag-able Line 2D Chart
  • Drag-able Area 2D Chart